root / snf-astakos-app / astakos / im / templates / im / astakosgroup_form_demo.html @ f932b578
History | View | Annotate | Download (10 kB)
1 |
{% extends "im/account_base.html" %} |
---|---|
2 |
|
3 |
{% block page.body %} |
4 |
|
5 |
{% block headjs %} |
6 |
{{ block.super }} |
7 |
|
8 |
<script src="{{ IM_STATIC_URL }}js/jquery.uniform.js"></script> |
9 |
<script src="{{ IM_STATIC_URL }}js/quotas.js"></script> |
10 |
<link rel="stylesheet" href="{{ IM_STATIC_URL }}css/uniform.default.css" type="text/css" media="screen"> |
11 |
{% endblock %} |
12 |
<form action="" method="post" class="withlabels quotas-form">{% csrf_token %} |
13 |
|
14 |
<fieldset>
|
15 |
<legend>
|
16 |
1. CREATE GROUP |
17 |
<span class="info"> |
18 |
<em>more info</em> |
19 |
<span>Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text</span> |
20 |
</span>
|
21 |
</legend>
|
22 |
<div class="form-row"> |
23 |
<p class="clearfix"> |
24 |
<label for="id_name">Name</label> |
25 |
<input type="text" name="name" id="id_name" autocomplete="off"> |
26 |
<span class="extra-img"> </span> |
27 |
<span class="info"> |
28 |
<em>more info</em> |
29 |
<span>Help Text</span> |
30 |
</span>
|
31 |
</p>
|
32 |
</div>
|
33 |
<div class="form-row"> |
34 |
|
35 |
<p class="clearfix"> |
36 |
<label for="id_homepage">Homepage Url</label> |
37 |
<input type="text" name="homepage" id="id_homepage" maxlength="255" autocomplete="off"> |
38 |
<span class="extra-img"> </span> |
39 |
<span class="info"> |
40 |
<em>more info</em> |
41 |
<span>Help Text</span> |
42 |
</span>
|
43 |
</p>
|
44 |
|
45 |
</div>
|
46 |
<div class="form-row"> |
47 |
<p class="clearfix"> |
48 |
<label for="id_desc">Description</label> |
49 |
<textarea id="id_desc" rows="10" cols="40" name="desc"></textarea> |
50 |
<span class="extra-img"> </span> |
51 |
<span class="info"> |
52 |
<em>more info</em> |
53 |
<span>Help Text</span> |
54 |
</span>
|
55 |
</p>
|
56 |
</div>
|
57 |
<div class="form-row"> |
58 |
<p class="clearfix"> |
59 |
<label for="id_issue_date">Issue Date</label> |
60 |
<input type="text" id="id_issue_date" name="issue_date" class="hasDatepicker"> |
61 |
<span class="extra-img"> </span> |
62 |
<span class="info"> |
63 |
<em>more info</em> |
64 |
<span>Help Text</span> |
65 |
</span>
|
66 |
</p>
|
67 |
</div>
|
68 |
|
69 |
<div class="form-row"> |
70 |
<p class="clearfix"> |
71 |
<label for="id_expiration_date">Expiration Date</label> |
72 |
<input type="text" name="expiration_date" id="id_expiration_date" class="hasDatepicker"> |
73 |
<span class="extra-img"> </span> |
74 |
<span class="info"> |
75 |
<em>more info</em> |
76 |
<span>Help Text</span> |
77 |
</span>
|
78 |
</p>
|
79 |
</div>
|
80 |
<div class="form-row "> |
81 |
<p class="clearfix "> |
82 |
<label for="id_moderation_enabled">Moderation</label> |
83 |
<input type="checkbox" id="id_moderation_enabled" name="moderation_enabled" autocomplete="off" style="display: none;"> |
84 |
<span class="extra-img"> </span> |
85 |
<span class="info"> |
86 |
<em>more info</em> |
87 |
<span>Check if you want to approve members participation manually</span> |
88 |
</span>
|
89 |
</p>
|
90 |
</div>
|
91 |
<div class="double-checks clearfix"> |
92 |
<label>Max users per group</label> |
93 |
<div class="form-row"> |
94 |
<p class="clearfix"> |
95 |
<label for="vm_per_user_unlimited">Unlimited</label> |
96 |
<input type="checkbox" id="vm_per_user_unlimited" name="vm_per_user_unlimited" class="unlimited" checked="checked"> |
97 |
</p>
|
98 |
</div>
|
99 |
<div class="form-row"> |
100 |
<p class="clearfix"> |
101 |
<label for="vm_per_user_limited">Limited</label> |
102 |
<input type="checkbox" id="vm_per_user_limited" name="vm_per_user_limited" class="limited"> |
103 |
<input type="text" id="vm_user_limited_num"/> |
104 |
|
105 |
</p>
|
106 |
</div>
|
107 |
|
108 |
</div>
|
109 |
<!--<div class="radios clearfix">
|
110 |
<label>Max users per group</label>
|
111 |
<div class="radio-wrap">
|
112 |
|
113 |
<input type="radio" name="radio1" value="1" id="vm_radio_unlimited" checked="checked">
|
114 |
<label for="vm_radio_unlimited">Unlimited</label>
|
115 |
<input type="radio" name="radio1" value="0" id="vm_radio_limited" >
|
116 |
<label for="vm_radio_limited">Limited</label>
|
117 |
<input type="text" id="vm_radio_limited_num" name="vm_radio_limited_num"/>
|
118 |
</div>
|
119 |
</div>-->
|
120 |
</fieldset>
|
121 |
<fieldset id="icons"> |
122 |
<legend>
|
123 |
2. CHOOSE RESOURCES |
124 |
<span class="info"> |
125 |
<em>more info</em> |
126 |
<span>Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text Help Text</span> |
127 |
</span>
|
128 |
</legend>
|
129 |
{% for key in groups.items %} |
130 |
{% endfor %} |
131 |
|
132 |
<ul class="clearfix"> |
133 |
|
134 |
<li><a href="#vm_1" id="vm_1"><img src="/static/im/images/create-resource-vm.png" alt="vm"/></a></li> |
135 |
<li><a href="#storage_1" id="storage_1"><img src="/static/im/images/create-resource-storage.png" alt="storage"/></a></li> |
136 |
</ul>
|
137 |
<!--p class="msg">if you choose CPU without selecting any VMs you must also select RAM and DISKSPACE</p-->
|
138 |
</fieldset>
|
139 |
<div class="foo"> |
140 |
|
141 |
</div>
|
142 |
<div class="not-foo"> |
143 |
<div class="group vm_1"> |
144 |
<a href="#icons" class="delete"><strong>X</strong> remove resource</a> |
145 |
<fieldset class="quota vm" style="background:none;"> |
146 |
<legend>VM</legend> |
147 |
<div class="form-row"> |
148 |
<p class="clearfix"> |
149 |
<label for="num_vms">Total VMs</label> |
150 |
<input type="text" name="num_vms"> |
151 |
<span class="extra-img"> </span> |
152 |
<span class="info"> |
153 |
<em>more info</em> |
154 |
<span>Help Text</span> |
155 |
</span>
|
156 |
</p>
|
157 |
</div>
|
158 |
<div class="double-checks"> |
159 |
<label>Max VMs per user</label> |
160 |
<div class="form-row"> |
161 |
<p class="clearfix"> |
162 |
<label for="vm_per_user_unlimited">Unlimited</label> |
163 |
<input type="checkbox" id="vm_per_user_unlimited" name="vm_per_user_unlimited" class="unlimited" checked="checked"> |
164 |
</p>
|
165 |
</div>
|
166 |
<div class="form-row"> |
167 |
<p class="clearfix"> |
168 |
<label for="vm_per_user_limited">Limited</label> |
169 |
<input type="checkbox" id="vm_per_user_limited" name="vm_per_user_limited" class="limited"> |
170 |
<input type="text" id="vm_per_user_limited_num" name="vm_per_user_limited_num"/> |
171 |
|
172 |
</p>
|
173 |
</div>
|
174 |
|
175 |
</div>
|
176 |
</fieldset>
|
177 |
<fieldset class="quota cpu" style="background:none;"> |
178 |
|
179 |
<legend>cpu</legend> |
180 |
<div class="form-row"> |
181 |
<p class="clearfix"> |
182 |
<label for="num_cpu">Total cpus</label> |
183 |
<input type="text" name="num_cpu"> |
184 |
<span class="extra-img"> </span> |
185 |
<span class="info"> |
186 |
<em>more info</em> |
187 |
<span>Help Text</span> |
188 |
</span>
|
189 |
</p>
|
190 |
</div>
|
191 |
<div class="double-checks"> |
192 |
<label>Max cpus per user</label> |
193 |
<div class="form-row"> |
194 |
<p class="clearfix"> |
195 |
<label for="cpu_per_user_unlimited">Unlimited</label> |
196 |
<input type="checkbox" id="cpu_per_user_unlimited" name="cpu_per_user_unlimited" class="unlimited" checked="checked"> |
197 |
</p>
|
198 |
</div>
|
199 |
<div class="form-row"> |
200 |
<p class="clearfix"> |
201 |
<label for="cpu_per_user_limited">Limited</label> |
202 |
<input type="checkbox" id="cpu_per_user_limited" name="cpu_per_user_limited" class="limited"> |
203 |
<input type="text" id="cpu_user_limited_num" name="cpu_user_limited_num"/> |
204 |
|
205 |
</p>
|
206 |
</div>
|
207 |
|
208 |
</div>
|
209 |
</fieldset>
|
210 |
<fieldset class="quota ram"> |
211 |
|
212 |
<legend>ram</legend> |
213 |
<div class="form-row"> |
214 |
<p class="clearfix"> |
215 |
<label for="num_ram">Total ram</label> |
216 |
<input type="text" name="num_ram"> |
217 |
<span class="extra-img"> </span> |
218 |
<span class="info"> |
219 |
<em>more info</em> |
220 |
<span>Help Text</span> |
221 |
</span>
|
222 |
</p>
|
223 |
</div>
|
224 |
<div class="double-checks"> |
225 |
<label>Max ram per user</label> |
226 |
<div class="form-row"> |
227 |
<p class="clearfix"> |
228 |
<label for="ram_per_user_unlimited">Unlimited</label> |
229 |
<input type="checkbox" id="ram_per_user_unlimited" name="ram_per_user_unlimited" class="unlimited" checked="checked"> |
230 |
</p>
|
231 |
</div>
|
232 |
<div class="form-row"> |
233 |
<p class="clearfix"> |
234 |
<label for="ram_per_user_limited">Limited</label> |
235 |
<input type="checkbox" id="ram_per_user_limited" name="ram_per_user_limited" class="limited"> |
236 |
<input type="text" id="ram_user_limited_num"/> |
237 |
|
238 |
</p>
|
239 |
</div>
|
240 |
|
241 |
</div>
|
242 |
</fieldset>
|
243 |
</div>
|
244 |
<div class="group storage_1"> |
245 |
<a href="#icons" class="delete"><strong>X</strong> remove resource</a> |
246 |
<fieldset class="quota storage"> |
247 |
<legend>STORAGE</legend> |
248 |
<div class="form-row"> |
249 |
<p class="clearfix"> |
250 |
<label for="num_storage">Total storage</label> |
251 |
<input type="text" name="num_storage"> |
252 |
<span class="extra-img"> </span> |
253 |
<span class="info"> |
254 |
<em>more info</em> |
255 |
<span>Help Text</span> |
256 |
</span>
|
257 |
</p>
|
258 |
</div>
|
259 |
<div class="double-checks"> |
260 |
<label>Max Storage per user</label> |
261 |
<div class="form-row"> |
262 |
<p class="clearfix"> |
263 |
<label for="storage_per_user_unlimited">Unlimited</label> |
264 |
<input type="checkbox" id="storage_per_user_unlimited" name="storage_per_user_unlimited" class="unlimited" checked="checked"> |
265 |
</p>
|
266 |
</div>
|
267 |
<div class="form-row"> |
268 |
<p class="clearfix"> |
269 |
<label for="storage_per_user_limited">Limited</label> |
270 |
<input type="checkbox" id="storage_per_user_limited" name="storage_per_user_limited" class="limited"> |
271 |
<input type="text" id="storage_user_limited_num"/> |
272 |
</p>
|
273 |
</div>
|
274 |
|
275 |
</div>
|
276 |
</fieldset>
|
277 |
</div>
|
278 |
</div>
|
279 |
<div class="form-row submit"> |
280 |
<input type="submit" value="SUBMIT" class="submit altcol" autocomplete="off"> |
281 |
</div>
|
282 |
</form>
|
283 |
|
284 |
<script>
|
285 |
|
286 |
</script>
|
287 |
|
288 |
{% endblock %} |