<?php function readData($name){ $file = __DIR__.'/datastore/'.$name.'.json'; if(file_exists($file)){ try { return json_decode(file_get_contents($file), true); } catch (\Error $e) { } } return []; } if (!function_exists('str_contains')) { function str_contains (string $haystack, string $needle) { return empty($needle) || strpos($haystack, $needle) !== false; } } if(isset($_GET['date']) && $_GET['date'] != ''){ $date = $_GET['date']; } else { $date = date('d.m.Y'); } ?> <!DOCTYPE html> <html lang="fi"> <head> <title>Insomnia XXII - Extra</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> * { box-sizing: border-box; } @font-face { font-family: "Roboto Medium"; src: url('./assets/fonts/Roboto-Medium.ttf'); } @font-face { font-family: "Bebas Neue Regular"; src: url('./assets/fonts/BebasNeue-Regular.ttf'); } @font-face { font-family: "Orbitron Black"; src: url('./assets/fonts/Orbitron-Black.otf'); } body { background-image: linear-gradient(to bottom, #040200, #380672); margin: 0; display: flex; flex-direction: column; } header, nav, main, section, article, footer { display: flex; align-items: center; justify-content: center; padding-top: 5vh; flex-direction: column; width: 100%; text-align: center; } main { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr; align-items: flex-start; } section { width: 100%; } section:first-child(){ padding-top: 0; } main header { padding: 0; } *, *:active, *:focus, *:hover, *:visited, *:link { color: #ffffff; font-family: "Roboto Medium", sans-serif; text-decoration: none; } h1 { display: none; } h2, h2:active, h2:focus, h2:hover, h2:visited, h2:link { font-family: "Orbitron Black", sans-serif; font-size: 2.5em; text-align: center; } .logo { max-width: 75vw; } nav ul, main section ul { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; } nav ul li:first-child, main section ul li:first-child { margin-left: 0vmin; } nav ul li, main section ul li { margin-left: 5vmin; } main section ul li a { display: flex; align-items: center; } main section ul li a span { margin-left: 1vmin; font-size: 2em; } section#schedule article, section#tournaments article { padding: 2.5vh; } section#schedule article:hover, section#tournaments article:hover { background-color: #ffffff11; } section#schedule article h3, section#tournaments article h3 { font-size: 1.5em; margin-bottom: 0; } section#schedule article .area { margin-top: 0; } section#schedule article .time, section#tournaments article .time { font-size: 1.5em; } section#schedule article a, section#tournaments article a { font-size: 1.25em; } .top { font-size: 1.5em; margin-top: 5vmin; } nav ul li a, nav ul li a:active, nav ul li a:focus, nav ul li a:hover, nav ul li a:visited, nav ul li a:link { font-family: "Bebas Neue Regular", sans-serif; font-size: 3em; } ul { list-style-type: none; padding: 0; } footer { font-size: 1.5em; text-align: center; } .wg-logo { background-image: url(https://cdn.waren.io/logos/warengroup/logo-light.svg); background-repeat: no-repeat; background-position: center; background-size: contain; color: transparent; } .area[x-extra-area="Insomnia XXII"] { color: #fff } @media (orientation: portrait) { nav ul { flex-direction: column; } nav ul li { margin-left: 0vmin; } main { display: flex; align-items: center; } section#info ul { flex-direction: column; } section#info ul li { margin-top: 5vmin; } section#info ul li:first-child() { margin-top: 0vmin; } } </style> <!-- Link: Preconnect & DNS Prefetch & Preload --> <link rel="preconnect" href="//cdn.waren.io"> <link rel="dns-prefetch" href="//cdn.waren.io"> <link rel="preload" as="font" type="font/woff2" href="https://cdn.waren.io/frameworks/font-awesome/6.6.0/webfonts/fa-solid-900.woff2" crossorigin="anonymous"> <link rel="preload" as="style" href="https://cdn.waren.io/frameworks/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous"> <!-- CSS --> <link rel="stylesheet" type="text/css" href="https://cdn.waren.io/frameworks/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous" media="screen, print"> </head> <body> <header id="header"> <h1>Insomnia XXII</h1> <img class="logo" title="Insomnia XXII" alt="Insomnia XXII" src="./assets/images/logo.svg"> </header> <nav id="menu"> <ul> <li><a href="#schedule"><i class="fa-regular fa-clock"></i> Aikataulu</a></li> <!--<li><a href="#map"><i class="fa-solid fa-map"></i> Kartta</a></li>--> <!--<li><a href="#streams"><i class="fa-solid fa-circle-play"></i> Striimit</a></li>--> <li><a href="#tournaments"><i class="fa-solid fa-trophy"></i> Turnaukset</a></li> <li><a href="#info"><i class="fa-solid fa-circle-info"></i> Info</a></li> </ul> </nav> <main id="content"> <section id="schedule"> <header> <h2><i class="fa-regular fa-clock fa-2x"></i> Aikataulu</h2> </header> <?php $schedule = readData("schedule"); foreach($schedule as $program){ $time = http_build_query($program['time'],'',', '); if(str_contains($time, $date) || $_GET['all'] == '1'){ echo ' <article> <header> <h3>'.$program['title'].(isset($program['partner']['name']) && $program['partner']['name'] != '' && $program['title'] != $program['partner']['name'] ? ' by '.$program['partner']['name'] : "").'</h3> <p class="area" x-extra-area="'.$program['area'].'">'.$program['area'].'</p> <p> '; foreach($program['time'] as $startTime => $endTime){ $startTime = explode(" ", $startTime); $endTime = explode(" ", $endTime); if($startTime[0] == $date || $endTime[0] == $date || $_GET['all'] == '1'){ if($startTime[0] != $endTime[0]){ echo implode(" ", $startTime).' - '.implode(" ", $endTime).'<br>'; } else { if(isset($startTime[2]) && isset($endTime[2])){ if($_GET['all'] == '1'){ echo $startTime[0].' klo '.$startTime[2].' - '.$endTime[2].'<br>'; } else { echo '<span class="time">'.$startTime[2].' - '.$endTime[2].'</span>'.'<br>'; } } else { echo $startTime[0].'<br>'; } } } } echo ' </p> </header> </article> '; } } ?> <a href="./?all=1#schedule" class="show-all"><i class="fa-solid fa-list-check"></i> Näytä kaikki</a> <p class="disclamer"><i class="fa-solid fa-triangle-exclamation"></i> Varaamme oikeudet muutoksiin</p> <a href="#header" class="top"><i class="fa-solid fa-caret-up"></i> Siirry ylös</a> </section> <!--<section id="map"> <header> <h2><i class="fa-solid fa-map fa-2x"></i> Kartta</h2> </header> <a href="#header" class="top"><i class="fa-solid fa-caret-up"></i> Siirry ylös</a> </section>--> <!--<section id="streams"> <header> <h2><i class="fa-solid fa-circle-play fa-2x"></i> Striimit</h2> </header> <ul> <li><a href="https://www.youtube.com/channel/UC2qYgQZALCwIM5G0mNMm5xg"><i class="fa-brands fa-youtube fa-5x"></i></a></li> <li><a href="https://twitch.tv/insomniafi"><i class="fa-brands fa-twitch fa-5x"></i></a> </li> </ul> <a href="#header" class="top"><i class="fa-solid fa-caret-up"></i> Siirry ylös</a> </section>--> <section id="tournaments"> <header> <h2><i class="fa-solid fa-trophy fa-2x"></i> Turnaukset</h2> </header> <?php $tournaments = readData("tournaments"); foreach($tournaments as $tournament){ $time = http_build_query($tournament['time'],'',', '); if(str_contains($time, $date) || $_GET['all'] == '1'){ echo ' <article> <header> <h3>'.$tournament['title'].(isset($tournament['partner']['name']) && $tournament['partner']['name'] != '' ? ' by '.$tournament['partner']['name'] : "").'</h3> <p> '; foreach($tournament['time'] as $startTime => $endTime){ $startTime = explode(" ", $startTime); $endTime = explode(" ", $endTime); if($startTime[0] == $date || $endTime[0] == $date || $_GET['all'] == '1'){ if($startTime[0] != $endTime[0]){ echo implode(" ", $startTime).' - '.implode(" ", $endTime).'<br>'; } else { if(isset($startTime[2]) && isset($endTime[2])){ if($_GET['all'] == '1'){ echo $startTime[0].' klo '.$startTime[2].' - '.$endTime[2].'<br>'; } else { echo '<span class="time">'.$startTime[2].' - '.$endTime[2].'</span>'.'<br>'; } } else { echo $startTime[0].'<br>'; } } } } echo ' </p> </header> <a href="'.$tournament['link'].'"><i class="fa-solid fa-circle-info"></i> Lisätietoa turnauksesta</a> </article> '; } } ?> <a href="./?all=1#tournaments" class="show-all"><i class="fa-solid fa-list-check"></i> Näytä kaikki</a> <p class="disclamer"><i class="fa-solid fa-triangle-exclamation"></i> Varaamme oikeudet muutoksiin</p> <a href="#header" class="top"><i class="fa-solid fa-caret-up"></i> Siirry ylös</a> </section> <section id="info"> <header> <h2><i class="fa-solid fa-circle-info fa-2x"></i> Info</h2> </header> <ul> <li><a href="https://discord.gg/4fy7uprb85"><i class="fa-brands fa-discord fa-3x"></i> <span>#apua</span></a></li> <li><a href="mailto:infoxxii@insomnia.fi"><i class="fa-solid fa-at fa-3x"></i> <span>infoxxii@insomnia.fi</span></a></li> <!--<li style="<?php if(date('H') >= 1 && date('H') <= 8){ echo "opacity: 50%;"; print_r(date('H'));} ?>"><a href="tel:+358931574170"><i class="fa-solid fa-phone fa-3x"></i> <span title="+358 9 31574170 (9:00 - 1:00)">+358 9 31574170</span></a></li>--> </ul> <a href="#header" class="top"><i class="fa-solid fa-caret-up"></i> Siirry ylös</a> </section> <section id="socials"> <header> <h2>Seuraa meitä somessa</h2> </header> <ul> <li><a href="https://instagram.com/insomnia.fi"><i class="fa-brands fa-instagram fa-5x"></i></a></li> <li><a href="https://tiktok.com/@insomniafi"><i class="fa-brands fa-tiktok fa-5x"></i></a></li> <li><a href="https://twitter.com/insomnia.fi"><i class="fa-brands fa-twitter fa-5x"></i></a></li> </ul> <a href="#header" class="top"><i class="fa-solid fa-caret-up"></i> Siirry ylös</a> </section> </main> <footer id="footer"> <p class="powered-by"> Sivun on toteuttanut<br> <a href="https://waren.io" class="wg-logo">Warén Group</a> </p> </footer> </body> </html>