396 lines
14 KiB
HTML
Executable file
396 lines
14 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://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
|
|
<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>
|
|
<style>
|
|
* {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
}
|
|
|
|
body {
|
|
background: rgb(145, 0, 255);
|
|
font-family: "Courier", 'GowunDodum-Regular', monospace;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
row-gap: 2em;
|
|
}
|
|
|
|
#canvas-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
}
|
|
|
|
.ascii-art {
|
|
z-index: 0;
|
|
font-family: 'Amatic SC';
|
|
font-size: 30px;
|
|
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: 20px;
|
|
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-direction: row;
|
|
gap: 10px;
|
|
align-items: 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;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button.active {
|
|
background-color: #fc1257;
|
|
}
|
|
|
|
input[type=range] {
|
|
width: 100px;
|
|
}
|
|
|
|
#elapsed-time {
|
|
font-size: 14px;
|
|
color: white;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.converse-container {
|
|
width: 80vw;
|
|
height: 50vh;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.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>
|
|
<div id="canvas-container"></div>
|
|
|
|
<pre class="ascii-art">RADIO WORLDING</pre>
|
|
|
|
<audio id="myAudio">
|
|
<source src="https://radio.dianaband.in:8000/stream" type="audio/aac">
|
|
</audio>
|
|
|
|
<div class="audio-controls">
|
|
<button id="playBtn">▶</button>
|
|
<button id="pauseBtn">⏸</button>
|
|
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" title="Volume">
|
|
<span id="elapsed-time">00:00</span>
|
|
</div>
|
|
<div class="converse-container">
|
|
<converse-root></converse-root>
|
|
</div>
|
|
<script>
|
|
const myAudio = document.getElementById("myAudio");
|
|
const volumeSlider = document.getElementById("volumeSlider");
|
|
const elapsedTimeDisplay = document.getElementById("elapsed-time");
|
|
const playBtn = document.getElementById("playBtn");
|
|
const pauseBtn = document.getElementById("pauseBtn");
|
|
|
|
volumeSlider.addEventListener("input", () => {
|
|
myAudio.volume = volumeSlider.value;
|
|
});
|
|
|
|
playBtn.addEventListener("click", () => {
|
|
myAudio.play();
|
|
playBtn.classList.add("active");
|
|
pauseBtn.classList.remove("active");
|
|
});
|
|
|
|
pauseBtn.addEventListener("click", () => {
|
|
myAudio.pause();
|
|
pauseBtn.classList.add("active");
|
|
playBtn.classList.remove("active");
|
|
});
|
|
|
|
setInterval(() => {
|
|
const seconds = Math.floor(myAudio.currentTime);
|
|
const min = String(Math.floor(seconds / 60)).padStart(2, '0');
|
|
const sec = String(seconds % 60).padStart(2, '0');
|
|
elapsedTimeDisplay.textContent = `${min}:${sec}`;
|
|
}, 1000);
|
|
</script>
|
|
|
|
<script>
|
|
let t = 0;
|
|
|
|
function setup() {
|
|
const canvas = createCanvas(windowWidth, windowHeight);
|
|
canvas.parent('canvas-container');
|
|
noFill();
|
|
stroke('#0a5304');
|
|
strokeWeight(1);
|
|
}
|
|
|
|
function draw() {
|
|
clear();
|
|
noFill();
|
|
stroke('#407e5a');
|
|
strokeWeight(2);
|
|
|
|
const waveCount = 1;
|
|
for (let j = 0; j < waveCount; j++) {
|
|
beginShape();
|
|
for (let x = 0; x < width; x += 1) {
|
|
const baseY = height / 5;
|
|
const amplitude = 1 + noise(x * 0.01, t) * 100;
|
|
const y = baseY + sin(x * 0.1 + t) * amplitude;
|
|
vertex(x, y);
|
|
}
|
|
endShape();
|
|
}
|
|
|
|
t += 0.025;
|
|
}
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, windowHeight);
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
converse.initialize({
|
|
"allow_bookmarks": true,
|
|
"allow_contact_requests": true,
|
|
"allow_muc_invitations": true,
|
|
"allow_muc": true,
|
|
"allow_registration": false,
|
|
"assets_path": "https://cdn.conversejs.org/dist/",
|
|
"authentication": "anonymous",
|
|
"auto_away": 3000,
|
|
"auto_join_rooms": ["blackhole@groups.ururu.cloud"],
|
|
"auto_login": true,
|
|
"auto_reconnect": true,
|
|
"auto_xa": 9000,
|
|
"bosh_service_url": "https://ururu.cloud:5281/http-bind",
|
|
"debug": true,
|
|
"default_domain": "blackhole.ururu.cloud",
|
|
"discover_connection_methods": false,
|
|
"domain_placeholder": "blackhole.ururu.cloud",
|
|
"enable_smacks": true,
|
|
"jid": "blackhole.ururu.cloud",
|
|
"locked_muc_domain": true,
|
|
"loglevel": "debug",
|
|
"muc_domain": "groups.ururu.cloud",
|
|
"ping_interval": "30",
|
|
"roster_groups": true,
|
|
"show_controlbox_by_default": true,
|
|
"singleton": true,
|
|
"sticky_controlbox": true,
|
|
"synchronize_availability": false,
|
|
"trusted": true,
|
|
"view_mode": "embedded",
|
|
"websocket_url": "wss://ururu.cloud:5281/xmpp-websocket",
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |