Ditch next
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
38
.gitignore
vendored
|
@ -1,39 +1 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# development
|
||||
.vscode/
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
:root {
|
||||
/* --max-width: 1100px; */
|
||||
--border-radius: 12px;
|
||||
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-rgb: 10, 10, 10;
|
||||
|
||||
--callout-rgb: 238, 240, 241;
|
||||
--callout-border-rgb: 172, 175, 176;
|
||||
--card-rgb: 180, 185, 188;
|
||||
--card-border-rgb: 131, 134, 135;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: rgb(var(--background-rgb));
|
||||
}
|
|
@ -1,18 +0,0 @@
|
|||
import './globals.css'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Noise',
|
||||
description: 'Noise - An audio-visual pitch for a game about sound',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
|
@ -1,41 +0,0 @@
|
|||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 10vh 10vw;
|
||||
}
|
||||
|
||||
.begin {
|
||||
margin: 25vh 0;
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: var(--border-radius);
|
||||
background: rgba(var(--card-rgb), 0.3);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0);
|
||||
transition: background 200ms, border 200ms;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: var(--font-sans);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.begin:hover {
|
||||
background: rgba(var(--card-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
||||
}
|
||||
|
||||
.begin:hover span {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.begin:hover span {
|
||||
transform: none;
|
||||
}
|
||||
}
|
|
@ -1,145 +0,0 @@
|
|||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inherit;
|
||||
justify-content: inherit;
|
||||
align-items: inherit;
|
||||
font-size: 0.85rem;
|
||||
max-width: var(--max-width);
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.description a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.description p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--callout-rgb), 0.5);
|
||||
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.begin {
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: var(--border-radius);
|
||||
background: rgba(var(--card-rgb), 0);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0);
|
||||
transition: background 200ms, border 200ms;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.begin span {
|
||||
display: inline-block;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
.begin h2 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.begin p {
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.begin:hover {
|
||||
background: rgba(var(--card-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
||||
}
|
||||
|
||||
.begin:hover span {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.begin:hover span {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile and Tablet */
|
||||
@media (max-width: 1023px) {
|
||||
.begin {
|
||||
padding: 1rem 2.5rem;
|
||||
}
|
||||
|
||||
.begin h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.description a {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.description p,
|
||||
.description div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description p {
|
||||
align-items: center;
|
||||
inset: 0 0 auto;
|
||||
padding: 2rem 1rem 1.4rem;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(var(--background-start-rgb), 1),
|
||||
rgba(var(--callout-rgb), 0.5)
|
||||
);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.description div {
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
inset: auto 0 0;
|
||||
padding: 2rem;
|
||||
height: 200px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgb(var(--background-end-rgb)) 40%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
16
app/page.tsx
|
@ -1,16 +0,0 @@
|
|||
import styles from './page.module.css'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.begin}>
|
||||
<h2>Click to begin</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.description}>
|
||||
<p>The Myrtle Tree - A game about sound and reliving memories.</p>
|
||||
<p>By Rory Healy</p>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
|
@ -1,39 +0,0 @@
|
|||
.all {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px;
|
||||
border-radius: 10px;
|
||||
border-color: rgb(60, 60, 60);
|
||||
background-color: rgb(50, 50, 50);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: rgb(60, 60, 60);
|
||||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text p {
|
||||
display: inline;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.text a {
|
||||
display: inline;
|
||||
padding: 0 3px;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text a:hover {
|
||||
color: rgb(110, 150, 240);
|
||||
}
|
|
@ -1,38 +0,0 @@
|
|||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import styles from './audio.module.css';
|
||||
|
||||
type Display = 'text' | 'button';
|
||||
|
||||
export default function AudioButton({ file, text, type }: { file: string, text: string, type: Display }) {
|
||||
const audio: HTMLAudioElement = new Audio('/public/audio/1.ogg')
|
||||
if (audio === null) {
|
||||
console.log('uhoh')
|
||||
}
|
||||
const id = `audio-${new Date().getTime()}`
|
||||
|
||||
function makeAudio() {
|
||||
if (type == 'text') {
|
||||
return (
|
||||
<div className={styles.all}>
|
||||
<div className={styles.text}>
|
||||
<a onClick={audio.play}>{text}</a>
|
||||
{/* <audio src={`/audio/${file}`} id={id} /> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (type == 'button') {
|
||||
return (
|
||||
<div className={styles.all}>
|
||||
<button onClick={audio.play} className={styles.button}>{text}</button>
|
||||
{/* <audio src={`/audio/${file}`} id={id} /> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return makeAudio();
|
||||
}
|
7
credits
Normal file
|
@ -0,0 +1,7 @@
|
|||
Icons:
|
||||
- pause by Nawicon from <a href="https://thenounproject.com/browse/icons/term/pause/" target="_blank" title="pause Icons">Noun Project</a>
|
||||
- Mute by Nawicon from <a href="https://thenounproject.com/browse/icons/term/mute/" target="_blank" title="Mute Icons">Noun Project</a>
|
||||
- volume up by Nawicon from <a href="https://thenounproject.com/browse/icons/term/volume-up/" target="_blank" title="volume up Icons">Noun Project</a>
|
||||
- menu by Nawicon from <a href="https://thenounproject.com/browse/icons/term/menu/" target="_blank" title="menu Icons">Noun Project</a>
|
||||
- square by Nawicon from <a href="https://thenounproject.com/browse/icons/term/square/" target="_blank" title="square Icons">Noun Project</a>
|
||||
- triangle by Nawicon from <a href="https://thenounproject.com/browse/icons/term/triangle/" target="_blank" title="triangle Icons">Noun Project</a
|
26
index.html
Normal file
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>The Myrtle Tree</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="wrapper">
|
||||
<button class="centre">Click to begin</button>
|
||||
<section class="controls">
|
||||
<button id="play" onclick="playAudio()">Play</button>
|
||||
<button id="pause" onclick="pauseAudio()">Pause</button>
|
||||
<button id="stop" onclick="stopAudio()">Stop</button>
|
||||
<audio id="backgroundAudio" src="public/audio/roli.webm" type="audio/webm">
|
||||
</section>
|
||||
<footer>
|
||||
<p>The Myrtle Tree - A game about sound and reliving memories.</p>
|
||||
<p>By Rory Healy.</p>
|
||||
</footer>
|
||||
</main>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
23
index.js
Normal file
|
@ -0,0 +1,23 @@
|
|||
import { createServer } from "http";
|
||||
import { readFile } from "fs/promises";
|
||||
|
||||
const hostname = "127.0.0.1";
|
||||
const port = 3000;
|
||||
|
||||
const server = createServer((req, res) => {
|
||||
readFile("index.html")
|
||||
.then((contents) => {
|
||||
res.setHeader("Content-Type", "text/html");
|
||||
res.writeHead(200);
|
||||
res.end(contents);
|
||||
})
|
||||
.catch((err) => {
|
||||
res.writeHead(500);
|
||||
res.end(err);
|
||||
return;
|
||||
});
|
||||
});
|
||||
|
||||
server.listen(port, hostname, () => {
|
||||
console.log(`Server running at http://${hostname}:${port}/`);
|
||||
});
|
14
main.js
Normal file
|
@ -0,0 +1,14 @@
|
|||
const backgroundAudio = document.getElementById("backgroundAudio");
|
||||
|
||||
const playAudio = () => {
|
||||
backgroundAudio.play();
|
||||
};
|
||||
|
||||
const pauseAudio = () => {
|
||||
backgroundAudio.pause();
|
||||
};
|
||||
|
||||
const stopAudio = () => {
|
||||
backgroundAudio.pause();
|
||||
backgroundAudio.currentTime = 0;
|
||||
};
|
|
@ -1,8 +0,0 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
experimental: {
|
||||
appDir: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
3338
package-lock.json
generated
27
package.json
|
@ -1,22 +1,9 @@
|
|||
{
|
||||
"name": "noise",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "18.15.3",
|
||||
"@types/react": "18.0.28",
|
||||
"@types/react-dom": "18.0.11",
|
||||
"eslint": "8.36.0",
|
||||
"eslint-config-next": "13.2.4",
|
||||
"next": "13.2.4",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"typescript": "4.9.5"
|
||||
}
|
||||
"name": "test",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"type": "module"
|
||||
}
|
||||
|
|
BIN
public/audio/roli.webm
Normal file
Before Width: | Height: | Size: 391 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m24 40-2.1-2.15L34.25 25.5H8v-3h26.25L21.9 10.15 24 8l16 16Z"/></svg>
|
Before Width: | Height: | Size: 141 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>
|
Before Width: | Height: | Size: 220 B |
4
public/images/menu.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m122.5 105c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312zm0 157.5c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312zm0 157.5c-4.6875-0.070312-9.207 1.7422-12.547 5.0312-3.3359 3.2891-5.2188 7.7812-5.2188 12.469s1.8828 9.1797 5.2188 12.469c3.3398 3.2891 7.8594 5.1016 12.547 5.0312h455c4.6875 0.070312 9.207-1.7422 12.547-5.0312 3.3359-3.2891 5.2188-7.7812 5.2188-12.469s-1.8828-9.1797-5.2188-12.469c-3.3398-3.2891-7.8594-5.1016-12.547-5.0312z" fill-rule="evenodd"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
4
public/images/mute.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m401.86 70.004c-2.7266 0.078125-5.3945 0.78906-7.793 2.082l-188.6 101.58h-83.094c-4.6406 0-9.0938 1.8438-12.375 5.125-3.2812 3.2852-5.125 7.7344-5.125 12.375v175c0 4.6445 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h82.988l188.54 104.14v0.003906c5.4219 3 12.023 2.9102 17.363-0.23828 5.3359-3.1445 8.6133-8.8789 8.6133-15.074v-385c0-4.7305-1.9141-9.2617-5.3086-12.559-3.3906-3.2969-7.9766-5.082-12.703-4.9414zm-16.988 46.793v326.04l-166.52-92.012c-2.5977-1.4258-5.5156-2.168-8.4766-2.1562h-70v-140h70c2.8984-0.007813 5.7539-0.73438 8.3047-2.1172zm87.328 75.539v-0.003907c-4.668 0-9.1445 1.8672-12.43 5.1836-3.2852 3.3164-5.1094 7.8086-5.0664 12.477 0.042969 4.668 1.9492 9.1289 5.293 12.383l40.129 40.125-40.129 40.125v0.003906c-3.3906 3.2578-5.3281 7.7422-5.375 12.445-0.050781 4.7031 1.7969 9.2266 5.125 12.555 3.3242 3.3242 7.8477 5.1719 12.551 5.125s9.1875-1.9844 12.445-5.3789l40.129-40.125 40.129 40.125h-0.003906c3.2578 3.3945 7.7461 5.332 12.449 5.3789 4.6992 0.046875 9.2266-1.8008 12.551-5.125 3.3242-3.3281 5.1719-7.8516 5.125-12.555s-1.9844-9.1875-5.3789-12.445l-40.129-40.125 40.129-40.125v-0.003906c3.3945-3.2969 5.3047-7.8242 5.3047-12.555-0.003906-4.7305-1.918-9.2578-5.3125-12.555-3.3945-3.293-7.9766-5.0742-12.707-4.9336-4.5469 0.13672-8.8594 2.0352-12.031 5.2969l-40.125 40.129-40.129-40.129c-3.293-3.3867-7.8164-5.2969-12.543-5.2969z" fill-rule="evenodd"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.5 KiB |
4
public/images/pause.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m192.5 35c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h105c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm210 0c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h105c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm-192.5 35h70v420h-70zm210 0h70v420h-70z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 751 B |
4
public/images/play.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m158.09 35.004c-4.7422-0.15625-9.3438 1.6172-12.754 4.918-3.4062 3.3008-5.332 7.8398-5.3281 12.586v455c0 4.1289 1.4648 8.1289 4.1289 11.285 2.668 3.1562 6.3633 5.2695 10.438 5.9609 4.0742 0.69141 8.2578-0.078125 11.82-2.1758l385-227.5c5.332-3.1484 8.6055-8.8789 8.6055-15.074 0-6.1914-3.2734-11.922-8.6055-15.07l-385-227.5c-2.5234-1.4922-5.3789-2.3281-8.3047-2.4297zm16.918 48.16 333.12 196.84-333.12 196.84z" fill-rule="evenodd"/>
|
||||
</svg>
|
After Width: | Height: | Size: 594 B |
4
public/images/stop.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m122.5 35c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v455c0 4.6406 1.8438 9.0898 5.125 12.375 3.2812 3.2812 7.7344 5.125 12.375 5.125h455c4.6406 0 9.0898-1.8438 12.375-5.125 3.2812-3.2812 5.125-7.7344 5.125-12.375v-455c0-4.6406-1.8438-9.0938-5.125-12.375s-7.7344-5.125-12.375-5.125zm17.5 35h420v420h-420z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 490 B |
4
public/images/volume.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="700pt" height="700pt" version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m401.99 70.004c-2.7266 0.078125-5.3945 0.78906-7.793 2.082l-188.6 101.55h-83.094c-4.6406 0-9.0938 1.8438-12.375 5.1289-3.2812 3.2812-5.125 7.7305-5.125 12.375v175c0 4.6406 1.8438 9.0898 5.125 12.371s7.7344 5.1289 12.375 5.1289h82.988l188.54 104.18c5.4258 3.0039 12.039 2.9102 17.379-0.24609s8.6094-8.8984 8.5977-15.102v-385c-0.007812-4.7266-1.9258-9.2461-5.3203-12.535-3.3906-3.2891-7.9688-5.0703-12.691-4.9297zm69.555 42.59v-0.003906c-5.4883 0.23438-10.551 3.0352-13.664 7.5625-3.1172 4.5234-3.9258 10.25-2.1875 15.461 1.7383 5.2148 5.8242 9.3047 11.031 11.055 55.965 19.816 93.277 72.602 93.277 131.97 0 59.375-37.305 112.16-93.277 131.97v-0.003907c-4.3906 1.5391-7.9883 4.7578-10 8.9531-2.0117 4.1914-2.2734 9.0156-0.72656 13.402 1.5508 4.3828 4.7812 7.9727 8.9805 9.9766 4.1992 2 9.0195 2.2461 13.402 0.6875 69.832-24.715 116.62-90.906 116.62-164.98 0-74.07-46.766-140.23-116.59-164.95v-0.003906c-2.1953-0.82031-4.5312-1.1914-6.8711-1.0898zm-86.543 4.207v326.01l-166.52-91.98v-0.003906c-2.5938-1.4375-5.5117-2.1914-8.4766-2.1914h-70v-140h70v0.003907c2.8984 0.003906 5.7539-0.71484 8.3047-2.0859zm86.645 74.273v-0.003907c-4.8633 0.21094-9.418 2.4336-12.57 6.1406-3.1562 3.707-4.625 8.5586-4.0547 13.391 0.57031 4.8359 3.125 9.2148 7.0547 12.086 17.602 13.23 27.926 33.93 27.926 55.953s-10.352 42.723-27.961 55.953v-0.003906c-3.7148 2.793-6.168 6.9453-6.8203 11.547-0.65234 4.5977 0.55078 9.2695 3.3438 12.984 2.793 3.7109 6.9492 6.1641 11.551 6.8125 4.6016 0.65234 9.2695-0.55469 12.984-3.3516 26.383-19.828 41.902-50.949 41.902-83.949 0-32.996-15.531-64.121-41.902-83.945v0.003906c-3.2734-2.5234-7.3281-3.8047-11.453-3.625z" fill-rule="evenodd"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.8 KiB |
56
styles.css
Normal file
|
@ -0,0 +1,56 @@
|
|||
:root {
|
||||
--border-radius: 12px;
|
||||
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-rgb: 10, 10, 10;
|
||||
|
||||
--callout-rgb: 238, 240, 241;
|
||||
--callout-border-rgb: 172, 175, 176;
|
||||
--card-rgb: 180, 185, 188;
|
||||
--card-border-rgb: 131, 134, 135;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: rgb(var(--background-rgb));
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 10vh 10vw;
|
||||
}
|
||||
|
||||
.centre {
|
||||
margin: 25vh 0;
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: var(--border-radius);
|
||||
background: rgb(var(--card-rgb));
|
||||
border: 1px solid rgb(var(--card-border-rgb));
|
||||
transition: background 200ms, border 200ms;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.centre:hover {
|
||||
background: rgba(var(--card-rgb), 0.7);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.centre:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
|
@ -1,28 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES6",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|