add icon and stuff
This commit is contained in:
parent
96fef1ddaf
commit
871ad5f96a
7 changed files with 318 additions and 88 deletions
26
package.json
26
package.json
|
|
@ -1,14 +1,14 @@
|
||||||
{
|
{
|
||||||
"name": "heardle",
|
"name": "musedel",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^5.16.6"
|
"astro": "^5.16.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,76 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
<style>
|
|
||||||
path { fill: #000; }
|
<svg
|
||||||
@media (prefers-color-scheme: dark) {
|
width="256"
|
||||||
path { fill: #FFF; }
|
height="256"
|
||||||
}
|
viewBox="0 0 67.733332 67.733333"
|
||||||
</style>
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||||
|
sodipodi:docname="favicon.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#000000"
|
||||||
|
bordercolor="#999999"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="1.693779"
|
||||||
|
inkscape:cx="161.17805"
|
||||||
|
inkscape:cy="118.37436"
|
||||||
|
inkscape:window-width="2544"
|
||||||
|
inkscape:window-height="1331"
|
||||||
|
inkscape:window-x="35"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient4"
|
||||||
|
inkscape:collect="always">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#cc56d0;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop4" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#6e06ff;stop-opacity:1;"
|
||||||
|
offset="1"
|
||||||
|
id="stop5" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient4"
|
||||||
|
id="linearGradient5"
|
||||||
|
x1="18.62522"
|
||||||
|
y1="30.241716"
|
||||||
|
x2="42.590687"
|
||||||
|
y2="30.241716"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(1.7399691,0,0,1.7399691,-19.390224,-18.752995)" />
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<circle
|
||||||
|
style="fill:#ffffff;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round"
|
||||||
|
id="path1"
|
||||||
|
cx="33.866665"
|
||||||
|
cy="33.866665"
|
||||||
|
r="33.866665" />
|
||||||
|
<path
|
||||||
|
style="font-variation-settings:'wght' 800;fill:#000000;fill-opacity:0.999603;stroke:url(#linearGradient5);stroke-width:1.26618;stroke-dasharray:none"
|
||||||
|
d="m 51.766119,15.709776 c -0.34468,-0.01677 -0.699084,0.03482 -1.043917,0.163646 L 36.967845,21.012087 23.70982,15.90849 c -0.651354,-0.250727 -1.334031,-0.222498 -1.920594,0.02788 -1.272851,0.318204 -2.246985,2.286788 -2.246985,4.682793 v 20.873859 a 5.8726179,5.2829476 0 0 0 -0.652784,-0.03236 5.8726179,5.2829476 0 0 0 -5.872374,5.28253 5.8726179,5.2829476 0 0 0 5.872374,5.283428 5.8726179,5.2829476 0 0 0 4.442719,-1.842366 c 0.139439,-0.127644 0.271184,-0.276846 0.394729,-0.445981 a 5.8726179,5.2829476 0 0 0 1.034924,-2.995081 5.8726179,5.2829476 0 0 0 -0.01175,-0.330887 c 0.0077,-0.147882 0.01175,-0.29796 0.01175,-0.44958 V 21.885164 l 11.023629,4.24311 c 0.29583,0.149895 0.620334,0.240973 0.954902,0.269745 0.453631,0.04537 0.901892,-0.03322 1.301973,-0.215797 l 11.454323,-4.278174 v 15.177717 a 5.8726179,5.2829476 0 0 0 -0.652786,-0.03237 5.8726179,5.2829476 0 0 0 -5.872375,5.282529 5.8726179,5.2829476 0 0 0 5.872375,5.283427 5.8726179,5.2829476 0 0 0 5.872374,-5.283427 5.8726179,5.2829476 0 0 0 -0.0082,-0.28683 c 0.0058,-0.110974 0.0082,-0.222925 0.0082,-0.336286 v -21.87821 c 0,-2.261125 -1.16343,-4.08126 -2.609344,-4.08126 -0.112112,-0.0205 -0.225887,-0.03397 -0.340781,-0.03957 z"
|
||||||
|
id="rect1" />
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 749 B After Width: | Height: | Size: 3.4 KiB |
70
src/assets/icon.svg
Normal file
70
src/assets/icon.svg
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 67.733332 67.733333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||||
|
sodipodi:docname="note.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#999999"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="1.693779"
|
||||||
|
inkscape:cx="161.17805"
|
||||||
|
inkscape:cy="118.37436"
|
||||||
|
inkscape:window-width="1066"
|
||||||
|
inkscape:window-height="995"
|
||||||
|
inkscape:window-x="35"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient4"
|
||||||
|
inkscape:collect="always">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#cc56d0;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop4" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#6e06ff;stop-opacity:1;"
|
||||||
|
offset="1"
|
||||||
|
id="stop5" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient4"
|
||||||
|
id="linearGradient5"
|
||||||
|
x1="18.62522"
|
||||||
|
y1="30.241716"
|
||||||
|
x2="42.590687"
|
||||||
|
y2="30.241716"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(2.3887526,0,0,2.3887526,-39.248161,-38.373326)" />
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
style="font-variation-settings:'wght' 800;fill:#000000;fill-opacity:0.999603;stroke:url(#linearGradient5);stroke-width:1.73806;stroke-dasharray:none"
|
||||||
|
d="M 58.440302,8.9396043 C 57.9671,8.9165719 57.480551,8.9874152 57.007139,9.1642689 L 38.124184,16.218991 19.922629,9.2124118 c -0.894227,-0.3442168 -1.831452,-0.3054594 -2.636727,0.038268 -1.74746,0.4368527 -3.08482,3.1394632 -3.08482,6.4288692 v 28.657109 a 8.0623453,7.2528042 0 0 0 -0.896188,-0.04443 8.0623453,7.2528042 0 0 0 -8.0620117,7.252231 8.0623453,7.2528042 0 0 0 8.0620117,7.253464 8.0623453,7.2528042 0 0 0 6.099278,-2.529331 c 0.191434,-0.175238 0.372301,-0.380075 0.541913,-0.612273 a 8.0623453,7.2528042 0 0 0 1.420817,-4.11186 8.0623453,7.2528042 0 0 0 -0.01605,-0.454266 c 0.01048,-0.203021 0.01605,-0.40906 0.01605,-0.617213 V 17.417614 l 15.134017,5.825239 c 0.406135,0.205788 0.851638,0.330826 1.310957,0.370326 0.622776,0.06228 1.238181,-0.04562 1.787441,-0.29626 l 15.725304,-5.873382 v 20.837046 a 8.0623453,7.2528042 0 0 0 -0.89619,-0.04443 8.0623453,7.2528042 0 0 0 -8.062012,7.252229 8.0623453,7.2528042 0 0 0 8.062012,7.253464 8.0623453,7.2528042 0 0 0 8.062011,-7.253464 8.0623453,7.2528042 0 0 0 -0.01123,-0.393781 c 0.0079,-0.152355 0.01123,-0.306047 0.01123,-0.461675 V 14.596961 c 0,-3.104232 -1.597239,-5.6030412 -3.582293,-5.6030412 -0.153908,-0.028151 -0.310113,-0.046638 -0.467847,-0.054316 z"
|
||||||
|
id="rect1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -1,22 +1,17 @@
|
||||||
|
---
|
||||||
|
import "../styles/layout.css"
|
||||||
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Astro Basics</title>
|
<title>Musedel</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro"
|
import Layout from "../layouts/Layout.astro"
|
||||||
|
import "../styles/index.css"
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
|
@ -7,53 +8,85 @@ import Layout from "../layouts/Layout.astro"
|
||||||
id="music"
|
id="music"
|
||||||
src="https://www.youtube-nocookie.com/embed/NyaOYfpq9Fc?enablejsapi=1"
|
src="https://www.youtube-nocookie.com/embed/NyaOYfpq9Fc?enablejsapi=1"
|
||||||
></iframe>
|
></iframe>
|
||||||
<button id="play">Play</button>
|
<button id="play">
|
||||||
<button id="skip">Skip</button>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
|
||||||
|
><path
|
||||||
|
d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
<span id="timeout">1</span>
|
<span id="timeout">1</span>
|
||||||
|
<button id="skip">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
|
||||||
|
><path
|
||||||
|
d="M660-280v-400q0-17 11.5-28.5T700-720q17 0 28.5 11.5T740-680v400q0 17-11.5 28.5T700-240q-17 0-28.5-11.5T660-280Zm-440-35v-330q0-18 12-29t28-11q5 0 11 1t11 5l248 166q9 6 13.5 14.5T548-480q0 10-4.5 18.5T530-447L282-281q-5 4-11 5t-11 1q-16 0-28-11t-12-29Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class ExtendableTimeout {
|
||||||
|
private timerId: ReturnType<typeof setTimeout>
|
||||||
|
private timeStart: number
|
||||||
|
private fn: () => void
|
||||||
|
|
||||||
|
constructor(fn: () => void, time: number) {
|
||||||
|
this.fn = fn
|
||||||
|
this.timeStart = Date.now()
|
||||||
|
this.timerId = setTimeout(fn, time)
|
||||||
|
}
|
||||||
|
|
||||||
|
extend(time: number): void {
|
||||||
|
clearTimeout(this.timerId)
|
||||||
|
|
||||||
|
const elapsed = Date.now() - this.timeStart
|
||||||
|
const newTime = Math.max(0, time - elapsed)
|
||||||
|
|
||||||
|
this.timerId = setTimeout(this.fn, newTime)
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel(): void {
|
||||||
|
clearTimeout(this.timerId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const iframe = document.querySelector("#music")
|
||||||
|
const play = document.querySelector("#play")
|
||||||
|
const skip = document.querySelector("#skip")
|
||||||
|
var timeout = 1000
|
||||||
|
var timer: ExtendableTimeout | null
|
||||||
|
|
||||||
|
const message = (command: String) =>
|
||||||
|
(iframe as HTMLIFrameElement)?.contentWindow?.postMessage(
|
||||||
|
JSON.stringify({
|
||||||
|
event: "command",
|
||||||
|
func: command,
|
||||||
|
}),
|
||||||
|
"*"
|
||||||
|
)
|
||||||
|
|
||||||
|
const playVideo = () => {
|
||||||
|
// fix times
|
||||||
|
timer?.cancel()
|
||||||
|
message("playVideo")
|
||||||
|
if (timer == null) {
|
||||||
|
timer = new ExtendableTimeout(() => {
|
||||||
|
message("stopVideo")
|
||||||
|
timer = null
|
||||||
|
}, timeout)
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
play?.addEventListener("click", playVideo)
|
||||||
|
|
||||||
|
skip?.addEventListener("click", () => {
|
||||||
|
if (timeout >= 16000) return alert("FAIL!!!!")
|
||||||
|
timeout *= 2
|
||||||
|
document.querySelector("#timeout")!.textContent = (
|
||||||
|
timeout / 1000
|
||||||
|
).toString()
|
||||||
|
playVideo()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
#music {
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const iframe = document.getElementById("music")
|
|
||||||
const play = document.getElementById("play")
|
|
||||||
const skip = document.getElementById("skip")
|
|
||||||
var timeout = 1000
|
|
||||||
|
|
||||||
const message = (command: String) =>
|
|
||||||
(iframe as HTMLIFrameElement)?.contentWindow?.postMessage(
|
|
||||||
JSON.stringify({
|
|
||||||
event: "command",
|
|
||||||
func: command,
|
|
||||||
}),
|
|
||||||
"*"
|
|
||||||
)
|
|
||||||
|
|
||||||
const playVideo = () => {
|
|
||||||
message("playVideo")
|
|
||||||
setTimeout(() => {
|
|
||||||
message("stopVideo")
|
|
||||||
}, timeout)
|
|
||||||
}
|
|
||||||
|
|
||||||
play?.addEventListener("click", playVideo)
|
|
||||||
|
|
||||||
skip?.addEventListener("click", () => {
|
|
||||||
timeout *= 2
|
|
||||||
document.querySelector("#timeout")!.textContent = (
|
|
||||||
timeout / 1000
|
|
||||||
).toString()
|
|
||||||
playVideo()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
6
src/styles/index.css
Normal file
6
src/styles/index.css
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
#music {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
59
src/styles/layout.css
Normal file
59
src/styles/layout.css
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background: linear-gradient(black, rgb(18, 2, 38));
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
--border-radius: 2rem;
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
|
padding: 0.2rem 1rem;
|
||||||
|
margin: 1rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
background: rgb(211, 211, 211);
|
||||||
|
}
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
width: 2.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button::before {
|
||||||
|
--border-size: 5px;
|
||||||
|
content: "";
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to bottom right,
|
||||||
|
#cc56d0 0%,
|
||||||
|
#6e06ff 100%
|
||||||
|
);
|
||||||
|
padding: var(--border-size);
|
||||||
|
top: calc(var(--border-size) * -1);
|
||||||
|
left: calc(var(--border-size) * -1);
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue