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>
<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>
<link rel="icon" href="/Logo.svg" type="image/svg+xml">
<link rel="stylesheet" href="styles.css" />
@ -38,7 +38,7 @@
</div>
<div id="about-content">
<div class="title">
<div class="about-title">
<img src="/assets/svg/the-conductor-title.svg"></img>
</div>
<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 =
sampleKeys[Math.floor(Math.random() * (numSamples - 1))];
source.buffer = samples[`${ramdomKey}`]; // Example: Play the 'Gong' sound
source.buffer = samples[`${ramdomKey}`];
source.connect(gainNode);
source.start();
}

40
styles.css
View File

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