1 <!doctype html> |
|
2 <html> |
|
3 <title>Renkan</title> |
|
4 |
|
5 <meta charset="utf-8"> |
|
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> |
|
7 |
|
8 <link rel="shortcut icon" href="favicon.ico"> |
|
9 |
|
10 <style> |
|
11 body { |
|
12 margin: 0; |
|
13 height: 100%; |
|
14 color: #333; |
|
15 font: 14px helvetica, sans-serif; |
|
16 background: #ddd; |
|
17 background: -webkit-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
18 background: -moz-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
19 background: -ms-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
20 background: -o-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
21 border-top: 8px solid rgba(51,51,51,.8); |
|
22 } |
|
23 #wrapper { |
|
24 border-top: 1px solid #999; |
|
25 margin-top: 160px; |
|
26 padding: 15px; |
|
27 background: #eee; |
|
28 background: -webkit-linear-gradient(#fff,#ccc); |
|
29 background: -moz-linear-gradient(#fff,#ccc); |
|
30 background: -ms-linear-gradient(#fff,#ccc); |
|
31 background: -o-linear-gradient(#fff,#ccc); |
|
32 opacity: .9; |
|
33 box-shadow: 0px 1px 8px rgba(0,0,0,0.3); |
|
34 } |
|
35 #inner { |
|
36 width: 300px; |
|
37 margin: 0 auto; |
|
38 } |
|
39 #button { |
|
40 margin: 0 auto; |
|
41 border-radius: 3px; |
|
42 text-align: center; |
|
43 font: 36px verdana,arial,sans-serif; |
|
44 color: white; |
|
45 text-shadow: 0 -1px 0 rgba(0,0,0,.8); |
|
46 height: 70px; |
|
47 line-height: 70px; |
|
48 background: #555; |
|
49 background: -webkit-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
50 background: -moz-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
51 background: -ms-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
52 background: -o-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
53 box-shadow: inset 0 1px 3px rgba(0,0,0,0.9); |
|
54 } |
|
55 #button:hover { |
|
56 cursor: pointer; |
|
57 background: #666; |
|
58 background: -webkit-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
59 background: -moz-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
60 background: -ms-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
61 background: -o-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
62 } |
|
63 #button:active { |
|
64 box-shadow: inset 0 1px 12px rgba(0,0,0,0.9); |
|
65 background: #444; |
|
66 } |
|
67 #label { |
|
68 text-align: left; |
|
69 text-shadow: 0 1px 1px #fff; |
|
70 margin: 16px auto 0; |
|
71 } |
|
72 form { |
|
73 height: 38px; |
|
74 background: #fff; |
|
75 border: 1px solid #bbb; |
|
76 border-radius: 3px; |
|
77 position: relative; |
|
78 } |
|
79 button, input { |
|
80 font-weight: bold; |
|
81 font-size: 15px; |
|
82 } |
|
83 input[type="text"] { |
|
84 border-radius: 3px; |
|
85 box-sizing: border-box; |
|
86 -moz-box-sizing: border-box; |
|
87 padding: 0 45px 0 10px; |
|
88 *padding: 0; /* IE7 hack */ |
|
89 width: 100%; |
|
90 height: 100%; |
|
91 outline: none; |
|
92 border: none; |
|
93 position: absolute; |
|
94 } |
|
95 button[type="submit"] { |
|
96 position: absolute; |
|
97 right: 0; |
|
98 width: 45px; |
|
99 height: 38px; |
|
100 } |
|
101 @media only screen and (min-device-width: 320px) and (max-device-width: 720px) { |
|
102 body { |
|
103 background: #bbb; |
|
104 background: -webkit-linear-gradient(#aaa,#eee 60%) center fixed; |
|
105 background: -moz-linear-gradient(#aaa,#eee 60%) center fixed; |
|
106 background: -ms-linear-gradient(#aaa,#eee 60%) center fixed; |
|
107 } |
|
108 #wrapper { |
|
109 margin-top: 0; |
|
110 } |
|
111 #inner { |
|
112 width: 95%; |
|
113 } |
|
114 #label { |
|
115 text-align: center; |
|
116 } |
|
117 } |
|
118 </style> |
|
119 <link href="static/css/index.css" rel="stylesheet"> |
|
120 |
|
121 <div id="wrapper"> |
|
122 <div id="inner"> |
|
123 <div id="button" onclick="go2Random()" class="translate">New Renkan</div> |
|
124 <div id="label" class="translate">or create/open a Renkan with the name</div> |
|
125 <form action="#" onsubmit="go2Name();return false;"> |
|
126 <input type="text" id="renkanname" autofocus x-webkit-speech> |
|
127 <button type="submit">OK</button> |
|
128 </form> |
|
129 </div> |
|
130 </div> |
|
131 <script> |
|
132 |
|
133 function go2Name() |
|
134 { |
|
135 var renkanname = document.getElementById("renkanname").value; |
|
136 renkanname.length > 0 ? window.location = "p/" + renkanname : alert("Please enter a name") |
|
137 } |
|
138 |
|
139 function go2Random() |
|
140 { |
|
141 window.location = "p/" + randomRenkanName(); |
|
142 } |
|
143 |
|
144 function randomRenkanName() |
|
145 { |
|
146 var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; |
|
147 var string_length = 10; |
|
148 var randomstring = ''; |
|
149 for (var i = 0; i < string_length; i++) |
|
150 { |
|
151 var rnum = Math.floor(Math.random() * chars.length); |
|
152 randomstring += chars.substring(rnum, rnum + 1); |
|
153 } |
|
154 return randomstring; |
|
155 } |
|
156 |
|
157 // start the custom js |
|
158 if (typeof customStart == "function") customStart(); |
|
159 </script> |
|
160 |
|
161 </html> |
|