|
| 1 | +--- |
| 2 | +layout: page |
| 3 | +styles: |
| 4 | + - /css/main.css |
| 5 | + - /css/ball/2025/main.css |
| 6 | + - "https://unpkg.com/ [email protected]/dist/leaflet.css" |
| 7 | +title: CSS Ball |
| 8 | +favicon: /ball/favicon.ico |
| 9 | +--- |
| 10 | + |
| 11 | +{% assign ball = site.data.ball['2025'] %} |
| 12 | + |
| 13 | +<div class="text-center-div margin-top margin-bottom section-details"> |
| 14 | + <h1 class="title"> |
| 15 | + {{ball.name}} {{ball.year}} |
| 16 | + </h1> |
| 17 | + <h2> |
| 18 | + <span class="avoidwrap">{{ball.location}}</span> • <span class="avoidwrap">{{ball.date}}</span> |
| 19 | + </h2> |
| 20 | + |
| 21 | + <h3 id="count"><br></h3> |
| 22 | + |
| 23 | + {% for link in ball.links %} |
| 24 | + <a href='{{link.url}}' class="button {% if link.url == '' %}empty"{% else %}" href='{{link.url}}' {% endif %}> |
| 25 | + {{link.text}}{% if link.url == '' %} (Coming Soon){% endif %}</a> |
| 26 | + {% endfor %} |
| 27 | +</div> |
| 28 | +<hr class="bleed-bottom"> |
| 29 | +<div class="text-center-div margin-top margin-bottom section-info" id="venue"> |
| 30 | + <h2 class="subtitle mobile-only">The Venue</h2> |
| 31 | + <img class="image" src="/assets/images/ball-25-venue.jpg" alt="Image of the Horton Suite, where the CSS Ball is being held."> |
| 32 | + <div class="description-left text-center-div"> |
| 33 | + <h2 class="subtitle">The Venue</h2> |
| 34 | + <p class="text-block">Macdonald Burlington Hotel<br><br> |
| 35 | + We'll have exclusive access to several rooms and facilities including a dedicated bar area, gorgeous dining room, and of course the dancefloor!<br><br> |
| 36 | + We'll also have a cloakroom available to store coats and bags. |
| 37 | + </p> |
| 38 | + </div> |
| 39 | +</div> |
| 40 | +<hr class="bleed-top"> |
| 41 | +<div class="section-tickets" id="tickets"> |
| 42 | + <div class="icon"> |
| 43 | + <img class="icon" src="/assets/images/ball-2025-ticket-icon.png"/> |
| 44 | + </div> |
| 45 | + <div class="text text-center-div"> |
| 46 | + <h2 class="subtitle">Tickets</h2> |
| 47 | + <p class="text-block">We have several different ticket types, designed to give you the most options possible! <br><br> Ticket prices for members are heavily discounted so be sure to pick up a membership if you haven't already! |
| 48 | + <br> |
| 49 | + <table class="ticket-table"> |
| 50 | + <tr> |
| 51 | + <th><p class="text-block">Ticket Type</p></th> |
| 52 | + <th><p class="text-block">Members' Price</p></th> |
| 53 | + <th><p class="text-block">Non-Members' Price</p></th> |
| 54 | + </tr> |
| 55 | + {% for ticket in ball.tickets %} |
| 56 | + <tr> |
| 57 | + <td><p class="text-block">{{ ticket.type }}</p></td> |
| 58 | + <td><p class="text-block"><span class="highlight">{{ ticket.member-price }}</span></p></td> |
| 59 | + <td><p class="text-block"><span class="highlight">{{ ticket.non-member-price }}</span></p></td> |
| 60 | + </tr> |
| 61 | + {% endfor %} |
| 62 | + |
| 63 | + </table> |
| 64 | + <br> |
| 65 | + <div class="ticket-buttons"> |
| 66 | + <a class="button" href="https://www.guildofstudents.com/events/6531/10315/">Buy Tickets</a> |
| 67 | + <a class="button" href="https://cssbham.com/join">Buy Membership</a> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | +</div> |
| 71 | +<hr> |
| 72 | +<div class="text-center-div margin-bottom section-faq" id="faq"> |
| 73 | + <h2 class="subtitle">FAQs</h2> |
| 74 | + {% for qanda in ball.faq %} |
| 75 | + <div class="faq"> |
| 76 | + <h3 class="subsubtitle question">{{ qanda.question }}</h3> |
| 77 | + <p class="text-block answer">{{ qanda.answer }}</p> |
| 78 | + </div> |
| 79 | + {% endfor %} |
| 80 | +</div> |
| 81 | +<hr> |
| 82 | +<div class="margin-top margin-bottom section-info"> |
| 83 | + <div id="map" style="width: 100%; height: 300px;"></div> |
| 84 | +</div> |
| 85 | +<hr> |
| 86 | + |
| 87 | +<script src=" https://unpkg.com/[email protected]/dist/leaflet.js" ></script> |
| 88 | +<script> |
| 89 | + const pos = [52.47881, -1.89882]; |
| 90 | + |
| 91 | + let L = window.L; |
| 92 | + let map = L.map('map').setView(pos, 17); |
| 93 | + |
| 94 | + L.marker(pos).addTo(map); |
| 95 | + L.tooltip(pos, {content: 'Burlington Hotel', permanent: true, offset: [5, 0]}).addTo(map); |
| 96 | + |
| 97 | + L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| 98 | + maxZoom: 19, |
| 99 | + attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' |
| 100 | + }).addTo(map); |
| 101 | + |
| 102 | + const countDownDate = new Date("Apr 4, 2025 19:00:00").getTime(); |
| 103 | + |
| 104 | + (function updateTimer() { |
| 105 | + let now = new Date().getTime(); |
| 106 | + let distance = countDownDate - now; |
| 107 | + let days = Math.floor(distance / (1000 * 60 * 60 * 24)); |
| 108 | + let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
| 109 | + let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); |
| 110 | + let seconds = Math.floor((distance % (1000 * 60)) / 1000); |
| 111 | + |
| 112 | + document.getElementById("count").innerHTML = days + " <span>days</span> " + hours + " <span>hours</span> " |
| 113 | + + minutes + " <span>minutes</span> " + seconds + " <span>seconds</span>"; |
| 114 | + |
| 115 | + if (distance < 0) { |
| 116 | + document.getElementById("count").innerHTML = "<a href='https://cssbham.com/join'>cssbham.com/join</a>"; |
| 117 | + } else { |
| 118 | + setTimeout(updateTimer, 1000) |
| 119 | + } |
| 120 | + })(); |
| 121 | +</script> |
0 commit comments