From eaf86a51cabc026c52598b1e736b3926acad19bc Mon Sep 17 00:00:00 2001 From: Klemek Date: Tue, 29 Oct 2024 01:08:51 +0100 Subject: [PATCH] initial commit --- .gitignore | 1 + index.html | 27 +++++++++ main.js | 92 ++++++++++++++++++++++++++++ style.css | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 291 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ee75bcd --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + Tape Record + + + + + + +
+

Tape Record

+
+

+   +
+

+
+   + +
+

{{ remaining }}

+ @Klemek - Github Repository - 2024 +
+ + diff --git a/main.js b/main.js new file mode 100644 index 0000000..be408c8 --- /dev/null +++ b/main.js @@ -0,0 +1,92 @@ +/* exported app */ +let app = { + data() { + return { + rid: 0, + file: null, + ready: false, + playing: false, + ended: false, + audio: null, + startedDate: null, + color: null, + remaining: null, + }; + }, + watch: { + }, + computed: { + canPlay() { + return this.ready && !this.playing; + }, + canStop() { + return this.ready && this.playing; + }, + }, + methods: { + showApp() { + document.getElementById("app").setAttribute("style", ""); + }, + changeFile(event) { + this.ready = false; + this.file = URL.createObjectURL(event.target.files[0]); + this.audio = new Audio(this.file); + this.audio.addEventListener('ended', () => { + this.ended = true; + this.onStop(); + }); + this.audio.addEventListener('loadeddata', () => { + this.ready = true; + }); + }, + onPlay() { + this.ended = false; + this.playing = true; + this.startedDate = new Date(); + setTimeout(() => this.audio.play(), 5000); + }, + onStop() { + this.audio.pause(); + this.audio.currentTime = 0; + this.playing = false; + }, + getColor() { + if ((this.playing && ((new Date() - this.startedDate) / 1000) <= 5)) { + return '#f00'; + } else if (this.playing) { + return '#0f0'; + } else if (this.ended) { + return '#f50' + } + }, + getRemaining() { + if (this.ended) { + return '00:00'; + } + if (!this.ready || !this.playing) { + return '00:05'; + } + const d1 = Math.floor((new Date() - this.startedDate) / 1000); + if (d1 < 5) { + return `00:${String(Math.floor(5 - d1)).padStart(2, "0")}`; + } + const d2 = this.audio.duration - d1 + 5; + return `${String(Math.floor(d2 / 60)).padStart(2, "0")}:${String(Math.floor(d2) % 60).padStart(2, "0")}`; + }, + }, + mounted: function () { + console.log("app mounted"); + setTimeout(this.showApp); + setInterval(() => { + this.rid = Math.random(); + this.color = this.getColor(); + this.remaining = this.getRemaining(); + document.body.setAttribute("style", this.color ? "background: " + this.color : ''); + }, 200); + }, +}; + +window.onload = () => { + app = Vue.createApp(app); + app.mount("#app"); +}; diff --git a/style.css b/style.css new file mode 100644 index 0000000..f9c1b60 --- /dev/null +++ b/style.css @@ -0,0 +1,171 @@ +/* +================================================= +https://www.joshwcomeau.com/css/custom-css-reset/ +================================================= +*/ + +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, +*::before, +*::after { + box-sizing: border-box; +} +/* + 2. Remove default margin + */ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application + */ +html, +body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering + */ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults + */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles + */ +input, +button, +textarea, +select { + font: inherit; +} +/* + 8. Avoid text overflows + */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context + */ +#root, +#__next { + isolation: isolate; +} + +/* +================================================= +CUSTOM STYLE +================================================= +*/ + +@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); + +:root { + /* https://materialui.co/colors/ */ + --hue-primary: 65.52; + --sat-primary: 20%; + --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%); + --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%); + --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%); + --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%); + --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%); + --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%); +} + +/* +================================================= +https://blog.koley.in/2019/339-bytes-of-responsive-css +https://www.swyx.io/css-100-bytes +https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41 +================================================= +*/ + +html, +body { + padding: 0; + max-width: 100%; + color: var(--text-primary); + font-family: "Roboto", Verdana, serif; +} + +body { + background-color: var(--background); +} + +main { + padding: 1.5rem; + margin: auto; + background-color: var(--background-primary); + min-height: 100%; +} + +table { + border-collapse: collapse; + width: 100%; + font-size: 0.9em; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 1em 0 0.5em; +} + +p, +ul, +ol { + margin-bottom: 2em; + color: var(--text-secondary); +} + +textarea, +input, +select, +.mono { + font-family: "Roboto Mono", monospace; +} + +textarea { + width: 100%; + min-width: 100%; + max-width: 100%; +} + +a { + color: inherit; +} + +@media only screen and (min-width: 768px) { + main { + max-width: 42rem; + } + table { + font-size: inherit; + } +}