diff --git a/pad.html b/pad.html
new file mode 100755
index 0000000..2dcfb2a
--- /dev/null
+++ b/pad.html
@@ -0,0 +1,536 @@
+<!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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/10.1.8/dist/converse.min.css">
+    <script charset="utf-8" src="https://cdn.conversejs.org/10.1.8/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: #9100FF;
+        }
+
+        * {
+            box-sizing: border-box;
+
+            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: fixed;
+            top: 0;
+            left: 0;
+            width: 100% !important;
+            height: 100% !important;
+            z-index: 9999;
+            pointer-events: none;
+        }
+        
+        header *:not(canvas) {
+            position: relative;
+            z-index: 1;
+        }
+
+        .ascii-art {
+            font-family: 'Amatic SC';
+            font-size: clamp(24px, 5vw, 36px);
+            font-weight: bold;
+            background-color: rgba(109, 226, 16, 0.58);
+            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;
+        }
+
+        .audio-controls button,
+        .audio-controls input[type="range"] {
+            width: 30px;
+            height: 25px;
+            background-color: #00a98c;
+            color: #fff200;
+            border: groove 2px #0bff6e;
+            border-radius: 10px 10px 10px 10px;
+            font-size: 12px;
+            cursor: pointer;
+        }
+
+        .audio-controls button.active {
+            background-color: #fb1111;
+            color: #165010;
+            border: ridge 2px #0bfffd;
+            border-radius: 10px 10px 10px 10px;
+        }
+
+        .audio-controls input[type="range"] {
+            width: 100px;
+        }
+
+        #elapsed-time {
+            font-size: 14px;
+            color: white;
+            min-width: 60px;
+        }
+        
+        #wrapper {
+            position: relative;
+            top: calc(160px + 1em);
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            column-gap: 3em;
+        }
+        
+        .converse-container {
+            width: 30vw;
+            max-width: 400px;
+            height: calc(100vh - 250px);
+            border: 1px dashed rgba(0, 255, 0, 0.75);
+        }
+
+        #scratchpad {
+            padding-top: 3em;
+            width: 50vw;
+            max-width: 700px;
+            height: calc(100vh - 250px);
+        }
+
+        #scratchpad > iframe {
+            display: block;
+            border: 0;
+            width: 100%;
+            height: 100%;
+        }
+        
+        @media (width <= 1000px) {
+            
+            #wrapper {
+                display: block;
+            }
+            
+            .converse-container {
+                width: 100%;
+                max-width: 100%;
+                margin: 0 auto;
+                height: calc((100vh - 250px) / 2);
+            }
+            
+            #scratchpad {
+                width: 100%;
+                max-width: 100%;
+                margin: 0 auto;
+                height: calc((100vh - 250px) / 2);
+            }
+        }
+
+        .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 converse-chats.converse-embedded.converse-singleton .chatbox {
+            margin-left: 0;
+        }
+
+        .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, .conversejs .message.separator .separator-text {
+            background: blueviolet;
+        }
+
+    </style>
+</head>
+<body>
+
+    <!--overlays-->
+    <div id="p5-container"></div>
+    
+    <header>
+        <pre class="ascii-art">RADIO WORLDING</pre>
+
+        <audio id="myAudio" crossorigin="anonymous">
+            <!--<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>
+    </header>
+        
+    <!--contextual-->
+    <div id="wrapper">
+        <div class="converse-container">
+            <converse-root></converse-root>
+        </div>
+        
+        <div id="scratchpad">
+            <iframe src="https://pad.ururu.cloud/p/test?theme=unicorn&amp;showChat=false&amp;showLineNumbers=false" width=600 height=400>
+            </iframe>
+        </div>
+
+    </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");
+
+        var ready = false;
+
+        volumeSlider.addEventListener("input", () => {
+            myAudio.volume = volumeSlider.value;
+        });
+
+        playBtn.addEventListener("click", () => {
+            //
+            getAudioContext().resume();
+
+            // activate radio by adding source tag
+            const audiotag = document.querySelector('#myAudio');
+            const sourcetag = document.createElement('source');
+            sourcetag.setAttribute('src', 'https://radio.dianaband.in:8000/stream');
+            sourcetag.setAttribute('type', 'audio/aac');
+            audiotag.appendChild(sourcetag);
+            audiotag.play();
+            //
+            playBtn.classList.add("active");
+            pauseBtn.classList.remove("active");
+            //
+            ready = true;
+            //
+            const mediaSource = getAudioContext().createMediaElementSource(audiotag);
+            mediaSource.connect(getAudioContext().destination);
+            fft = new p5.FFT(0.9, 64);
+            fft.setInput(mediaSource);
+            //
+            loop();
+            //
+        });
+
+        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);
+
+        //p5
+
+        let canvas;
+        var fft;
+        let t = 0;
+
+        function setup() {
+            canvas = createCanvas(windowWidth, 160);
+            canvas.id('p5-canvas');
+            canvas.parent(document.querySelector('#p5-container'));
+
+            colorMode(HSB, 360, 100, 100, 100);
+            noFill();
+            noLoop();
+        }
+
+        function draw() {
+
+            if (ready) {
+                //     ready = false;
+
+                //     const audioElement = document.getElementById("myAudio");
+                //     const mediaSource = getAudioContext().createMediaElementSource(audioElement);
+                //     mediaSource.connect(getAudioContext().destination);
+                //     fft = new p5.FFT(0.9, 64);
+                //     fft.setInput(mediaSource);
+                // }
+
+                clear();
+
+                const spectrum = fft.analyze();
+                // console.log(spectrum);
+                const bandWidth = width / spectrum.length;
+
+                const offset = height/2;
+                stroke(55, 80, 100);
+                strokeWeight(1);
+                noFill();
+
+                beginShape();
+                for (let i = 0; i < spectrum.length; i++) {
+                    const x = i * bandWidth;
+                    const yBase = map(spectrum[i], 0, 255, offset, offset/3);
+                    const yWave = yBase + sin(t + i) * 8;
+                    curveVertex(x, yWave);
+                }
+                endShape();
+
+                t += 0.03;
+            }
+        }
+
+        function windowResized() {
+            resizeCanvas(windowWidth, 160);
+        }
+    </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/10.1.8/dist/",
+            "authentication": "anonymous",
+            "auto_away": 3000,
+            "auto_join_rooms": ["radioworld@groups.ururu.cloud"],
+            "auto_login": true,
+            "auto_reconnect": true,
+            "auto_xa": 9000,
+            "bosh_service_url": "https://ururu.cloud:5281/http-bind",
+            "debug": false,
+            "default_domain": "radio.world.ururu.cloud",
+            "discover_connection_methods": false,
+            "domain_placeholder": "radio.world.ururu.cloud",
+            "enable_smacks": true,
+            "jid": "radio.world.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>
\ No newline at end of file
