joshua
/
beats-website
Archived
1
0
Fork 0
Code Releases Activity
Browse Source

Made a nicer login

master
Joshua Moerman 11 years ago
parent
f579798434
commit
3ec0075b4b
2 changed files with 47 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      index.css
  2. 26
      index.html

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;

26
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>