355 lines
12 KiB
HTML
Executable file
355 lines
12 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="kr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RADIO WORLDING</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.7/lib/p5.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/p5.sound@0.2.0/dist/p5.sound.min.js"></script>
|
|
<script src="https://cdn.conversejs.org/dist/converse.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/dist/converse.min.css">
|
|
<script charset="utf-8" src="https://cdn.conversejs.org/dist/converse.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: "Courier";
|
|
background: rgb(145, 0, 255);
|
|
overflow: hidden;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 160px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#p5-canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
z-index: 0;
|
|
}
|
|
|
|
header *:not(canvas) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ascii-art {
|
|
font-family: 'Amatic SC';
|
|
font-size: clamp(24px, 5vw, 36px);
|
|
font-weight: bold;
|
|
box-shadow: -3px -1px 1px 7px rgb(0, 107, 255);
|
|
color: #000000;
|
|
border: dotted 5px #ffc600;
|
|
border-radius: 28% 54%;
|
|
padding: 5px 25px;
|
|
margin-bottom: 10px;
|
|
animation: colorShift 5s infinite alternate;
|
|
}
|
|
|
|
@keyframes colorShift {
|
|
0% {
|
|
color: #ff4e87;
|
|
}
|
|
25% {
|
|
color: #ff7900;
|
|
}
|
|
50% {
|
|
color: #f33333;
|
|
}
|
|
75% {
|
|
color: #00ff17;
|
|
}
|
|
100% {
|
|
color: #0045ff;
|
|
}
|
|
}
|
|
|
|
.audio-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
button, input[type=range] {
|
|
background-color: #0080ff;
|
|
color: #fff200;
|
|
border: dotted 2px #fff200;
|
|
border-radius: 8px 10px 40px 20px;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.active {
|
|
background-color: #fc1257;
|
|
}
|
|
|
|
input[type=range] {
|
|
width: 100px;
|
|
}
|
|
|
|
#elapsed-time {
|
|
font-size: 14px;
|
|
color: white;
|
|
min-width: 60px;
|
|
}
|
|
|
|
main {
|
|
position: absolute;
|
|
top: 160px;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.converse-container {
|
|
position: relative;
|
|
top: 160px;
|
|
/* header height */
|
|
width: 80vw;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
height: calc(100vh - 200px);
|
|
}
|
|
|
|
.conversejs .converse-chatboxes .chatbox .box-flyout {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.conversejs converse-chats.converse-embedded .chat-head {
|
|
display: none;
|
|
}
|
|
|
|
.conversejs converse-chats.converse-embedded .chatroom .box-flyout .chatroom-body .occupants {
|
|
display: none;
|
|
}
|
|
|
|
.conversejs,
|
|
.conversejs.theme-dracula {
|
|
--current-line: #44475a;
|
|
--comment: #6272a4;
|
|
--cyan: #8be9fd;
|
|
--green: #50fa7b;
|
|
--orange: #ffb86c;
|
|
--pink: #ff79c6;
|
|
--purple: #bd93f9;
|
|
--red: #ff5555;
|
|
--yellow: #f1fa8c;
|
|
--background: #282a36;
|
|
--foreground: #f8f8f2;
|
|
--subdued-color: var(--comment);
|
|
--muc-color: var(--orange);
|
|
--chat-color: var(--green);
|
|
--disabled-color: var(--comment);
|
|
--error-color: var(--red);
|
|
--focus-color: var(--comment);
|
|
--headlines-color: var(--pink);
|
|
--headlines-head-text-color: var(--headlines-color);
|
|
--headlines-head-fg-color: var(--headlines-color);
|
|
--headlines-head-bg-color: var(--background);
|
|
--headline-message-color: var(--headlines-color);
|
|
--headline-separator-border-bottom: 2px solid var(--headlines-color);
|
|
--headlines-head-border-bottom: 0.15em solid var(--headlines-color);
|
|
--icon-hover-color: var(--cyan);
|
|
--gray-color: var(--comment);
|
|
--highlight-color: var(--foreground);
|
|
--highlight-color-darker: var(--comment);
|
|
--redder-orange: var(--muc-color);
|
|
--light-background-color: var(--background);
|
|
--chat-background-color: var(--background);
|
|
--chat-content-background-color: var(--background);
|
|
--chat-textarea-background-color: var(--background);
|
|
--chat-textarea-disabled-bg-color: var(--disabled-color);
|
|
--controlbox-pane-background-color: var(--background);
|
|
--controlbox-pane-bg-hover-color: var(--list-item-hover-color);
|
|
--chat-msg-hover-color: var(--current-line);
|
|
--chat-textarea-color: var(--foreground);
|
|
--close-color: var(--foreground);
|
|
--close-color-hover: var(--purple);
|
|
--global-background-color: var(--background);
|
|
--groupchats-header-color-dark: var(--muc-color);
|
|
--groupchats-header-color: var(--muc-color);
|
|
--img-thumbnail-background-color: var(--comment);
|
|
--img-thumbnail-border-color: black;
|
|
--modal-background-color: var(--background);
|
|
--occupants-background-color: var(--background);
|
|
--raised-el-shadow: 1px 1px 10px black;
|
|
--badge-color: var(--background);
|
|
--chatroom-correcting-color: var(--comment);
|
|
--chatroom-head-bg-color-dark: var(--muc-color);
|
|
--chatroom-head-bg-color: var(--background);
|
|
--chatroom-head-border-bottom: 0.15em solid var(--muc-color);
|
|
--chatroom-head-fg-color: var(--muc-color);
|
|
--chatroom-head-color: var(--muc-color);
|
|
--chatroom-head-description-link-color: var(--link-color);
|
|
--chatroom-message-input-border-top: 0.15em solid var(--muc-color);
|
|
--chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
|
|
--muc-toolbar-btn-disabled-color: var(--disabled-color);
|
|
--occupants-border-left: 0.15em solid var(--muc-color);
|
|
--occupants-border-bottom: 0.15em solid var(--muc-color);
|
|
--chat-correcting-color: var(--comment);
|
|
--chat-head-border-bottom: 0.15em solid var(--chat-color);
|
|
--chat-head-fg-color: var(--chat-color);
|
|
--chat-head-color-dark: var(--chat-color);
|
|
--chat-head-color-darker: var(--chat-color);
|
|
--chat-head-color-lighten-50-percent: var(--chat-color);
|
|
--chat-head-color: var(--background);
|
|
--chat-head-text-color: var(--chat-color);
|
|
--chat-toolbar-btn-color: var(--chat-color);
|
|
--chat-toolbar-btn-color: var(--green);
|
|
--chatbox-message-input-border-top: 0.15em solid var(--chat-color);
|
|
--toolbar-btn-text-color: var(--background);
|
|
--unread-msgs-color: var(--yellow);
|
|
--panel-divider-color: var(--comment);
|
|
--chat-status-online: var(--green);
|
|
--chat-status-busy: var(--red);
|
|
--chat-status-away: var(--orange);
|
|
--chat-info-color: var(--orange);
|
|
--brand-heading-color: var(--cyan);
|
|
--completion-light-color: var(--pink);
|
|
--completion-normal-color: var(--red);
|
|
--completion-dark-color: var(--current-line);
|
|
--button-text-color: var(--background);
|
|
--button-hover-text-color: var(--background);
|
|
--controlbox-text-color: var(--foreground);
|
|
--message-text-color: var(--foreground);
|
|
--text-color: var(--foreground);
|
|
--text-color-lighten-15-percent: var(--yellow);
|
|
--text-color-invert: var(--background);
|
|
--message-author-color: var(--purple);
|
|
--controlbox-head-color: var(--purple);
|
|
--controlbox-head-btn-color: var(--subdued-color);
|
|
--message-receipt-color: var(--green);
|
|
--heading-color: var(--purple);
|
|
--inverse-link-color: var(--foreground);
|
|
--link-color: var(--cyan);
|
|
--dark-link-color: var(--cyan);
|
|
--link-hover-color: var(--green);
|
|
--primary-color: var(--purple);
|
|
--primary-color-dark: var(--purple);
|
|
--primary-color-light: var(--pink);
|
|
--danger-color-dark: var(--pink);
|
|
--danger-color: var(--pink);
|
|
--error-color: var(--red);
|
|
--info-color: var(--comment);
|
|
--secondary-color-dark: var(--cyan);
|
|
--secondary-color: var(--cyan);
|
|
--warning-color-dark: var(--orange);
|
|
--warning-color: var(--orange);
|
|
--list-toggle-color: var(--comment);
|
|
--list-toggle-hover-color: var(--comment);
|
|
--list-item-hover-color: var(--current-line);
|
|
--list-item-action-color: var(--comment);
|
|
--list-item-link-color: var(--foreground);
|
|
--list-item-link-hover-color: var(--link-color);
|
|
--list-item-open-color: var(--current-line);
|
|
--list-item-open-hover-color: var(--current-line);
|
|
--list-dot-circle-color: var(--orange);
|
|
--list-item-action-hover-color: var(--cyan);
|
|
--list-group-item-bg-color: var(--comment);
|
|
}
|
|
|
|
.conversejs,
|
|
.conversejs.theme-dracula {
|
|
--background: transparent;
|
|
--current-line: transparent;
|
|
--toolbar-btn-text-color: chocolate;
|
|
--chat-textarea-background-color: #ff69b3;
|
|
--subdued-color: aquamarine;
|
|
}
|
|
|
|
.conversejs .btn-primary {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.conversejs .btn {
|
|
color: turquoise;
|
|
}
|
|
|
|
.conversejs form .form-control::placeholder {
|
|
color: pink;
|
|
}
|
|
|
|
.conversejs converse-chats.converse-embedded .chat-textarea::placeholder {
|
|
color: cornsilk;
|
|
}
|
|
|
|
.conversejs .message.date-separator .separator-text {
|
|
background: blueviolet;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
let mic, fft;
|
|
|
|
function setup() {
|
|
createCanvas(400, 400);
|
|
|
|
// Wait for user to start audio manually (needed for Safari)
|
|
getAudioContext().suspend();
|
|
let startButton = createButton('Start Audio');
|
|
startButton.position(10, 10);
|
|
startButton.mousePressed(() => {
|
|
userStartAudio().then(() => {
|
|
getAudioContext().resume();
|
|
mic = new p5.AudioIn();
|
|
mic.start(() => {
|
|
fft = new p5.FFT();
|
|
fft.setInput(mic);
|
|
});
|
|
});
|
|
startButton.remove(); // Remove button after starting
|
|
});
|
|
}
|
|
|
|
function draw() {
|
|
background(0);
|
|
|
|
if (fft) {
|
|
let spectrum = fft.analyze();
|
|
noStroke();
|
|
fill(255);
|
|
for (let i = 0; i < spectrum.length; i++) {
|
|
let x = map(i, 0, spectrum.length, 0, width);
|
|
let h = -height + map(spectrum[i], 0, 255, height, 0);
|
|
rect(x, height, width / spectrum.length, h);
|
|
}
|
|
} else {
|
|
fill(255);
|
|
text("Click 'Start Audio' to begin", 10, height / 2);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |