-
Notifications
You must be signed in to change notification settings - Fork 0
/
campaign.html
437 lines (406 loc) · 18.2 KB
/
campaign.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--CSS Import-->
<link rel="stylesheet" href="css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/qolak.header.css">
<link rel="stylesheet" href="css/qolak.body.css">
<link rel="stylesheet" href="css/qolak.footer.css">
<!--IntroJS CSS Import-->
<link rel="stylesheet" href="css/introjs.min.css">
<link rel="stylesheet" href="css/introjs-rtl.min.css">
<link rel="stylesheet" href="img/intro-themes/introjs-nassim.css">
<!--Campaign CSS Import-->
<link rel="stylesheet" href="css/campaign.css">
<!--JavaScript Import-->
<script src="js/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<!--IntroJS JavaScript Import-->
<script src="js/intro.min.js"></script>
<!--Campaign JavaScript Import-->
<script src="js/campaign.js"></script>
<!--Scripts for initializing some objects for materializecss-->
<script src="js/qolak.js"></script>
<script type="text/javascript" src="js/jquery-asPieProgress.js"></script>
</head>
<body>
<div id="introDiv" data-intro="به قلک خوش آمدید!" data-step="1" data-position="bottom"></div>
<div class="navbar-fixed" data-intro="برای شروع، میتوانید یک قلک بسازید تا مردم از شما حمایت مالی کنند! همچنین میتوانید در سایت جستجو کنید یا به مجله های ما که حاوی آخرین اخبار مربوط به قلک است، سری بزنید!" data-step="2" data-position="bottom">
<!--User Dropdown Initialization-->
<ul id="user-dropdown" class="dropdown-content">
<li><a href="http://qolak.com/user/profile">حساب کاربری</a></li>
<li><a href="http://qolak.com/user/settings">تنظیمات</a></li>
<li><a href="http://qolak.com/user/qolak">قلک من</a></li>
<li class="divider"></li>
<li><a href="http://qolak.com/logout">خروج</a></li>
</ul>
<!--Top Navigation Bar-->
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<!--Logo Container-->
<ul id="logo-container" class="right">
<li>
<a href="http://qolak.com" class="brand-logo right">قلک</a>
</li>
</ul>
<!--User Dropdown Container-->
<ul id="dropdown-container" class="right">
<li>
<a href="" class="dropdown-button" data-activates="user-dropdown" data-beloworigin="true"><i id="arrow" class="material-icons small">arrow_drop_down</i>آقای محمدی</a>
</li>
</ul>
<!--Search-Field for Large Screen-->
<input id="search-field" type="hidden" value="mehrdad">
<ul id="searchbar" class="right hide-on-med-and-down">
<li>
<form>
<div class="input-field">
<input id="search" type="search" required class="search-field">
<label for="search"><i class="material-icons">search</i></label>
</div>
</form>
</li>
</ul>
<!--Sidebar Menu Button-->
<a id="menu-button" href="" data-activates="nav-mobile" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
<!--Top Links Container-->
<ul id="top-button-container" class="hide-on-med-and-down left">
<li>
<a id="introButton" href="#" onclick="startIntro();"><i class="material-icons left">live_help</i>راهنمایی</a>
</li>
<li>
<a href="http://qolak.com/blog"><i class="material-icons left">description</i>مجله</a>
</li>
<li class="active">
<a href="http://qolak.com/create"><i class="material-icons left">queue</i>ساخت قلک</a>
</li>
</ul>
<!--Sidebar Items-->
<ul id="nav-mobile" class="side-nav">
<li id="sidebar-title" class="light-blue darken-1">
<h4 style="border-bottom: 2px; padding-bottom:5px;">منو</h4>
</li>
<li id="search-li" class="center hide-on-large-only">
<form id="search">
<div class="input-field">
<input placeholder="جستجو" id="sidebar-search" type="text" class="search-field">
<label for="sidebar-search"><i class="material-icons">search</i></label>
</div>
</form>
</li>
<li class="center hide-on-large-only">
<a href="#" onclick="startIntro();">راهنمایی</a>
</li>
<li class="center hide-on-large-only">
<a href="#">ساخت قلک</a>
</li>
<li class="center hide-on-large-only">
<a href="#">مجله</a>
</li>
</ul>
</div>
</nav>
</div>
<!--***************************************************************************-->
<div class="indigo lighten-5">
<div class="container">
<div class="row section">
<!-- Campaign Title -->
<div class="col s12 center-align">
<h1>پروژه کمک به نیازمندان</h1>
</div>
<!-- Campaign Image/video -->
<div class="col l8 s12 right center-align">
<img class="responsive-img" src="img/camp.png">
</div>
<div class="col l4 s12 center-align">
<!-- Bakers -->
<div class="col l12 s4 row right">
<h4 class="col s12">67</h4>
<h4>پشتیبان</h4>
</div>
<!-- Pledges Amount-->
<div class="col l12 s4 row right">
<h4 class="col s12">67,000 ریال</h4>
<h6>از 100,000 ریال جمع آوری شده</h6>
</div>
<!-- Remained Days -->
<div class="col l12 s4 row right">
<h4 class="col s12">42</h4>
<h4>روز باقی مانده</h4>
</div>
</div>
</div>
<div class="row">
<div class="divider"></div>
</div>
<div class="row">
<div class=" row col m8 s12 right">
<!-- Brief content -->
<h5 class="col s12">توضیحات مختصر درباره این کمپین</h5>
<!-- Campaign Location -->
<div class="chip green">
ایران
<i class="material-icons">room</i>
</div>
<!-- Tags -->
<div class="chip blue">
قلک
<i class="material-icons">label</i>
</div>
<div class="chip blue">
خیریه
<i class="material-icons">label</i>
</div>
<!-- Social Media Button-->
<a class="waves-effect waves-teal btn-flat share-social">به اشتراک گذاری این قلک</a>
</div>
<div class="divider col m1 s12 hide-on-med-and-up"></div>
<!-- Campaign Creator Part-->
<div class="col m4 s12 camp-creator">
<div class="col l4 m6 s4 right">
<img class="responsive-img profile-img" src="img/profile.jpg">
</div>
<div class="col l8 m6 s8 right-align">
<h5>مهرداد محمدی</h5>
<div class="camp-creator-detail grey-text"><i class="material-icons">web</i>Qolak.com</div>
<div class="right-align camp-creator-detail"><a href="#"><i class="material-icons">assignment_ind</i>مشاهده کامل پروفایل</a></div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
</div>
<!-- Campaign Tabs-->
<div class="row">
<div class="col l5 s12 right">
<div class="row">
<div class="col s12">
<ul class="tabs right-align">
<li class="tab col s3"><a id="comment" href="#comments">نظرات</a></li>
<li class="tab col s3"><a id="qolak" class="active" href="#about-qolak">قلک</a></li>
<li id="award" class="tab col s3 hide-on-large-only"><a href="#awards">پاداش ها</a></li>
</ul>
</div>
</div>
</div>
<!-- Social Media -->
<div class="col l3 offset-s4 back-button hide-on-med-and-down share-social" style="height:100%">
<a class="waves-effect waves-light btn-large"><i class="material-icons left">loyalty</i>به اشتراک گذاری این کمپین</a>
</div>
</div>
<!-- Tabs -->
<div class="row container">
<div class="col l8 s12 right">
<div class="row">
<div id="comments" class="col s12">
</div>
<div id="about-qolak" class="col s12">
<h4 class="flow-text">درباره این قلک</h4>
</div>
<div id="awards" class="col s12 tab-awards"></div>
</div>
</div>
<div class="col l4 hide-on-med-and-down side-awards">
<div class="award-item not-logged indigo lighten-5 hoverable">
<div class="content">
<div class="row teal-text">
<i class="material-icons right">redeem</i>
<div class="right award-item-title">پیش پرداخت 1000 ریال یا بیشتر</div>
</div>
<div class="row">
<div class="container">
<h5 class="blue-text">600 پشتیبان</h5>
<h6>پاداش هایی که برای این پیش پرداخت درنظر گرفته شده اند.</h6>
</div>
</div>
</div>
<div class="mask valign-wrapper teal lighten-1">
<h4 class="white-text valign center-align">این پاداش را انتخاب کنید</h4>
</div>
</div>
<div class="award-item logged indigo lighten-5 hoverable">
<div class="content">
<div class="row teal-text">
<i class="material-icons right">redeem</i>
<div class="right award-item-title">پیش پرداخت 10000 ریال یا بیشتر</div>
</div>
<div class="row">
<div class="container">
<h5 class="blue-text">60 پشتیبان</h5>
<h6>پاداش هایی که برای این پیش پرداخت درنظر گرفته شده اند.</h6>
</div>
</div>
</div>
<div class="mask valign-wrapper teal lighten-1">
<h4 class="white-text valign center-align">این پاداش را انتخاب کنید</h4>
</div>
</div>
<div class="award-item logged indigo lighten-5 hoverable">
<div class="content">
<div class="row teal-text">
<i class="material-icons right">redeem</i>
<div class="right award-item-title">پیش پرداخت 100000 ریال یا بیشتر</div>
</div>
<div class="row">
<div class="container">
<h5 class="blue-text">6 پشتیبان</h5>
<h6>پاداش هایی که برای این پیش پرداخت درنظر گرفته شده اند.</h6>
</div>
</div>
</div>
<div class="mask valign-wrapper teal lighten-1">
<h4 class="white-text valign center-align">این پاداش را انتخاب کنید</h4>
</div>
</div>
</div>
</div>
<!-- Social Modal Structure -->
<div id="Socail-modal" class="modal">
<div class="modal-content">
<h4>این قلک را در شبکه های اجتماعی به اشتراک بگذارید</h4>
<p>
<div class="col l3 offset-s4 back-button hide-on-med-and-down share-social" style="height:100%">
<a class="waves-effect waves-light btn-large"><i class="material-icons left">loyalty</i>به اشتراک گذاری این کمپین</a></div>
<div class="col l3 offset-s4 back-button hide-on-med-and-down share-social" style="height:100%">
<a class="waves-effect waves-light btn-large"><i class="material-icons left">loyalty</i>به اشتراک گذاری این کمپین</a></div>
<div class="col l3 offset-s4 back-button hide-on-med-and-down share-social" style="height:100%">
<a class="waves-effect waves-light btn-large"><i class="material-icons left">loyalty</i>به اشتراک گذاری این کمپین</a></div>
<div class="col l3 offset-s4 back-button hide-on-med-and-down share-social" style="height:100%">
<a class="waves-effect waves-light btn-large"><i class="material-icons left">loyalty</i>به اشتراک گذاری این کمپین</a></div>
</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!-- Not Loged-in User Pledge Modal Structure -->
<div id="pledge-modal" class="modal bottom-sheet row pledge-modal">
<div class="light-blue lighten-1 row white-text">
<div class="col l8 s12 right">
<h3 class="award-item-title col s10">پیش پرداخت 10000 ریال یا بیشتر</h3>
<i class="material-icons large col s2">redeem</i>
</div>
<div class="white-text bakers col l4 s12 right valign-wrapper">
<div class="valign">6 پشتیبان دیگر این پاداش را انتخاب کرده اند</div>
</div>
</div>
<div class="modal-content container row not-logged">
<h6 class="col m7 s12 right">
پشتیبان گرامی برای انجام مراحل پرداخت باید وارد حساب کاربری خود شوید.اگر عضو قلک هستید وارد شوید در غیر این صورت میتوانید <a href="Register"> یک حساب کاربری برای خود بسازید</a>.
</h6>
<div class="col m5 s12 right login">
<form name="loginform" id="" action="" method="post">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">supervisor_account</i>
<input name="log" id="log" type="text" value="" size="32" required>
<label for="log">نام کاربری</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">lock_outline</i>
<input name="pwd" id="user_pass" type="password" autocomplete="off" class="validate" size="32" required>
<label for="user_pass">رمز عبور</label>
</div>
<div class="col m4 s6 right">
<button id="sendButton" class="btn btn-large waves-effect waves-light light-blue" type="button" name="action" onclick="checkLoginForm();">ورود
<i class="material-icons left">vpn_key</i>
</button>
</div>
<div class="col m8 s6">
<div class="input-field col s12 remember-me">
<input name="rememberme" type="checkbox" id="rememberme" value="forever" />
<label for="rememberme">مرا به خاطر بسپار</label>
</div>
<div class="col s12 forgot-pass">
<a href="Forgot">فراموشی رمز عبور</a>
</div>
</div>
</div>
</form>
</div>
<!--div class="col m3 s12">
<div class="input-field col s12 disabled">
<input disabled id="pledge_amount" type="text" class="validate">
<label for="pledge_amount">مبلغ به ریال</label>
</div>
<div class="col s12" style="height:100%">
<a class="waves-effect waves-light btn-large left disabled">
<i class="material-icons left">loyalty</i>
پرداخت
</a>
</div>
</div-->
</div>
<div class="modal-content container row logged">
<!-- Campaign Creator Part-->
<div class="col m4 s12 camp-baker right">
<div class="col l4 m6 s4 right">
<img class="responsive-img profile-img" src="img/psyringe.jpg">
</div>
<div class="col l8 m6 s8 right-align">
<h5>محمد رضا حاجیانپور</h5>
<div class="camp-creator-detail grey-text"><i class="material-icons">web</i>Qolak.com</div>
<div class="right-align camp-creator-detail"><a href="#"><i class="material-icons">assignment_ind</i>مشاهده کامل پروفایل</a></div>
</div>
</div>
<div class="col m8 s12 pledge_amount_wrapper">
<h6 class="col s4 right-align right">مبلغ پرداختی :</h6>
<div class="input-field col s7 left-align right">
<input id="pledge_amount" type="text" class="validate" value="67000">
</div>
<h6 class="col s1 right-align right">ریال</h6>
<div class="col s12 right">
اگر می خواهید مبلغ دلخواه پرداخت کنید آن را در کادر وارد کنید در غیر این صورت دکمه پرداخت را بزنید.
</div>
<div class="col offset-s2 s10">
<a class="waves-effect waves-light btn-large left">
<i class="material-icons left">shopping_cart</i>
پرداخت
</a>
</div>
</div>
</div>
</div>
<!--***************************************************************************-->
<footer class="page-footer light-blue lighten-1">
<div class="container">
<div class="row">
<div class="col l8 s12 right">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
<div id="newsletter-pane" class="col l4 s12 news-latter light-blue darken-2 hoverable" data-intro="در خبرنامه ما عضو شوید تا آخرین اخبار راجع به قلک را برای شما ایمیل کنیم!" data-step="5" data-position="top">
<h5 class="white-text">در جریان باشید</h5>
<p class="grey-text text-lighten-4">ایمیل خود را در کادر زیر وارد کنید تا شما را در جریان اخبار روز قرار دهیم</p>
<div class="input-field col s12 white-text">
<input id="email" type="email" class="validate">
<label class="white-text" for="email">ایمیل</label>
<button class="btn btn-medium waves-effect waves-light light-blue darken-4 text-right" type="submit" name="action">عضویت
<i class="Large material-icons">send</i>
</button>
</div>
</div>
</div>
</div>
<div class="footer-copyright light-blue">
<div class="container">
<a class="grey-text text-lighten-4 right" href="#!">لینک های دیگر</a>
<div class="cp left">تمامی حقوق این سایت، از جمله نشان قلک و نام تجاری قلک، محفوظ و متعلق به قلک است.
</div>
</div>
</div>
</footer>
</body>
</html>