forked from pehshuwei/barcamp
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex-event.html
689 lines (599 loc) · 25.7 KB
/
index-event.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
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
<!--
@license
Copyright 2017 Peh Shu Wei
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BarCamp Cyberjaya 2019</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans" rel="stylesheet">
<link href="img/favicon.ico" rel="shortcut icon">
<meta charset="UTF-8">
<meta content="BarCamp Cyberjaya 2019" property="og:title">
<meta content="https://www.barcampcyberjaya.org/" property="og:url">
<meta content="https://www.barcampcyberjaya.org/img/opengraphimg.jpg" property="og:image">
<meta content="BarCamp is a user-generated unconference focused around technology. They are open, participatory workshop-events, the content of which is provided by participants. Happening on 5th August 2019." property="og:description">
<meta name="theme-color" content="#07223D">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Event",
"name": "BarCamp Cyberjaya 2019",
"startDate" : "2017-08-05T09:00+0800",
"endDate" : "2017-08-05T18:00+0800",
"url" : "https://www.BarCampcyberjaya.org/",
"location" : {
"@type" : "Place",
"sameAs" : "http://fci.mmu.edu.my",
"name" : "Faculty of Computing & Informatics",
"address" : "Multimedia University, Persiaran Multimedia, 63100 Cyberjaya, Selangor"
},
"description": "Unconference that focuses on technology, programming, and entrepreneurship.",
"image": "https://www.BarCampcyberjaya.org/img/opengraphimg.jpg"
}
</script>
<script src="js/smooth-scroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>
<body>
<!-- navigation -->
<nav class="page_scroll">
<div class="drawer">
<div class="drawer-container">
<a data-scroll href="#home" onClick="toggleDrawer()">Home</a>
<a data-scroll href="#about" onClick="toggleDrawer()">About</a>
<a data-scroll href="#division" onClick="toggleDrawer()">Divisions</a>
<a data-scroll href="#faq" onClick="toggleDrawer()">FAQ</a>
<a data-scroll href="#proposed-talks" onClick="toggleDrawer()">Apply</a>
</div>
<div class="scrim" onClick="toggleDrawer()"></div>
</div>
<div class="nav-bar">
<ul id="nav">
<li id="nav-home">
<a data-scroll href="#home">HOME</a>
</li>
<li id="nav-about">
<a data-scroll href="#about">ABOUT</a>
</li>
<li id="nav-division">
<a data-scroll href="#division">DIVISIONS</a>
</li>
<li id="nav-faq">
<a data-scroll href="#faq">FAQ</a>
</li>
<li id="nav-register">
<a data-scroll href="#proposed-talks" class="border-btn">APPLY</a>
</li>
</ul>
</div>
<div class="nav-bar-mobile">
<svg onClick="toggleDrawer()" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
<g>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="#FFF"></path>
</g>
</svg>
</div>
</nav>
<!-- home -->
<div id="home" >
<div id="bclogo">
<picture>
<source media="(max-width: 900px)" srcset="img/homepage-600.jpg">
<img src="img/homepage.jpg" alt="homepage"/>
</picture>
<ul id="countdown-wrapper">
<div class="wrap">
<h1 class="countdown-title hidden-xl-down">BarCamp Cyberjaya x Jumpstart Program</h1>
<h1 class="countdown-title hidden-xl-up">BarCamp Cyberjaya <br/>x<br/> Jumpstart Program</h1>
<div class="countdown">
<div class="bloc-time days" data-init-value="0">
<span class="count-title">DAYS</span>
<div class="figure hours hours-1">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
<div class="figure hours hours-2">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
</div>
<div class="bloc-time hours" data-init-value="0">
<span class="count-title">HOURS</span>
<div class="figure min min-1">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
<div class="figure min min-2">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
</div>
<div class="bloc-time min" data-init-value="0">
<span class="count-title">MINUTES</span>
<div class="figure sec sec-1">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
<div class="figure sec sec-2">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
</div>
<div class="bloc-time sec" data-init-value="0">
<span class="count-title">SECONDS</span>
<div class="figure sec sec-1">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
<div class="figure sec sec-2">
<span class="top">0</span>
<span class="top-back">
<span>0</span>
</span>
<span class="bottom">0</span>
<span class="bottom-back">
<span>0</span>
</span>
</div>
</div>
</div>
</div>
</ul>
</div>
<div id="slogan" class="row">
<div class="quoteslide">
<div class="quote show">"The term 'BarCamp' has nothing to do with alcohol but everything to do with high spirits - a spirit of sharing ideas in a free and fun environment." - Outlook Business</div>
<div class="quote">"A gathering of folk who, in one way or another, aim to make the world a better place." - Dr Koh Niak Wu</div>
<div class="quote">"BarCamp Cyberjaya its one amazing adhoc event where we see young mind share their idea and get it feedback with industry fellow." - Mr. Curry Khoo</div>
</div>
</div>
<div id="button" class="row">
<a data-scroll href="#proposed-talks" class="button">APPLY</a>
</div>
</div>
<!-- about -->
<div id="about" class="container white-container">
<div class="row">
<h1 class="description">Unlike typical conferences, BarCamp has no preset of speakers. BarCamp is a user-generated conference that brings people together to share their passion!</h1>
</div>
<div class="row">
<div class="two-column">
<p>BarCamp Cyberjaya 2019<br>
<span class="sub">BarCamp Cyberjaya is an annual user-generated unconference with topics surrounding technology and entrepreneurships.
<br><br>
It is open-for-all, with no preset topics and speakers. Everyone who shows up can pick a time-room slot and write down what they would like to talk about.</span></p>
</div>
<div class="two-column">
<p>Jumpstart Program<br>
<span class="sub">It aims to introduce the industrial side to new students as well as expose them to practical skills that could help them tackle their university life.
<br><br>
After organising several events with the industrial side in the past, IT Society is of the opinion that it is necessary to urge students to not only focus on their academics but to also get involved in co-curricular activities and side-projects (mini projects).</span></p>
</div>
</div>
</div>
<!-- past BarCamp photos -->
<div id="past" class="container">
<div class="slides">
<div class="image show"></div>
<div class="image"></div>
<div class="image"></div>
<a class="hover" href="http://bit.ly/bcpastphotos" target="_blank" rel="noopener">BarCamp 2015 & 2016 PHOTOS</a>
</div>
</div>
<!-- Division -->
<div id="division" class="container white-container">
<div class="row">
<h1 class="title">Divisions</h1>
<div class="two-column">
<p>General Affairs Division<br>
<span class="sub">The all-purpose team that handles the internal management of the program activities and ensures that everything is in order.</span></p>
<p>Sponsorship Division<br>
<span class="sub">The team that plays a vital role in ensuring that the event obtains sufficient funding in order to make the event an exciting experience for everyone.</span></p>
</div>
<div class="two-column">
<p>Publicity and Creativity Division<br>
<span class="sub">The creative team that plays a role in attracting and engaging with participants of the event through print media and digital media.</span></p>
<p>Event Management Division<br>
<span class="sub">The team that is responsible in ensuring a conducive ambience and the smooth flow of events during the event day.</span></p>
</div>
</div>
</div>
<!-- proposed talks and form -->
<div id="proposed-talks" class="container">
<div class="row">
<h1 class="center">Join Our Committee</h1>
<form id="gform" class="flex" method="POST" action="https://script.google.com/macros/s/AKfycbxEXotfMRgSIk3KsUE9ETDLLY6cMl5MMHhumTdaDhD5wH2Nk5Ih/exec">
<input class="input" type="text" name="email" id="email" placeholder="Enter your email" required></br>
<input class="input" type="text" name="name" id="name" placeholder="How should we call you?" required></br>
<input class="input" type="text" name="student_id" id="student_id" placeholder="Enter your student ID" required></input></br>
<input class="input" type="text" name="contact" id="contact" placeholder="Enter you contact number" required></input></br>
<div>
<select class="input" name="faculty" id="faculty" required>
<option value="" disabled selected>Select your faculty</option>
<option value="FCI">FCI</option>
<option value="FOE">FOE</option>
<option value="FOM">FOM</option>
<option value="FCM">FCM</option>
<option value="FAC">FAC</option>
</select>
</div>
<input class="input" type="date" name="birthday" id="birthday" placeholder="Date of Birth" required></input></br>
<input class="input" type="textarea" name="free_time" id="free_time" placeholder="How do you spend your free time?" required></input></br>
<input class="input" type="textarea" name="experience" id="experience" placeholder="Briefly describe your past experience" required></input></br>
<div>
<select class="input" name="interview_day" id="interview_day" required>
<option value="" disabled selected>Select an interview day</option>
<option value="" disabled>*Interview time will be between 8.00 p.m - 10.00 p.m</option>
<option value="22 April">22 April</option>
<option value="23 April">23 April</option>
<option value="24 April">24 April</option>
</select>
</div>
<div>
<select class="input wrap-3" name="choice_1" id="choice_1" required>
<option value="" disabled selected>Select first choice</option>
<option value="Sponsorship Division">Sponsorship Division</option>
<option value="Publicity & Creativity Division">Publicity & Creativity Division</option>
<option value="Event Management Division">Event Management Division</option>
<option value="General Affair Division">General Affairs Division</option>
</select>
<select class="input wrap-3" name="choice_2" id="choice_2" required>
<option value="" disabled selected>Select second choice</option>
<option value="Sponsorship Division">Sponsorship Division</option>
<option value="Publicity & Creativity Division">Publicity & Creativity Division</option>
<option value="Event Management Division">Event Management Division</option>
<option value="General Affair Division">General Affairs Division</option>
</select>
<select class="input wrap-3" name="choice_3" id="choice_3" required>
<option value="" disabled selected>Select third choice</option>
<option value="Sponsorship Division">Sponsorship Division</option>
<option value="Publicity & Creativity Division">Publicity & Creativity Division</option>
<option value="Event Management Division">Event Management Division</option>
<option value="General Affair Division">General Affairs Division</option>
</select>
</div>
<button type="submit" name="submit" id="submit">SUBMIT</button>
<p id="tips"></p>
</form>
</div>
</div>
<!-- faq -->
<div id="faq" class="container white-container">
<div class="row">
<h1 class="title">Frequently Asked Questions</h1>
<h2 class="title">What does IT Society do?</h2>
<p>
IT Society aims to empower students as active practitioners of information technology and to represent all FCI students. In the past, IT Society have organized Tech Career Days, BarCamp, industrial trips, and workshops. Visit <a target="_blank" href="itsociety.rocks" title="IT Society">here</a> to learn more.
</p>
<h2 class="title">What are the benefits I can gain from joining a society and co-organizing events?</h2>
<p>
You may be expecting to learn more cool stuffs which you will not get from your classroom experience, such as decision making, event planning and resource management. In addition, you will get the opportunity to network with seniors and working professionals.
</p>
<h2 class="title">What would I have to do if I join?</h2>
<p>
You will be allocated into a specific division according to your wish and strength. You will be involved in event planning before the event day and many more ad-hoc tasks during the event.
</p>
<h2 class="title">How are discussions for events carried out?</h2>
<p>
We will use Slack for online discussions. Depending on the situation. there will be weekly or bi-weekly meeting for offline discussion. Normally, meeting will only carry out at night time which won’t affect your class attendance.
</p>
<h2 class="title">Do I get points for co-curriculum when I join a society and co-organize events?</h2>
<p>
Yes. You can expect to gain SAPS point for participating actively in club and society activities.
</p>
<h2 class="title">Will co-curriculum activities interfere with my academics?</h2>
<p>
Discussions and meetings will only be carried out at night without clashing with exam period and study week.
</p>
</div>
</div>
<footer class="white-container-container">
<div class="row">
<div class="center">
Organised by <b><a href="https://www.itsociety.rocks/" target="_blank" rel="noopener">IT Society MMU Cyberjaya</a></b>
</div>
</div>
</footer>
<script type="text/javascript">
/* --------------------------
* TRANSITION NUMBERS FROM 0
TO CURRENT TIME UNTIL LAUNCH
* -------------------------- */
function numberTransition(id, endPoint, transitionDuration, transitionEase){
// Transition numbers from 0 to the final number
$({numberCount: $(id).text()}).animate({numberCount: endPoint}, {
duration: transitionDuration,
easing:transitionEase,
step: function() {
$(id).text(Math.floor(this.numberCount));
},
complete: function() {
$(id).text(this.numberCount);
}
});
};
/*
* Default css
*/
var slides = document.querySelectorAll('.slides .image');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);
var map;
function nextSlide() {
slides[currentSlide].className = 'image';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'image show';
}
var quoteslide = document.querySelectorAll('.quoteslide .quote');
var qcurrentSlide = 0;
var qslideInterval = setInterval(nextQuoteSlide, 4000);
var qmap;
function nextQuoteSlide() {
quoteslide[qcurrentSlide].className = 'quote';
qcurrentSlide = (qcurrentSlide + 1) % quoteslide.length;
quoteslide[qcurrentSlide].className = 'quote show';
}
function toggleDrawer() {
document.querySelector('.drawer').classList.toggle('show')
}
function getFormData() {
var elements = document.getElementById("gform").elements;
var fields = Object.keys(elements).map(function (k) {
if (elements[k].name !== undefined) {
return elements[k].name;
} else if (elements[k].length > 0) {
return elements[k].item(0).name;
}
}).filter(function (item, pos, self) {
return self.indexOf(item) == pos && item;
});
var data = {};
fields.forEach(function (k) {
data[k] = elements[k].value;
if (elements[k].type === "checkbox") {
data[k] = elements[k].checked;
} else if (elements[k].length) {
for (var i = 0; i < elements[k].length; i++) {
if (elements[k].item(i).checked) {
data[k] = elements[k].item(i).value;
}
}
}
});
return data;
}
function handleFormSubmit(event) {
event.preventDefault();
var data = getFormData();
document.querySelector('#submit').innerHTML = "Loading...";
document.querySelector('#submit').disabled = true;
var url = event.target.action;
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
document.querySelector('#submit').innerHTML = "Form Submitted";
document.getElementById('gform').reset();
document.querySelector('#submit').disabled = false;
document.getElementById('tips').innerHTML = "Thank you for your application.<br/>You will be informed soon about the details of the interview session.";
return;
};
var encoded = Object.keys(data).map(function (k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')
xhr.send(encoded);
}
function loaded() {
var form = document.getElementById('gform');
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener('DOMContentLoaded', loaded, false);
smoothScroll.init();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-66076187-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-66076187-3');
</script>
<!-- Live Chat Widget -->
<script data-align="right" data-overlay="false" id="keyreply-script" src="//keyreply.com/chat/widget.js" data-color="#E4392B" data-apps="JTdCJTIyZmFjZWJvb2slMjI6JTIyMjA2MzIyODQ5NDEyNTQ2JTIyLCUyMmVtYWlsJTIyOiUyMml0c29jLm1tdUBnbWFpbC5jb20lMjIlN0Q="></script>
<!-- Count down script -->
<script type="text/javascript">
// Create Countdown
var Countdown = {
// Backbone-like structure
$el: $('.countdown'),
// Params
countdown_interval: null,
total_seconds : 0,
// Initialize the countdown
init: function() {
// DOM
this.$ = {
days : this.$el.find('.bloc-time.days .figure'),
hours : this.$el.find('.bloc-time.hours .figure'),
minutes: this.$el.find('.bloc-time.min .figure'),
seconds: this.$el.find('.bloc-time.sec .figure')
};
var targetDate = new Date("2019/7/13 00:00:00");
// Other date related variables
var hrs;
var min;
var sec;
/* --------------------------
* FIGURE OUT THE AMOUNT OF
TIME LEFT BEFORE LAUNCH
* -------------------------- */
// Get the current date
var currentDate = new Date();
// Find the difference between dates
var diff = (currentDate - targetDate)/1000;
var diff = Math.abs(Math.floor(diff));
// Check number of days until target
days = Math.floor(diff/(24*60*60));
sec = diff - days * 24*60*60;
// Check number of hours until target
hrs = Math.floor(sec/(60*60));
sec = sec - hrs * 60*60;
// Check number of minutes until target
min = Math.floor(sec/(60));
sec = sec - min * 60;
// Init countdown values
// this.values = {
// hours : this.$.hours.parent().attr('data-init-value'),
// minutes: this.$.minutes.parent().attr('data-init-value'),
// seconds: this.$.seconds.parent().attr('data-init-value'),
// };
this.values = {
days : days,
hours: hrs,
minutes: min,
seconds: sec,
};
// Initialize total seconds
this.total_seconds = this.values.days * 24 * 60 * 60 + (this.values.hours * 60 * 60) + (this.values.minutes * 60) + sec;
// Animate countdown to the end
this.count();
},
count: function() {
var that = this,
$day_1 = this.$.days.eq(0),
$day_2 = this.$.days.eq(1),
$hour_1 = this.$.hours.eq(0),
$hour_2 = this.$.hours.eq(1),
$min_1 = this.$.minutes.eq(0),
$min_2 = this.$.minutes.eq(1);
$sec_1 = this.$.seconds.eq(0);
$sec_2 = this.$.seconds.eq(1);
this.countdown_interval = setInterval(function() {
if(that.total_seconds > 0) {
--that.total_seconds;
that.values.seconds = that.total_seconds % 60;
if(that.values.minutes >= 0 && that.total_seconds % 60 == 0) {
--that.values.minutes;
}
if(that.values.hours >= 0 && that.values.minutes < 0) {
that.values.minutes = 59;
--that.values.hours;
}
if(that.values.days >= 0 && that.values.hours < 0) {
that.values.hours = 23;
--that.values.days;
}
// Update DOM values
// Days
that.checkHour(that.values.days, $day_1, $day_2);
// Hours
that.checkHour(that.values.hours, $hour_1, $hour_2);
// Minutes
that.checkHour(that.values.minutes, $min_1, $min_2);
// Seconds
that.checkHour(that.values.seconds, $sec_1, $sec_2);
}
else {
clearInterval(that.countdown_interval);
}
}, 1000);
},
animateFigure: function($el, value) {
var that = this,
$top = $el.find('.top'),
$bottom = $el.find('.bottom'),
$back_top = $el.find('.top-back'),
$back_bottom = $el.find('.bottom-back');
// Before we begin, change the back value
$back_top.find('span').html(value);
// Also change the back bottom value
$back_bottom.find('span').html(value);
// Then animate
TweenMax.to($top, 0.8, {
rotationX : '-180deg',
transformPerspective: 300,
ease : Quart.easeOut,
onComplete : function() {
$top.html(value);
$bottom.html(value);
TweenMax.set($top, { rotationX: 0 });
}
});
TweenMax.to($back_top, 0.8, {
rotationX : 0,
transformPerspective: 300,
ease : Quart.easeOut,
clearProps : 'all'
});
},
checkHour: function(value, $el_1, $el_2) {
var val_1 = value.toString().charAt(0),
val_2 = value.toString().charAt(1),
fig_1_value = $el_1.find('.top').html(),
fig_2_value = $el_2.find('.top').html();
if(value >= 10) {
// Animate only if the figure has changed
if(fig_1_value !== val_1) this.animateFigure($el_1, val_1);
if(fig_2_value !== val_2) this.animateFigure($el_2, val_2);
}
else {
// If we are under 10, replace first figure with 0
if(fig_1_value !== '0') this.animateFigure($el_1, 0);
if(fig_2_value !== val_1) this.animateFigure($el_2, val_1);
}
}
};
// Let's go !
Countdown.init();
</script>
</body>
</html>