Skip to content

Instantly share code, notes, and snippets.

@ccaglayan

ccaglayan/generator.php

Created April 9, 2013 00:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ccaglayan/5341920 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ccaglayan/5341920 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
generator.php
<?php
$deg = 63;
$reduce = -4;
$space = 10;
$height = 30;
for( $x = 1; $x <= 32; $x++ ) {
printf( "#countries li:nth-child(%d) { -webkit-transform: rotate(%ddeg); }\r\n", $x, $deg);
$deg += $reduce;
}
$deg -= $space;
for( $x = 1; $x <= 13; $x++ ) {
printf( "#stages li:nth-child(%d) { -webkit-transform: rotate(%ddeg); }\r\n", $x, $deg);
$deg += $reduce;
}
$deg -= $space;
for( $x = 1; $x <= 10; $x++ ) {
printf( "#locations li:nth-child(%d) { -webkit-transform: rotate(%ddeg); }\r\n", $x, $deg);
$deg += $reduce;
}
$deg -= $space;
for( $x = 25; $x >= 1; $x-- ) {
printf( "#days li:nth-child(%d) { -webkit-transform: rotate(%ddeg); }\r\n", $x, $deg);
$deg += $reduce;
}
Raw
wm-schedule.html
<DOCTYPE html>
<style type="text/css" media="screen">
{ margin: 0; padding: 0; }
ol, ul { list-style: none; }
#locations li, #days li, #stages li, #countries li { width: 100px; position: absolute; left: 25%; top: 400px; height: 25px;
background: rgb(224,223,186); line-height: 25px; font-size: 9px; padding-right: 10px; text-align: right; }
#countries li { font-size: 12px; }
#stages li { font-size: 12px; }
#locations li { line-height: 12px; }
#locations .stadium { display: block; }
#locations .city { text-transform: uppercase; }
#days .day { font-weight: bold; font-size: 1.5em; }
li { -webkit-transform-origin: 400px 12;}
#countries li:nth-child(1) { -webkit-transform: rotate(63deg); }
#countries li:nth-child(2) { -webkit-transform: rotate(59deg); }
#countries li:nth-child(3) { -webkit-transform: rotate(55deg); }
#countries li:nth-child(4) { -webkit-transform: rotate(51deg); }
#countries li:nth-child(5) { -webkit-transform: rotate(47deg); }
#countries li:nth-child(6) { -webkit-transform: rotate(43deg); }
#countries li:nth-child(7) { -webkit-transform: rotate(39deg); }
#countries li:nth-child(8) { -webkit-transform: rotate(35deg); }
#countries li:nth-child(9) { -webkit-transform: rotate(31deg); }
#countries li:nth-child(10) { -webkit-transform: rotate(27deg); }
#countries li:nth-child(11) { -webkit-transform: rotate(23deg); }
#countries li:nth-child(12) { -webkit-transform: rotate(19deg); }
#countries li:nth-child(13) { -webkit-transform: rotate(15deg); }
#countries li:nth-child(14) { -webkit-transform: rotate(11deg); }
#countries li:nth-child(15) { -webkit-transform: rotate(7deg); }
#countries li:nth-child(16) { -webkit-transform: rotate(3deg); }
#countries li:nth-child(17) { -webkit-transform: rotate(-1deg); }
#countries li:nth-child(18) { -webkit-transform: rotate(-5deg); }
#countries li:nth-child(19) { -webkit-transform: rotate(-9deg); }
#countries li:nth-child(20) { -webkit-transform: rotate(-13deg); }
#countries li:nth-child(21) { -webkit-transform: rotate(-17deg); }
#countries li:nth-child(22) { -webkit-transform: rotate(-21deg); }
#countries li:nth-child(23) { -webkit-transform: rotate(-25deg); }
#countries li:nth-child(24) { -webkit-transform: rotate(-29deg); }
#countries li:nth-child(25) { -webkit-transform: rotate(-33deg); }
#countries li:nth-child(26) { -webkit-transform: rotate(-37deg); }
#countries li:nth-child(27) { -webkit-transform: rotate(-41deg); }
#countries li:nth-child(28) { -webkit-transform: rotate(-45deg); }
#countries li:nth-child(29) { -webkit-transform: rotate(-49deg); }
#countries li:nth-child(30) { -webkit-transform: rotate(-53deg); }
#countries li:nth-child(31) { -webkit-transform: rotate(-57deg); }
#countries li:nth-child(32) { -webkit-transform: rotate(-61deg); }
#stages li:nth-child(1) { -webkit-transform: rotate(-75deg); }
#stages li:nth-child(2) { -webkit-transform: rotate(-79deg); }
#stages li:nth-child(3) { -webkit-transform: rotate(-83deg); }
#stages li:nth-child(4) { -webkit-transform: rotate(-87deg); }
#stages li:nth-child(5) { -webkit-transform: rotate(-91deg); }
#stages li:nth-child(6) { -webkit-transform: rotate(-95deg); }
#stages li:nth-child(7) { -webkit-transform: rotate(-99deg); }
#stages li:nth-child(8) { -webkit-transform: rotate(-103deg); }
#stages li:nth-child(9) { -webkit-transform: rotate(-107deg); }
#stages li:nth-child(10) { -webkit-transform: rotate(-111deg); }
#stages li:nth-child(11) { -webkit-transform: rotate(-115deg); }
#stages li:nth-child(12) { -webkit-transform: rotate(-119deg); }
#stages li:nth-child(13) { -webkit-transform: rotate(-123deg); }
#locations li:nth-child(1) { -webkit-transform: rotate(-137deg); }
#locations li:nth-child(2) { -webkit-transform: rotate(-141deg); }
#locations li:nth-child(3) { -webkit-transform: rotate(-145deg); }
#locations li:nth-child(4) { -webkit-transform: rotate(-149deg); }
#locations li:nth-child(5) { -webkit-transform: rotate(-153deg); }
#locations li:nth-child(6) { -webkit-transform: rotate(-157deg); }
#locations li:nth-child(7) { -webkit-transform: rotate(-161deg); }
#locations li:nth-child(8) { -webkit-transform: rotate(-165deg); }
#locations li:nth-child(9) { -webkit-transform: rotate(-169deg); }
#locations li:nth-child(10) { -webkit-transform: rotate(-173deg); }
#days li:nth-child(25) { -webkit-transform: rotate(-187deg); }
#days li:nth-child(24) { -webkit-transform: rotate(-191deg); }
#days li:nth-child(23) { -webkit-transform: rotate(-195deg); }
#days li:nth-child(22) { -webkit-transform: rotate(-199deg); }
#days li:nth-child(21) { -webkit-transform: rotate(-203deg); }
#days li:nth-child(20) { -webkit-transform: rotate(-207deg); }
#days li:nth-child(19) { -webkit-transform: rotate(-211deg); }
#days li:nth-child(18) { -webkit-transform: rotate(-215deg); }
#days li:nth-child(17) { -webkit-transform: rotate(-219deg); }
#days li:nth-child(16) { -webkit-transform: rotate(-223deg); }
#days li:nth-child(15) { -webkit-transform: rotate(-227deg); }
#days li:nth-child(14) { -webkit-transform: rotate(-231deg); }
#days li:nth-child(13) { -webkit-transform: rotate(-235deg); }
#days li:nth-child(12) { -webkit-transform: rotate(-239deg); }
#days li:nth-child(11) { -webkit-transform: rotate(-243deg); }
#days li:nth-child(10) { -webkit-transform: rotate(-247deg); }
#days li:nth-child(9) { -webkit-transform: rotate(-251deg); }
#days li:nth-child(8) { -webkit-transform: rotate(-255deg); }
#days li:nth-child(7) { -webkit-transform: rotate(-259deg); }
#days li:nth-child(6) { -webkit-transform: rotate(-263deg); }
#days li:nth-child(5) { -webkit-transform: rotate(-267deg); }
#days li:nth-child(4) { -webkit-transform: rotate(-271deg); }
#days li:nth-child(3) { -webkit-transform: rotate(-275deg); }
#days li:nth-child(2) { -webkit-transform: rotate(-279deg); }
#days li:nth-child(1) { -webkit-transform: rotate(-283deg); }
#days li:nth-child(25) { font-weight: bold; -webkit-text-transform: upside-down; }
</style>
<ol id="countries">
<li class="group-c" id="algeria">Algeria</li>
<li class="group-b" id="argentina">Argentina</li>
<li class="group-d" id="australia">Australia</li>
<li class="group-g" id="brazil">Brazil</li>
<li class="group-e" id="cameroon">Cameroon</li>
<li class="group-h" id="chile">Chile</li>
<li class="group-g" id="cote-d-ivoire">Côte d'Ivoire</li>
<li class="group-e" id="denmark">Denmark</li>
<li class="group-c" id="england">England</li>
<li class="group-a" id="france">France</li>
<li class="group-d" id="germany">Germany</li>
<li class="group-d" id="ghana">Ghana</li>
<li class="group-b" id="greece">Greece</li>
<li class="group-a" id="honduras">Honduras</li>
<li class="group-f" id="italy">Italy</li>
<li class="group-e" id="japan">Japan</li>
<li class="group-g" id="korea-dpr">Korea DPR</li>
<li class="group-b" id="korea-republic">Korea Republic</li>
<li class="group-a" id="mexico">Mexico</li>
<li class="group-e" id="netherlands">Netherlands</li>
<li class="group-f" id="new-zealand">New Zealand</li>
<li class="group-b" id="nigeria">Nigeria</li>
<li class="group-f" id="paraguay">Paraguay</li>
<li class="group-g" id="portugal">Portugal</li>
<li class="group-d" id="serbia">Serbia</li>
<li class="group-f" id="slovakia">Slovakia</li>
<li class="group-c" id="slovenia">Slovenia</li>
<li class="group-a" id="south-africa">South Africa</li>
<li class="group-h" id="spain">Spain</li>
<li class="group-h" id="switzerland">Switzerland</li>
<li class="group-a" id="uruguay">Uruguay</li>
<li class="group-c" id="usa">USA</li>
</ol>
<ol id="stages">
<li id="group-a">Group A</li>
<li id="group-b">Group B</li>
<li id="group-c">Group C</li>
<li id="group-d">Group D</li>
<li id="group-e">Group E</li>
<li id="group-f">Group F</li>
<li id="group-g">Group G</li>
<li id="group-h">Group H</li>
<li id="round-of-16">Round of 16</li>
<li id="quarters">Quarters</li>
<li id="semifinals">Semifinals</li>
<li id="3nd-4rd-place">3° / 4° Place</li>
<li id="final">Final</li>
</ol>
<ol id="locations">
<li id="green-point-stadium"><span class="city">Cape Town</span> <span class="stadium">Green Point</span></li>
<li id="durban-stadium"><span class="city">Durban</span> <span class="stadium">Durban</span></li>
<li id="ellis-park-stadium"><span class="city">Johannesburg</span> <span class="stadium">Ellis Park</span></li>
<li id="soccer-city-stadium"><span class="city">Johannesburg</span> <span class="stadium">Soccer City</span></li>
<li id="free-state-stadium"><span class="city">Mangaung/Bloemfontein</span> <span class="stadium">Free State</span></li>
<li id="nelson-mandela-bay-stadium"><span class="city">Nelson Mandela Bay/Port Elizabeth</span> <span class="stadium">Nelson Mandela Bay</span></li>
<li id="mbombela-stadium"><span class="city">Nelspruit</span> <span class="stadium">Mbombela</span></li>
<li id="peter-mokaba-stadium"><span class="city">Polokwane</span> <span class="stadium">Peter Mokaba</span></li>
<li id="royal-bafokeng-stadium"><span class="city">Rustenburg</span> <span class="stadium">Royal Bafokeng</span></li>
<li id="loftus-versfeld-stadium"><span class="city">Tshwane/Pretoria</span> <span class="stadium">Loftus Versfeld</span></li>
</ol>
<ol id="days">
<li><span class="weekday">Friday</span>, <span class="day">11</span> <span class="month">June</span></li>
<li><span class="weekday">Saturday</span>, <span class="day">12</span> <span class="month">June</span></li>
<li><span class="weekday">Sunday</span>, <span class="day">13</span> <span class="month">June</span></li>
<li><span class="weekday">Monday</span>, <span class="day">14</span> <span class="month">June</span></li>
<li><span class="weekday">Tuesday</span>, <span class="day">15</span> <span class="month">June</span></li>
<li><span class="weekday">Wednesday</span>, <span class="day">16</span> <span class="month">June</span></li>
<li><span class="weekday">Thursday</span>, <span class="day">17</span> <span class="month">June</span></li>
<li><span class="weekday">Friday</span>, <span class="day">18</span> <span class="month">June</span></li>
<li><span class="weekday">Saturday</span>, <span class="day">19</span> <span class="month">June</span></li>
<li><span class="weekday">Sunday</span>, <span class="day">20</span> <span class="month">June</span></li>
<li><span class="weekday">Monday</span>, <span class="day">21</span> <span class="month">June</span></li>
<li><span class="weekday">Tuesday</span>, <span class="day">22</span> <span class="month">June</span></li>
<li><span class="weekday">Wednesday</span>, <span class="day">23</span> <span class="month">June</span></li>
<li><span class="weekday">Thursday</span>, <span class="day">24</span> <span class="month">June</span></li>
<li><span class="weekday">Friday</span>, <span class="day">25</span> <span class="month">June</span></li>
<li><span class="weekday">Saturday</span>, <span class="day">26</span> <span class="month">June</span></li>
<li><span class="weekday">Sunday</span>, <span class="day">27</span> <span class="month">June</span></li>
<li><span class="weekday">Monday</span>, <span class="day">28</span> <span class="month">June</span></li>
<li><span class="weekday">Tuesday</span>, <span class="day">29</span> <span class="month">June</span></li>
<li><span class="weekday">Friday</span>, <span class="day">2</span> <span class="month">July</span></li>
<li><span class="weekday">Saturday</span>, <span class="day">3</span> <span class="month">July</span></li>
<li><span class="weekday">Tuesday</span>, <span class="day">6</span> <span class="month">July</span></li>
<li><span class="weekday">Wednesday</span>, <span class="day">7</span> <span class="month">July</span></li>
<li><span class="weekday">Saturday</span>, <span class="day">10</span> <span class="month">July</span></li>
<li><span class="weekday">Sunday</span>, <span class="day">11</span> <span class="month">July</span></li>
</ol>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment