From 0cf8dc2a8ea06e657167ada2768069bc25998ce0 Mon Sep 17 00:00:00 2001 From: Ray C Date: Mon, 15 Apr 2024 22:29:29 +0800 Subject: [PATCH] Add files --- index.html | 162 ++++++++++++++++++++++++++++++++++++++++++++ src/app.js | 106 +++++++++++++++++++++++++++++ src/pages/404.html | 41 +++++++++++ src/pages/home.html | 25 +++++++ src/style.css | 8 +++ 5 files changed, 342 insertions(+) create mode 100644 index.html create mode 100644 src/app.js create mode 100644 src/pages/404.html create mode 100644 src/pages/home.html create mode 100644 src/style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..42842d3 --- /dev/null +++ b/index.html @@ -0,0 +1,162 @@ + + + + + + + + Hyper + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + +
+ +
+ +
+ + + + diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..72cb75c --- /dev/null +++ b/src/app.js @@ -0,0 +1,106 @@ +'use strict'; + +const TITLE = 'Hyper'; + +const utils = { + scrollToTop() { + scrollTo({ top: 0, behavior: 'smooth' }); + }, + getWindowWidth() { + return window.innerWidth; + }, + isVisible(el) { + return el.getBoundingClientRect().bottom > 0; + }, + toggleClasses(el, cls) { + cls.split(' ').map(cl => el.classList.toggle(cl)); + }, + getScrollProgress() { + const winScroll = + document.body.scrollTop || document.documentElement.scrollTop; + const height = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + const scrolled = (winScroll / height) * 100; + return Math.round(scrolled) + '%'; + }, + playAudio(audio, volume = 1) { + audio.currentTime = 0; + audio.volume = volume; + audio.play(); + }, + async fetchData(api) { + return await fetch(api).then(res => res.json()); + }, + async delay(delay = 0) { + await new Promise(resolve => { + setTimeout(resolve, delay * 1000); + }); + }, + getParamsByUrl(url = window.location.href) { + const urlSearch = url.split('?')[1]; + const urlSearchParams = new URLSearchParams(urlSearch); + const entries = Object.fromEntries(urlSearchParams.entries()); + Object.keys(entries).forEach(entry => { + const split = entries[entry].split(' '); + if (split.length === 1 && split[0] === '') return (entries[entry] = []); + entries[entry] = split; + }); + return entries; + }, + copyText(text) { + navigator.clipboard.writeText(text.trim()); + }, + getRandomNum(min, max) { + return Math.floor(Math.random() * max) + min; + }, + thousandFormat(num) { + const parts = num.toString().split('.'); + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); + return parts.join('.'); + }, + getRepeatedItem(arr) { + const set = new Set(); + return arr.filter(item => + set.has(JSON.stringify(item)) + ? true + : (set.add(JSON.stringify(item)), false) + ); + }, +}; + +const STORAGE_KEY = `${TITLE.replaceAll(' ', '-')}-hyper-app`; +const localStore = { + fetch() { + return JSON.parse(localStorage.getItem(STORAGE_KEY)); + }, + save(id) { + localStorage.setItem(STORAGE_KEY, JSON.stringify(id)); + }, + remove() { + localStorage.removeItem(STORAGE_KEY); + }, +}; + +const router = { + routes: [ + { path: '/', component: '/home.html' }, + { path: '/docs', component: '/docs.html' }, + { path: '/about/faq', component: '/about/faq.html' }, + { + path: '/about/acknowledgements', + component: '/about/acknowledgements.html', + }, + ], + currentPath: '', + updatePath() { + const path = location.hash.slice(1).split('?')[0]; + this.currentPath = path.startsWith('/') ? path : '/'; + }, + async getPageHTML(path = this.currentPath) { + const root = '/src/pages'; + const page = + this.routes.find(route => route.path === path)?.component || '/404.html'; + return await fetch(root + page).then(res => res.text()); + }, +}; diff --git a/src/pages/404.html b/src/pages/404.html new file mode 100644 index 0000000..c9e95e2 --- /dev/null +++ b/src/pages/404.html @@ -0,0 +1,41 @@ +
+
+ + + + + + + + + + + + + + +

Uh-oh!

+

We can't find that page.

+ + Go Back Home + +
+
diff --git a/src/pages/home.html b/src/pages/home.html new file mode 100644 index 0000000..6c46557 --- /dev/null +++ b/src/pages/home.html @@ -0,0 +1,25 @@ +
+

+ Understand User Flow. Increase Conversion. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo + tenetur fuga ducimus numquam ea! +

+
+ + Get Started + + + Learn More + +
+
diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..47c3298 --- /dev/null +++ b/src/style.css @@ -0,0 +1,8 @@ +::selection { + color: #333; + background-color: #B3D8FF; +} + +[x-cloak] { + display: none; +} \ No newline at end of file