Skip to content

Instantly share code, notes, and snippets.

@ndrew

ndrew/index.html

Created September 2, 2014 01:20
Show Gist options
  • Save ndrew/4a0cfa9b07537a9d9873 to your computer and use it in GitHub Desktop.
Save ndrew/4a0cfa9b07537a9d9873 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body {
font-family: "Andale Mono", Courier;
}
table {
border-collapse: collapse;
}
tr {
}
td {
border: 1px solid rgba(128,128,128, 0.3);
padding: 5px;
min-width: 1em;
height: 1em;
}
td.label {
background-color: rgba(128,128,128,0.111);
text-align: right;
}
td.rtick {
border-right: 2px solid rgba(128,128,128,0.7);
min-width: 0.9em;
}
td.brtick {
border-right: 2px solid black;
min-width: 0.9em;
}
.tooltip {
border-bottom: 1px dotted #333;
position: relative; cursor: pointer; }
.tooltip:hover:after {
content: attr(data-tooltip);
position: absolute;
white-space: nowrap;
background: rgba(0, 0, 0, 0.85);
padding: 3px 7px;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 7px;
margin-top: -3px;
}
</style>
</head>
<body>
<h1>Belzebong</h1>
<table>
<tr>
<td class="label">time:</td>
<td colspan="666">4/4</td>
</tr>
<tr>
<td class="label">tempo:</td>
<td colspan="104" class="brtick">80<sup class="tooltip" data-tooltip="Чи повільніше?">?</sup></td>
<td colspan="100">95</td>
<td colspan="48">80</td>
</tr>
<tr>
<td class="label">#</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="rtick">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td class="brtick">8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
<td>50</td>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
<td>69</td>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
<td>90</td>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
<td>97</td>
<td>98</td>
<td>99</td>
<td>100</td>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
<td>105</td>
<td>106</td>
<td>107</td>
<td>108</td>
<td>109</td>
<td>110</td>
<td>111</td>
<td>112</td>
<td>113</td>
<td>114</td>
<td>115</td>
<td>116</td>
<td>117</td>
<td>118</td>
<td>119</td>
<td>120</td>
<td>121</td>
<td>122</td>
<td>123</td>
<td>124</td>
<td>125</td>
<td>126</td>
<td>127</td>
<td>128</td>
<td>129</td>
<td>130</td>
<td>131</td>
<td>132</td>
<td>133</td>
<td>134</td>
<td>135</td>
<td>136</td>
<td>137</td>
<td>138</td>
<td>139</td>
<td>140</td>
<td>141</td>
<td>142</td>
<td>143</td>
<td>144</td>
<td>145</td>
<td>146</td>
<td>147</td>
<td>148</td>
<td>149</td>
<td>150</td>
<td>151</td>
<td>152</td>
<td>153</td>
<td>154</td>
<td>155</td>
<td>156</td>
<td>157</td>
<td>158</td>
<td>159</td>
<td>160</td>
<td>161</td>
<td>162</td>
<td>163</td>
<td>164</td>
<td>165</td>
<td>166</td>
<td>167</td>
<td>168</td>
<td>169</td>
<td>170</td>
<td>171</td>
<td>172</td>
<td>173</td>
<td>174</td>
<td>175</td>
<td>176</td>
<td>177</td>
<td>178</td>
<td>179</td>
<td>180</td>
<td>181</td>
<td>182</td>
<td>183</td>
<td>184</td>
<td>185</td>
<td>186</td>
<td>187</td>
<td>188</td>
<td>189</td>
<td>190</td>
<td>191</td>
<td>192</td>
<td>193</td>
<td>194</td>
<td>195</td>
<td>196</td>
<td>197</td>
<td>198</td>
<td>199</td>
<td>200</td>
<td>201</td>
<td>202</td>
<td>203</td>
<td>204</td>
<td>205</td>
<td>206</td>
<td>207</td>
<td>208</td>
<td>209</td>
<td>210</td>
<td>211</td>
<td>212</td>
<td>213</td>
<td>214</td>
<td>215</td>
<td>216</td>
<td>217</td>
<td>218</td>
<td>219</td>
<td>220</td>
<td>221</td>
<td>222</td>
<td>223</td>
<td>224</td>
<td>225</td>
<td>226</td>
<td>227</td>
<td>228</td>
<td>229</td>
<td>230</td>
<td>231</td>
<td>232</td>
<td>233</td>
<td>234</td>
<td>235</td>
<td>236</td>
</tr>
<tr>
<td></td>
<td colspan="8">Intro
<sup>(4|x2)</sup></td>
<td colspan="8">Intro riff
<sup>(4|x2)</sup></td>
</tr>
<tr>
<td class="label">Bass</td>
<td colspan="8">Riff 0 (розріджений)</td>
<td colspan="8">Riff 0</td>
<td colspan="16">Riff 0 (slides)</td>
<td colspan="32">до з перебздиньками <sup>4|x8</sup></td>
<td colspan="32">Riff 1(A1+A2) <sup>4|x8</sup></td>
<td colspan="8">Interlude <sup>2|x4</sup></td>
<td colspan="8">Interlude(95)<sup>2|x8</sup></td>
<td colspan="16">Dimun riff <sup>2|x8</sup></td>
<td colspan="4">Хня що ламається<sup>4|x2</sup></td>
<td colspan="16">Dimun riff під сірєни<sup>2|x8</sup></td>
<td colspan="32">Підкладка під соло<sup>2|x8+2|x8</sup></td>
<td colspan="8">Dimun riff <sup>2|x4</sup></td>
<td colspan="16" class="tooltip" data-tooltip="Без останього 2 перед ісусом?">Хня що ламається<sup>4|x2</sup></td>
<td colspan="32">Ісус<sup>до усрачки</sup></td>
</tr>
<tr>
<td class="label">Guitar</td>
<td colspan="8"></td>
<td colspan="8">Riff 0 <sup>4|x2</sup></td>
<td colspan="16">Slides <sup>4|x4</sup></td>
<td colspan="32">Chords <sup>4|x8</sup></td>
<td colspan="32">Riff 1(A1+A2) <sup>4|x8</sup></td>
<td colspan="8">Interlude(80) <sup>2|x4</sup></td>
<td colspan="8">Interlude(95)<sup>2|x8</sup></td>
<td colspan="16">Dimun riff <sup>2|x8</sup></td>
<td colspan="4">Хня що ламається<sup>4|x1</sup></td>
<td colspan="16">Сірєни <sup class="tooltip" data-tooltip="насправді 3 рази, бо спочатку ти береш єбоу">4|x4</sup></td>
<td colspan="32">Соло з флажолєтами<sup>4|x8</sup></td>
<td colspan="8">Dimun riff <sup>2|x4</sup></td>
<td colspan="16">Хня що ламається з чваканням<sup>4|x2</sup></td>
<td colspan="32">Ісус<sup>до усрачки</sup></td>
</tr>
<tr>
<td class="label">Drums</td>
<td colspan="64">Тух та, тух та-та, ... <sup>2|x16</sup>
<td colspan="32">Валєвний тух та, тух та-та, ... <sup>2|x16</sup></td>
<td colspan="8">Спокійний тухта ... <sup>2|x4</sup></td>
<td colspan="8">Бодряка <sup></sup></td>
<td colspan="16">Дімин ріфф<sup></sup></td>
<td colspan="4">Хня що ламається<sup></sup></td>
<td colspan="48">Бодряка <sup></sup></td>
<td colspan="8">Дімин ріфф<sup></sup></td>
<td colspan="16">Хня що ламається (кульмінаційно)<sup></sup></td>
<td colspan="32">Ісус<sup>до усрачки</sup></td>
</tr>
</table>
<script id="jsbin-source-css" type="text/css">body {
font-family: "Andale Mono", Courier;
}
table {
border-collapse: collapse;
}
tr {
}
td {
border: 1px solid rgba(128,128,128, 0.3);
padding: 5px;
min-width: 1em;
height: 1em;
}
td.label {
background-color: rgba(128,128,128,0.111);
text-align: right;
}
td.rtick {
border-right: 2px solid rgba(128,128,128,0.7);
min-width: 0.9em;
}
td.brtick {
border-right: 2px solid black;
min-width: 0.9em;
}
.tooltip {
border-bottom: 1px dotted #333;
position: relative; cursor: pointer; }
.tooltip:hover:after {
content: attr(data-tooltip);
position: absolute;
white-space: nowrap;
background: rgba(0, 0, 0, 0.85);
padding: 3px 7px;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 7px;
margin-top: -3px;
}</script>
</body>
</html>
Raw
jsbin.waseg.css
body {
font-family: "Andale Mono", Courier;
}
table {
border-collapse: collapse;
}
tr {
}
td {
border: 1px solid rgba(128,128,128, 0.3);
padding: 5px;
min-width: 1em;
height: 1em;
}
td.label {
background-color: rgba(128,128,128,0.111);
text-align: right;
}
td.rtick {
border-right: 2px solid rgba(128,128,128,0.7);
min-width: 0.9em;
}
td.brtick {
border-right: 2px solid black;
min-width: 0.9em;
}
.tooltip {
border-bottom: 1px dotted #333;
position: relative; cursor: pointer; }
.tooltip:hover:after {
content: attr(data-tooltip);
position: absolute;
white-space: nowrap;
background: rgba(0, 0, 0, 0.85);
padding: 3px 7px;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 7px;
margin-top: -3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment