219 lines
7.6 KiB
HTML
219 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html lang="en" prefix="og: http://ogp.me/ns#">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- CLEAN MARKUP = GOOD KARMA.
|
|
Hi source code lover,
|
|
|
|
you're a curious person and a fast learner ;)
|
|
Let's make something beautiful together. Contribute on Github:
|
|
https://github.com/webslides/webslides
|
|
|
|
Thanks,
|
|
@jlantunez.
|
|
-->
|
|
|
|
<!-- SEO -->
|
|
<title>Game Show</title>
|
|
<meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features.">
|
|
|
|
<!-- URL CANONICAL -->
|
|
<!-- <link rel="canonical" href="http://your-url.com/"> -->
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
|
|
|
<!-- CSS WebSlides -->
|
|
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
|
|
|
|
<!-- CSS Own -->
|
|
<link rel="stylesheet" type='text/css' media='all' href="static/css/main.css">
|
|
|
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
|
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
|
|
|
|
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
|
|
|
<!-- FACEBOOK -->
|
|
<meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
|
|
<meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT -->
|
|
<meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT -->
|
|
<meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
|
|
|
|
<!-- TWITTER -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
|
|
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
|
|
<meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
|
|
<meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT -->
|
|
<meta name="twitter:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
|
|
|
|
<!-- FAVICONS -->
|
|
<link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
|
|
<link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">
|
|
<link rel="apple-touch-icon icon" sizes="76x76" href="static/images/favicons/favicon-76.png">
|
|
<link rel="apple-touch-icon icon" sizes="120x120" href="static/images/favicons/favicon-120.png">
|
|
<link rel="apple-touch-icon icon" sizes="152x152" href="static/images/favicons/favicon-152.png">
|
|
<link rel="apple-touch-icon icon" sizes="180x180" href="static/images/favicons/favicon-180.png">
|
|
<link rel="apple-touch-icon icon" sizes="192x192" href="static/images/favicons/favicon-192.png">
|
|
|
|
<!-- Android -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#333333">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="bgCanvas"></canvas>
|
|
<main role="main">
|
|
<article id="webslides">
|
|
<!-- Quick Guide
|
|
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
|
- Vertical sliding = <article id="webslides" class="vertical">
|
|
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
|
-->
|
|
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<h1><strong>Game Show</strong></h1>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<h1>WLAN name: <strong>Gameshow Hotspot</strong></h1>
|
|
<h1>WLAN passwort: <strong>gameshow</strong></h1>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<div class="content-left">
|
|
<h1><strong>Verlauf des Abends</strong></h1>
|
|
</div>
|
|
<div class="content-right">
|
|
<ul class="flexblock specs">
|
|
<li>
|
|
<div>
|
|
<span style="font-size: 6.4rem;">💪</span>
|
|
<h1>Spiele Gewinnen</h1>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<span style="font-size: 6.4rem;">💰</span>
|
|
<h1>Punkte Kassieren</h1>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<span style="font-size: 6.4rem;">🏆</span>
|
|
<h1>Profit!</h1>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<h1><strong>Spiel 1</strong></h1>
|
|
<h2>Allgemein Wissen</h2>
|
|
<h5>Multiple Choice</h5>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<div class="multiplechoise">
|
|
<h1 class="frage"><strong></strong></h1>
|
|
<p>
|
|
<a href="#" class="button ghost answer A" title="Button"></a>
|
|
<a href="#" class="button ghost answer B" title="Button"></a>
|
|
</p>
|
|
<p>
|
|
<a href="#" class="button ghost answer C" title="Button"></a>
|
|
<a href="#" class="button ghost answer D" title="Button"></a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<h1><strong>Spiel 2</strong></h1>
|
|
<h2>Song Quiz</h2>
|
|
<h5>Buzzern</h5>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<div class="buzzer">
|
|
<h1 class="frage"><strong></strong></h1>
|
|
<h3 class="team"></h3>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<h1><strong>Spiel 3</strong></h1>
|
|
<h2>Duden</h2>
|
|
<h5>Text</h5>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<h1 class="frage"><strong></strong></h1>
|
|
<div class="text">
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
</article>
|
|
<!-- end article -->
|
|
</main>
|
|
<!-- end main -->
|
|
|
|
<!-- A global footer -->
|
|
|
|
<footer role="contentinfo">
|
|
<div class="wrap" id="players">
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Required -->
|
|
<script src="static/js/jquery-3.4.1.min.js"></script>
|
|
<script src="static/js/socket.io.js" charset="utf-8"></script>
|
|
<script src="static/js/socketlogic.js" charset="utf-8"></script>
|
|
<script src="static/js/webslides.js"></script>
|
|
<script src="static/js/ui.js"></script>
|
|
<script src="static/js/main.js"></script>
|
|
<script>
|
|
window.ws = new WebSlides();
|
|
</script>
|
|
|
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
|
<script defer src="static/js/svg-icons.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|