public-offering
/
pad.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1) Label color a bit darker than before 2) New smooth animation 3) Bugfix: form can be submitted within the text input instead of clicking the button 4) Added future gradients for Opera

pull/40/head
Robin 2011-07-25 15:45:04 -07:00
parent 9b89816178
commit d73d806022
1 changed files with 37 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
static/index.html
View File

@ -1,13 +1,22 @@
<!doctype html> <!doctype html>
<html> <html>
<title>Etherpad Lite</title>
<title>Etherpad Lite</title>
<style> <style>
* { * {
margin: 0; padding: 0; margin: 0; padding: 0;
} }
@-webkit-keyframes inception {
0% { opacity:0; -webkit-transform:scale(3); }
100% {}
}
@-moz-keyframes inception {
0% { opacity:0; -moz-transform:scale(3); }
100% {}
}
@-o-keyframes inception {
0% { opacity:0; -o-transform:scale(3); }
100% {}
}
body { body {
background: rgba(0, 0, 0, .05); background: rgba(0, 0, 0, .05);
color: #555; color: #555;
@ -20,7 +29,6 @@
background: -o-radial-gradient(circle, #aaa, #eee) no-repeat center center fixed; background: -o-radial-gradient(circle, #aaa, #eee) no-repeat center center fixed;
overflow-x: hidden; overflow-x: hidden;
} }
#container { #container {
border-top: 1px solid #999; border-top: 1px solid #999;
margin-top: 160px; margin-top: 160px;
@ -34,28 +42,10 @@
background: -o-linear-gradient(#fff, #ccc); background: -o-linear-gradient(#fff, #ccc);
opacity: .9; opacity: .9;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
-webkit-animation: pop .3s ease-in 1; -webkit-animation: inception .3s linear 1;
-moz-animation: pop .3s ease-in 1; -moz-animation: inception .3s linear 1;
-o-animation: inception .3s linear 1;
} }
@-webkit-keyframes pop {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes pop {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#button { #button {
margin: 0 auto; margin: 0 auto;
border-radius: 3px; border-radius: 3px;
@ -73,7 +63,6 @@
background: -o-linear-gradient(#5F5F5F, #565656 50%, #4C4C4C 51%, #373737); background: -o-linear-gradient(#5F5F5F, #565656 50%, #4C4C4C 51%, #373737);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
} }
#button:hover { #button:hover {
cursor: pointer; cursor: pointer;
background: #666; background: #666;
@ -82,54 +71,37 @@
background: -ms-linear-gradient(#707070, #666666 50%, #5B5B5B 51%, #474747); background: -ms-linear-gradient(#707070, #666666 50%, #5B5B5B 51%, #474747);
background: -o-linear-gradient(#707070, #666666 50%, #5B5B5B 51%, #474747); background: -o-linear-gradient(#707070, #666666 50%, #5B5B5B 51%, #474747);
} }
#button:active { #button:active {
box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.9); box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.9);
background: #444; background: #444;
background: -webkit-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D); /*
background: -moz-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D); background: -webkit-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D);
background: -ms-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D); background: -moz-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D);
background: -o-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D); background: -ms-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D);
} background: -o-linear-gradient(#565656, #4C4C4C 50%, #424242 51%, #2D2D2D);
*/
}
input[type="text"] { input[type="text"] {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
width: 245px; width: 245px;
} outline: none;
}
input[type="submit"] { input[type="submit"] {
height: 30px; height: 30px;
width: 40px; width: 40px;
} }
::selection {
background-color:rgba(119,119,119,.8);
color:#fff;
}
::-moz-selection {
background-color:rgba(119,119,119,.8);
color:#fff;
}
#label {
color:black;
text-align:left;
margin: 0 auto;
width:300px;
padding-left: 3px;
}
</style> </style>
<div id="container">
<div id="container">
<div id="button" onclick="go2Random()">New Pad</div> <div id="button" onclick="go2Random()">New Pad</div>
<br><br> <br>
<div id="label">or create/open a Pad with the name</div> or create/open a Pad with the name
<input type="text" id="padname"> <input type="submit" value="OK" onclick="go2Name();return false;"> <form action="" onsubmit="go2Name();return false;">
<input type="text" id="padname" autofocus>
<input type="submit" value="OK">
</form>
</div> </div>
<script> <script>
function go2Name() function go2Name()
{ {
@ -143,12 +115,12 @@
alert("Please enter a name"); alert("Please enter a name");
} }
} }
function go2Random() function go2Random()
{ {
window.location = "p/" + randomPadName(); window.location = "p/" + randomPadName();
} }
function randomPadName() function randomPadName()
{ {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
@ -162,5 +134,5 @@
return randomstring; return randomstring;
} }
</script> </script>
<!-- CC BY 3.0 Robin Buse -->
</html> </html>