joshua/beats-website
Archived
1
Fork 0
Code Activity

Made a nicer login

Browse source
This commit is contained in:
Joshua Moerman 2013-04-16 13:25:44 +02:00
parent f579798434
commit 3ec0075b4b
2 changed files with 47 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
index.css
View file

@ -1,3 +1,4 @@
/* General */
body { body {
color: #888; color: #888;
background: #000; background: #000;
@ -14,6 +15,34 @@ a {
position: relative; position: relative;
text-align: center; text-align: center;
} }
/* Login */
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.modalDialog > div {
text-align: center;
width: 300px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
/* BALLS */
#ballscreen { #ballscreen {
position: absolute; position: absolute;
background-color: rgba(0.0, 0.0, 0.0, 0.0); background-color: rgba(0.0, 0.0, 0.0, 0.0);
@ -34,6 +63,8 @@ a {
border-radius: 5px; border-radius: 5px;
background-color: #f00; background-color: #f00;
} }
/* LINES */
#svgscreen { #svgscreen {
position: absolute; position: absolute;
width: 1000px; width: 1000px;

22
index.html
View file

@ -6,6 +6,7 @@
<link href="index.css" rel="stylesheet" type="text/css"> <link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="timers.js"></script>
<script type="text/javascript" src="connection.js"></script> <script type="text/javascript" src="connection.js"></script>
<script type="text/javascript" src="websocket.js"></script> <script type="text/javascript" src="websocket.js"></script>
<script type="text/javascript" src="drawing.js"></script> <script type="text/javascript" src="drawing.js"></script>
@ -16,22 +17,27 @@
</head> </head>
<body ontouchmove="prevent_scrolling(event);"> <body ontouchmove="prevent_scrolling(event);">
<div id="login"> <div id="login" class="modalDialog">
<div>
<form onSubmit="return init()"> <form onSubmit="return init()">
Name: <input type="text" id="loginname"><br/> Name:<br/>
<input type="submit" value="login"> <input type="text" id="loginname"><br/>
<input type="submit" value="Play!">
</form> </form>
</div>
</div> </div>
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"> <div id="app">
<rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/> <svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg> <rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>
<div id="ballscreen"></div> <div id="ballscreen"></div>
<div id="text"> <div id="text">
(<span id="status">provide your name</span>) (<span id="status">provide your name</span>)
<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a> <a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a>
</div>
</div> </div>
</body> </body>