Last 10 Commits for atmos.scroll.pub

commit ef15938be941e98a63e2844fabdbc7e1f465e636 Author: root <root@hub.scroll.pub> Date: 2024-12-27 21:23:59 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..db8b073 --- /dev/null +++ b/body.html @@ -0,0 +1,74 @@ +<header> + <nav> + <div class="logo">AtmosPlayer</div> + <div class="nav-links"> + <a href="#player">Player</a> + <a href="#channels">Channels</a> + <a href="#about">About</a> + </div> + </nav> +</header> + +<main> + <section id="hero"> + <h1>Experience Sound in 3D</h1> + <p>Immersive multichannel audio with Dolby Atmos support</p> + </section> + + <section id="player" class="player-container"> + <div class="visualization-sphere"></div> + <div class="controls"> + <div class="track-info"> + <h2 class="track-title">No track selected</h2> + <p class="track-artist">Upload or select a track to begin</p> + </div> + + <div class="channel-indicators"> + <div class="channel front-left">FL</div> + <div class="channel front-right">FR</div> + <div class="channel center">C</div> + <div class="channel surround-left">SL</div> + <div class="channel surround-right">SR</div> + <div class="channel height">H</div> + </div> + + <div class="main-controls"> + <button class="btn-previous" aria-label="Previous track"> + <span class="icon">⏮</span> + </button> + <button class="btn-play" aria-label="Play/Pause"> + <span class="icon">▶</span> + </button> + <button class="btn-next" aria-label="Next track"> + <span class="icon">⏭</span> + </button> + </div> + + <div class="progress-container"> + <div class="progress-bar"> + <div class="progress"></div> + </div> + <span class="time-current">0:00</span> + <span class="time-total">0:00</span> + </div> + + <div class="audio-settings"> + <button class="btn-atmos" aria-label="Toggle Dolby Atmos"> + <span class="icon">🔊</span> + </button> + <input type="range" class="volume-slider" min="0" max="100" value="80" aria-label="Volume"> + </div> + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <p>Created with passion for immersive audio</p> + <nav class="footer-links"> + <a href="#privacy">Privacy</a> + <a href="#terms">Terms</a> + <a href="#contact">Contact</a> + </nav> + </div> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..4122872 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://atmos.scroll.pub +metaTags +editButton /edit.html +title Immersive Audio Player | Dolby Atmos Experience +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..a11bfd3 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01MabBA96sxuf1bNv465auNb", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a sleek multichannel audio player website with Dolby Atmos support.\n\nSuggested domain: atmos.scroll.pub\n\n---domain---\natmos.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://atmos.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Immersive Audio Player | Dolby Atmos Experience\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">AtmosPlayer</div>\n <div class=\"nav-links\">\n <a href=\"#player\">Player</a>\n <a href=\"#channels\">Channels</a>\n <a href=\"#about\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>Experience Sound in 3D</h1>\n <p>Immersive multichannel audio with Dolby Atmos support</p>\n </section>\n\n <section id=\"player\" class=\"player-container\">\n <div class=\"visualization-sphere\"></div>\n <div class=\"controls\">\n <div class=\"track-info\">\n <h2 class=\"track-title\">No track selected</h2>\n <p class=\"track-artist\">Upload or select a track to begin</p>\n </div>\n \n <div class=\"channel-indicators\">\n <div class=\"channel front-left\">FL</div>\n <div class=\"channel front-right\">FR</div>\n <div class=\"channel center\">C</div>\n <div class=\"channel surround-left\">SL</div>\n <div class=\"channel surround-right\">SR</div>\n <div class=\"channel height\">H</div>\n </div>\n\n <div class=\"main-controls\">\n <button class=\"btn-previous\" aria-label=\"Previous track\">\n <span class=\"icon\">⏮</span>\n </button>\n <button class=\"btn-play\" aria-label=\"Play/Pause\">\n <span class=\"icon\">▶</span>\n </button>\n <button class=\"btn-next\" aria-label=\"Next track\">\n <span class=\"icon\">⏭</span>\n </button>\n </div>\n\n <div class=\"progress-container\">\n <div class=\"progress-bar\">\n <div class=\"progress\"></div>\n </div>\n <span class=\"time-current\">0:00</span>\n <span class=\"time-total\">0:00</span>\n </div>\n\n <div class=\"audio-settings\">\n <button class=\"btn-atmos\" aria-label=\"Toggle Dolby Atmos\">\n <span class=\"icon\">🔊</span>\n </button>\n <input type=\"range\" class=\"volume-slider\" min=\"0\" max=\"100\" value=\"80\" aria-label=\"Volume\">\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <p>Created with passion for immersive audio</p>\n <nav class=\"footer-links\">\n <a href=\"#privacy\">Privacy</a>\n <a href=\"#terms\">Terms</a>\n <a href=\"#contact\">Contact</a>\n </nav>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #6c63ff;\n --secondary-color: #2c3e50;\n --accent-color: #00ff9d;\n --background: #0a0a1f;\n --text-color: #ffffff;\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--background);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n padding: 1rem;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n position: fixed;\n width: 100%;\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n color: transparent;\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\n margin-left: 2rem;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n#hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: radial-gradient(circle at center, rgba(108, 99, 255, 0.2), transparent);\n}\n\nh1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n color: transparent;\n}\n\n.player-container {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 20px;\n box-shadow: 0 0 30px rgba(108, 99, 255, 0.2);\n}\n\n.visualization-sphere {\n width: 200px;\n height: 200px;\n margin: 0 auto 2rem;\n background: radial-gradient(circle at 30% 30%, var(--accent-color), var(--primary-color));\n border-radius: 50%;\n animation: pulse 4s infinite ease-in-out;\n}\n\n.channel-indicators {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n margin: 2rem 0;\n}\n\n.channel {\n padding: 0.5rem;\n text-align: center;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n transition: var(--transition);\n}\n\n.channel.active {\n background: var(--primary-color);\n transform: scale(1.05);\n}\n\n.main-controls {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin: 2rem 0;\n}\n\nbutton {\n background: none;\n border: none;\n color: var(--text-color);\n cursor: pointer;\n transition: var(--transition);\n}\n\nbutton:hover {\n transform: scale(1.1);\n}\n\n.btn-play {\n width: 60px;\n height: 60px;\n background: var(--primary-color);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.progress-container {\n position: relative;\n margin: 2rem 0;\n}\n\n.progress-bar {\n height: 4px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress {\n height: 100%;\n background: var(--accent-color);\n width: 0%;\n transition: var(--transition);\n}\n\n.volume-slider {\n width: 100%;\n margin: 1rem 0;\n -webkit-appearance: none;\n background: rgba(255, 255, 255, 0.1);\n height: 4px;\n border-radius: 2px;\n}\n\n.volume-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: var(--accent-color);\n border-radius: 50%;\n cursor: pointer;\n}\n\n@keyframes pulse {\n 0% { transform: scale(1); opacity: 0.8; }\n 50% { transform: scale(1.05); opacity: 1; }\n 100% { transform: scale(1); opacity: 0.8; }\n}\n\n@media (max-width: 768px) {\n h1 { font-size: 2.5rem; }\n .player-container { margin: 1rem; padding: 1rem; }\n .channel-indicators { grid-template-columns: repeat(2, 1fr); }\n .nav-links a { margin-left: 1rem; }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const playButton = document.querySelector('.btn-play');\n const progressBar = document.querySelector('.progress');\n const volumeSlider = document.querySelector('.volume-slider');\n const channels = document.querySelectorAll('.channel');\n const visualizationSphere = document.querySelector('.visualization-sphere');\n \n let isPlaying = false;\n let currentProgress = 0;\n \n playButton.addEventListener('click', () => {\n isPlaying = !isPlaying;\n playButton.querySelector('.icon').textContent = isPlaying ? '⏸' : '▶';\n \n if (isPlaying) {\n startVisualization();\n } else {\n stopVisualization();\n }\n });\n\n volumeSlider.addEventListener('input', (e) => {\n const value = e.target.value;\n updateVisualization(value);\n });\n\n function startVisualization() {\n visualizationSphere.style.animation = 'pulse 4s infinite ease-in-out';\n simulateChannelActivity();\n }\n\n function stopVisualization() {\n visualizationSphere.style.animation = 'none';\n channels.forEach(channel => channel.classList.remove('active'));\n }\n\n function updateVisualization(intensity) {\n const opacity = intensity / 100;\n visualizationSphere.style.opacity = opacity;\n }\n\n function simulateChannelActivity() {\n if (!isPlaying) return;\n\n channels.forEach(channel => {\n if (Math.random() > 0.5) {\n channel.classList.add('active');\n } else {\n channel.classList.remove('active');\n }\n });\n\n setTimeout(simulateChannelActivity, 500);\n }\n\n // Simulate progress bar movement\n function updateProgress() {\n if (isPlaying) {\n currentProgress = (currentProgress + 0.1) % 100;\n progressBar.style.width = `${currentProgress}%`;\n }\n requestAnimationFrame(updateProgress);\n }\n\n updateProgress();\n});\n---end---\n\nThis implementation creates a stunning, modern audio player interface with simulated Dolby Atmos channel visualization. Key features include:\n\n1. Animated visualization sphere that pulses with the audio\n2. Channel indicators showing active speakers\n3. Clean, intuitive controls\n4. Responsive design that works on all devices\n5. Beautiful gradient effects and smooth animations\n6. Interactive progress bar and volume control\n7. Simulated channel activity visualization\n8. Accessible controls with ARIA labels\n9. Modern glass-morphism design elements\n\nThe interface uses a dark theme with accent colors that create an immersive atmosphere. The visualization sphere provides a central focal point that responds to the audio playback state and volume changes.\n\nNote: This is a frontend implementation focusing on the UI/UX. To make it fully functional, you would need to integrate it with an audio processing backend that handles actual Dolby Atmos multichannel audio playback." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 281, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3071 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..cfde81a --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# atmos.scroll.pub +Website generated by Claude from prompt: multichannel audio player with dolby atmos support \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..76cc80d --- /dev/null +++ b/script.js @@ -0,0 +1,66 @@ +document.addEventListener('DOMContentLoaded', () => { + const playButton = document.querySelector('.btn-play'); + const progressBar = document.querySelector('.progress'); + const volumeSlider = document.querySelector('.volume-slider'); + const channels = document.querySelectorAll('.channel'); + const visualizationSphere = document.querySelector('.visualization-sphere'); + + let isPlaying = false; + let currentProgress = 0; + + playButton.addEventListener('click', () => { + isPlaying = !isPlaying; + playButton.querySelector('.icon').textContent = isPlaying ? '⏸' : '▶'; + + if (isPlaying) { + startVisualization(); + } else { + stopVisualization(); + } + }); + + volumeSlider.addEventListener('input', (e) => { + const value = e.target.value; + updateVisualization(value); + }); + + function startVisualization() { + visualizationSphere.style.animation = 'pulse 4s infinite ease-in-out'; + simulateChannelActivity(); + } + + function stopVisualization() { + visualizationSphere.style.animation = 'none'; + channels.forEach(channel => channel.classList.remove('active')); + } + + function updateVisualization(intensity) { + const opacity = intensity / 100; + visualizationSphere.style.opacity = opacity; + } + + function simulateChannelActivity() { + if (!isPlaying) return; + + channels.forEach(channel => { + if (Math.random() > 0.5) { + channel.classList.add('active'); + } else { + channel.classList.remove('active'); + } + }); + + setTimeout(simulateChannelActivity, 500); + } + + // Simulate progress bar movement + function updateProgress() { + if (isPlaying) { + currentProgress = (currentProgress + 0.1) % 100; + progressBar.style.width = `${currentProgress}%`; + } + requestAnimationFrame(updateProgress); + } + + updateProgress(); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b165035 --- /dev/null +++ b/style.css @@ -0,0 +1,192 @@ +:root { + --primary-color: #6c63ff; + --secondary-color: #2c3e50; + --accent-color: #00ff9d; + --background: #0a0a1f; + --text-color: #ffffff; + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + background: var(--background); + color: var(--text-color); + line-height: 1.6; +} + +header { + padding: 1rem; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + position: fixed; + width: 100%; + z-index: 100; +} + +nav { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); + -webkit-background-clip: text; + color: transparent; +} + +.nav-links a { + color: var(--text-color); + text-decoration: none; + margin-left: 2rem; + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--accent-color); +} + +#hero { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background: radial-gradient(circle at center, rgba(108, 99, 255, 0.2), transparent); +} + +h1 { + font-size: 4rem; + margin-bottom: 1rem; + background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); + -webkit-background-clip: text; + color: transparent; +} + +.player-container { + max-width: 800px; + margin: 2rem auto; + padding: 2rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 20px; + box-shadow: 0 0 30px rgba(108, 99, 255, 0.2); +} + +.visualization-sphere { + width: 200px; + height: 200px; + margin: 0 auto 2rem; + background: radial-gradient(circle at 30% 30%, var(--accent-color), var(--primary-color)); + border-radius: 50%; + animation: pulse 4s infinite ease-in-out; +} + +.channel-indicators { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin: 2rem 0; +} + +.channel { + padding: 0.5rem; + text-align: center; + background: rgba(255, 255, 255, 0.1); + border-radius: 8px; + transition: var(--transition); +} + +.channel.active { + background: var(--primary-color); + transform: scale(1.05); +} + +.main-controls { + display: flex; + justify-content: center; + gap: 2rem; + margin: 2rem 0; +} + +button { + background: none; + border: none; + color: var(--text-color); + cursor: pointer; + transition: var(--transition); +} + +button:hover { + transform: scale(1.1); +} + +.btn-play { + width: 60px; + height: 60px; + background: var(--primary-color); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.progress-container { + position: relative; + margin: 2rem 0; +} + +.progress-bar { + height: 4px; + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + overflow: hidden; +} + +.progress { + height: 100%; + background: var(--accent-color); + width: 0%; + transition: var(--transition); +} + +.volume-slider { + width: 100%; + margin: 1rem 0; + -webkit-appearance: none; + background: rgba(255, 255, 255, 0.1); + height: 4px; + border-radius: 2px; +} + +.volume-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 16px; + height: 16px; + background: var(--accent-color); + border-radius: 50%; + cursor: pointer; +} + +@keyframes pulse { + 0% { transform: scale(1); opacity: 0.8; } + 50% { transform: scale(1.05); opacity: 1; } + 100% { transform: scale(1); opacity: 0.8; } +} + +@media (max-width: 768px) { + h1 { font-size: 2.5rem; } + .player-container { margin: 1rem; padding: 1rem; } + .channel-indicators { grid-template-columns: repeat(2, 1fr); } + .nav-links a { margin-left: 1rem; } +} \ No newline at end of file