skelbon
/
conductor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

original working version

This commit is contained in:
skelbon 2025-01-17 16:00:37 +00:00
parent c4acccbb85
commit 19c306ad79
4 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Conductor</title> <title>Conductor</title>
<link rel="icon" href="/Logo.svg" type="image/svg+xml"> <link rel="icon" href="/Logo.svg" type="image/svg+xml">
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
@ -38,7 +38,7 @@
</div> </div>
<div id="about-content"> <div id="about-content">
<div class="title"> <div class="about-title">
<img src="/assets/svg/the-conductor-title.svg"></img> <img src="/assets/svg/the-conductor-title.svg"></img>
</div> </div>
<div class="about-content"> <div class="about-content">

3
notes.txt
View File

@ -13,3 +13,6 @@ sort out the blitzortung connection issue
make the text max size smaller
about page make title smaller

2
src/script.js
View File

@ -196,7 +196,7 @@ document.addEventListener("DOMContentLoaded", async () => {
const ramdomKey = const ramdomKey =
sampleKeys[Math.floor(Math.random() * (numSamples - 1))]; sampleKeys[Math.floor(Math.random() * (numSamples - 1))];
source.buffer = samples[`${ramdomKey}`]; // Example: Play the 'Gong' sound source.buffer = samples[`${ramdomKey}`];
source.connect(gainNode); source.connect(gainNode);
source.start(); source.start();
} }

40
styles.css
View File

@ -5,7 +5,18 @@ body {
align-items: center; align-items: center;
background-color: rgb(24, 24, 24); background-color: rgb(24, 24, 24);
height: 100vh; height: 100vh;
overflow-x: hidden;
} }
object {
margin-bottom: 10px;
}
html {
overflow-x: hidden;
}
#main-content { #main-content {
position: absolute; position: absolute;
@ -18,6 +29,7 @@ body {
align-items: center; align-items: center;
opacity: 0; opacity: 0;
transition: opacity 2s ease; transition: opacity 2s ease;
} }
#about-content { #about-content {
@ -32,7 +44,7 @@ body {
/* justify-content: center; */ /* justify-content: center; */
align-items: center; align-items: center;
font-family: 'Courier'; font-family: 'Courier';
font-size: 12pt; font-size: clamp(8pt, 3vw, 12pt);
line-height: 1.2; line-height: 1.2;
margin: 20px; margin: 20px;
opacity: 0; opacity: 0;
@ -81,8 +93,8 @@ body {
position: relative; position: relative;
display: flex; display: flex;
margin: 8px; margin: 8px;
padding-top: 8% ; padding-top: 8% ;
padding-bottom: 8% ; padding-bottom: 8% ;
flex-direction: row; flex-direction: row;
align-content: center; align-content: center;
justify-content: space-around; justify-content: space-around;
@ -92,12 +104,13 @@ padding-bottom: 8% ;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
vertical-align: baseline; vertical-align: baseline;
align-items: center;
text-align: center;
justify-content: space-between; justify-content: space-between;
width: 25px; width: clamp(10px,5rem,24px);
font-size: xx-small; font-size: clamp(8px, 1vw, 12px);
margin: 0;
} }
.sheet-music-window { .sheet-music-window {
position: relative; position: relative;
width: 80vw; width: 80vw;
@ -129,25 +142,30 @@ padding-bottom: 8% ;
top: 0; top: 0;
right: 0; right: 0;
flex: 0 0 auto; flex: 0 0 auto;
z-index: 99; z-index: 10;
} }
.title{ .title{
top: 30px; top: 30px;
width: 30%; width: 100%;
margin: 30px; margin: 30px;
text-align: center; text-align: center;
color: white; color: white;
background-color: rgb(24,24,24); background-color: rgb(24,24,24);
/* height: 20vh; */ /* height: 20vh; */
font-family: Helvetica; font-family: Helvetica;
font-size: 1.4vw; font-size: clamp(8px,1.1vw, 18px);
} }
.about-title {
top: 30px;
width: 50%;
}
.title-title { .title-title {
font-family: Helvetica; font-family: Helvetica;
color: #fff; color: #fff;
font-size: 1.5vw;; font-size: clamp(12px,1.5vw, 24px);
} }
.production-credits { .production-credits {