├── .editorconfig
├── .github
    ├── ISSUE_TEMPLATE.md
    └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── README.md
├── animate.css
├── favicon.png
├── fonts
    ├── againts-webfont.woff
    └── againts-webfont.woff2
├── images
    ├── favicon.png
    ├── logo.png
    ├── poster.jpg
    └── speaker
    │   ├── 001.png
    │   ├── 002.png
    │   ├── 003.png
    │   ├── 004.png
    │   ├── 005.png
    │   ├── 006.png
    │   ├── 007.png
    │   ├── 008.png
    │   ├── 009.png
    │   ├── 010.png
    │   ├── 011.png
    │   ├── 012.png
    │   ├── 013.png
    │   ├── 014.png
    │   ├── 015.png
    │   ├── 016.png
    │   ├── 017.png
    │   └── 018.png
├── img
    ├── 3dDoge.gif
    ├── map.jpg
    ├── prontotools.png
    └── sirisoft.png
├── index.html
├── script
    └── clock.js
├── snow.js
├── style.css
└── test


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | root = true
3 | indent_size = 2
4 | indent_style = space


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | As a `<type of user>`, I want `<some goal>` so that `<business value or reason>`.
 2 | 
 3 | #### Exit Criteria
 4 | - [ ] xxx
 5 | 
 6 | #### Additional Note
 7 | - xxx
 8 | 
 9 | ---
10 | 
11 | #### Reproduction Steps
12 | > What is the step by step process you followed to create the bug?
13 | 
14 | #### Observe
15 | > What is the error/broken page/ etc you see?
16 | 
17 | #### Expect
18 | > What should you see?
19 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | Changes proposed in this pull request:
2 | - xxx
3 | - yyy
4 | - zzz
5 | 
6 | Connected to #.
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | 
  8 | # Runtime data
  9 | pids
 10 | *.pid
 11 | *.seed
 12 | *.pid.lock
 13 | 
 14 | # Directory for instrumented libs generated by jscoverage/JSCover
 15 | lib-cov
 16 | 
 17 | # Coverage directory used by tools like istanbul
 18 | coverage
 19 | 
 20 | # nyc test coverage
 21 | .nyc_output
 22 | 
 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 24 | .grunt
 25 | 
 26 | # Bower dependency directory (https://bower.io/)
 27 | bower_components
 28 | 
 29 | # node-waf configuration
 30 | .lock-wscript
 31 | 
 32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
 33 | build/Release
 34 | 
 35 | # Dependency directories
 36 | node_modules/
 37 | jspm_packages/
 38 | 
 39 | # Typescript v1 declaration files
 40 | typings/
 41 | 
 42 | # Optional npm cache directory
 43 | .npm
 44 | 
 45 | # Optional eslint cache
 46 | .eslintcache
 47 | 
 48 | # Optional REPL history
 49 | .node_repl_history
 50 | 
 51 | # Output of 'npm pack'
 52 | *.tgz
 53 | 
 54 | # Yarn Integrity file
 55 | .yarn-integrity
 56 | 
 57 | # dotenv environment variables file
 58 | .env
 59 | 
 60 | 
 61 | # General
 62 | .DS_Store
 63 | .AppleDouble
 64 | .LSOverride
 65 | 
 66 | # Icon must end with two \r
 67 | Icon
 68 | 
 69 | 
 70 | # Thumbnails
 71 | ._*
 72 | 
 73 | # Files that might appear in the root of a volume
 74 | .DocumentRevisions-V100
 75 | .fseventsd
 76 | .Spotlight-V100
 77 | .TemporaryItems
 78 | .Trashes
 79 | .VolumeIcon.icns
 80 | .com.apple.timemachine.donotpresent
 81 | 
 82 | # Directories potentially created on remote AFP share
 83 | .AppleDB
 84 | .AppleDesktop
 85 | Network Trash Folder
 86 | Temporary Items
 87 | .apdisk
 88 | 
 89 | 
 90 | # Xcode
 91 | #
 92 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
 93 | 
 94 | ## User settings
 95 | xcuserdata/
 96 | 
 97 | ## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9)
 98 | *.xcscmblueprint
 99 | *.xccheckout
100 | 
101 | ## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4)
102 | build/
103 | DerivedData/
104 | *.moved-aside
105 | *.pbxuser
106 | !default.pbxuser
107 | *.mode1v3
108 | !default.mode1v3
109 | *.mode2v3
110 | !default.mode2v3
111 | *.perspectivev3
112 | !default.perspectivev3
113 | 
114 | 
115 | .vscode/*
116 | !.vscode/settings.json
117 | !.vscode/tasks.json
118 | !.vscode/launch.json
119 | !.vscode/extensions.json
120 | 
121 | 
122 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
123 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
124 | 
125 | # User-specific stuff:
126 | .idea/**/workspace.xml
127 | .idea/**/tasks.xml
128 | .idea/dictionaries
129 | 
130 | # Sensitive or high-churn files:
131 | .idea/**/dataSources/
132 | .idea/**/dataSources.ids
133 | .idea/**/dataSources.xml
134 | .idea/**/dataSources.local.xml
135 | .idea/**/sqlDataSources.xml
136 | .idea/**/dynamic.xml
137 | .idea/**/uiDesigner.xml
138 | 
139 | # Gradle:
140 | .idea/**/gradle.xml
141 | .idea/**/libraries
142 | 
143 | # CMake
144 | cmake-build-debug/
145 | 
146 | # Mongo Explorer plugin:
147 | .idea/**/mongoSettings.xml
148 | 
149 | ## File-based project format:
150 | *.iws
151 | 
152 | ## Plugin-specific files:
153 | 
154 | # IntelliJ
155 | out/
156 | 
157 | # mpeltonen/sbt-idea plugin
158 | .idea_modules/
159 | 
160 | # JIRA plugin
161 | atlassian-ide-plugin.xml
162 | 
163 | # Cursive Clojure plugin
164 | .idea/replstate.xml
165 | 
166 | # Crashlytics plugin (for Android Studio and IntelliJ)
167 | com_crashlytics_export_strings.xml
168 | crashlytics.properties
169 | crashlytics-build.properties
170 | fabric.properties
171 | 
172 | 
173 | 
174 | # Swap
175 | [._]*.s[a-v][a-z]
176 | [._]*.sw[a-p]
177 | [._]s[a-v][a-z]
178 | [._]sw[a-p]
179 | 
180 | # Session
181 | Session.vim
182 | 
183 | # Temporary
184 | .netrwhist
185 | *~
186 | # Auto-generated tag files
187 | tags
188 | 
189 | 
190 | # Cache files for Sublime Text
191 | *.tmlanguage.cache
192 | *.tmPreferences.cache
193 | *.stTheme.cache
194 | 
195 | # Workspace files are user-specific
196 | *.sublime-workspace
197 | 
198 | # Project files should be checked into the repository, unless a significant
199 | # proportion of contributors will probably not be using Sublime Text
200 | # *.sublime-project
201 | 
202 | # SFTP configuration file
203 | sftp-config.json
204 | 
205 | # Package control specific files
206 | Package Control.last-run
207 | Package Control.ca-list
208 | Package Control.ca-bundle
209 | Package Control.system-ca-bundle
210 | Package Control.cache/
211 | Package Control.ca-certs/
212 | Package Control.merged-ca-bundle
213 | Package Control.user-ca-bundle
214 | oscrypto-ca-bundle.crt
215 | bh_unicode_properties.cache
216 | 
217 | # Sublime-github package stores a github token in this file
218 | # https://packagecontrol.io/packages/sublime-github
219 | GitHub.sublime-settings
220 | 
221 | 
222 | # Notepad++ backups #
223 | *.bak
224 | 
225 | 
226 | *~
227 | 
228 | # temporary files which can be created if a process still has a handle open of a deleted file
229 | .fuse_hidden*
230 | 
231 | # KDE directory preferences
232 | .directory
233 | 
234 | # Linux trash folder which might appear on any partition or disk
235 | .Trash-*
236 | 
237 | # .nfs files are created when an open file is removed but is still being accessed
238 | .nfs*
239 | 
240 | 
241 | 
242 | .metadata
243 | bin/
244 | tmp/
245 | *.tmp
246 | *.bak
247 | *.swp
248 | *~.nib
249 | local.properties
250 | .settings/
251 | .loadpath
252 | .recommenders
253 | 
254 | # External tool builders
255 | .externalToolBuilders/
256 | 
257 | # Locally stored "Eclipse launch configurations"
258 | *.launch
259 | 
260 | # PyDev specific (Python IDE for Eclipse)
261 | *.pydevproject
262 | 
263 | # CDT-specific (C/C++ Development Tooling)
264 | .cproject
265 | 
266 | # Java annotation processor (APT)
267 | .factorypath
268 | 
269 | # PDT-specific (PHP Development Tools)
270 | .buildpath
271 | 
272 | # sbteclipse plugin
273 | .target
274 | 
275 | # Tern plugin
276 | .tern-project
277 | 
278 | # TeXlipse plugin
279 | .texlipse
280 | 
281 | # STS (Spring Tool Suite)
282 | .springBeans
283 | 
284 | # Code Recommenders
285 | .recommenders/
286 | 
287 | # Scala IDE specific (Scala & Java development for Eclipse)
288 | .cache-main
289 | .scala_dependencies
290 | .worksheet
291 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # code-mania-110
 2 | 
 3 | Code Mania 110 website.
 4 | 
 5 | This website is collaboratively built as part of a workshop:
 6 | “Let’s start contributing to open source!”
 7 | 
 8 | Contributions to this website is welcome!
 9 | 
10 | ## Demo
11 | 
12 | You can view the website at [thaiprogrammer.github.io/code-mania-110](https://thaiprogrammer.github.io/code-mania-110/)
13 | 
14 | ## Contribution Cheatsheet
15 | 
16 | ### Step 1 Fork
17 | 
18 | fork this GitHub (top-right button)
19 | 
20 | ### Step 2 Clone
21 | 
22 | clone forked GitHub repo
23 | 
24 | ```
25 | $git clone https://github.com/your-name/code-mania-110.git
26 | ```
27 | 
28 | where ```your-name``` is your GitHub ID
29 | 
30 | ### Step 3 Develop
31 | 
32 | - create a branch
33 | 
34 | ```
35 | $git checkout -b <branch-name>
36 | ```
37 | 
38 | - add untracked files
39 | 
40 | ```
41 | $git add .
42 | ```
43 | 
44 | - commit changes
45 | 
46 | ```
47 | $git commit -a -m "your short description"
48 | ```
49 | 
50 | - push changes
51 | 
52 | ```
53 | $git push origin <branch-name>
54 | ```
55 | 
56 | 
57 | - switch branch to master
58 | 
59 | ```
60 | $git checkout master
61 | ```
62 | 
63 | - merge to master
64 | 
65 | ```
66 | $git merge <branch-name>
67 | ```
68 | 
69 | ### Step 4 Pull Request
70 | 
71 | click send Pull Request button on your GitHub
72 | 


--------------------------------------------------------------------------------
/animate.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | 
   3 | /*!
   4 |  * animate.css -http://daneden.me/animate
   5 |  * Version - 3.5.2
   6 |  * Licensed under the MIT license - http://opensource.org/licenses/MIT
   7 |  *
   8 |  * Copyright (c) 2017 Daniel Eden
   9 |  */
  10 | 
  11 | .animated {
  12 |   animation-duration: 1s;
  13 |   animation-fill-mode: both;
  14 | }
  15 | 
  16 | .animated.infinite {
  17 |   animation-iteration-count: infinite;
  18 | }
  19 | 
  20 | .animated.hinge {
  21 |   animation-duration: 2s;
  22 | }
  23 | 
  24 | .animated.flipOutX,
  25 | .animated.flipOutY,
  26 | .animated.bounceIn,
  27 | .animated.bounceOut {
  28 |   animation-duration: .75s;
  29 | }
  30 | 
  31 | @keyframes bounce {
  32 |   from, 20%, 53%, 80%, to {
  33 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  34 |     transform: translate3d(0,0,0);
  35 |   }
  36 | 
  37 |   40%, 43% {
  38 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  39 |     transform: translate3d(0, -30px, 0);
  40 |   }
  41 | 
  42 |   70% {
  43 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  44 |     transform: translate3d(0, -15px, 0);
  45 |   }
  46 | 
  47 |   90% {
  48 |     transform: translate3d(0,-4px,0);
  49 |   }
  50 | }
  51 | 
  52 | .bounce {
  53 |   animation-name: bounce;
  54 |   transform-origin: center bottom;
  55 | }
  56 | 
  57 | @keyframes flash {
  58 |   from, 50%, to {
  59 |     opacity: 1;
  60 |   }
  61 | 
  62 |   25%, 75% {
  63 |     opacity: 0;
  64 |   }
  65 | }
  66 | 
  67 | .flash {
  68 |   animation-name: flash;
  69 | }
  70 | 
  71 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  72 | 
  73 | @keyframes pulse {
  74 |   from {
  75 |     transform: scale3d(1, 1, 1);
  76 |   }
  77 | 
  78 |   50% {
  79 |     transform: scale3d(1.05, 1.05, 1.05);
  80 |   }
  81 | 
  82 |   to {
  83 |     transform: scale3d(1, 1, 1);
  84 |   }
  85 | }
  86 | 
  87 | .pulse {
  88 |   animation-name: pulse;
  89 | }
  90 | 
  91 | @keyframes rubberBand {
  92 |   from {
  93 |     transform: scale3d(1, 1, 1);
  94 |   }
  95 | 
  96 |   30% {
  97 |     transform: scale3d(1.25, 0.75, 1);
  98 |   }
  99 | 
 100 |   40% {
 101 |     transform: scale3d(0.75, 1.25, 1);
 102 |   }
 103 | 
 104 |   50% {
 105 |     transform: scale3d(1.15, 0.85, 1);
 106 |   }
 107 | 
 108 |   65% {
 109 |     transform: scale3d(.95, 1.05, 1);
 110 |   }
 111 | 
 112 |   75% {
 113 |     transform: scale3d(1.05, .95, 1);
 114 |   }
 115 | 
 116 |   to {
 117 |     transform: scale3d(1, 1, 1);
 118 |   }
 119 | }
 120 | 
 121 | .rubberBand {
 122 |   animation-name: rubberBand;
 123 | }
 124 | 
 125 | @keyframes shake {
 126 |   from, to {
 127 |     transform: translate3d(0, 0, 0);
 128 |   }
 129 | 
 130 |   10%, 30%, 50%, 70%, 90% {
 131 |     transform: translate3d(-10px, 0, 0);
 132 |   }
 133 | 
 134 |   20%, 40%, 60%, 80% {
 135 |     transform: translate3d(10px, 0, 0);
 136 |   }
 137 | }
 138 | 
 139 | .shake {
 140 |   animation-name: shake;
 141 | }
 142 | 
 143 | @keyframes headShake {
 144 |   0% {
 145 |     transform: translateX(0);
 146 |   }
 147 | 
 148 |   6.5% {
 149 |     transform: translateX(-6px) rotateY(-9deg);
 150 |   }
 151 | 
 152 |   18.5% {
 153 |     transform: translateX(5px) rotateY(7deg);
 154 |   }
 155 | 
 156 |   31.5% {
 157 |     transform: translateX(-3px) rotateY(-5deg);
 158 |   }
 159 | 
 160 |   43.5% {
 161 |     transform: translateX(2px) rotateY(3deg);
 162 |   }
 163 | 
 164 |   50% {
 165 |     transform: translateX(0);
 166 |   }
 167 | }
 168 | 
 169 | .headShake {
 170 |   animation-timing-function: ease-in-out;
 171 |   animation-name: headShake;
 172 | }
 173 | 
 174 | @keyframes swing {
 175 |   20% {
 176 |     transform: rotate3d(0, 0, 1, 15deg);
 177 |   }
 178 | 
 179 |   40% {
 180 |     transform: rotate3d(0, 0, 1, -10deg);
 181 |   }
 182 | 
 183 |   60% {
 184 |     transform: rotate3d(0, 0, 1, 5deg);
 185 |   }
 186 | 
 187 |   80% {
 188 |     transform: rotate3d(0, 0, 1, -5deg);
 189 |   }
 190 | 
 191 |   to {
 192 |     transform: rotate3d(0, 0, 1, 0deg);
 193 |   }
 194 | }
 195 | 
 196 | .swing {
 197 |   transform-origin: top center;
 198 |   animation-name: swing;
 199 | }
 200 | 
 201 | @keyframes tada {
 202 |   from {
 203 |     transform: scale3d(1, 1, 1);
 204 |   }
 205 | 
 206 |   10%, 20% {
 207 |     transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 208 |   }
 209 | 
 210 |   30%, 50%, 70%, 90% {
 211 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 212 |   }
 213 | 
 214 |   40%, 60%, 80% {
 215 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 216 |   }
 217 | 
 218 |   to {
 219 |     transform: scale3d(1, 1, 1);
 220 |   }
 221 | }
 222 | 
 223 | .tada {
 224 |   animation-name: tada;
 225 | }
 226 | 
 227 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 228 | 
 229 | @keyframes wobble {
 230 |   from {
 231 |     transform: none;
 232 |   }
 233 | 
 234 |   15% {
 235 |     transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 236 |   }
 237 | 
 238 |   30% {
 239 |     transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 240 |   }
 241 | 
 242 |   45% {
 243 |     transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 244 |   }
 245 | 
 246 |   60% {
 247 |     transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 248 |   }
 249 | 
 250 |   75% {
 251 |     transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 252 |   }
 253 | 
 254 |   to {
 255 |     transform: none;
 256 |   }
 257 | }
 258 | 
 259 | .wobble {
 260 |   animation-name: wobble;
 261 | }
 262 | 
 263 | @keyframes jello {
 264 |   from, 11.1%, to {
 265 |     transform: none;
 266 |   }
 267 | 
 268 |   22.2% {
 269 |     transform: skewX(-12.5deg) skewY(-12.5deg);
 270 |   }
 271 | 
 272 |   33.3% {
 273 |     transform: skewX(6.25deg) skewY(6.25deg);
 274 |   }
 275 | 
 276 |   44.4% {
 277 |     transform: skewX(-3.125deg) skewY(-3.125deg);
 278 |   }
 279 | 
 280 |   55.5% {
 281 |     transform: skewX(1.5625deg) skewY(1.5625deg);
 282 |   }
 283 | 
 284 |   66.6% {
 285 |     transform: skewX(-0.78125deg) skewY(-0.78125deg);
 286 |   }
 287 | 
 288 |   77.7% {
 289 |     transform: skewX(0.390625deg) skewY(0.390625deg);
 290 |   }
 291 | 
 292 |   88.8% {
 293 |     transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 294 |   }
 295 | }
 296 | 
 297 | .jello {
 298 |   animation-name: jello;
 299 |   transform-origin: center;
 300 | }
 301 | 
 302 | @keyframes bounceIn {
 303 |   from, 20%, 40%, 60%, 80%, to {
 304 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 305 |   }
 306 | 
 307 |   0% {
 308 |     opacity: 0;
 309 |     transform: scale3d(.3, .3, .3);
 310 |   }
 311 | 
 312 |   20% {
 313 |     transform: scale3d(1.1, 1.1, 1.1);
 314 |   }
 315 | 
 316 |   40% {
 317 |     transform: scale3d(.9, .9, .9);
 318 |   }
 319 | 
 320 |   60% {
 321 |     opacity: 1;
 322 |     transform: scale3d(1.03, 1.03, 1.03);
 323 |   }
 324 | 
 325 |   80% {
 326 |     transform: scale3d(.97, .97, .97);
 327 |   }
 328 | 
 329 |   to {
 330 |     opacity: 1;
 331 |     transform: scale3d(1, 1, 1);
 332 |   }
 333 | }
 334 | 
 335 | .bounceIn {
 336 |   animation-name: bounceIn;
 337 | }
 338 | 
 339 | @keyframes bounceInDown {
 340 |   from, 60%, 75%, 90%, to {
 341 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 342 |   }
 343 | 
 344 |   0% {
 345 |     opacity: 0;
 346 |     transform: translate3d(0, -3000px, 0);
 347 |   }
 348 | 
 349 |   60% {
 350 |     opacity: 1;
 351 |     transform: translate3d(0, 25px, 0);
 352 |   }
 353 | 
 354 |   75% {
 355 |     transform: translate3d(0, -10px, 0);
 356 |   }
 357 | 
 358 |   90% {
 359 |     transform: translate3d(0, 5px, 0);
 360 |   }
 361 | 
 362 |   to {
 363 |     transform: none;
 364 |   }
 365 | }
 366 | 
 367 | .bounceInDown {
 368 |   animation-name: bounceInDown;
 369 | }
 370 | 
 371 | @keyframes bounceInLeft {
 372 |   from, 60%, 75%, 90%, to {
 373 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 374 |   }
 375 | 
 376 |   0% {
 377 |     opacity: 0;
 378 |     transform: translate3d(-3000px, 0, 0);
 379 |   }
 380 | 
 381 |   60% {
 382 |     opacity: 1;
 383 |     transform: translate3d(25px, 0, 0);
 384 |   }
 385 | 
 386 |   75% {
 387 |     transform: translate3d(-10px, 0, 0);
 388 |   }
 389 | 
 390 |   90% {
 391 |     transform: translate3d(5px, 0, 0);
 392 |   }
 393 | 
 394 |   to {
 395 |     transform: none;
 396 |   }
 397 | }
 398 | 
 399 | .bounceInLeft {
 400 |   animation-name: bounceInLeft;
 401 | }
 402 | 
 403 | @keyframes bounceInRight {
 404 |   from, 60%, 75%, 90%, to {
 405 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 406 |   }
 407 | 
 408 |   from {
 409 |     opacity: 0;
 410 |     transform: translate3d(3000px, 0, 0);
 411 |   }
 412 | 
 413 |   60% {
 414 |     opacity: 1;
 415 |     transform: translate3d(-25px, 0, 0);
 416 |   }
 417 | 
 418 |   75% {
 419 |     transform: translate3d(10px, 0, 0);
 420 |   }
 421 | 
 422 |   90% {
 423 |     transform: translate3d(-5px, 0, 0);
 424 |   }
 425 | 
 426 |   to {
 427 |     transform: none;
 428 |   }
 429 | }
 430 | 
 431 | .bounceInRight {
 432 |   animation-name: bounceInRight;
 433 | }
 434 | 
 435 | @keyframes bounceInUp {
 436 |   from, 60%, 75%, 90%, to {
 437 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 438 |   }
 439 | 
 440 |   from {
 441 |     opacity: 0;
 442 |     transform: translate3d(0, 3000px, 0);
 443 |   }
 444 | 
 445 |   60% {
 446 |     opacity: 1;
 447 |     transform: translate3d(0, -20px, 0);
 448 |   }
 449 | 
 450 |   75% {
 451 |     transform: translate3d(0, 10px, 0);
 452 |   }
 453 | 
 454 |   90% {
 455 |     transform: translate3d(0, -5px, 0);
 456 |   }
 457 | 
 458 |   to {
 459 |     transform: translate3d(0, 0, 0);
 460 |   }
 461 | }
 462 | 
 463 | .bounceInUp {
 464 |   animation-name: bounceInUp;
 465 | }
 466 | 
 467 | @keyframes bounceOut {
 468 |   20% {
 469 |     transform: scale3d(.9, .9, .9);
 470 |   }
 471 | 
 472 |   50%, 55% {
 473 |     opacity: 1;
 474 |     transform: scale3d(1.1, 1.1, 1.1);
 475 |   }
 476 | 
 477 |   to {
 478 |     opacity: 0;
 479 |     transform: scale3d(.3, .3, .3);
 480 |   }
 481 | }
 482 | 
 483 | .bounceOut {
 484 |   animation-name: bounceOut;
 485 | }
 486 | 
 487 | @keyframes bounceOutDown {
 488 |   20% {
 489 |     transform: translate3d(0, 10px, 0);
 490 |   }
 491 | 
 492 |   40%, 45% {
 493 |     opacity: 1;
 494 |     transform: translate3d(0, -20px, 0);
 495 |   }
 496 | 
 497 |   to {
 498 |     opacity: 0;
 499 |     transform: translate3d(0, 2000px, 0);
 500 |   }
 501 | }
 502 | 
 503 | .bounceOutDown {
 504 |   animation-name: bounceOutDown;
 505 | }
 506 | 
 507 | @keyframes bounceOutLeft {
 508 |   20% {
 509 |     opacity: 1;
 510 |     transform: translate3d(20px, 0, 0);
 511 |   }
 512 | 
 513 |   to {
 514 |     opacity: 0;
 515 |     transform: translate3d(-2000px, 0, 0);
 516 |   }
 517 | }
 518 | 
 519 | .bounceOutLeft {
 520 |   animation-name: bounceOutLeft;
 521 | }
 522 | 
 523 | @keyframes bounceOutRight {
 524 |   20% {
 525 |     opacity: 1;
 526 |     transform: translate3d(-20px, 0, 0);
 527 |   }
 528 | 
 529 |   to {
 530 |     opacity: 0;
 531 |     transform: translate3d(2000px, 0, 0);
 532 |   }
 533 | }
 534 | 
 535 | .bounceOutRight {
 536 |   animation-name: bounceOutRight;
 537 | }
 538 | 
 539 | @keyframes bounceOutUp {
 540 |   20% {
 541 |     transform: translate3d(0, -10px, 0);
 542 |   }
 543 | 
 544 |   40%, 45% {
 545 |     opacity: 1;
 546 |     transform: translate3d(0, 20px, 0);
 547 |   }
 548 | 
 549 |   to {
 550 |     opacity: 0;
 551 |     transform: translate3d(0, -2000px, 0);
 552 |   }
 553 | }
 554 | 
 555 | .bounceOutUp {
 556 |   animation-name: bounceOutUp;
 557 | }
 558 | 
 559 | @keyframes fadeIn {
 560 |   from {
 561 |     opacity: 0;
 562 |   }
 563 | 
 564 |   to {
 565 |     opacity: 1;
 566 |   }
 567 | }
 568 | 
 569 | .fadeIn {
 570 |   animation-name: fadeIn;
 571 | }
 572 | 
 573 | @keyframes fadeInDown {
 574 |   from {
 575 |     opacity: 0;
 576 |     transform: translate3d(0, -100%, 0);
 577 |   }
 578 | 
 579 |   to {
 580 |     opacity: 1;
 581 |     transform: none;
 582 |   }
 583 | }
 584 | 
 585 | .fadeInDown {
 586 |   animation-name: fadeInDown;
 587 | }
 588 | 
 589 | @keyframes fadeInDownBig {
 590 |   from {
 591 |     opacity: 0;
 592 |     transform: translate3d(0, -2000px, 0);
 593 |   }
 594 | 
 595 |   to {
 596 |     opacity: 1;
 597 |     transform: none;
 598 |   }
 599 | }
 600 | 
 601 | .fadeInDownBig {
 602 |   animation-name: fadeInDownBig;
 603 | }
 604 | 
 605 | @keyframes fadeInLeft {
 606 |   from {
 607 |     opacity: 0;
 608 |     transform: translate3d(-100%, 0, 0);
 609 |   }
 610 | 
 611 |   to {
 612 |     opacity: 1;
 613 |     transform: none;
 614 |   }
 615 | }
 616 | 
 617 | .fadeInLeft {
 618 |   animation-name: fadeInLeft;
 619 | }
 620 | 
 621 | @keyframes fadeInLeftBig {
 622 |   from {
 623 |     opacity: 0;
 624 |     transform: translate3d(-2000px, 0, 0);
 625 |   }
 626 | 
 627 |   to {
 628 |     opacity: 1;
 629 |     transform: none;
 630 |   }
 631 | }
 632 | 
 633 | .fadeInLeftBig {
 634 |   animation-name: fadeInLeftBig;
 635 | }
 636 | 
 637 | @keyframes fadeInRight {
 638 |   from {
 639 |     opacity: 0;
 640 |     transform: translate3d(100%, 0, 0);
 641 |   }
 642 | 
 643 |   to {
 644 |     opacity: 1;
 645 |     transform: none;
 646 |   }
 647 | }
 648 | 
 649 | .fadeInRight {
 650 |   animation-name: fadeInRight;
 651 | }
 652 | 
 653 | @keyframes fadeInRightBig {
 654 |   from {
 655 |     opacity: 0;
 656 |     transform: translate3d(2000px, 0, 0);
 657 |   }
 658 | 
 659 |   to {
 660 |     opacity: 1;
 661 |     transform: none;
 662 |   }
 663 | }
 664 | 
 665 | .fadeInRightBig {
 666 |   animation-name: fadeInRightBig;
 667 | }
 668 | 
 669 | @keyframes fadeInUp {
 670 |   from {
 671 |     opacity: 0;
 672 |     transform: translate3d(0, 100%, 0);
 673 |   }
 674 | 
 675 |   to {
 676 |     opacity: 1;
 677 |     transform: none;
 678 |   }
 679 | }
 680 | 
 681 | .fadeInUp {
 682 |   animation-name: fadeInUp;
 683 | }
 684 | 
 685 | @keyframes fadeInUpBig {
 686 |   from {
 687 |     opacity: 0;
 688 |     transform: translate3d(0, 2000px, 0);
 689 |   }
 690 | 
 691 |   to {
 692 |     opacity: 1;
 693 |     transform: none;
 694 |   }
 695 | }
 696 | 
 697 | .fadeInUpBig {
 698 |   animation-name: fadeInUpBig;
 699 | }
 700 | 
 701 | @keyframes fadeOut {
 702 |   from {
 703 |     opacity: 1;
 704 |   }
 705 | 
 706 |   to {
 707 |     opacity: 0;
 708 |   }
 709 | }
 710 | 
 711 | .fadeOut {
 712 |   animation-name: fadeOut;
 713 | }
 714 | 
 715 | @keyframes fadeOutDown {
 716 |   from {
 717 |     opacity: 1;
 718 |   }
 719 | 
 720 |   to {
 721 |     opacity: 0;
 722 |     transform: translate3d(0, 100%, 0);
 723 |   }
 724 | }
 725 | 
 726 | .fadeOutDown {
 727 |   animation-name: fadeOutDown;
 728 | }
 729 | 
 730 | @keyframes fadeOutDownBig {
 731 |   from {
 732 |     opacity: 1;
 733 |   }
 734 | 
 735 |   to {
 736 |     opacity: 0;
 737 |     transform: translate3d(0, 2000px, 0);
 738 |   }
 739 | }
 740 | 
 741 | .fadeOutDownBig {
 742 |   animation-name: fadeOutDownBig;
 743 | }
 744 | 
 745 | @keyframes fadeOutLeft {
 746 |   from {
 747 |     opacity: 1;
 748 |   }
 749 | 
 750 |   to {
 751 |     opacity: 0;
 752 |     transform: translate3d(-100%, 0, 0);
 753 |   }
 754 | }
 755 | 
 756 | .fadeOutLeft {
 757 |   animation-name: fadeOutLeft;
 758 | }
 759 | 
 760 | @keyframes fadeOutLeftBig {
 761 |   from {
 762 |     opacity: 1;
 763 |   }
 764 | 
 765 |   to {
 766 |     opacity: 0;
 767 |     transform: translate3d(-2000px, 0, 0);
 768 |   }
 769 | }
 770 | 
 771 | .fadeOutLeftBig {
 772 |   animation-name: fadeOutLeftBig;
 773 | }
 774 | 
 775 | @keyframes fadeOutRight {
 776 |   from {
 777 |     opacity: 1;
 778 |   }
 779 | 
 780 |   to {
 781 |     opacity: 0;
 782 |     transform: translate3d(100%, 0, 0);
 783 |   }
 784 | }
 785 | 
 786 | .fadeOutRight {
 787 |   animation-name: fadeOutRight;
 788 | }
 789 | 
 790 | @keyframes fadeOutRightBig {
 791 |   from {
 792 |     opacity: 1;
 793 |   }
 794 | 
 795 |   to {
 796 |     opacity: 0;
 797 |     transform: translate3d(2000px, 0, 0);
 798 |   }
 799 | }
 800 | 
 801 | .fadeOutRightBig {
 802 |   animation-name: fadeOutRightBig;
 803 | }
 804 | 
 805 | @keyframes fadeOutUp {
 806 |   from {
 807 |     opacity: 1;
 808 |   }
 809 | 
 810 |   to {
 811 |     opacity: 0;
 812 |     transform: translate3d(0, -100%, 0);
 813 |   }
 814 | }
 815 | 
 816 | .fadeOutUp {
 817 |   animation-name: fadeOutUp;
 818 | }
 819 | 
 820 | @keyframes fadeOutUpBig {
 821 |   from {
 822 |     opacity: 1;
 823 |   }
 824 | 
 825 |   to {
 826 |     opacity: 0;
 827 |     transform: translate3d(0, -2000px, 0);
 828 |   }
 829 | }
 830 | 
 831 | .fadeOutUpBig {
 832 |   animation-name: fadeOutUpBig;
 833 | }
 834 | 
 835 | @keyframes flip {
 836 |   from {
 837 |     transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 838 |     animation-timing-function: ease-out;
 839 |   }
 840 | 
 841 |   40% {
 842 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 843 |     animation-timing-function: ease-out;
 844 |   }
 845 | 
 846 |   50% {
 847 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 848 |     animation-timing-function: ease-in;
 849 |   }
 850 | 
 851 |   80% {
 852 |     transform: perspective(400px) scale3d(.95, .95, .95);
 853 |     animation-timing-function: ease-in;
 854 |   }
 855 | 
 856 |   to {
 857 |     transform: perspective(400px);
 858 |     animation-timing-function: ease-in;
 859 |   }
 860 | }
 861 | 
 862 | .animated.flip {
 863 |   -webkit-backface-visibility: visible;
 864 |   backface-visibility: visible;
 865 |   animation-name: flip;
 866 | }
 867 | 
 868 | @keyframes flipInX {
 869 |   from {
 870 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 871 |     animation-timing-function: ease-in;
 872 |     opacity: 0;
 873 |   }
 874 | 
 875 |   40% {
 876 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 877 |     animation-timing-function: ease-in;
 878 |   }
 879 | 
 880 |   60% {
 881 |     transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 882 |     opacity: 1;
 883 |   }
 884 | 
 885 |   80% {
 886 |     transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 887 |   }
 888 | 
 889 |   to {
 890 |     transform: perspective(400px);
 891 |   }
 892 | }
 893 | 
 894 | .flipInX {
 895 |   -webkit-backface-visibility: visible !important;
 896 |   backface-visibility: visible !important;
 897 |   animation-name: flipInX;
 898 | }
 899 | 
 900 | @keyframes flipInY {
 901 |   from {
 902 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 903 |     animation-timing-function: ease-in;
 904 |     opacity: 0;
 905 |   }
 906 | 
 907 |   40% {
 908 |     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 909 |     animation-timing-function: ease-in;
 910 |   }
 911 | 
 912 |   60% {
 913 |     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 914 |     opacity: 1;
 915 |   }
 916 | 
 917 |   80% {
 918 |     transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 919 |   }
 920 | 
 921 |   to {
 922 |     transform: perspective(400px);
 923 |   }
 924 | }
 925 | 
 926 | .flipInY {
 927 |   -webkit-backface-visibility: visible !important;
 928 |   backface-visibility: visible !important;
 929 |   animation-name: flipInY;
 930 | }
 931 | 
 932 | @keyframes flipOutX {
 933 |   from {
 934 |     transform: perspective(400px);
 935 |   }
 936 | 
 937 |   30% {
 938 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 939 |     opacity: 1;
 940 |   }
 941 | 
 942 |   to {
 943 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 944 |     opacity: 0;
 945 |   }
 946 | }
 947 | 
 948 | .flipOutX {
 949 |   animation-name: flipOutX;
 950 |   -webkit-backface-visibility: visible !important;
 951 |   backface-visibility: visible !important;
 952 | }
 953 | 
 954 | @keyframes flipOutY {
 955 |   from {
 956 |     transform: perspective(400px);
 957 |   }
 958 | 
 959 |   30% {
 960 |     transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 961 |     opacity: 1;
 962 |   }
 963 | 
 964 |   to {
 965 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 966 |     opacity: 0;
 967 |   }
 968 | }
 969 | 
 970 | .flipOutY {
 971 |   -webkit-backface-visibility: visible !important;
 972 |   backface-visibility: visible !important;
 973 |   animation-name: flipOutY;
 974 | }
 975 | 
 976 | @keyframes lightSpeedIn {
 977 |   from {
 978 |     transform: translate3d(100%, 0, 0) skewX(-30deg);
 979 |     opacity: 0;
 980 |   }
 981 | 
 982 |   60% {
 983 |     transform: skewX(20deg);
 984 |     opacity: 1;
 985 |   }
 986 | 
 987 |   80% {
 988 |     transform: skewX(-5deg);
 989 |     opacity: 1;
 990 |   }
 991 | 
 992 |   to {
 993 |     transform: none;
 994 |     opacity: 1;
 995 |   }
 996 | }
 997 | 
 998 | .lightSpeedIn {
 999 |   animation-name: lightSpeedIn;
1000 |   animation-timing-function: ease-out;
1001 | }
1002 | 
1003 | @keyframes lightSpeedOut {
1004 |   from {
1005 |     opacity: 1;
1006 |   }
1007 | 
1008 |   to {
1009 |     transform: translate3d(100%, 0, 0) skewX(30deg);
1010 |     opacity: 0;
1011 |   }
1012 | }
1013 | 
1014 | .lightSpeedOut {
1015 |   animation-name: lightSpeedOut;
1016 |   animation-timing-function: ease-in;
1017 | }
1018 | 
1019 | @keyframes rotateIn {
1020 |   from {
1021 |     transform-origin: center;
1022 |     transform: rotate3d(0, 0, 1, -200deg);
1023 |     opacity: 0;
1024 |   }
1025 | 
1026 |   to {
1027 |     transform-origin: center;
1028 |     transform: none;
1029 |     opacity: 1;
1030 |   }
1031 | }
1032 | 
1033 | .rotateIn {
1034 |   animation-name: rotateIn;
1035 | }
1036 | 
1037 | @keyframes rotateInDownLeft {
1038 |   from {
1039 |     transform-origin: left bottom;
1040 |     transform: rotate3d(0, 0, 1, -45deg);
1041 |     opacity: 0;
1042 |   }
1043 | 
1044 |   to {
1045 |     transform-origin: left bottom;
1046 |     transform: none;
1047 |     opacity: 1;
1048 |   }
1049 | }
1050 | 
1051 | .rotateInDownLeft {
1052 |   animation-name: rotateInDownLeft;
1053 | }
1054 | 
1055 | @keyframes rotateInDownRight {
1056 |   from {
1057 |     transform-origin: right bottom;
1058 |     transform: rotate3d(0, 0, 1, 45deg);
1059 |     opacity: 0;
1060 |   }
1061 | 
1062 |   to {
1063 |     transform-origin: right bottom;
1064 |     transform: none;
1065 |     opacity: 1;
1066 |   }
1067 | }
1068 | 
1069 | .rotateInDownRight {
1070 |   animation-name: rotateInDownRight;
1071 | }
1072 | 
1073 | @keyframes rotateInUpLeft {
1074 |   from {
1075 |     transform-origin: left bottom;
1076 |     transform: rotate3d(0, 0, 1, 45deg);
1077 |     opacity: 0;
1078 |   }
1079 | 
1080 |   to {
1081 |     transform-origin: left bottom;
1082 |     transform: none;
1083 |     opacity: 1;
1084 |   }
1085 | }
1086 | 
1087 | .rotateInUpLeft {
1088 |   animation-name: rotateInUpLeft;
1089 | }
1090 | 
1091 | @keyframes rotateInUpRight {
1092 |   from {
1093 |     transform-origin: right bottom;
1094 |     transform: rotate3d(0, 0, 1, -90deg);
1095 |     opacity: 0;
1096 |   }
1097 | 
1098 |   to {
1099 |     transform-origin: right bottom;
1100 |     transform: none;
1101 |     opacity: 1;
1102 |   }
1103 | }
1104 | 
1105 | .rotateInUpRight {
1106 |   animation-name: rotateInUpRight;
1107 | }
1108 | 
1109 | @keyframes rotateOut {
1110 |   from {
1111 |     transform-origin: center;
1112 |     opacity: 1;
1113 |   }
1114 | 
1115 |   to {
1116 |     transform-origin: center;
1117 |     transform: rotate3d(0, 0, 1, 200deg);
1118 |     opacity: 0;
1119 |   }
1120 | }
1121 | 
1122 | .rotateOut {
1123 |   animation-name: rotateOut;
1124 | }
1125 | 
1126 | @keyframes rotateOutDownLeft {
1127 |   from {
1128 |     transform-origin: left bottom;
1129 |     opacity: 1;
1130 |   }
1131 | 
1132 |   to {
1133 |     transform-origin: left bottom;
1134 |     transform: rotate3d(0, 0, 1, 45deg);
1135 |     opacity: 0;
1136 |   }
1137 | }
1138 | 
1139 | .rotateOutDownLeft {
1140 |   animation-name: rotateOutDownLeft;
1141 | }
1142 | 
1143 | @keyframes rotateOutDownRight {
1144 |   from {
1145 |     transform-origin: right bottom;
1146 |     opacity: 1;
1147 |   }
1148 | 
1149 |   to {
1150 |     transform-origin: right bottom;
1151 |     transform: rotate3d(0, 0, 1, -45deg);
1152 |     opacity: 0;
1153 |   }
1154 | }
1155 | 
1156 | .rotateOutDownRight {
1157 |   animation-name: rotateOutDownRight;
1158 | }
1159 | 
1160 | @keyframes rotateOutUpLeft {
1161 |   from {
1162 |     transform-origin: left bottom;
1163 |     opacity: 1;
1164 |   }
1165 | 
1166 |   to {
1167 |     transform-origin: left bottom;
1168 |     transform: rotate3d(0, 0, 1, -45deg);
1169 |     opacity: 0;
1170 |   }
1171 | }
1172 | 
1173 | .rotateOutUpLeft {
1174 |   animation-name: rotateOutUpLeft;
1175 | }
1176 | 
1177 | @keyframes rotateOutUpRight {
1178 |   from {
1179 |     transform-origin: right bottom;
1180 |     opacity: 1;
1181 |   }
1182 | 
1183 |   to {
1184 |     transform-origin: right bottom;
1185 |     transform: rotate3d(0, 0, 1, 90deg);
1186 |     opacity: 0;
1187 |   }
1188 | }
1189 | 
1190 | .rotateOutUpRight {
1191 |   animation-name: rotateOutUpRight;
1192 | }
1193 | 
1194 | @keyframes hinge {
1195 |   0% {
1196 |     transform-origin: top left;
1197 |     animation-timing-function: ease-in-out;
1198 |   }
1199 | 
1200 |   20%, 60% {
1201 |     transform: rotate3d(0, 0, 1, 80deg);
1202 |     transform-origin: top left;
1203 |     animation-timing-function: ease-in-out;
1204 |   }
1205 | 
1206 |   40%, 80% {
1207 |     transform: rotate3d(0, 0, 1, 60deg);
1208 |     transform-origin: top left;
1209 |     animation-timing-function: ease-in-out;
1210 |     opacity: 1;
1211 |   }
1212 | 
1213 |   to {
1214 |     transform: translate3d(0, 700px, 0);
1215 |     opacity: 0;
1216 |   }
1217 | }
1218 | 
1219 | .hinge {
1220 |   animation-name: hinge;
1221 | }
1222 | 
1223 | @keyframes jackInTheBox {
1224 |   from {
1225 |     opacity: 0;
1226 |     transform: scale(0.1) rotate(30deg);
1227 |     transform-origin: center bottom;
1228 |   }
1229 | 
1230 |   50% {
1231 |     transform: rotate(-10deg);
1232 |   }
1233 | 
1234 |   70% {
1235 |     transform: rotate(3deg);
1236 |   }
1237 | 
1238 |   to {
1239 |     opacity: 1;
1240 |     transform: scale(1);
1241 |   }
1242 | }
1243 | 
1244 | .jackInTheBox {
1245 |   animation-name: jackInTheBox;
1246 | }
1247 | 
1248 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1249 | 
1250 | @keyframes rollIn {
1251 |   from {
1252 |     opacity: 0;
1253 |     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
1254 |   }
1255 | 
1256 |   to {
1257 |     opacity: 1;
1258 |     transform: none;
1259 |   }
1260 | }
1261 | 
1262 | .rollIn {
1263 |   animation-name: rollIn;
1264 | }
1265 | 
1266 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1267 | 
1268 | @keyframes rollOut {
1269 |   from {
1270 |     opacity: 1;
1271 |   }
1272 | 
1273 |   to {
1274 |     opacity: 0;
1275 |     transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
1276 |   }
1277 | }
1278 | 
1279 | .rollOut {
1280 |   animation-name: rollOut;
1281 | }
1282 | 
1283 | @keyframes zoomIn {
1284 |   from {
1285 |     opacity: 0;
1286 |     transform: scale3d(.3, .3, .3);
1287 |   }
1288 | 
1289 |   50% {
1290 |     opacity: 1;
1291 |   }
1292 | }
1293 | 
1294 | .zoomIn {
1295 |   animation-name: zoomIn;
1296 | }
1297 | 
1298 | @keyframes zoomInDown {
1299 |   from {
1300 |     opacity: 0;
1301 |     transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1302 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1303 |   }
1304 | 
1305 |   60% {
1306 |     opacity: 1;
1307 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1308 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1309 |   }
1310 | }
1311 | 
1312 | .zoomInDown {
1313 |   animation-name: zoomInDown;
1314 | }
1315 | 
1316 | @keyframes zoomInLeft {
1317 |   from {
1318 |     opacity: 0;
1319 |     transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
1320 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1321 |   }
1322 | 
1323 |   60% {
1324 |     opacity: 1;
1325 |     transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
1326 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1327 |   }
1328 | }
1329 | 
1330 | .zoomInLeft {
1331 |   animation-name: zoomInLeft;
1332 | }
1333 | 
1334 | @keyframes zoomInRight {
1335 |   from {
1336 |     opacity: 0;
1337 |     transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
1338 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1339 |   }
1340 | 
1341 |   60% {
1342 |     opacity: 1;
1343 |     transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
1344 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1345 |   }
1346 | }
1347 | 
1348 | .zoomInRight {
1349 |   animation-name: zoomInRight;
1350 | }
1351 | 
1352 | @keyframes zoomInUp {
1353 |   from {
1354 |     opacity: 0;
1355 |     transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
1356 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1357 |   }
1358 | 
1359 |   60% {
1360 |     opacity: 1;
1361 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1362 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1363 |   }
1364 | }
1365 | 
1366 | .zoomInUp {
1367 |   animation-name: zoomInUp;
1368 | }
1369 | 
1370 | @keyframes zoomOut {
1371 |   from {
1372 |     opacity: 1;
1373 |   }
1374 | 
1375 |   50% {
1376 |     opacity: 0;
1377 |     transform: scale3d(.3, .3, .3);
1378 |   }
1379 | 
1380 |   to {
1381 |     opacity: 0;
1382 |   }
1383 | }
1384 | 
1385 | .zoomOut {
1386 |   animation-name: zoomOut;
1387 | }
1388 | 
1389 | @keyframes zoomOutDown {
1390 |   40% {
1391 |     opacity: 1;
1392 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1393 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1394 |   }
1395 | 
1396 |   to {
1397 |     opacity: 0;
1398 |     transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
1399 |     transform-origin: center bottom;
1400 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1401 |   }
1402 | }
1403 | 
1404 | .zoomOutDown {
1405 |   animation-name: zoomOutDown;
1406 | }
1407 | 
1408 | @keyframes zoomOutLeft {
1409 |   40% {
1410 |     opacity: 1;
1411 |     transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
1412 |   }
1413 | 
1414 |   to {
1415 |     opacity: 0;
1416 |     transform: scale(.1) translate3d(-2000px, 0, 0);
1417 |     transform-origin: left center;
1418 |   }
1419 | }
1420 | 
1421 | .zoomOutLeft {
1422 |   animation-name: zoomOutLeft;
1423 | }
1424 | 
1425 | @keyframes zoomOutRight {
1426 |   40% {
1427 |     opacity: 1;
1428 |     transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
1429 |   }
1430 | 
1431 |   to {
1432 |     opacity: 0;
1433 |     transform: scale(.1) translate3d(2000px, 0, 0);
1434 |     transform-origin: right center;
1435 |   }
1436 | }
1437 | 
1438 | .zoomOutRight {
1439 |   animation-name: zoomOutRight;
1440 | }
1441 | 
1442 | @keyframes zoomOutUp {
1443 |   40% {
1444 |     opacity: 1;
1445 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1446 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1447 |   }
1448 | 
1449 |   to {
1450 |     opacity: 0;
1451 |     transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
1452 |     transform-origin: center bottom;
1453 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1454 |   }
1455 | }
1456 | 
1457 | .zoomOutUp {
1458 |   animation-name: zoomOutUp;
1459 | }
1460 | 
1461 | @keyframes slideInDown {
1462 |   from {
1463 |     transform: translate3d(0, -100%, 0);
1464 |     visibility: visible;
1465 |   }
1466 | 
1467 |   to {
1468 |     transform: translate3d(0, 0, 0);
1469 |   }
1470 | }
1471 | 
1472 | .slideInDown {
1473 |   animation-name: slideInDown;
1474 | }
1475 | 
1476 | @keyframes slideInLeft {
1477 |   from {
1478 |     transform: translate3d(-100%, 0, 0);
1479 |     visibility: visible;
1480 |   }
1481 | 
1482 |   to {
1483 |     transform: translate3d(0, 0, 0);
1484 |   }
1485 | }
1486 | 
1487 | .slideInLeft {
1488 |   animation-name: slideInLeft;
1489 | }
1490 | 
1491 | @keyframes slideInRight {
1492 |   from {
1493 |     transform: translate3d(100%, 0, 0);
1494 |     visibility: visible;
1495 |   }
1496 | 
1497 |   to {
1498 |     transform: translate3d(0, 0, 0);
1499 |   }
1500 | }
1501 | 
1502 | .slideInRight {
1503 |   animation-name: slideInRight;
1504 | }
1505 | 
1506 | @keyframes slideInUp {
1507 |   from {
1508 |     transform: translate3d(0, 100%, 0);
1509 |     visibility: visible;
1510 |   }
1511 | 
1512 |   to {
1513 |     transform: translate3d(0, 0, 0);
1514 |   }
1515 | }
1516 | 
1517 | .slideInUp {
1518 |   animation-name: slideInUp;
1519 | }
1520 | 
1521 | @keyframes slideOutDown {
1522 |   from {
1523 |     transform: translate3d(0, 0, 0);
1524 |   }
1525 | 
1526 |   to {
1527 |     visibility: hidden;
1528 |     transform: translate3d(0, 100%, 0);
1529 |   }
1530 | }
1531 | 
1532 | .slideOutDown {
1533 |   animation-name: slideOutDown;
1534 | }
1535 | 
1536 | @keyframes slideOutLeft {
1537 |   from {
1538 |     transform: translate3d(0, 0, 0);
1539 |   }
1540 | 
1541 |   to {
1542 |     visibility: hidden;
1543 |     transform: translate3d(-100%, 0, 0);
1544 |   }
1545 | }
1546 | 
1547 | .slideOutLeft {
1548 |   animation-name: slideOutLeft;
1549 | }
1550 | 
1551 | @keyframes slideOutRight {
1552 |   from {
1553 |     transform: translate3d(0, 0, 0);
1554 |   }
1555 | 
1556 |   to {
1557 |     visibility: hidden;
1558 |     transform: translate3d(100%, 0, 0);
1559 |   }
1560 | }
1561 | 
1562 | .slideOutRight {
1563 |   animation-name: slideOutRight;
1564 | }
1565 | 
1566 | @keyframes slideOutUp {
1567 |   from {
1568 |     transform: translate3d(0, 0, 0);
1569 |   }
1570 | 
1571 |   to {
1572 |     visibility: hidden;
1573 |     transform: translate3d(0, -100%, 0);
1574 |   }
1575 | }
1576 | 
1577 | .slideOutUp {
1578 |   animation-name: slideOutUp;
1579 | }
1580 | 


--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/favicon.png


--------------------------------------------------------------------------------
/fonts/againts-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/fonts/againts-webfont.woff


--------------------------------------------------------------------------------
/fonts/againts-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/fonts/againts-webfont.woff2


--------------------------------------------------------------------------------
/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/favicon.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/logo.png


--------------------------------------------------------------------------------
/images/poster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/poster.jpg


--------------------------------------------------------------------------------
/images/speaker/001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/001.png


--------------------------------------------------------------------------------
/images/speaker/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/002.png


--------------------------------------------------------------------------------
/images/speaker/003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/003.png


--------------------------------------------------------------------------------
/images/speaker/004.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/004.png


--------------------------------------------------------------------------------
/images/speaker/005.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/005.png


--------------------------------------------------------------------------------
/images/speaker/006.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/006.png


--------------------------------------------------------------------------------
/images/speaker/007.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/007.png


--------------------------------------------------------------------------------
/images/speaker/008.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/008.png


--------------------------------------------------------------------------------
/images/speaker/009.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/009.png


--------------------------------------------------------------------------------
/images/speaker/010.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/010.png


--------------------------------------------------------------------------------
/images/speaker/011.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/011.png


--------------------------------------------------------------------------------
/images/speaker/012.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/012.png


--------------------------------------------------------------------------------
/images/speaker/013.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/013.png


--------------------------------------------------------------------------------
/images/speaker/014.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/014.png


--------------------------------------------------------------------------------
/images/speaker/015.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/015.png


--------------------------------------------------------------------------------
/images/speaker/016.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/016.png


--------------------------------------------------------------------------------
/images/speaker/017.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/017.png


--------------------------------------------------------------------------------
/images/speaker/018.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/images/speaker/018.png


--------------------------------------------------------------------------------
/img/3dDoge.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/img/3dDoge.gif


--------------------------------------------------------------------------------
/img/map.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/img/map.jpg


--------------------------------------------------------------------------------
/img/prontotools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/img/prontotools.png


--------------------------------------------------------------------------------
/img/sirisoft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/img/sirisoft.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <link rel="shortcut icon" type="image/png" href="./favicon.png" />
  8 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |   <link rel="stylesheet" href="animate.css">
 10 |   <title>Code Mania 110: Moving Forwards, Open Source World</title>
 11 |   <link href="https://fonts.googleapis.com/css?family=Barlow+Condensed|Kanit" rel="stylesheet">
 12 |   <link rel="stylesheet" href="style.css">
 13 |   <script src="snow.js" type="text/javascript"></script>
 14 | </head>
 15 | 
 16 | <body>
 17 |   <div class="animated fadeIn">
 18 | 
 19 |     <section id="bar">
 20 |       <div id="logo"></div>
 21 |     </section>
 22 | 
 23 |     <section id="event-info">
 24 |       <h1 id="event-info__title">Code Mania
 25 |         <span style="color:red;">110</span>
 26 |       </h1>
 27 |       <p id="event-info__tagline">Moving Forwards, Open Source World</p>
 28 |       <p id="event-info__date">วันเสาร์ที่ 25 พฤศจิกายน 2560</p>
 29 |       <p id="event-info__place">
 30 |         <a href="http://www4.sit.kmutt.ac.th/" target="_blank">คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยพระจอมเกล้าธนบุรี (บางมด)</a>
 31 |       </p>
 32 |     </section>
 33 | 
 34 |     <section>
 35 |       <img src="images/poster.jpg" style="margin: 0 auto;display:block;">
 36 |     </section>
 37 | 
 38 |     <section id="map">
 39 |       <img src="img/map.jpg">
 40 |     </section>
 41 | 
 42 |     <center>
 43 |       <section id="event-description">
 44 |         <p>
 45 |           ในหลากหลายสิ่งนั้นในปัจจุบันล้วนถูกขับเคลื่อนด้วย Open Source Project ฉะนั้น Code Mania ในครั้งนี้จึงอัดแน่นไปด้วย Session
 46 |           ที่ล้วนเกี่ยวข้องกับ Open Source ในด้านต่างๆ ตั้งแต่ Philosophy, แนะนำ Open Source Project ที่จะช่วยให้การทำงานในแขนงต่างๆ
 47 |           ไม่ว่าจะเป็น Frontend, Backend, Infrastructure และ Security ง่ายขึ้น ตลอดจนแนวทางในการร่วมเป็นส่วนหนึ่งในการ Contribute
 48 |           Open source project โดยในครั้งนี้ได้รับเกียรติจากเหล่าวิทยากรผู้เชี่ยวชาญจากหลากหลายแขนง ที่จะมาถ่ายทอดวิชาแบบลงลึกถึง
 49 |           technical/code กันภายในงาน
 50 |         </p>
 51 |       </section>
 52 |     </center>
 53 | 
 54 |     <h2 id="sessions__heading">Sessions</h2>
 55 |     <section class="sessions_section">
 56 |       <ul class="sessions__list">
 57 |         <!-- registration -->
 58 |         <li class="session-time">08:30 - 09:30</li>
 59 |         <li class="session-item">
 60 |           <h3 class="session-item__title">ลงทะเบียน</h3>
 61 |         </li>
 62 | 
 63 |         <!-- opening -->
 64 |         <li class="session-time">09:30 - 10:00</li>
 65 |         <li class="session-item">
 66 |           <h3 class="session-item__title">Opening Ceremony</h3>
 67 |           <p class="session-item__description">ตัวแทนจากสมาคมโปรแกรมเมอร์ไทยกล่าวเปิดงาน รศ.ดร.วชิรศักดิ์ วานิชชา</p>
 68 |         </li>
 69 | 
 70 |         <!-- keynote 1 -->
 71 |         <li class="session-time">10:00 - 10:30</li>
 72 |         <li class="session-item">
 73 |           <img class="session-item__speaker_image" src="images/speaker/001.png">
 74 |           <em class="session-item__speaker">Dr. Virot Chirophadhanakul</em>
 75 |           <h3 class="session-item__title">Keynote "The Rise of the Open Movement"</h3>
 76 |           <p class="session-item__description">การ Opensource เกี่ยวกับ Machine Learning</p>
 77 |         </li>
 78 | 
 79 |         <!-- keynote 2 -->
 80 |         <li class="session-time">10:30 - 11:00</li>
 81 |         <li class="session-item">
 82 |           <img class="session-item__speaker_image" src="images/speaker/002.png">
 83 |           <em class="session-item__speaker">K.Twin Panichsombat</em>
 84 |           <h3 class="session-item__title">Keynote: " Crafting Culture in Open Source Community "</h3>
 85 |           <p class="session-item__description">เรื่องราวเกี่ยวกับการสร้าง software และ culture ในองกรค์ที่ดี!</p>
 86 |         </li>
 87 | 
 88 |         <!-- keynote 3 -->
 89 |         <li class="session-time">11:00 - 12:15</li>
 90 |         <li class="session-item">
 91 |           <img class="session-item__speaker_image" src="images/speaker/003.png">
 92 |           <em class="session-item__speaker">Thai Pansakulyanont</em>
 93 |           <h3 class="session-item__title">Session 3</h3>
 94 |           <p class="session-item__description">Description 3</p>
 95 |           <p class="session-item__description">
 96 |             <a href="https://github.com/Roshanjossey/first-contributions/blob/master/translations/README.th.md">Contribute" ผลงานใน GitHub กับผู้อื่นครั้งแรกใช่ไหม?</a>
 97 |           </p>
 98 |         </li>
 99 | 
100 |         <!-- lunch -->
101 |         <li class="session-time">12:15 - 13:00</li>
102 |         <li class="session-item">
103 |           <h3 class="session-item__title">Lunch Break</h3>
104 |         </li>
105 | 
106 |       </ul>
107 |     </section>
108 |     <section class="sessions_section">
109 |       <ul class="sessions__list">
110 |         <!-- afternoon 1 -->
111 |         <li class="session-time">13:00 - 13:50</li>
112 |         <li class="session-multi">
113 |           <ul>
114 |             <li class="session-item session-item--split">
115 |               <strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
116 |               <img class="session-item__speaker_image" src="images/speaker/004.png">
117 |               <em class="session-item__speaker">K.Sorawit Saengkyongam</em>
118 |               <h3 class="session-item__title">TensorFlow in Practice</h3>
119 |               <p class="session-item__description">Description 4</p>
120 |             </li>
121 |             <li class="session-item session-item--split">
122 |               <strong class="session-item__room">Room No. 2201</strong>
123 |               <img class="session-item__speaker_image" src="images/speaker/007.png">
124 |               <em class="session-item__speaker">K. Somkiat Khitwongwattana</em>
125 |               <h3 class="session-item__title">Develop You Own Library Is More Than Just Coding</h3>
126 |               <p class="session-item__description">Description 5</p>
127 |             </li>
128 |             <li class="session-item session-item--split">
129 |               <strong class="session-item__room">Room No. 2301</strong>
130 |               <img class="session-item__speaker_image" src="images/speaker/010.png">
131 |               <em class="session-item__speaker">K. Manatsawin Hanmongkolchai</em>
132 |               <h3 class="session-item__title">Wongnai Infrastructure กับ Open Source</h3>
133 |               <p class="session-item__description">เล่าถึงซอฟต์แวร์ต่างๆ ที่ใช้อยู่ในระบบวงในซึ่งเราเลือกใช้เป็น OPEN SOURCE เกือบทั้งหมด และยังมีการ CONTRIBUTE กลับไปให้โครงการในหลายๆจุดที่เป็นปัญหาของเราด้วย รวมทั้งเราก็มีโครงการภายในของเราเองที่เปิดเป็น OPEN SOURCE เช่นเดียวกัน </p>
134 |             </li>
135 |           </ul>
136 |         </li>
137 | 
138 |         <!-- afternoon 2 -->
139 |         <li class="session-time">13:50 - 14:40</li>
140 |         <li class="session-multi">
141 |           <ul>
142 |             <li class="session-item session-item--split">
143 |               <strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
144 |               <img class="session-item__speaker_image" src="images/speaker/005.png">
145 |               <em class="session-item__speaker">ดมเคช เผือดผุด</em>
146 |               <h3 class="session-item__title">Session 7</h3>
147 |               <p class="session-item__description">Description 7</p>
148 |             </li>
149 |             <li class="session-item session-item--split">
150 |               <strong class="session-item__room">Room No. 2201</strong>
151 |               <img class="session-item__speaker_image" src="images/speaker/008.png">
152 |               <em class="session-item__speaker">Chaitapong Phong Lapliengtrakul</em>
153 |               <h3 class="session-item__title">Session 8</h3>
154 |               <p class="session-item__description">Description 8</p>
155 |             </li>
156 |             <li class="session-item session-item--split">
157 |               <strong class="session-item__room">Room No. 2301</strong>
158 |               <img class="session-item__speaker_image" src="images/speaker/011.png">
159 |               <em class="session-item__speaker">Khomkrit Viangvises</em>
160 |               <h3 class="session-item__title">Session 9</h3>
161 |               <p class="session-item__description">Description 9</p>
162 |             </li>
163 |           </ul>
164 |         </li>
165 | 
166 |         <!-- afternoon 3 -->
167 |         <li class="session-time">14:40 - 15:30</li>
168 |         <li class="session-multi">
169 |           <ul>
170 |             <li class="session-item session-item--split">
171 |               <strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
172 |               <img class="session-item__speaker_image" src="images/speaker/006.png">
173 |               <em class="session-item__speaker">นเรศ เก็จรัมย์</em>
174 |               <h3 class="session-item__title">มากกว่า Memcached, ktserver</h3>
175 |               <p class="session-item__description">การใช้งาน memcached นั้นมีข้อจำกัดคือ ไฟดับแล้วข้อมูลหาย ปัญหานี้จะหายไป ถ้าใช้ ktserver ซึ่งเป็น Open Source Software
176 |                 ที่ไม่มีแม้กระทั้งโลโก้ของตัวเอง แต่ว่าบริษัทระดับ CloudFlare เลือกใช้, มากกว่า memcached คือ ktserver</p>
177 |             </li>
178 |             <li></li>
179 |             <li class="session-item session-item--split">
180 |               <strong class="session-item__room">Room No. 2201</strong>
181 |               <img class="session-item__speaker_image" src="images/speaker/009.png">
182 |               <em class="session-item__speaker">Pitiphong Phongpattranont</em>
183 |               <h3 class="session-item__title">Session 11</h3>
184 |               <p class="session-item__description">Description 11</p>
185 |             </li>
186 |             <li></li>
187 |             <li class="session-item session-item--split">
188 |               <strong class="session-item__room">Room No. 2301</strong>
189 |               <img class="session-item__speaker_image" src="images/speaker/012.png">
190 |               <em class="session-item__speaker">รศ.ดร.วชิรศักดิ์ วานิชชา</em>
191 |               <h3 class="session-item__title">Session 12</h3>
192 |               <p class="session-item__description">Description 12</p>
193 |             </li>
194 |           </ul>
195 |         </li>
196 | 
197 |         <!-- afternoon break -->
198 |         <li class="session-time">15:30 - 15:40</li>
199 |         <li class="session-item">
200 |           <h3 class="session-item__title">Break</h3>
201 |         </li>
202 | 
203 |         <!-- afternoon 4 -->
204 |         <li class="session-time">15:40 - 16:30</li>
205 |         <li class="session-multi">
206 |           <ul>
207 |             <li class="session-item session-item--split">
208 |               <strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
209 |               <img class="session-item__speaker_image" src="images/speaker/013.png">
210 |               <em class="session-item__speaker">Thanatat Tamtan</em>
211 |               <h3 class="session-item__title">Kubernetes - How to use and contribute back to economy system</h3>
212 |               <p class="session-item__description">By K.Thanatat Tamtan</p>
213 |             </li>
214 |             <li></li>
215 |             <li class="session-item session-item--split">
216 |               <strong class="session-item__room">Room No. 2201</strong>
217 |               <img class="session-item__speaker_image" src="images/speaker/015.png">
218 |               <em class="session-item__speaker">ธีศิษฐ์ ก้อนแก้ว</em>
219 |               <h3 class="session-item__title">Session 14</h3>
220 |               <p class="session-item__description">Description 14</p>
221 |             </li>
222 |             <li></li>
223 |             <li class="session-item session-item--split">
224 |               <strong class="session-item__room">Room No. 2301</strong>
225 |               <img class="session-item__speaker_image" src="images/speaker/017.png">
226 |               <em class="session-item__speaker">ปิตุพงศ์ ยาวิราช</em>
227 |               <h3 class="session-item__title">Session 15</h3>
228 |               <p class="session-item__description">Description 15</p>
229 |             </li>
230 |           </ul>
231 |         </li>
232 | 
233 |         <!-- afternoon 5 -->
234 |         <li class="session-time">16:30 - 17:20</li>
235 |         <li class="session-multi">
236 |           <ul>
237 |             <li class="session-item session-item--split">
238 |               <strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
239 |               <img class="session-item__speaker_image" src="images/speaker/014.png">
240 |               <em class="session-item__speaker">จิรายุส นิ่มแสง</em>
241 |               <h3 class="session-item__title">Session 16</h3>
242 |               <p class="session-item__description">Description 16</p>
243 |             </li>
244 |             <li></li>
245 |             <li class="session-item session-item--split">
246 |               <strong class="session-item__room">Room No. 2201</strong>
247 |               <img class="session-item__speaker_image" src="images/speaker/016.png">
248 |               <em class="session-item__speaker">Weerasak Chongnguluam</em>
249 |               <h3 class="session-item__title">Session 17</h3>
250 |               <p class="session-item__description">Description 17</p>
251 |             </li>
252 |             <li></li>
253 |             <li class="session-item session-item--split">
254 |               <strong class="session-item__room">Room No. 2301</strong>
255 |               <img class="session-item__speaker_image" src="images/speaker/018.png">
256 |               <em class="session-item__speaker">Jakrit Tamnakpho</em>
257 |               <h3 class="session-item__title">Server-Side Swift</h3>
258 |               <p class="session-item__description">Description 18</p>
259 |             </li>
260 |           </ul>
261 |         </li>
262 | 
263 |         <!-- end -->
264 |         <li class="session-time">17:20 -</li>
265 |         <li class="session-item session-item--split">
266 |           <h3 class="session-item__title">Time to go home</h3>
267 |         </li>
268 |       </ul>
269 |     </section>
270 | 
271 |     <section id="sponsors">
272 |       <h2 id="sponsor-info__title">Sponsors</h2>
273 |       <section id="sponsors-list">
274 |         <div class="sponsors_img" style=" background-size: 200% auto !important;  background: url(http://sprint3r.com/assets/img/sprint3r-cover.png); "></div>
275 |         <div class="sponsors_img" style="background: url(https://scontent.fbkk4-2.fna.fbcdn.net/v/t31.0-8/1961704_847218042005160_4114954717237014808_o.jpg?_nc_eui2=v1%3AAeFbA-lAZgmXXmdUI8an1Yj2VKwyH-Thgr4mZsg4s7uAsQsqokvzSVYttSHyoqPljqJS35Dk2WOCMmCjPlS2Jx127LMQ0OZ0bv_-Y7NHszZsJA&oh=870272cb59f982ab4b6cadd0a73328d2&oe=5AA8E84A);"></div>
276 |         <div class="sponsors_img" style="background: url(https://www4.sit.kmutt.ac.th/files/20070621_SITlogoMix01.jpg);"></div>
277 |         <div class="sponsors_img" style="background: url(https://company-profile-images.s3.amazonaws.com/images/435736/983427/logo/thoughtworks-logo.jpg);"></div>
278 |         <div class="sponsors_img" style="background: url(https://sensorstechforum.com/wp-content/uploads/2017/01/oracle-logo.png);"></div>
279 |         <div class="sponsors_img" style="background: url(img/prontotools.png);"></div>
280 |         <div class="sponsors_img" style="background: url(img/sirisoft.png);"></div>
281 |       </section>
282 |     </section>
283 |     
284 |     <section id="section-video">
285 |       <iframe width="560" height="315" src="https://www.youtube.com/embed/ZdO6_ZvIwLE" frameborder="0" allowfullscreen></iframe>
286 |     </section>
287 |   
288 |     <footer>
289 |       <p>Powered by Code Mania 110</p>
290 |     </footer>
291 | 
292 |   </div>
293 | </body>
294 | 
295 | </html>
296 | 


--------------------------------------------------------------------------------
/script/clock.js:
--------------------------------------------------------------------------------
  1 | var ClockHeight = 40;
  2 | var ClockWidth = 40;
  3 | var ClockFromMouseY = 20;
  4 | var ClockFromMouseX = 80;
  5 | 
  6 | //Alter nothing below! Alignments will be lost!
  7 | 
  8 | var Clock_size = 1.5;
  9 | var speed = 0.8;
 10 | 
 11 | var ns4 = (document.layers);
 12 | 
 13 | var ymouse = 0;
 14 | var xmouse = 0;
 15 | var scrll = 0;
 16 | 
 17 | var Split;
 18 | var Dsplit;
 19 | 
 20 | var HandHeight = ClockHeight / 4.5;
 21 | var HandWidth = ClockWidth / 4.5;
 22 | var HandY = -7;
 23 | var HandX = -2.5;
 24 | var step = 0.06;
 25 | var currStep = 0;
 26 | 
 27 | var y = new Array();
 28 | var x = new Array();
 29 | var Y = new Array();
 30 | var X = new Array();
 31 | 
 32 | var Dy = new Array();
 33 | var Dx = new Array();
 34 | var DY = new Array();
 35 | var DX = new Array();
 36 | 
 37 | var faceElements = new Array();
 38 | var dateElements = new Array();
 39 | var hourElements = new Array();
 40 | var minuteElements = new Array();
 41 | var secondElements = new Array();
 42 | 
 43 | function drawClock() {
 44 | 
 45 |   var dayOfWeekNames = ["SUNDAY", "MONDAY",
 46 |       "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY"];
 47 |   var monthNames = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY",
 48 |       "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
 49 | 
 50 |   var date = new Date();
 51 |   var year = date.getYear();
 52 |   if (year < 2000)
 53 |     year = year + 1900;
 54 | 
 55 |   var dateRing = " " + dayOfWeekNames[date.getDay()] + " " + date.getDate()
 56 |                  + " " + monthNames[date.getMonth()] + " " + year;
 57 |   dateRing = dateRing.split("");
 58 |   var hoursHand = "...";
 59 |   hoursHand = hoursHand.split("");
 60 |   var minutesHand = "....";
 61 |   minutesHand = minutesHand.split("");
 62 |   var secondsHand = ".....";
 63 |   secondsHand = secondsHand.split("");
 64 |   var faceRing = "1 2 3 4 5 6 7 8 9 10 11 12";
 65 |   faceRing = faceRing.split(" ");
 66 | 
 67 |   var a = Clock_size * 10;
 68 |   Split = 360 / faceRing.length;
 69 |   Dsplit = 360 / dateRing.length;
 70 |   
 71 |   var i;
 72 | 
 73 |   for (i = 0; i < faceRing.length; i++) {
 74 |     y[i] = 0;
 75 |     x[i] = 0;
 76 |     Y[i] = 0;
 77 |     X[i] = 0;
 78 |   }
 79 |   for (i = 0; i < dateRing.length; i++) {
 80 |     Dy[i] = 0;
 81 |     Dx[i] = 0;
 82 |     DY[i] = 0;
 83 |     DX[i] = 0;
 84 |   }
 85 | 
 86 |   if (document.layers) {
 87 | 
 88 |     var props1 = '" top="0" left="0" height="' + a + '" width="' + a
 89 |     					   + '"><center><font size="-' + a + '" face="Arial"><b>';
 90 |     var props2 = '" top="0" left="0" height="16" width="16"><center><font face="Arial"><b>';
 91 | 
 92 |     document.write('<div id="funny-clock">');
 93 |     document.write('<div class="clock-date">');
 94 |     for (i = 0; i < dateRing.length; i++) {
 95 |       document.write('<layer name="date-el' + i + props1 + dateRing[i] + '</b></font></center></layer>');
 96 |       dateElements[i] = document.layers["date-el" + i];
 97 |     }
 98 |     document.write('</div><div class="clock-face">');
 99 |     for (i = 0; i < faceRing.length; i++) {
100 |       document.write('<layer name="face-el' + i + props1 + faceRing[i] + '</b></font></center></layer>');
101 |       faceElements[i] = document.layers["face-el" + i];
102 |     }
103 |     document.write('</div><div class="clock-hours">');
104 |     for (i = 0; i < hoursHand.length; i++) {
105 |       document.write('<layer name="hours-el' + i + props2 + hoursHand[i] + '</b></font></center></layer>');
106 |       hourElements[i] = document.layers["hours-el" + i];
107 |     }
108 |     document.write('</div><div class="clock-minutes">');
109 |     for (i = 0; i < minutesHand.length; i++) {
110 |       document.write('<layer name="minutes-el' + i + props2 + minutesHand[i] + '</b></font></center></layer>');
111 |       minuteElements[i] = document.layers["minutes-el" + i];
112 |     }
113 |     document.write('</div><div class="clock-seconds">');
114 |     for (i = 0; i < secondsHand.length; i++) {
115 |       document.write('<layer name="seconds-el' + i + props2 + secondsHand[i] + '</b></font></center></layer>');
116 |       secondElements[i] = document.layers["seconds-el" + i];
117 |     }
118 |     document.write("</div></div>");
119 | 
120 |   } else {
121 | 
122 |     var clock = document.createElement("div");
123 |     // HTMLElement.id
124 |     clock.setAttribute("id", "funny-clock");
125 | 
126 |     var fixedStyle1 = "position: absolute; top: 0; left: 0";
127 |     var fixedStyle2 = "position: absolute; top: 0; left: 0; width: " + a + "px; height: " + a
128 |         + "px; text-align: center; font: bold " + a + "px/1 Arial, sans-serif";
129 |     var fixedStyle3 = "position: absolute; top: 0; left: 0; width: 16px; height: 16px;"
130 |         + " text-align: center; font: bold 16px/1 Arial, sans-serif";
131 | 
132 |     var clockDate = clock.appendChild(document.createElement("div"));
133 |     clockDate.className = "clock-date";
134 |     // Opera doesn't parse ElementCSSInlineStyle.style.cssText
135 |     // IE doesn't parse HTMLElement.setAttribute("style", ...)
136 |     clockDate.setAttribute("style", fixedStyle1);
137 |     clockDate.style.cssText = fixedStyle1;
138 |     for (i = 0; i < dateRing.length; i++) {
139 |       var piece = clockDate.appendChild(document.createElement("span"));
140 |       piece.setAttribute("style", fixedStyle2);
141 |       piece.style.cssText = fixedStyle2;
142 |       // Node.textContent
143 |       piece.appendChild(document.createTextNode(dateRing[i]));
144 |       dateElements[i] = piece.style;
145 |     }
146 | 
147 |     var clockFace = clock.appendChild(document.createElement("div"));
148 |     clockFace.className = "clock-face";
149 |     clockFace.setAttribute("style", fixedStyle1);
150 |     clockFace.style.cssText = fixedStyle1;
151 |     for (i = 0; i < faceRing.length; i++) {
152 |       var piece = clockFace.appendChild(document.createElement("span"));
153 |       piece.setAttribute("style", fixedStyle2);
154 |       piece.style.cssText = fixedStyle2;
155 |       piece.appendChild(document.createTextNode(faceRing[i]));
156 |       faceElements[i] = piece.style;
157 |     }
158 | 
159 |     var clockHours = clock.appendChild(document.createElement("div"));
160 |     clockHours.className = "clock-hours";
161 |     clockHours.setAttribute("style", fixedStyle1);
162 |     clockHours.style.cssText = fixedStyle1;
163 |     for (i = 0; i < hoursHand.length; i++) {
164 |       var piece = clockHours.appendChild(document.createElement("span"));
165 |       piece.setAttribute("style", fixedStyle3);
166 |       piece.style.cssText = fixedStyle3;
167 |       piece.appendChild(document.createTextNode(hoursHand[i]));
168 |       hourElements[i] = piece.style;
169 |     }
170 | 
171 |     var clockMinutes = clock.appendChild(document.createElement("div"));
172 |     clockMinutes.className = "clock-minutes";
173 |     clockMinutes.setAttribute("style", fixedStyle1);
174 |     clockMinutes.style.cssText = fixedStyle1;
175 |     for (i = 0; i < minutesHand.length; i++) {
176 |       var piece = clockMinutes.appendChild(document.createElement("span"));
177 |       piece.setAttribute("style", fixedStyle3);
178 |       piece.style.cssText = fixedStyle3;
179 |       piece.appendChild(document.createTextNode(minutesHand[i]));
180 |       minuteElements[i] = piece.style;
181 |     }
182 | 
183 |     var clockSeconds = clock.appendChild(document.createElement("div"));
184 |     clockSeconds.className = "clock-seconds";
185 |     clockSeconds.setAttribute("style", fixedStyle1);
186 |     clockSeconds.style.cssText = fixedStyle1;
187 |     for (i = 0; i < secondsHand.length; i++) {
188 |       var piece = clockSeconds.appendChild(document.createElement("span"));
189 |       piece.setAttribute("style", fixedStyle3);
190 |       piece.style.cssText = fixedStyle3;
191 |       piece.appendChild(document.createTextNode(secondsHand[i]));
192 |       secondElements[i] = piece.style;
193 |     }
194 | 
195 |     document.body.appendChild(clock);
196 | 
197 |   }
198 | 
199 | }
200 | 
201 | drawClock();
202 | 
203 | function followMouse(evt) {
204 |   evt = evt || window.event;
205 |   //ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
206 |   //xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
207 |   if (evt.pageY) {
208 |     ymouse = evt.pageY;
209 |   } else {
210 |     ymouse = evt.clientY;
211 |     if (window.document.documentElement.scrollTop) {
212 |       ymouse += window.document.documentElement.scrollTop;
213 |     } else if (window.document.body.scrollTop) {
214 |       ymouse += window.document.bosy.scrollTop;
215 |     }
216 |   }
217 |   
218 |   if (evt.pageX) {
219 |     xmouse = evt.pageX;
220 |   } else {
221 |     xmouse = evt.clientX;
222 |     //if (window.document.documentElement.scrollLeft) {
223 |     //  xmouse += window.document.documentElement.scrollLeft;
224 |     //} else if (window.document.body.scrollLeft) {
225 |     //  xmouse += window.document.body.scrollLeft;
226 |     //}
227 |   }
228 |   
229 |   ymouse += ClockFromMouseY;
230 |   xmouse += ClockFromMouseX;
231 | }
232 | 
233 | function ClockAndAssign() {
234 |   var time = new Date();
235 |   var seconds = -1.57 + Math.PI * time.getSeconds() / 30;
236 |   var minutes = -1.57 + Math.PI * time.getMinutes() / 30;
237 |   var hours = -1.575 + Math.PI * time.getHours() / 6
238 |               + Math.PI * parseInt(time.getMinutes()) / 360;
239 | 
240 |   var hpos, vpos;
241 | 
242 |   for (i = 0; i < dateElements.length; i++) {
243 |     vpos = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
244 |     hpos = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
245 |     dateElements[i].top = "" + vpos + (ns4 ? "" : "px");
246 |     dateElements[i].left = "" + hpos + (ns4 ? "" : "px");
247 |   }
248 |   for (i = 0; i < faceElements.length; i++) {
249 |     vpos = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
250 |     hpos = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
251 |     faceElements[i].top = "" + vpos + (ns4 ? "" : "px");
252 |     faceElements[i].left = "" + hpos + (ns4 ? "" : "px");
253 |   }
254 |   for (i = 0; i < hourElements.length; i++) {
255 |     vpos = y[i] + HandY + (i * HandHeight) * Math.sin(hours) + scrll;
256 |     hpos = x[i] + HandX + (i * HandWidth) * Math.cos(hours);
257 |     hourElements[i].top = "" + vpos + (ns4 ? "" : "px");
258 |     hourElements[i].left = "" + hpos + (ns4 ? "" : "px");
259 |   }
260 |   for (i = 0; i < minuteElements.length; i++) {
261 |     vpos = y[i] + HandY + (i * HandHeight) * Math.sin(minutes) + scrll;
262 |     hpos = x[i] + HandX + (i * HandWidth) * Math.cos(minutes);
263 |     minuteElements[i].top = "" + vpos + (ns4 ? "" : "px");
264 |     minuteElements[i].left = "" + hpos + (ns4 ? "" : "px");
265 |   }
266 |   for (i = 0; i < secondElements.length; i++) {
267 |     vpos = y[i] + HandY + (i * HandHeight) * Math.sin(seconds) + scrll;
268 |     hpos = x[i] + HandX + (i * HandWidth) * Math.cos(seconds);
269 |     secondElements[i].top = "" + vpos + (ns4 ? "" : "px");
270 |     secondElements[i].left = "" + hpos + (ns4 ? "" : "px");
271 |   }
272 |   currStep -= step;
273 | }
274 | 
275 | function Delay() {
276 |   Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
277 |   Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
278 |   for (i = 1; i < Dx.length; i++) {
279 |     Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
280 |     Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
281 |   }
282 |   y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
283 |   x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
284 |   for (i = 1; i < x.length; i++) {
285 |     y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
286 |     x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
287 |   }
288 |   ClockAndAssign();
289 |   setTimeout("Delay()", 20);
290 | }
291 | 
292 | if (document.addEventListener) {
293 |   document.addEventListener("mousemove", followMouse, true);
294 | } else if (document.attachEvent) {
295 |   document.attachEvent("onmousemove", followMouse);
296 | } else if (ns4) {
297 |   window.captureEvents(Event.MOUSEMOVE);
298 |   window.onMouseMove = followMouse;
299 | }
300 | 
301 | Delay();


--------------------------------------------------------------------------------
/snow.js:
--------------------------------------------------------------------------------
  1 | /** @license
  2 |  * DHTML Snowstorm! JavaScript-based snow for web pages
  3 |  * Making it snow on the internets since 2003. You're welcome.
  4 |  * -----------------------------------------------------------
  5 |  * Version 1.44.20131208 (Previous rev: 1.44.20131125)
  6 |  * Copyright (c) 2007, Scott Schiller. All rights reserved.
  7 |  * Code provided under the BSD License
  8 |  * http://schillmania.com/projects/snowstorm/license.txt
  9 |  */
 10 | 
 11 | /*jslint nomen: true, plusplus: true, sloppy: true, vars: true, white: true */
 12 | /*global window, document, navigator, clearInterval, setInterval */
 13 | 
 14 | var snowStorm = (function(window, document) {
 15 |   
 16 |     // --- common properties ---
 17 |   
 18 |     this.autoStart = true;          // Whether the snow should start automatically or not.
 19 |     this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk.
 20 |     this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
 21 |     this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
 22 |     this.animationInterval = 50;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
 23 |     this.useGPU = true;             // Enable transform-based hardware acceleration, reduce CPU load.
 24 |     this.className = null;          // CSS class name for further customization on snow elements
 25 |     this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
 26 |     this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
 27 |     this.followMouse = false;        // Snow movement can respond to the user's mouse
 28 |     this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
 29 |     this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
 30 |     this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
 31 |     this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
 32 |     this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
 33 |     this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
 34 |     this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
 35 |     this.usePixelPosition = false;  // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified.
 36 |   
 37 |     // --- less-used bits ---
 38 |   
 39 |     this.freezeOnBlur = true;       // Only snow when the window is in focus (foreground.) Saves CPU.
 40 |     this.flakeLeftOffset = 0;       // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
 41 |     this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
 42 |     this.flakeWidth = 8;            // Max pixel width reserved for snow element
 43 |     this.flakeHeight = 8;           // Max pixel height reserved for snow element
 44 |     this.vMaxX = 5;                 // Maximum X velocity range for snow
 45 |     this.vMaxY = 4;                 // Maximum Y velocity range for snow
 46 |     this.zIndex = 0;                // CSS stacking order applied to each snowflake
 47 |   
 48 |     // --- "No user-serviceable parts inside" past this point, yadda yadda ---
 49 |   
 50 |     var storm = this,
 51 |     features,
 52 |     // UA sniffing and backCompat rendering mode checks for fixed position, etc.
 53 |     isIE = navigator.userAgent.match(/msie/i),
 54 |     isIE6 = navigator.userAgent.match(/msie 6/i),
 55 |     isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),
 56 |     isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
 57 |     noFixed = (isBackCompatIE || isIE6),
 58 |     screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null,
 59 |     windOffset = 1,
 60 |     windMultiplier = 2,
 61 |     flakeTypes = 6,
 62 |     fixedForEverything = false,
 63 |     targetElementIsRelative = false,
 64 |     opacitySupported = (function(){
 65 |       try {
 66 |         document.createElement('div').style.opacity = '0.5';
 67 |       } catch(e) {
 68 |         return false;
 69 |       }
 70 |       return true;
 71 |     }()),
 72 |     didInit = false,
 73 |     docFrag = document.createDocumentFragment();
 74 |   
 75 |     features = (function() {
 76 |   
 77 |       var getAnimationFrame;
 78 |   
 79 |       /**
 80 |        * hat tip: paul irish
 81 |        * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 82 |        * https://gist.github.com/838785
 83 |        */
 84 |   
 85 |       function timeoutShim(callback) {
 86 |         window.setTimeout(callback, 1000/(storm.animationInterval || 20));
 87 |       }
 88 |   
 89 |       var _animationFrame = (window.requestAnimationFrame ||
 90 |           window.webkitRequestAnimationFrame ||
 91 |           window.mozRequestAnimationFrame ||
 92 |           window.oRequestAnimationFrame ||
 93 |           window.msRequestAnimationFrame ||
 94 |           timeoutShim);
 95 |   
 96 |       // apply to window, avoid "illegal invocation" errors in Chrome
 97 |       getAnimationFrame = _animationFrame ? function() {
 98 |         return _animationFrame.apply(window, arguments);
 99 |       } : null;
100 |   
101 |       var testDiv;
102 |   
103 |       testDiv = document.createElement('div');
104 |   
105 |       function has(prop) {
106 |   
107 |         // test for feature support
108 |         var result = testDiv.style[prop];
109 |         return (result !== undefined ? prop : null);
110 |   
111 |       }
112 |   
113 |       // note local scope.
114 |       var localFeatures = {
115 |   
116 |         transform: {
117 |           ie:  has('-ms-transform'),
118 |           moz: has('MozTransform'),
119 |           opera: has('OTransform'),
120 |           webkit: has('webkitTransform'),
121 |           w3: has('transform'),
122 |           prop: null // the normalized property value
123 |         },
124 |   
125 |         getAnimationFrame: getAnimationFrame
126 |   
127 |       };
128 |   
129 |       localFeatures.transform.prop = (
130 |         localFeatures.transform.w3 || 
131 |         localFeatures.transform.moz ||
132 |         localFeatures.transform.webkit ||
133 |         localFeatures.transform.ie ||
134 |         localFeatures.transform.opera
135 |       );
136 |   
137 |       testDiv = null;
138 |   
139 |       return localFeatures;
140 |   
141 |     }());
142 |   
143 |     this.timer = null;
144 |     this.flakes = [];
145 |     this.disabled = false;
146 |     this.active = false;
147 |     this.meltFrameCount = 20;
148 |     this.meltFrames = [];
149 |   
150 |     this.setXY = function(o, x, y) {
151 |   
152 |       if (!o) {
153 |         return false;
154 |       }
155 |   
156 |       if (storm.usePixelPosition || targetElementIsRelative) {
157 |   
158 |         o.style.left = (x - storm.flakeWidth) + 'px';
159 |         o.style.top = (y - storm.flakeHeight) + 'px';
160 |   
161 |       } else if (noFixed) {
162 |   
163 |         o.style.right = (100-(x/screenX*100)) + '%';
164 |         // avoid creating vertical scrollbars
165 |         o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';
166 |   
167 |       } else {
168 |   
169 |         if (!storm.flakeBottom) {
170 |   
171 |           // if not using a fixed bottom coordinate...
172 |           o.style.right = (100-(x/screenX*100)) + '%';
173 |           o.style.bottom = (100-(y/screenY*100)) + '%';
174 |   
175 |         } else {
176 |   
177 |           // absolute top.
178 |           o.style.right = (100-(x/screenX*100)) + '%';
179 |           o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';
180 |   
181 |         }
182 |   
183 |       }
184 |   
185 |     };
186 |   
187 |     this.events = (function() {
188 |   
189 |       var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,
190 |       evt = {
191 |         add: (old?'attachEvent':'addEventListener'),
192 |         remove: (old?'detachEvent':'removeEventListener')
193 |       };
194 |   
195 |       function getArgs(oArgs) {
196 |         var args = slice.call(oArgs), len = args.length;
197 |         if (old) {
198 |           args[1] = 'on' + args[1]; // prefix
199 |           if (len > 3) {
200 |             args.pop(); // no capture
201 |           }
202 |         } else if (len === 3) {
203 |           args.push(false);
204 |         }
205 |         return args;
206 |       }
207 |   
208 |       function apply(args, sType) {
209 |         var element = args.shift(),
210 |             method = [evt[sType]];
211 |         if (old) {
212 |           element[method](args[0], args[1]);
213 |         } else {
214 |           element[method].apply(element, args);
215 |         }
216 |       }
217 |   
218 |       function addEvent() {
219 |         apply(getArgs(arguments), 'add');
220 |       }
221 |   
222 |       function removeEvent() {
223 |         apply(getArgs(arguments), 'remove');
224 |       }
225 |   
226 |       return {
227 |         add: addEvent,
228 |         remove: removeEvent
229 |       };
230 |   
231 |     }());
232 |   
233 |     function rnd(n,min) {
234 |       if (isNaN(min)) {
235 |         min = 0;
236 |       }
237 |       return (Math.random()*n)+min;
238 |     }
239 |   
240 |     function plusMinus(n) {
241 |       return (parseInt(rnd(2),10)===1?n*-1:n);
242 |     }
243 |   
244 |     this.randomizeWind = function() {
245 |       var i;
246 |       vRndX = plusMinus(rnd(storm.vMaxX,0.2));
247 |       vRndY = rnd(storm.vMaxY,0.2);
248 |       if (this.flakes) {
249 |         for (i=0; i<this.flakes.length; i++) {
250 |           if (this.flakes[i].active) {
251 |             this.flakes[i].setVelocities();
252 |           }
253 |         }
254 |       }
255 |     };
256 |   
257 |     this.scrollHandler = function() {
258 |       var i;
259 |       // "attach" snowflakes to bottom of window if no absolute bottom value was given
260 |       scrollY = (storm.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || (noFixed ? document.body.scrollTop : 0), 10));
261 |       if (isNaN(scrollY)) {
262 |         scrollY = 0; // Netscape 6 scroll fix
263 |       }
264 |       if (!fixedForEverything && !storm.flakeBottom && storm.flakes) {
265 |         for (i=0; i<storm.flakes.length; i++) {
266 |           if (storm.flakes[i].active === 0) {
267 |             storm.flakes[i].stick();
268 |           }
269 |         }
270 |       }
271 |     };
272 |   
273 |     this.resizeHandler = function() {
274 |       if (window.innerWidth || window.innerHeight) {
275 |         screenX = window.innerWidth - 16 - storm.flakeRightOffset;
276 |         screenY = (storm.flakeBottom || window.innerHeight);
277 |       } else {
278 |         screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - storm.flakeRightOffset;
279 |         screenY = storm.flakeBottom || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
280 |       }
281 |       docHeight = document.body.offsetHeight;
282 |       screenX2 = parseInt(screenX/2,10);
283 |     };
284 |   
285 |     this.resizeHandlerAlt = function() {
286 |       screenX = storm.targetElement.offsetWidth - storm.flakeRightOffset;
287 |       screenY = storm.flakeBottom || storm.targetElement.offsetHeight;
288 |       screenX2 = parseInt(screenX/2,10);
289 |       docHeight = document.body.offsetHeight;
290 |     };
291 |   
292 |     this.freeze = function() {
293 |       // pause animation
294 |       if (!storm.disabled) {
295 |         storm.disabled = 1;
296 |       } else {
297 |         return false;
298 |       }
299 |       storm.timer = null;
300 |     };
301 |   
302 |     this.resume = function() {
303 |       if (storm.disabled) {
304 |          storm.disabled = 0;
305 |       } else {
306 |         return false;
307 |       }
308 |       storm.timerInit();
309 |     };
310 |   
311 |     this.toggleSnow = function() {
312 |       if (!storm.flakes.length) {
313 |         // first run
314 |         storm.start();
315 |       } else {
316 |         storm.active = !storm.active;
317 |         if (storm.active) {
318 |           storm.show();
319 |           storm.resume();
320 |         } else {
321 |           storm.stop();
322 |           storm.freeze();
323 |         }
324 |       }
325 |     };
326 |   
327 |     this.stop = function() {
328 |       var i;
329 |       this.freeze();
330 |       for (i=0; i<this.flakes.length; i++) {
331 |         this.flakes[i].o.style.display = 'none';
332 |       }
333 |       storm.events.remove(window,'scroll',storm.scrollHandler);
334 |       storm.events.remove(window,'resize',storm.resizeHandler);
335 |       if (storm.freezeOnBlur) {
336 |         if (isIE) {
337 |           storm.events.remove(document,'focusout',storm.freeze);
338 |           storm.events.remove(document,'focusin',storm.resume);
339 |         } else {
340 |           storm.events.remove(window,'blur',storm.freeze);
341 |           storm.events.remove(window,'focus',storm.resume);
342 |         }
343 |       }
344 |     };
345 |   
346 |     this.show = function() {
347 |       var i;
348 |       for (i=0; i<this.flakes.length; i++) {
349 |         this.flakes[i].o.style.display = 'block';
350 |       }
351 |     };
352 |   
353 |     this.SnowFlake = function(type,x,y) {
354 |       var s = this;
355 |       this.type = type;
356 |       this.x = x||parseInt(rnd(screenX-20),10);
357 |       this.y = (!isNaN(y)?y:-rnd(screenY)-12);
358 |       this.vX = null;
359 |       this.vY = null;
360 |       this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
361 |       this.vAmp = this.vAmpTypes[this.type] || 1;
362 |       this.melting = false;
363 |       this.meltFrameCount = storm.meltFrameCount;
364 |       this.meltFrames = storm.meltFrames;
365 |       this.meltFrame = 0;
366 |       this.twinkleFrame = 0;
367 |       this.active = 1;
368 |       this.fontSize = (10+(this.type/5)*10);
369 |       this.o = document.createElement('div');
370 |       this.o.innerHTML = storm.snowCharacter;
371 |       if (storm.className) {
372 |         this.o.setAttribute('class', storm.className);
373 |       }
374 |       this.o.style.color = storm.snowColor;
375 |       this.o.style.position = (fixedForEverything?'fixed':'absolute');
376 |       if (storm.useGPU && features.transform.prop) {
377 |         // GPU-accelerated snow.
378 |         this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';
379 |       }
380 |       this.o.style.width = storm.flakeWidth+'px';
381 |       this.o.style.height = storm.flakeHeight+'px';
382 |       this.o.style.fontFamily = 'arial,verdana';
383 |       this.o.style.cursor = 'default';
384 |       this.o.style.overflow = 'hidden';
385 |       this.o.style.fontWeight = 'normal';
386 |       this.o.style.zIndex = storm.zIndex;
387 |       docFrag.appendChild(this.o);
388 |   
389 |       this.refresh = function() {
390 |         if (isNaN(s.x) || isNaN(s.y)) {
391 |           // safety check
392 |           return false;
393 |         }
394 |         storm.setXY(s.o, s.x, s.y);
395 |       };
396 |   
397 |       this.stick = function() {
398 |         if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
399 |           s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
400 |         } else if (storm.flakeBottom) {
401 |           s.o.style.top = storm.flakeBottom+'px';
402 |         } else {
403 |           s.o.style.display = 'none';
404 |           s.o.style.bottom = '0%';
405 |           s.o.style.position = 'fixed';
406 |           s.o.style.display = 'block';
407 |         }
408 |       };
409 |   
410 |       this.vCheck = function() {
411 |         if (s.vX>=0 && s.vX<0.2) {
412 |           s.vX = 0.2;
413 |         } else if (s.vX<0 && s.vX>-0.2) {
414 |           s.vX = -0.2;
415 |         }
416 |         if (s.vY>=0 && s.vY<0.2) {
417 |           s.vY = 0.2;
418 |         }
419 |       };
420 |   
421 |       this.move = function() {
422 |         var vX = s.vX*windOffset, yDiff;
423 |         s.x += vX;
424 |         s.y += (s.vY*s.vAmp);
425 |         if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
426 |           s.x = 0;
427 |         } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {
428 |           s.x = screenX-storm.flakeWidth-1; // flakeWidth;
429 |         }
430 |         s.refresh();
431 |         yDiff = screenY+scrollY-s.y+storm.flakeHeight;
432 |         if (yDiff<storm.flakeHeight) {
433 |           s.active = 0;
434 |           if (storm.snowStick) {
435 |             s.stick();
436 |           } else {
437 |             s.recycle();
438 |           }
439 |         } else {
440 |           if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
441 |             // ~1/1000 chance of melting mid-air, with each frame
442 |             s.melting = true;
443 |             s.melt();
444 |             // only incrementally melt one frame
445 |             // s.melting = false;
446 |           }
447 |           if (storm.useTwinkleEffect) {
448 |             if (s.twinkleFrame < 0) {
449 |               if (Math.random() > 0.97) {
450 |                 s.twinkleFrame = parseInt(Math.random() * 8, 10);
451 |               }
452 |             } else {
453 |               s.twinkleFrame--;
454 |               if (!opacitySupported) {
455 |                 s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
456 |               } else {
457 |                 s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1);
458 |               }
459 |             }
460 |           }
461 |         }
462 |       };
463 |   
464 |       this.animate = function() {
465 |         // main animation loop
466 |         // move, check status, die etc.
467 |         s.move();
468 |       };
469 |   
470 |       this.setVelocities = function() {
471 |         s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
472 |         s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
473 |       };
474 |   
475 |       this.setOpacity = function(o,opacity) {
476 |         if (!opacitySupported) {
477 |           return false;
478 |         }
479 |         o.style.opacity = opacity;
480 |       };
481 |   
482 |       this.melt = function() {
483 |         if (!storm.useMeltEffect || !s.melting) {
484 |           s.recycle();
485 |         } else {
486 |           if (s.meltFrame < s.meltFrameCount) {
487 |             s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
488 |             s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
489 |             s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
490 |             s.meltFrame++;
491 |           } else {
492 |             s.recycle();
493 |           }
494 |         }
495 |       };
496 |   
497 |       this.recycle = function() {
498 |         s.o.style.display = 'none';
499 |         s.o.style.position = (fixedForEverything?'fixed':'absolute');
500 |         s.o.style.bottom = 'auto';
501 |         s.setVelocities();
502 |         s.vCheck();
503 |         s.meltFrame = 0;
504 |         s.melting = false;
505 |         s.setOpacity(s.o,1);
506 |         s.o.style.padding = '0px';
507 |         s.o.style.margin = '0px';
508 |         s.o.style.fontSize = s.fontSize+'px';
509 |         s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
510 |         s.o.style.textAlign = 'center';
511 |         s.o.style.verticalAlign = 'baseline';
512 |         s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
513 |         s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
514 |         s.refresh();
515 |         s.o.style.display = 'block';
516 |         s.active = 1;
517 |       };
518 |   
519 |       this.recycle(); // set up x/y coords etc.
520 |       this.refresh();
521 |   
522 |     };
523 |   
524 |     this.snow = function() {
525 |       var active = 0, flake = null, i, j;
526 |       for (i=0, j=storm.flakes.length; i<j; i++) {
527 |         if (storm.flakes[i].active === 1) {
528 |           storm.flakes[i].move();
529 |           active++;
530 |         }
531 |         if (storm.flakes[i].melting) {
532 |           storm.flakes[i].melt();
533 |         }
534 |       }
535 |       if (active<storm.flakesMaxActive) {
536 |         flake = storm.flakes[parseInt(rnd(storm.flakes.length),10)];
537 |         if (flake.active === 0) {
538 |           flake.melting = true;
539 |         }
540 |       }
541 |       if (storm.timer) {
542 |         features.getAnimationFrame(storm.snow);
543 |       }
544 |     };
545 |   
546 |     this.mouseMove = function(e) {
547 |       if (!storm.followMouse) {
548 |         return true;
549 |       }
550 |       var x = parseInt(e.clientX,10);
551 |       if (x<screenX2) {
552 |         windOffset = -windMultiplier+(x/screenX2*windMultiplier);
553 |       } else {
554 |         x -= screenX2;
555 |         windOffset = (x/screenX2)*windMultiplier;
556 |       }
557 |     };
558 |   
559 |     this.createSnow = function(limit,allowInactive) {
560 |       var i;
561 |       for (i=0; i<limit; i++) {
562 |         storm.flakes[storm.flakes.length] = new storm.SnowFlake(parseInt(rnd(flakeTypes),10));
563 |         if (allowInactive || i>storm.flakesMaxActive) {
564 |           storm.flakes[storm.flakes.length-1].active = -1;
565 |         }
566 |       }
567 |       storm.targetElement.appendChild(docFrag);
568 |     };
569 |   
570 |     this.timerInit = function() {
571 |       storm.timer = true;
572 |       storm.snow();
573 |     };
574 |   
575 |     this.init = function() {
576 |       var i;
577 |       for (i=0; i<storm.meltFrameCount; i++) {
578 |         storm.meltFrames.push(1-(i/storm.meltFrameCount));
579 |       }
580 |       storm.randomizeWind();
581 |       storm.createSnow(storm.flakesMax); // create initial batch
582 |       storm.events.add(window,'resize',storm.resizeHandler);
583 |       storm.events.add(window,'scroll',storm.scrollHandler);
584 |       if (storm.freezeOnBlur) {
585 |         if (isIE) {
586 |           storm.events.add(document,'focusout',storm.freeze);
587 |           storm.events.add(document,'focusin',storm.resume);
588 |         } else {
589 |           storm.events.add(window,'blur',storm.freeze);
590 |           storm.events.add(window,'focus',storm.resume);
591 |         }
592 |       }
593 |       storm.resizeHandler();
594 |       storm.scrollHandler();
595 |       if (storm.followMouse) {
596 |         storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);
597 |       }
598 |       storm.animationInterval = Math.max(20,storm.animationInterval);
599 |       storm.timerInit();
600 |     };
601 |   
602 |     this.start = function(bFromOnLoad) {
603 |       if (!didInit) {
604 |         didInit = true;
605 |       } else if (bFromOnLoad) {
606 |         // already loaded and running
607 |         return true;
608 |       }
609 |       if (typeof storm.targetElement === 'string') {
610 |         var targetID = storm.targetElement;
611 |         storm.targetElement = document.getElementById(targetID);
612 |         if (!storm.targetElement) {
613 |           throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
614 |         }
615 |       }
616 |       if (!storm.targetElement) {
617 |         storm.targetElement = (document.body || document.documentElement);
618 |       }
619 |       if (storm.targetElement !== document.documentElement && storm.targetElement !== document.body) {
620 |         // re-map handler to get element instead of screen dimensions
621 |         storm.resizeHandler = storm.resizeHandlerAlt;
622 |         //and force-enable pixel positioning
623 |         storm.usePixelPosition = true;
624 |       }
625 |       storm.resizeHandler(); // get bounding box elements
626 |       storm.usePositionFixed = (storm.usePositionFixed && !noFixed && !storm.flakeBottom); // whether or not position:fixed is to be used
627 |       if (window.getComputedStyle) {
628 |         // attempt to determine if body or user-specified snow parent element is relatlively-positioned.
629 |         try {
630 |           targetElementIsRelative = (window.getComputedStyle(storm.targetElement, null).getPropertyValue('position') === 'relative');
631 |         } catch(e) {
632 |           // oh well
633 |           targetElementIsRelative = false;
634 |         }
635 |       }
636 |       fixedForEverything = storm.usePositionFixed;
637 |       if (screenX && screenY && !storm.disabled) {
638 |         storm.init();
639 |         storm.active = true;
640 |       }
641 |     };
642 |   
643 |     function doDelayedStart() {
644 |       window.setTimeout(function() {
645 |         storm.start(true);
646 |       }, 20);
647 |       // event cleanup
648 |       storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);
649 |     }
650 |   
651 |     function doStart() {
652 |       if (!storm.excludeMobile || !isMobile) {
653 |         doDelayedStart();
654 |       }
655 |       // event cleanup
656 |       storm.events.remove(window, 'load', doStart);
657 |     }
658 |   
659 |     // hooks for starting the snow
660 |     if (storm.autoStart) {
661 |       storm.events.add(window, 'load', doStart, false);
662 |     }
663 |   
664 |     return this;
665 |   
666 |   }(window, document));
667 |   


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: Kanit, sans-serif;
  3 |   background: #000;
  4 |   color: #fff;
  5 |   margin: 0;
  6 |   text-align: center;
  7 | }
  8 | 
  9 | @font-face {
 10 |   font-family: againtsregular;
 11 |   src: url(fonts/againts-webfont.woff2) format(woff2), url(fonts/againts-webfont.woff) format(woff);
 12 |   font-weight: 400;
 13 |   font-style: normal;
 14 | }
 15 | 
 16 | #bar {
 17 |   background-color: white;
 18 |   height: 60px;
 19 | }
 20 | 
 21 | #logo {
 22 |   background: url(images/logo.png);
 23 |   height: 100%;
 24 |   width: 100px;
 25 |   background-size: auto 55px;
 26 |   margin-left: auto;
 27 |   margin-right: auto;
 28 | }
 29 | 
 30 | #event-info {
 31 |   font-size: 20px;
 32 |   background-color: #000;
 33 |   color: rgba(255, 255, 255, 1);
 34 |   text-overflow: clip;
 35 |   text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
 36 |   transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
 37 |   padding: 20px;
 38 | }
 39 | 
 40 | #event-info__title {
 41 |   border-bottom: 0;
 42 |   font-weight: 100;
 43 |   letter-spacing: 2px;
 44 |   position: relative;
 45 |   color: #FFF;
 46 |   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.1);
 47 |   animation-timing-function: ease-in-out;
 48 |   font-family: 'Barlow Condensed', sans-serif;
 49 |   font-size: 40px;
 50 |   margin: 0;
 51 |   padding: 0;
 52 | }
 53 | 
 54 | #event-description {
 55 |   color: #fff;
 56 |   width: 48%;
 57 |   max-width: 980px;
 58 |   box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
 59 |   overflow: hidden;
 60 |   margin: 20px auto;
 61 |   padding: 0 3rem 3rem 2rem;
 62 | }
 63 | 
 64 | #sessions {
 65 |   width: 30%;
 66 |   box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
 67 |   overflow: hidden;
 68 |   margin: 0 auto;
 69 |   padding: 0 3rem 0 2rem;
 70 | }
 71 | 
 72 | #sessions__heading {
 73 |   background-color: #9e9e9e;
 74 |   padding: 12px 0;
 75 | }
 76 | 
 77 | .session-item {
 78 |   display: inline-block;
 79 | }
 80 | 
 81 | .session-item__speaker_image {
 82 |   height: 48px;
 83 | }
 84 | 
 85 | .sessions__list {
 86 |   max-width: 980px;
 87 |   position: relative;
 88 |   list-style-type: none;
 89 |   margin: 0 auto;
 90 |   padding: 2em 0 0;
 91 |   display: flex;
 92 |   flex-wrap: wrap;
 93 | }
 94 | 
 95 | .sessions__list:before,
 96 | .sessions__list:after {
 97 |   display: block;
 98 |   border-bottom: 0;
 99 |   padding-bottom: 10px;
100 |   background: #ccc;
101 |   position: absolute;
102 |   top: 0;
103 | }
104 | 
105 | .sessions__list:before {
106 |   content: 'เวลา';
107 |   border-right: 0;
108 |   text-align: center;
109 |   left: 0%;
110 |   width: 30%;
111 | }
112 | 
113 | .sessions__list:after {
114 |   content: 'รายการ';
115 |   left: 30%;
116 |   right: 0;
117 |   margin-left: 1px;
118 |   text-align: left;
119 | }
120 | 
121 | .session-time {
122 |   width: 30%;
123 |   padding: 1em 0;
124 | }
125 | 
126 | .session-item,
127 | .session-multi {
128 |   width: 70%;
129 |   text-align: left;
130 | }
131 | 
132 | .session-multi > ul {
133 |   display: block;
134 |   list-style: none;
135 |   padding: 0;
136 | }
137 | 
138 | .session-item {
139 |   padding: 1em 0;
140 | }
141 | 
142 | .session-item:after {
143 |   content: "";
144 |   display: table;
145 |   clear: both;
146 | }
147 | 
148 | .session-item__room {
149 |   display: block;
150 |   color: #888;
151 | }
152 | 
153 | .session-item__speaker_image {
154 |   float: left;
155 | }
156 | 
157 | .session-item__speaker,
158 | .session-item__title,
159 | .session-item__description {
160 |   margin: 0 0 0 96px;
161 |   display: block;
162 | }
163 | 
164 | .session-item__title {
165 | }
166 | 
167 | .container {
168 |   width: 960px;
169 |   margin: 0 auto;
170 | }
171 | 
172 | #sponsors {
173 |   color: #333;
174 |   margin-top: 80px;
175 |   background-color: #FFF;
176 |   padding: 10px 10px 50px;
177 | }
178 | 
179 | #sponsor-info__title {
180 |   color: #000;
181 | }
182 | 
183 | #sponsors-list {
184 |   display: flex;
185 |   justify-content: space-between;
186 |   align-items: center;
187 |   margin: 0 50px;
188 | }
189 | 
190 | .sponsors_img {
191 |   width: 200px;
192 |   height: 100px;
193 |   margin-right: 5px;
194 |   background-size: 100% auto!important;
195 |   background-repeat: no-repeat!important;
196 |   background-position: center!important;
197 | }
198 | 
199 | #section-video {
200 |   background-color: #111619;
201 |   padding: 60px 0px;
202 | }
203 | 
204 | footer {
205 |   background: #6b6b6b;
206 |   color: #e3e3e3;
207 |   padding: 20px;
208 | }
209 | 
210 | #event-info__tagline,
211 | #event-info__date,
212 | #event-info__place {
213 |   margin: 0;
214 |   padding: 0 20px;
215 | }
216 | 
217 | @media screen and (max-width: 992px) {
218 |   .container {
219 |     width: 100%;
220 |     padding: 10px;
221 |   }
222 | }
223 | 


--------------------------------------------------------------------------------
/test:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThaiProgrammer/code-mania-110/9b4caa159c76714ffec94fc6cf08094a4c78d6b4/test


--------------------------------------------------------------------------------