Custom greeter page for kraut.world
This commit is contained in:
Ludwig Behm
parent
1c6ec27bca
commit
98172aabc2
48 changed files with 14790 additions and 482 deletions
874
website/dist/index.html
vendored
874
website/dist/index.html
vendored
|
|
@ -1,482 +1,392 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-10196481-11');
|
||||
if (window.location.host.endsWith("localhost")){
|
||||
window['ga-disable-UA-10196481-11'] = true;
|
||||
}
|
||||
</script>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="static/images/favicons/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="static/images/favicons/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="static/images/favicons/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="static/images/favicons/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="static/images/favicons/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicons/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="static/images/favicons/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="static/images/favicons/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="static/images/favicons/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>WorkAdventu.re</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<meta name="title" content="Workadventure" />
|
||||
<meta name="description" content="You are impatient to discover this new world? Click on 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:url" content="https://workadventu.re/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Workadventure" />
|
||||
<meta property="og:description" content="You are impatient to discover this new world? Click on 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||||
<meta property="og:image" content="https://workadventu.re/static/images/meta-tags-image.jpg" />
|
||||
<meta property="og:image:type" content="image/jpeg" />
|
||||
<meta property="og:image:alt" content="workadventure" />
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:site" content="@coding_machine">
|
||||
<meta name="twitter:url" content="https://workadventu.re/" />
|
||||
<meta name="twitter:title" content="Workadventure" />
|
||||
<meta name="twitter:description" content="You are impatient to discover this new world? Click on 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||||
<meta name="twitter:image" content="https://workadventu.re/static/images/meta-tags-image.jpg" />
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script src="bundle.js"></script>
|
||||
<script>
|
||||
function startDemo() {
|
||||
let playUrl = window.location.protocol + "//play."+window.location.host+'/_/global/gparant.github.io/tcm-client/Demo/demo-v1.json';
|
||||
window.open(playUrl, '_blank');
|
||||
}
|
||||
function startGame() {
|
||||
let playUrl = window.location.protocol + "//play."+window.location.host+'/_/global/raw.githubusercontent.com/HackspaceJena/krautspace-rc3-map/main/main.json';
|
||||
window.open(playUrl, '_blank');
|
||||
}
|
||||
function shareFB() {
|
||||
window.open('https://www.facebook.com/sharer/sharer.php?u=https://workadventu.re/', '_blank', 'width=500,height=500');
|
||||
}
|
||||
function shareLI() {
|
||||
window.open('https://www.linkedin.com/shareArticle?mini=true&url=https://workadventu.re/&title=&summary=Your workplace but better!&source=TheCodingMachine', '_blank', 'width=500,height=500');
|
||||
}
|
||||
function shareTW() {
|
||||
window.open('https://twitter.com/share?text=Your workplace but better!&url=https://workadventu.re/&hashtags=thecodingmachine', '_blank', 'width=500,height=500');
|
||||
}
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js" integrity="sha256-MVs0yHYDQBhIRZrNeWB1YaNMrGbFwowIEPIl3um5MZE=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js" integrity="sha256-FEFPM9cOclVyq+lIim2xnU/dAgrALF+g4M8kYm2tbX0=" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="container-lg section">
|
||||
<div class="over-image">
|
||||
<div class="row">
|
||||
<div class="col-10 col-md-6">
|
||||
<div class="logo">
|
||||
<img src="static/images/logo.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 col-md-6">
|
||||
<div class="social-links">
|
||||
<a href="https://www.facebook.com/workadventurebytcm">
|
||||
<img class="social-image" src="static/images/facebook_bw.png" />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/workadventure-by-tcm">
|
||||
<img class="social-image" src="static/images/linkedin_bw.png" />
|
||||
</a>
|
||||
<a href="https://twitter.com/Workadventure_">
|
||||
<img class="social-image" src="static/images/twitter_bw.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title title-main text-center">
|
||||
<h1>Meet your teammates</h1>
|
||||
<h3>
|
||||
WorkAdventure preserves your social interaction while COVID is still out there.
|
||||
</h3>
|
||||
<h3>
|
||||
Stay connected with your teamworkers, by creating your own online workspace to work remotely.
|
||||
</h3>
|
||||
<h3>
|
||||
Stay connected with your clients by providing a dedicated digital place to organize meetings, workshops.
|
||||
</h3>
|
||||
<h3>
|
||||
Engage with your future collaborators by organizing online events.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row buttons-row justify-content-md-center pt-5">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link start" href="/choose-map.html" title="WORK IN PRIVATE">
|
||||
PRIVATE MAPS
|
||||
</a>
|
||||
</div>
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link play" target="_BLANK" onclick="startGame()" title="WORK ONLINE">
|
||||
TRY IT NOW!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="row buttons-row justify-content-md-center pt-5"
|
||||
style="min-height: 80px;">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link start"
|
||||
href="/choose-map.html">
|
||||
CREATE YOUR MAP
|
||||
</a>
|
||||
</div>
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link play" onclick="startDemo()">
|
||||
TUTORIAL
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="min-height: 100px" class="row buttons-row justify-content-md-center pt-5">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link contribute" onclick="startGame()">
|
||||
DEMO
|
||||
</a>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="clouds clouds-2">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
<div class="clouds">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="story-wrapper">
|
||||
<div class="clouds clouds-2">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
<div class="clouds">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
<div class="sky"></div>
|
||||
<div class="mountains"></div>
|
||||
<img src="static/images/story/story-map-bg.png" height="672" class="story-1" />
|
||||
<img src="static/images/story/character-static.png" class="character" id="leymah" />
|
||||
<div class="birds">
|
||||
<img class="bird bird-1" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-2" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-3" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-4" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-5" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-6" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-7" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-8" src="static/images/story/bird.gif" />
|
||||
</div>
|
||||
<div class="bubble bubble-1" style="width: 320px;height: 209px;">
|
||||
<div>
|
||||
<p>WorkAdventure is a video-conference application that lets people hold multiple parallel conversations in a virtual universe. </p>
|
||||
<p>Walk in, out, speak to anyone just like in real-life!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble bubble-thinking" style="width: 269px;height: 211px;">
|
||||
<div class="demo-gif">
|
||||
<img src="static/images/story/WA-Demo.gif" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble bubble-3" style="height: 209px;">
|
||||
<div>
|
||||
<p>Remote work? Friend party? Use WorkAdventure as you prefer.</p>
|
||||
<p>Click the button below to come and say hi!</p>
|
||||
<p class="bubble-action"><span onclick="startDemo()">
|
||||
<img src="static/images/playicon.png" />
|
||||
DEMO!
|
||||
</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble bubble-4 b-revert" style="height: 254px;">
|
||||
<div>
|
||||
<p>You can also create a private room with your friends or your team ! </p>
|
||||
<p class="bubble-legend">To try, press button work in private</p>
|
||||
<p class="bubble-action">
|
||||
<a href="/choose-map.html">
|
||||
<img src="static/images/playicon.png" />
|
||||
CHOOSE YOU OWN MAP
|
||||
</a>
|
||||
<p>
|
||||
Don’t forget to activate your mic and camera, let’s play
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PRELOADING (hidden elements) -->
|
||||
<img src="static/images/story/character-walk-right.gif" style="display:none;" />
|
||||
</section>
|
||||
<script>
|
||||
gsap.to(".title-main", {
|
||||
//y:-1000,
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "header",
|
||||
start: "top top", // the default values
|
||||
// end: "bottom top",
|
||||
scrub: true
|
||||
},
|
||||
});
|
||||
|
||||
gsap.to(".over-image .clouds", {
|
||||
y: 100,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "header",
|
||||
start: "top top", // the default values
|
||||
// end: "bottom top",
|
||||
scrub: true
|
||||
},
|
||||
});
|
||||
|
||||
var maxImageTranslateValue = 3507 - window.innerWidth;
|
||||
var bubbleNumber = document.getElementsByClassName("bubble").length;
|
||||
var charWalkToRightImage = "static/images/story/character-walk-right.gif";
|
||||
var charStaticImage = "static/images/story/character-static.png";
|
||||
|
||||
var storyScrollTrigger = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ".story-wrapper",
|
||||
pin: true, // pin the trigger element while active
|
||||
start: "top top", // when the top of the trigger hits the top of the viewport
|
||||
//end: "+=500", // end after scrolling 500px beyond the start
|
||||
scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
|
||||
}
|
||||
});
|
||||
|
||||
storyScrollTrigger.to(".birds", {
|
||||
x: (-window.innerWidth -200)
|
||||
});
|
||||
storyScrollTrigger.from(".character", {
|
||||
x: -maxImageTranslateValue * (1/bubbleNumber),
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = charWalkToRightImage;
|
||||
},
|
||||
onComplete: function() {
|
||||
document.getElementById("leymah").src = charStaticImage;
|
||||
}
|
||||
})
|
||||
.to(".bubble-1, .bubble-thinking", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".story-1", {
|
||||
x: -maxImageTranslateValue * (2/bubbleNumber),
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = charWalkToRightImage;
|
||||
},
|
||||
onComplete: function() {
|
||||
document.getElementById("leymah").src = charStaticImage;
|
||||
}
|
||||
})
|
||||
.to(".bubble-1, .bubble-thinking", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".bubble-3", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".story-1", {
|
||||
x: -maxImageTranslateValue,
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
|
||||
},
|
||||
onComplete: function() {
|
||||
document.getElementById("leymah").src = "static/images/story/character-static.png";
|
||||
}
|
||||
})
|
||||
.to(".bubble-3", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".bubble-4", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".character, .bubble-4", {
|
||||
x: "53vw",
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
|
||||
},
|
||||
})
|
||||
.to(".bubble-4", {
|
||||
opacity: 0
|
||||
});
|
||||
|
||||
</script>
|
||||
<div class="section bg-white how-to">
|
||||
<div class="desktop-only text-center d-block d-md-none d-lg-none d-xl-none">
|
||||
<img src="static/images/desktop.png" width="64" /><br />
|
||||
Unfortunately, it's not mobile friendly yet. But we are happy to invite you to try it on your desktop. Enjoy!
|
||||
</div>
|
||||
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-12 col-md-12 text-center">
|
||||
<h3>HOW IT WORKS</h3>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
||||
<div class="image-item">
|
||||
<h2>CHOOSE YOUR WORKSPACE</h2>
|
||||
<div class="step-image"><img src="static/images/maps/office.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
||||
<div class="image-item">
|
||||
<h2>SELECT YOUR WOKA</h2>
|
||||
<div class="step-image"><img src="static/images/choose_character.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
||||
<div class="image-item">
|
||||
<h2>LET'S GO TO YOUR OFFICE</h2>
|
||||
<div class="step-image"><img src="static/images/interact.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-lg-9 text-right">
|
||||
<p class="py-3 font-weight-bold" style="font-size: 1.25rem">
|
||||
Want to try WorkAdventure with your team mates or friends?
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<a class="custom-link relative" href="/choose-map.html" title="WORK IN PRIVATE">
|
||||
GET STARTED!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links text-center pt-2 pb-4">
|
||||
<span class="share-title">... and if you liked WorkAdventure, share your experience!</span>
|
||||
<a onclick="shareFB()">
|
||||
<img class="social-image" src="static/images/facebook.png" />
|
||||
</a>
|
||||
<a onclick="shareLI()">
|
||||
<img class="social-image" src="static/images/linkedin.png" />
|
||||
</a>
|
||||
<a onclick="shareTW()">
|
||||
<img class="social-image" src="static/images/twitter.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section bg-white text-center pt-5">
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-12 col-md-12 text-center">
|
||||
<h3>WORKADVENTURE'S USE CASES</h3>
|
||||
</div>
|
||||
<p>
|
||||
Workadventure is an intuitive and fun solution to professional issues:
|
||||
</p>
|
||||
<ul class="text-left">
|
||||
<li>
|
||||
Work in a remote way within a team,
|
||||
</li>
|
||||
<li>
|
||||
Create an event (even a big one),
|
||||
</li>
|
||||
<li>
|
||||
Stay connected and increase social interactions...
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Feel free to contact us if you need a specific map, need a dedicated admin console or any
|
||||
support (for instance a large number of connexions) : <a href="mailto:workadventure@thecodingmachine.com" target="_blank">workadventure@thecodingmachine.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section bg-white">
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="col-12 credits">
|
||||
<h2>CURRENT FEATURES</h2>
|
||||
<!-- <h3>We have already thought of new features:</h3>-->
|
||||
<p>Instant interaction with up to 4 people</p>
|
||||
<p>Share screen with others</p>
|
||||
<p>Organize a workshop and meeting with up to 60 people</p>
|
||||
<p>Design your own digital space</p>
|
||||
<p>... and infinite possibilities</p>
|
||||
<h3>You need more? Do not hesitate to tell us!</h3>
|
||||
<div class="row justify-content-md-center pt-5" style="margin-top: 65px;">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link contribute" target="_BLANK" href="https://docs.google.com/forms/d/e/1FAIpQLSdxvajEyqsn4X0ai0SoDAcdsa_JQPIfiP2Tp9PDzkfZA54v9Q/viewform" title="FEEDBACK">
|
||||
FEEDBACK
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray section used-by">
|
||||
<div class="container-fluid container-lg">
|
||||
<h2 class="text-center pb-4">THEY MIGHT APPROVE</h2>
|
||||
<div class="row justify-content-md-center align-items-center">
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/atari.png">
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/super-nintendo.png">
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/amstrad.png">
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/sinclair-2.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg section quotes">
|
||||
<h2 class="text-center">Why we love WorkAdventure</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="quote-item">
|
||||
<p class="quote">« Right on time! I feel like less alone in my home office. »</p>
|
||||
<p class="author">Julie</p>
|
||||
</div>
|
||||
<div class="quote-item">
|
||||
<p class="quote">« I love running into the hallway and check out where are my teammates! »</p>
|
||||
<p class="author">Sophie</p>
|
||||
</div>
|
||||
<div class="quote-item">
|
||||
<p class="quote">« Wow! More intimate than a Meet conference. »</p>
|
||||
<p class="author">Greg</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white footer">
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 my-3 my-md-0">
|
||||
<a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 my-3 my-md-0 floppy">
|
||||
<img src="static/images/floppy.png" />
|
||||
<div>Soon available on floppy !<br/><span>otherwise, available on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row text-center">
|
||||
<div style="width: 100%;color:#afafaf;margin-top: 25px;">TheCodingMachine - All Rights Reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Indivisible by Pixelarity
|
||||
pixelarity.com | hello@pixelarity.com
|
||||
License: pixelarity.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Kraut.World</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
|
||||
</head>
|
||||
<body class="is-preload-0 is-preload-1">
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Home -->
|
||||
<article id="home" class="panel special">
|
||||
<div class="image">
|
||||
<img src="images/pic01.jpg" alt="" data-position="center center" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h1>Kraut.World</h1>
|
||||
<p>Visit us virtually<br />
|
||||
and have fun!</p>
|
||||
</header>
|
||||
<nav id="nav">
|
||||
<ul class="actions stacked special animated spinY">
|
||||
<li><a href="https://play.kraut.world/_/global/raw.githubusercontent.com/HackspaceJena/krautspace-rc3-map/main/maps/kraut.space_e1.json#entry_krautspace_e1" class="button">Start the World</a></li>
|
||||
<!--<li><a href="#elements" class="button">Elements</a></li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
<ul class="icons">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Work -->
|
||||
<article id="work" class="panel secondary">
|
||||
<div class="image">
|
||||
<img src="images/pic02.jpg" alt="" data-position="center center" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="actions animated spinX">
|
||||
<li><a href="#" class="button small back">Back</a></li>
|
||||
</ul>
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h2>Work</h2>
|
||||
<p>Magna feugiat lorem ipsum dolor<br />
|
||||
veroeros sed adipiscing</p>
|
||||
</header>
|
||||
<p>Lorem ipsum dolor sit amet, magna etiam adipiscing elit. Vivamus in quam eu turpis venenatis euismod eget ac velit. Magna pharetra eleifend urna quis laoreet. Nullam quis urna iaculis metus ornare accumsan. Sed nunc lacus, lobortis nec ante sit amet.</p>
|
||||
<p>Vitae quis magna. Sed condimentum dui sed nunc dapibus dignissim. Sed at arcu gravida, vehicula massa ut, consectetur urna. Morbi eu venenatis turpis. In tincidunt pharetra etiam veroeros.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- About -->
|
||||
<article id="about" class="panel secondary">
|
||||
<div class="image">
|
||||
<img src="images/pic03.jpg" alt="" data-position="center center" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="actions animated spinX">
|
||||
<li><a href="#" class="button small back">Back</a></li>
|
||||
</ul>
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h2>About</h2>
|
||||
<p>Magna feugiat lorem ipsum dolor<br />
|
||||
veroeros sed adipiscing</p>
|
||||
</header>
|
||||
<p>Lorem ipsum dolor sit amet, magna etiam adipiscing elit. Vivamus in quam eu turpis venenatis euismod eget ac velit. Magna pharetra eleifend urna quis laoreet. Nullam quis urna iaculis metus ornare accumsan. Sed nunc lacus, lobortis nec ante sit amet.</p>
|
||||
<p>Vitae quis magna. Sed condimentum dui sed nunc dapibus dignissim. Sed at arcu gravida, vehicula massa ut, consectetur urna. Morbi eu venenatis turpis. In tincidunt pharetra etiam veroeros.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Contact -->
|
||||
<article id="contact" class="panel secondary">
|
||||
<div class="image">
|
||||
<img src="images/pic04.jpg" alt="" data-position="bottom center" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="actions animated spinX">
|
||||
<li><a href="#" class="button small back">Back</a></li>
|
||||
</ul>
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h2>Contact</h2>
|
||||
</header>
|
||||
<form method="post" action="#">
|
||||
<div class="fields">
|
||||
<div class="field half">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" id="name" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="message">Message</label>
|
||||
<textarea name="message" id="message" rows="5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><a href="" class="button submit">Send Message</a></li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Elements -->
|
||||
<article id="elements" class="panel secondary">
|
||||
<div class="image">
|
||||
<img src="images/pic03.jpg" alt="" data-position="center center" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<ul class="actions animated spinX">
|
||||
<li><a href="#" class="button small back">Back</a></li>
|
||||
</ul>
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h2>Elements</h2>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h4>Text</h4>
|
||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||
<hr />
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
<h5>Heading Level 5</h5>
|
||||
<h6>Heading Level 6</h6>
|
||||
<hr />
|
||||
<h5>Blockquote</h5>
|
||||
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||
<h5>Preformatted</h5>
|
||||
<pre><code>i = 0;
|
||||
|
||||
while (!deck.isInOrder()) {
|
||||
print 'Iteration ' + i;
|
||||
deck.shuffle();
|
||||
i++;
|
||||
}
|
||||
|
||||
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Lists</h4>
|
||||
|
||||
<h5>Unordered</h5>
|
||||
<ul>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
|
||||
<h5>Alternate</h5>
|
||||
<ul class="alt">
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
|
||||
<h5>Ordered</h5>
|
||||
<ol>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis viverra.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis lorem.</li>
|
||||
<li>Felis enim et feugiat.</li>
|
||||
</ol>
|
||||
<h5>Icons</h5>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
|
||||
</ul>
|
||||
|
||||
<h5>Actions</h5>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Table</h4>
|
||||
<h5>Default</h5>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Alternate</h5>
|
||||
<div class="table-wrapper">
|
||||
<table class="alt">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Buttons</h4>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Primary</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
|
||||
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><span class="button primary disabled">Disabled</span></li>
|
||||
<li><span class="button disabled">Disabled</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Form</h4>
|
||||
<form method="post" action="#">
|
||||
<div class="fields">
|
||||
<div class="field half">
|
||||
<label for="demo-name">Name</label>
|
||||
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<label for="demo-email">Email</label>
|
||||
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="demo-category">Category</label>
|
||||
<select name="demo-category" id="demo-category">
|
||||
<option value="">-</option>
|
||||
<option value="1">Manufacturing</option>
|
||||
<option value="1">Shipping</option>
|
||||
<option value="1">Administration</option>
|
||||
<option value="1">Human Resources</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||
<label for="demo-priority-low">Low</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||
<label for="demo-priority-high">High</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||
<label for="demo-copy">Email me a copy</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||
<label for="demo-human">Not a robot</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="demo-message">Message</label>
|
||||
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="primary" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<p class="copyright">© kraut.space</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue