Skip to content

Instantly share code, notes, and snippets.

@brunobord

brunobord/style.css

Created March 3, 2014 22:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brunobord/9336109 to your computer and use it in GitHub Desktop.
Save brunobord/9336109 to your computer and use it in GitHub Desktop.
Download ZIP
Thud
Raw
style.css
table {
margin: auto;
border: none;
}
td {
width: 40px;
height: 40px;
}
td.full {
border: 1px solid #222;
}
td.grey {
background-color: #888;
}
td.black {
background-color: #000;
}
Raw
thud.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body><table>
<tr><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td></tr>
<tr><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td></tr>
<tr><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td></tr>
<tr><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full black"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td></tr>
<tr><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td></tr>
<tr><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td></tr>
<tr><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td></tr>
<tr><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="full white"></td><td class="full grey"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td><td class="empty"></td></tr>
</table></body></html>
Raw
thud.py
#!/usr/bin/env python
#-*- coding: utf-8 -*-
from itertools import cycle
class Line(object):
def __init__(self, nb, first='grey', second="white", center=False):
self.empty = (15 - nb) / 2
self.nb = nb
self.cycle = cycle([first, second])
self.center = center
def __repr__(self):
return unicode([self.empty, self.nb, self.empty])
def html(self):
cells = []
for cell in range(self.empty):
cells.append('<td class="empty"></td>')
# reset
for cell in range(self.nb):
color = self.cycle.next()
if self.center and cell == 7:
color = 'black'
cells.append('<td class="full %s"></td>' % color)
for cell in range(self.empty):
cells.append('<td class="empty"></td>')
return ''.join(cells)
nb = 5
lines = []
for line in range(5):
lines.append(Line(nb))
nb += 2
iter_lines = cycle([['grey', 'white'], ['white', 'grey']])
for line in range(5):
colors = iter_lines.next()
center = False
if line == 2:
center = True
lines.append(Line(nb, colors[0], colors[1], center))
for line in range(5):
nb -= 2
lines.append(Line(nb))
with open('thud.html', 'w') as fd:
fd.write('''<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body><table>\n''')
for line in lines:
fd.write('<tr>')
fd.write(line.html())
fd.write('</tr>\n')
fd.write('</table></body></html>')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment