-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
8 lines (8 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no"><title>Chronobiks</title><link rel="apple-touch-icon" sizes="180x180" href="app/build/assets/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="app/build/assets/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="app/build/assets/favicon-16x16.png"><link rel="manifest" href="app/build/assets/site.webmanifest"><link rel="mask-icon" href="app/build/assets/safari-pinned-tab.svg" color="#5bbad5"><meta name="apple-mobile-web-app-title" content="Chronobiks"><meta name="application-name" content="Chronobiks"><meta name="msapplication-TileColor" content="#2b5797"><meta name="msapplication-TileImage" content="app/build/assets/mstile-144x144.png"><meta name="theme-color" content="#ffffff"><meta name="title" content="Chronobiks"><meta name="description" content="Chronobiks is a speed-solving Rubik's Cube timer, a stopwatch that collects and analyzes your training statistics and allows you to keep track of your time."><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://chronobiks.tech"><meta property="og:title" content="Chronobiks"><meta property="og:description" content="Chronobiks is a speed-solving Rubik's Cube timer, a stopwatch that collects and analyzes your training statistics and allows you to keep track of your time."><meta property="og:image" content="https://chronobiks.tech/app/build/assets/cover.gif"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://chronobiks.tech/"><meta property="twitter:title" content="Chronobiks"><meta property="twitter:description" content="Chronobiks is a speed-solving Rubik's Cube timer, a stopwatch that collects and analyzes your training statistics and allows you to keep track of your time."><meta property="twitter:image" content="https://chronobiks.tech/app/build/assets/cover.gif"><link rel="preload" href="app/build/style/main.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="app/build/style/main.min.css"></noscript><link rel="stylesheet" href="app/build/style/main.min.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="preload" href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600&display=swap" rel="stylesheet"></noscript><link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"></noscript></head><body id="go" class="go go--hide"><div class="modal__container modal--hide" id="modal"><div class="modal__heading"><h2>🎉 Hi, welcome to Chronobiks!</h2></div><div class="modal__message"><p>This web app was created by <a href="http://facebook.com/heychrono" target="_blank" rel="noopener"><b>@heychrono</b></a>, this was his personal project called <b>Chronobiks</b>. Chrono built this for himself and to others, this website application helps the Rubik’s beginners to gain an insight of their improvements.</p><br><p class="highlight"><b>Note:</b> Your data will be stored in your browser, so if you clear your browser cache or uninstall your browser, your data will be lost permanently, this web app doesn’t gather any information about you, use it for free & give feedbacks for improvement.</p></div><div class="modal__cta"><button id="understand" aria-label="Continue">I understand</button></div></div><div class="sidebar--overlay sidebar--overlay--close"></div><nav class="navbar"><div class="navbar__logo"><a href="index.html"><img src="app/build/assets/logo/chronobiks-logo.svg" alt="Chronobiks vector logo"></a></div><div class="navbar__menu"><button class="navbar__menu--button" id="open-button" aria-label="open sidebar"><span></span> <span></span> <span></span></button></div></nav><div class="sidebar"><div class="sidebar__navigation"><div class="sidebar__close"><button class="sidebar__close--button" id="close-button" aria-label="close sidebar"><img src="app/build/assets/icons/icon-close.svg" alt="Close button"></button></div></div><div class="sidebar__timelist" id="app-list"><div class="sidebar__timeGroup"><h4 class="sidebar__heading">🔥 Best</h4><div class="sidebar__timeInfo"><template v-if="bestSolvedTimeReactive == Infinity"><p class="solved-time">00.00 <span>sec</span></p><p>Today</p></template><template v-else><p class="solved-time">{{ bestSolvedTimeReactive }} <span>sec</span></p><p><template v-if="currentDateToday == bestSolvedDateReactive">Today</template><template v-else>{{ bestSolvedDateReactive }}</template></p></template></div></div><div class="sidebar__timeGroup"><h4 class="sidebar__heading">😵 Worst</h4><div class="sidebar__timeInfo"><template v-if="worstSolvedTimeReactive != -Infinity"><p class="solved-time">{{ worstSolvedTimeReactive }} <span>sec</span></p><p><template v-if="currentDateToday == worstSolvedDateReactive">Today</template><template v-else>{{ worstSolvedDateReactive }}</template></p></template><template v-else><p class="solved-time">00.00 <span>sec</span></p><p>Today</p></template></div></div><div class="sidebar__timeGroup"><h4 class="sidebar__heading">⛅ Today <span>({{ getTimeListCountToday() }})</span></h4><template v-for="list in reverseTodayProperty.slice(0, todayListCount)"><template v-if="list.date === currentDateToday"><div class="sidebar__timeInfo"><p class="solved-time">{{ list.time }} <span>sec</span></p><p>Today</p></div></template></template><div class="sidebar__timeInfo" v-if="getTimeListCountToday() > 5"><template v-if="getTimeListCountToday() > todayListCount"><button class="view-more" @click="todayListCount += 5" aria-label="view more list">View More</button></template><template v-else><button class="view-more" @click="todayListCount = 5" aria-label="view less list">View less</button></template></div></div><div class="sidebar__timeGroup"><h4 class="sidebar__heading">📆 Past <span>({{ timeListFromStorage.length }})</span></h4><template v-for="list in reverseTodayProperty.slice(0, pastListCount)"><div class="sidebar__timeInfo"><p class="solved-time">{{ list.time }} <span>sec</span></p><p>{{list.date}}</p></div></template><div class="sidebar__timeInfo" v-if="timeListFromStorage.length >= 6"><template v-if="timeListFromStorage.length > pastListCount"><button class="view-more" @click="pastListCount += 5" aria-label="view more list">View More</button></template><template v-else><button class="view-more" @click="pastListCount = 5" aria-label="view less list">View less</button></template></div></div></div><div class="sidebar__reset" id="app-reset"><h2>🗑️ Reset time list</h2><p>Clearing your browser cache or uninstalling browser will wipe your time list. Once you reset your time list, it cannot be undone.</p><p>To reset your time list, please type <b>{{resetCodeGenerated}}</b> below to reset.</p><input type="text" placeholder="rick-and-morty" id="reset-code" v-model="resetCode" class="reset-input"> <button type="button" class="reset-button" :disabled="resetCodeGenerated !== resetCode" @click="resetMyList" aria-label="reset list">Reset my list</button></div><div class="sidebar__footer"><p>Made with ☕ by <a href="https://fb.me/heychrono" target="_blank" rel="noopener">Justin Pacual</a>—<a href="https://github.com/heychrono/Chronobiks" target="_blank" rel="noopener">Chronobiks v1</a> | September 2021 <a href="LICENSE.md" target="_blank" rel="noopener">MIT License</a></p></div><a href="https://simpleanalytics.com/?utm_source=chronobiks.tech&utm_content=badge" referrerpolicy="origin" target="_blank"><img src="https://simpleanalyticsbadge.com/chronobiks.netlify.app?counter=true" loading="lazy" referrerpolicy="no-referrer" crossorigin="anonymous" style="inline-size:150px;margin:10px 0"></a></div><section class="timer__trigger"><div class="timer"><h1 id="timer"><span id="seconds">00</span> <span>:</span> <span id="milliseconds">00</span></h1><div class="timer-guide"><p id="message-guide">Hold space or touch and hold anywhere to run the timer.</p></div></div></section><div class="timer__newest"><div class="timer__group" id="app-newest"><h4 class="sidebar__heading">✨ Newest</h4><div class="sidebar__timeInfo"><template v-if="timeListFromStorage === 'false'"><p class="solved-time">Hi, welcome to chronobiks! 🎉</p><p>Today</p></template><template v-else><p class="solved-time">{{newestTime}} <span>sec</span></p><p><template v-if="currentDateToday == newestDate">Today</template><template v-else>{{ newestDate }}</template></p></template></div></div><div class="social-media"><p>Chronobiks v1</p><a href="http://facebook.com/heychrono" target="_blank" rel="noopener"><img src="app/build/assets/icons/icon-facebook.svg" alt="facebook icon"></a><a href="http://github.com/heychrono" target="_blank" rel="noopener"><img src="app/build/assets/icons/icon-github.svg" alt="github icon"></a><a href="http://twitter.com/heychronoo" target="_blank" rel="noopener"><img src="app/build/assets/icons/icon-twitter.svg" alt="twitter icon"></a><a href="http://instagram.com/heychrono" target="_blank" rel="noopener"><img src="app/build/assets/icons/icon-instagram.svg" alt="instagram icon"></a></div></div><script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script><noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade"></noscript></body><script src="app/build/script/transfer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script><script src="app/build/script/timer.min.js" async defer></script><script src="app/build/script/sidebar.min.js" async defer></script><script src="app/build/script/modal.min.js" async defer></script><script>(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:2598059,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');</script></html>