Created
December 11, 2018 05:19
-
-
Save kishida/6200f674df88b174e6ced14d51763b1d to your computer and use it in GitHub Desktop.
LT Timer for 2 tracks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>LT Timer at LINE Developer meetup #47 in Fukuoka</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" | |
| crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" | |
| crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" | |
| crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" | |
| crossorigin="anonymous"></script> | |
| <script type="text/javascript"> | |
| var timetable = [ | |
| { left: { name: "--", title: "乾杯" }, right: { name: "--", title: "乾杯" } }, | |
| { left: { name: " 冬海", title: "Go Conferenceについて " }, right: { name: "@tkengo(LINE Fukuoka) ", title: " 機械学習に関するなにか" } }, | |
| { left: { name: "yoshih(クラスメソッド)", title: "Rustの話" }, right: { name: "Jalal Chaabane(ヌーラボ)", title: "Simplify web application using react-tooling" } }, | |
| { left: { name: "開田 陽介(LINE Fukuoka)", title: "LINE Fukuokaで行っているサーバーサイド開発" }, right: { name: "松村 優大(オルターブース)", title: "C# runs anywhere, make anything" } }, | |
| { left: { name: "吉田 清亮(LINE Fukuoka)", title: " WebAssemblyをLIFFで動かしてみた話" }, right: { name: "山本 百華(メルカリ)", title: "おさらのゆくすえ" } }, | |
| { left: { name: " 高 海鋒(LINE Fukuoka)", title: " LINE Android App: Glide usage tips" }, right: { name: " 蘇柄臣(LINE Fukuoka)", title: " Turn your website into native mobile app" } }, | |
| { left: { name: "Jarsaillon Pierre(LINE Fukuoka)", title: "KAPT annotation processing and code generation" }, right: { name: "Traylor Paul(LINE Fukuoka)", title: "Automating deployments from Github using Saltstack" } }, | |
| { left: { name: "ジン(LINE)", title: "Spring WebFluxを使ってみた。その良いところと悪いところ" }, right: { name: "ukitaka(メルカリ)", title: "microservices in iOS" } }, | |
| { left: { name: "@dashimaki_dofu(ベガコーポレーション)", title: "Kotlin 1.3 さらっとContracts + α" }, right: { name: "秋 勇紀(LINE Fukuoka)", title: "意外と知られていないSwift4.2の変更点" } }, | |
| { left: { name: "佐藤 春旗(LINE)", title: "どこかで見たマイクロサービスとGraceful Service Degradation" }, right: { name: "光瀬 智哉(ZOZOテクノロジーズ) ", title: "Python の型ヒントを使って JSON デコーダを生成する" } }, | |
| { left: { name: "Tokuhiro Matsuno(LINE) ", title: " LINE Ads Platformに関するなにか" }, right: { name: "渡辺 丈(Fusic)", title: "細かいパッケージいっぱいのCIをメンテする" } }, | |
| { left: { name: "秋間 武志(Groovenauts)", title: "GithubのPRリマインダをGAE/Goで作った話" }, right: { name: "@kazutan (LINE Fukuoka)", title: "RのIDEであるRStudioでYouTubeを再生できるようにした話" } }, | |
| { left: { name: "平井 一史(LINE Fukuoka) ", title: "GOTO Conferenceに参加したので、その話" }, right: { name: "田中 孝明(クラスメソッド)", title: "Swiftの話" } }, | |
| { left: { name: "馬見 誠(LINE Fukuoka)", title: "Reduce dependency on Rx with Kotlin Coroutine" }, right: { name: "岩本 海童(ZOZOテクノロジーズ)", title: "TypeScript と React で Web アプリケーション開発を始めよう" } }, | |
| { left: { name: " 内田 優一(ヌーラボ)", title: " 操作変換アルゴリズムとScala" }, right: { name: "@taketin (LINE Fukuoka) ", title: " LINE iOS 開発で実践してる Git tips" } }, | |
| { left: { name: " 富所 亮(イノベーター・ジャパン)", title: "僕たちのカンバン" }, right: { name: "黃 慈霖(LINE Fukuoka)", title: " The benefit of custom elements: a real use case" } }, | |
| { left: { name: "吉田 宗弘(LINE)", title: "Java からKotlinへのスムーズな移行を目指して(サーバサイド)" }, right: { name: "--", title: "--" } }, | |
| { left: { name: "--", title: "イベント紹介" }, right: { name: "--", title: "イベント紹介" } }, | |
| { left: { name: "--", title: "懇親会" }, right: { name: "--", title: "懇親会" } } | |
| ] | |
| $(function () { | |
| var current = 0; | |
| var count = 0; | |
| var running = false; | |
| function show() { | |
| count = 5 * 60; | |
| running = false; | |
| $("#scr1_current").html(timetable[current].left.title + "<br>" + timetable[current].left.name); | |
| $("#scr2_current").html(timetable[current].right.title + "<br>" + timetable[current].right.name); | |
| $("#scr1_next").html(timetable[current + 1].left.title + "<br>" + timetable[current + 1].left.name); | |
| $("#scr2_next").html(timetable[current + 1].right.title + "<br>" + timetable[current + 1].right.name); | |
| showTimer(); | |
| } | |
| function showTimer() { | |
| $("#timer").text(Math.trunc(count / 60) + ":" + ("0" + (count % 60)).slice(-2)); | |
| if (count < 0) { | |
| $("#timer").css("color", "red"); | |
| } else if (count < 60) { | |
| $("#timer").css("color", "blue"); | |
| } else { | |
| $("#timer").css("color", "black"); | |
| } | |
| } | |
| $("#button_previous").on("click", function (e) { | |
| current--; | |
| if (current < 0) { | |
| current = 0; | |
| } | |
| show(); | |
| }); | |
| $("#button_next").on("click", function (e) { | |
| current++; | |
| if (current >= timetable.length) { | |
| current = timetable.length - 1; | |
| } | |
| show(); | |
| }); | |
| $("#button_start").on("click", function (e) { | |
| running = true; | |
| }); | |
| $("#button_stop").on("click", function (e) { | |
| running = false; | |
| }); | |
| setInterval(function () { | |
| if (running) { | |
| --count; | |
| showTimer(); | |
| } | |
| }, 1000); | |
| show(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-md-12" style="text-align: center; color: gray"> | |
| Current Session | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6" id="scr1_current" style="text-align: left; font-size: 2em">スクリーン1</div> | |
| <div class="col-md-6" id="scr2_current" style="text-align: right; font-size: 2em">スクリーン2</div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12" id="timer" style="text-align: center; font-size: 18em"> | |
| x:xx | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12" style="text-align: center; color: lightgray"> | |
| Next Session | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6" id="scr1_next" style="text-align: left; font-size: 1.5em; color: lightgray">スクリーン1</div> | |
| <div class="col-md-6" id="scr2_next" style="text-align: right; font-size: 1.5em; color: lightgray">スクリーン2</div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-12" style="text-align: center"> | |
| <button class="btn btn-lg" id="button_start">スタート</button> | |
| <button class="btn btn-lg" id="button_stop">ストップ</button> | |
| <button class="btn btn-lg" id="button_next">次のセッション</button> | |
| <button class="btn btn-lg" id="button_previous">(前)</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment