mirror of
https://github.com/lovasoa/whitebophir
synced 2024-11-10 14:34:20 +00:00
121 lines
2 KiB
HTML
121 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!-- This is a quick and dirty draft.-->
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>WBO - Welcome</title>
|
|
<link rel="icon" type="image/png" href="favicon.ico" />
|
|
<style>
|
|
body {
|
|
background-color:#eee;
|
|
width:100%;
|
|
margin:0;
|
|
animation: colorchange 200s infinite;
|
|
animation-delay:20s;
|
|
}
|
|
header {
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
text-shadow:1px 1px 2px #888;
|
|
width:100%;
|
|
}
|
|
|
|
h1, h2 {
|
|
display:inline-block;
|
|
}
|
|
|
|
h1 {
|
|
animation: colorchange 30s infinite;
|
|
animation-direction:alternate;
|
|
animation-delay:10s;
|
|
}
|
|
|
|
main {
|
|
margin:200px auto;
|
|
width:50%;
|
|
padding:50px;
|
|
font-size:2em;
|
|
position:relative;
|
|
text-align:justify;
|
|
animation: move 20s infinite;
|
|
animation-delay:40s;
|
|
animation-direction:alternate;
|
|
transition:.5s;
|
|
}
|
|
|
|
main:hover {
|
|
transform:scale(1.2);
|
|
transition:.5s;
|
|
}
|
|
|
|
header, main {
|
|
box-shadow: 2px 2px 10px #000;
|
|
background-color:#fff;
|
|
}
|
|
|
|
header:hover h2 {
|
|
animation:colorchange 100s infinite;
|
|
}
|
|
|
|
@keyframes vibration
|
|
{
|
|
0% {transform:scale(0.1);}
|
|
100% {transform:scale(1);}
|
|
}
|
|
|
|
@keyframes colorchange
|
|
{
|
|
0% {color:#000;}
|
|
30% {color:#c04;}
|
|
40% {color:#706;}
|
|
50% {color:#007;}
|
|
60% {color:#04b;}
|
|
70% {color:#0a4;}
|
|
80% {color:#1c0;}
|
|
80% {color:#b30;}
|
|
100% {color:#f00;}
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {top:0;left:0;}
|
|
25% {top:0;left:-10;}
|
|
50% {top:-40px;left:-20px;}
|
|
70% {top:0px;left:60px;}
|
|
87% {top:50px;left:0px;}
|
|
90% {top:-60px;left:20px;}
|
|
94% {top:90px;left:-50px;}
|
|
95% {top:0px;left:50px;}
|
|
97% {top:-90px;left:-20px;}
|
|
100% {top:0;left:0;}
|
|
}
|
|
|
|
@media (max-width:600px) {
|
|
main {
|
|
width:90%;
|
|
margin: 100px auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Whitebophir</h1> - <h2>Welcome</h2>
|
|
</header>
|
|
|
|
<main>
|
|
<p>Welcome to <b>WBO</b>. You can go to <a href="/boards/anonymous">the public board</a>
|
|
or create a new one with the form below. To share a board, just send it's URL to your friends.</p>
|
|
|
|
<form onsubmit="window.location='/boards/'+document.getElementById('board').value; return false;">
|
|
<input type="text" id="board" placeholder="Name of the board..."/>
|
|
<input type="submit" value="Go">
|
|
</form>
|
|
|
|
</main>
|
|
|
|
</body>
|
|
|
|
</html>
|