|
1 <!doctype html> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" > |
|
3 <title>Renkan</title> |
|
4 |
|
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|
6 <meta charset="utf-8"/> |
|
7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
|
8 |
|
9 <link rel="shortcut icon" href="favicon.ico"/> |
|
10 <script src="lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script> |
|
11 <script src="lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script> |
|
12 <script src="js/main.js" th:src="@{/static/js/main.js}" ></script> |
|
13 |
|
14 <style> |
|
15 /*<![CDATA[*/ |
|
16 body { |
|
17 margin: 0; |
|
18 height: 100%; |
|
19 color: #333; |
|
20 font: 14px helvetica, sans-serif; |
|
21 background: #ddd; |
|
22 background: -webkit-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
23 background: -moz-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
24 background: -ms-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
25 background: -o-radial-gradient(circle,#aaa,#eee 60%) center fixed; |
|
26 border-top: 8px solid rgba(51,51,51,.8); |
|
27 } |
|
28 #wrapper { |
|
29 border-top: 1px solid #999; |
|
30 margin-top: 160px; |
|
31 padding: 15px; |
|
32 background: #eee; |
|
33 background: -webkit-linear-gradient(#fff,#ccc); |
|
34 background: -moz-linear-gradient(#fff,#ccc); |
|
35 background: -ms-linear-gradient(#fff,#ccc); |
|
36 background: -o-linear-gradient(#fff,#ccc); |
|
37 opacity: .9; |
|
38 box-shadow: 0px 1px 8px rgba(0,0,0,0.3); |
|
39 } |
|
40 #inner { |
|
41 width: 350px; |
|
42 margin: 0 auto; |
|
43 } |
|
44 #button { |
|
45 margin: 0 auto; |
|
46 border-radius: 3px; |
|
47 text-align: center; |
|
48 font: 36px verdana,arial,sans-serif; |
|
49 color: white; |
|
50 text-shadow: 0 -1px 0 rgba(0,0,0,.8); |
|
51 height: 70px; |
|
52 line-height: 70px; |
|
53 background: #555; |
|
54 background: -webkit-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
55 background: -moz-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
56 background: -ms-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
57 background: -o-linear-gradient(#5F5F5F,#565656 50%,#4C4C4C 51%,#373737); |
|
58 box-shadow: inset 0 1px 3px rgba(0,0,0,0.9); |
|
59 } |
|
60 #button:hover { |
|
61 cursor: pointer; |
|
62 background: #666; |
|
63 background: -webkit-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
64 background: -moz-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
65 background: -ms-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
66 background: -o-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); |
|
67 } |
|
68 #button:active { |
|
69 box-shadow: inset 0 1px 12px rgba(0,0,0,0.9); |
|
70 background: #444; |
|
71 } |
|
72 #label { |
|
73 text-align: left; |
|
74 text-shadow: 0 1px 1px #fff; |
|
75 margin: 16px auto 0; |
|
76 } |
|
77 form { |
|
78 height: 38px; |
|
79 background: #fff; |
|
80 border: 1px solid #bbb; |
|
81 border-radius: 3px; |
|
82 position: relative; |
|
83 } |
|
84 button, input { |
|
85 font-weight: bold; |
|
86 font-size: 15px; |
|
87 } |
|
88 input[type="text"] { |
|
89 border-radius: 3px; |
|
90 box-sizing: border-box; |
|
91 -moz-box-sizing: border-box; |
|
92 padding: 0 45px 0 10px; |
|
93 *padding: 0; /* IE7 hack */ |
|
94 width: 100%; |
|
95 height: 100%; |
|
96 outline: none; |
|
97 border: none; |
|
98 position: absolute; |
|
99 } |
|
100 button[type="submit"] { |
|
101 position: absolute; |
|
102 right: 0; |
|
103 width: 45px; |
|
104 height: 38px; |
|
105 } |
|
106 @media only screen and (min-device-width: 320px) and (max-device-width: 720px) { |
|
107 body { |
|
108 background: #bbb; |
|
109 background: -webkit-linear-gradient(#aaa,#eee 60%) center fixed; |
|
110 background: -moz-linear-gradient(#aaa,#eee 60%) center fixed; |
|
111 background: -ms-linear-gradient(#aaa,#eee 60%) center fixed; |
|
112 } |
|
113 #wrapper { |
|
114 margin-top: 0; |
|
115 } |
|
116 #inner { |
|
117 width: 95%; |
|
118 } |
|
119 #label { |
|
120 text-align: center; |
|
121 } |
|
122 } |
|
123 /*]]>*/ |
|
124 </style> |
|
125 <link href="static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/> |
|
126 |
|
127 <div id="wrapper"> |
|
128 <div id="inner"> |
|
129 <div id="button" onclick="go2Random()" class="translate" th:utext="#{renkanIndex.new_renkan}">New Renkan</div> |
|
130 <div id="label" class="translate" th:text="#{renkanIndex.renkan_title}">Create a Renkan with the title</div> |
|
131 <form action="#" onsubmit="go2Title();return false;"> |
|
132 <input type="text" id="renkantitle" autofocus="autofocus" x-webkit-speech="x-webkit-speech"/> |
|
133 <button type="submit">OK</button> |
|
134 </form> |
|
135 </div> |
|
136 <h2 th:text="#{renkanIndex.project_list}">Project list</h2> |
|
137 <table> |
|
138 <thead> |
|
139 <tr> |
|
140 <th th:text="#{renkanIndex.project_name}">Name</th><th th:text="#{renkanIndex.project_creation}">Creation</th><th th:text="#{renkanIndex.project_edit}">Edit</th> |
|
141 </tr> |
|
142 </thead> |
|
143 <tbody> |
|
144 <tr th:each="project: ${projects}"> |
|
145 <th th:text="${project.title}">title</th> |
|
146 <td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td> |
|
147 <td><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.key})}" th:text="#{renkanIndex.project_edit_link}">Edit projet</a></td> |
|
148 </tr> |
|
149 </tbody> |
|
150 </table> |
|
151 </div> |
|
152 <script th:inline="javascript" > |
|
153 /*<![CDATA[*/ |
|
154 |
|
155 function go2Title() |
|
156 { |
|
157 var renkantitle = $("#renkantitle").val(); |
|
158 if(renkantitle.length == 0) { |
|
159 var alert_message = /*[[#{renkanIndex.js.empty_name_error}]]*/"Please enter a title"; |
|
160 alert(alert_message); |
|
161 return false; |
|
162 } |
|
163 |
|
164 new_renkan = { |
|
165 title: renkantitle, |
|
166 description: "(empty description)", |
|
167 uri: null |
|
168 }; |
|
169 |
|
170 var post_url = /*[[@{/rest/projects/}]]*/"/rest/projects/"; |
|
171 $.ajax(post_url, { |
|
172 data:JSON.stringify(new_renkan), |
|
173 type: "POST", |
|
174 dataType: "json", |
|
175 contentType: "application/json; charset=UTF-8" |
|
176 }).done(function(project){ |
|
177 var template_url = /*[[@{'/p/<%=project_id%>'(cowebkey='')}]]*/"p/<%=project_id%>?cowebkey=<%=project_key%>"; |
|
178 window.location = _.template(template_url+'<%=project_key%>', {project_id: project.id, project_key: project.key}); |
|
179 }); |
|
180 |
|
181 //? window.location = "p/" + renkantitle : alert(/*[[#{renkanIndex.js.empty_name_error}]]*/"Please enter a name"); |
|
182 } |
|
183 |
|
184 /*]]>*/ |
|
185 </script> |
|
186 |
|
187 </html> |