Last 10 Commits for me80tones.scroll.pub

commit 33e36792ca9e51eb86059ae7e92aab0263c2eb94 Author: root <root@hub.scroll.pub> Date: 2024-12-29 21:24:00 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..bc974bb --- /dev/null +++ b/body.html @@ -0,0 +1,74 @@ +<header> + <h1>ME-80 Tone Library</h1> + <nav> + <ul> + <li><a href="#create">Create Tone</a></li> + <li><a href="#library">Browse Library</a></li> + </ul> + </nav> +</header> + +<main> + <section id="create" class="pedal-interface"> + <h2>Create Your Tone</h2> + <div class="me80-panel"> + <div class="effects-row"> + <div class="effect-module"> + <label for="comp">COMP</label> + <div class="knob-container"> + <div class="knob" id="comp-knob" data-value="0"></div> + <select id="comp"> + <option>OFF</option> + <option>COMPRESSOR</option> + <option>LIMITER</option> + </select> + </div> + </div> + + <div class="effect-module"> + <label for="od">OD/DS</label> + <div class="knob-container"> + <div class="knob" id="od-knob" data-value="0"></div> + <select id="od"> + <option>OFF</option> + <option>BLUES</option> + <option>NATURAL</option> + <option>TURBO</option> + </select> + </div> + </div> + + <div class="effect-module"> + <label for="mod">MOD</label> + <div class="knob-container"> + <div class="knob" id="mod-knob" data-value="0"></div> + <select id="mod"> + <option>OFF</option> + <option>CHORUS</option> + <option>FLANGER</option> + <option>PHASER</option> + </select> + </div> + </div> + </div> + + <div class="controls"> + <button id="save-tone" class="primary-button">Save Tone</button> + <button id="reset" class="secondary-button">Reset</button> + </div> + </div> + </section> + + <section id="library" class="tone-library"> + <h2>Tone Library</h2> + <div id="saved-tones" class="tone-grid"></div> + </section> +</main> + +<footer> + <p>Built for guitar players, by guitar players</p> + <nav> + <a href="#about">About</a> + <a href="#contact">Contact</a> + </nav> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..f3f90c4 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://me80tones.scroll.pub +metaTags +editButton /edit.html +title ME-80 Tone Library | Save & Share Your Guitar Effects +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..fcb05fc --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01Mu6X7eKnDwXdPoDAHaji6e", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a website for ME-80 guitar effect settings. For the domain, I suggest:\n\n---domain---\nme80tones.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://me80tones.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ME-80 Tone Library | Save & Share Your Guitar Effects\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>ME-80 Tone Library</h1>\n <nav>\n <ul>\n <li><a href=\"#create\">Create Tone</a></li>\n <li><a href=\"#library\">Browse Library</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"create\" class=\"pedal-interface\">\n <h2>Create Your Tone</h2>\n <div class=\"me80-panel\">\n <div class=\"effects-row\">\n <div class=\"effect-module\">\n <label for=\"comp\">COMP</label>\n <div class=\"knob-container\">\n <div class=\"knob\" id=\"comp-knob\" data-value=\"0\"></div>\n <select id=\"comp\">\n <option>OFF</option>\n <option>COMPRESSOR</option>\n <option>LIMITER</option>\n </select>\n </div>\n </div>\n \n <div class=\"effect-module\">\n <label for=\"od\">OD/DS</label>\n <div class=\"knob-container\">\n <div class=\"knob\" id=\"od-knob\" data-value=\"0\"></div>\n <select id=\"od\">\n <option>OFF</option>\n <option>BLUES</option>\n <option>NATURAL</option>\n <option>TURBO</option>\n </select>\n </div>\n </div>\n\n <div class=\"effect-module\">\n <label for=\"mod\">MOD</label>\n <div class=\"knob-container\">\n <div class=\"knob\" id=\"mod-knob\" data-value=\"0\"></div>\n <select id=\"mod\">\n <option>OFF</option>\n <option>CHORUS</option>\n <option>FLANGER</option>\n <option>PHASER</option>\n </select>\n </div>\n </div>\n </div>\n \n <div class=\"controls\">\n <button id=\"save-tone\" class=\"primary-button\">Save Tone</button>\n <button id=\"reset\" class=\"secondary-button\">Reset</button>\n </div>\n </div>\n </section>\n\n <section id=\"library\" class=\"tone-library\">\n <h2>Tone Library</h2>\n <div id=\"saved-tones\" class=\"tone-grid\"></div>\n </section>\n</main>\n\n<footer>\n <p>Built for guitar players, by guitar players</p>\n <nav>\n <a href=\"#about\">About</a>\n <a href=\"#contact\">Contact</a>\n </nav>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --bg-color: #ecf0f1;\n --text-color: #2c3e50;\n --knob-size: 80px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 1rem;\n text-align: center;\n}\n\nnav ul {\n list-style: none;\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s;\n}\n\nnav a:hover {\n color: var(--accent-color);\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.me80-panel {\n background: linear-gradient(145deg, #1a1a1a, #2a2a2a);\n border-radius: 15px;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n}\n\n.effects-row {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n.effect-module {\n text-align: center;\n}\n\n.effect-module label {\n color: white;\n display: block;\n margin-bottom: 1rem;\n font-weight: bold;\n}\n\n.knob-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.knob {\n width: var(--knob-size);\n height: var(--knob-size);\n border-radius: 50%;\n background: linear-gradient(145deg, #333, #222);\n border: 4px solid #444;\n position: relative;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.knob::after {\n content: '';\n position: absolute;\n width: 4px;\n height: 40%;\n background: var(--accent-color);\n top: 10%;\n left: calc(50% - 2px);\n border-radius: 2px;\n}\n\n.knob:hover {\n transform: scale(1.05);\n}\n\nselect {\n background: #333;\n color: white;\n border: none;\n padding: 0.5rem;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.controls {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 2rem;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-weight: bold;\n transition: transform 0.2s;\n}\n\n.primary-button {\n background: var(--accent-color);\n color: white;\n}\n\n.secondary-button {\n background: #666;\n color: white;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\n.tone-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n text-align: center;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n :root {\n --knob-size: 60px;\n }\n \n .effects-row {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const knobs = document.querySelectorAll('.knob');\n let activeKnob = null;\n let startY;\n let startRotation;\n\n // Knob rotation handling\n knobs.forEach(knob => {\n knob.addEventListener('mousedown', initKnobTurn);\n knob.addEventListener('touchstart', initKnobTurn);\n });\n\n document.addEventListener('mousemove', turnKnob);\n document.addEventListener('touchmove', turnKnob);\n document.addEventListener('mouseup', stopKnobTurn);\n document.addEventListener('touchend', stopKnobTurn);\n\n function initKnobTurn(e) {\n e.preventDefault();\n activeKnob = e.target;\n startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY;\n startRotation = getCurrentRotation(activeKnob);\n }\n\n function turnKnob(e) {\n if (!activeKnob) return;\n \n const currentY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY;\n const deltaY = startY - currentY;\n const rotation = startRotation + deltaY;\n \n // Limit rotation to 300 degrees\n const limitedRotation = Math.max(0, Math.min(300, rotation));\n \n activeKnob.style.transform = `rotate(${limitedRotation}deg)`;\n activeKnob.dataset.value = Math.round((limitedRotation / 300) * 100);\n }\n\n function stopKnobTurn() {\n activeKnob = null;\n }\n\n function getCurrentRotation(element) {\n const style = window.getComputedStyle(element);\n const matrix = style.getPropertyValue('transform');\n \n if (matrix === 'none') return 0;\n \n const values = matrix.split('(')[1].split(')')[0].split(',');\n const a = values[0];\n const b = values[1];\n const angle = Math.round(Math.atan2(b, a) * (180/Math.PI));\n \n return angle < 0 ? angle + 360 : angle;\n }\n\n // Save tone functionality\n document.getElementById('save-tone').addEventListener('click', () => {\n const settings = {\n comp: {\n value: document.getElementById('comp-knob').dataset.value,\n type: document.getElementById('comp').value\n },\n od: {\n value: document.getElementById('od-knob').dataset.value,\n type: document.getElementById('od').value\n },\n mod: {\n value: document.getElementById('mod-knob').dataset.value,\n type: document.getElementById('mod').value\n }\n };\n\n saveTone(settings);\n displayTones();\n });\n\n // Reset functionality\n document.getElementById('reset').addEventListener('click', () => {\n knobs.forEach(knob => {\n knob.style.transform = 'rotate(0deg)';\n knob.dataset.value = '0';\n });\n \n const selects = document.querySelectorAll('select');\n selects.forEach(select => {\n select.selectedIndex = 0;\n });\n });\n});\n\nfunction saveTone(settings) {\n let tones = JSON.parse(localStorage.getItem('tones') || '[]');\n tones.push(settings);\n localStorage.setItem('tones', JSON.stringify(tones));\n}\n\nfunction displayTones() {\n const tones = JSON.parse(localStorage.getItem('tones') || '[]');\n const container = document.getElementById('saved-tones');\n \n container.innerHTML = tones.map((tone, index) => `\n <div class=\"saved-tone\">\n <h3>Tone ${index + 1}</h3>\n <p>COMP: ${tone.comp.type} (${tone.comp.value}%)</p>\n <p>OD/DS: ${tone.od.type} (${tone.od.value}%)</p>\n <p>MOD: ${tone.mod.type} (${tone.mod.value}%)</p>\n </div>\n `).join('');\n}\n\n---end---\n\nThis implementation creates a professional, interactive interface that mimics the ME-80 multi-effect pedal's controls. It features:\n\n1. Realistic-looking knobs with drag functionality\n2. Effect type selection dropdowns\n3. Local storage for saving tones\n4. Responsive design that works on both desktop and mobile\n5. Modern gradient backgrounds and shadows\n6. Smooth animations and transitions\n7. Accessibility features\n8. Clean, semantic HTML structure\n\nThe interface allows users to:\n- Adjust knob values by clicking and dragging\n- Select effect types from dropdowns\n- Save their tone settings\n- View saved tones in a grid layout\n- Reset all controls to default values\n\nThe design is clean and professional while maintaining a guitar-gear aesthetic with dark gradients and accent colors that match typical effect pedal styling." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 307, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3202 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..3970137 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# me80tones.scroll.pub +Website generated by Claude from prompt: I want to build a website for guitar players using me80 multieffect. It should save and display tone settings with ui that replicates the physical controls of me80 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..8bac24e --- /dev/null +++ b/script.js @@ -0,0 +1,110 @@ +document.addEventListener('DOMContentLoaded', () => { + const knobs = document.querySelectorAll('.knob'); + let activeKnob = null; + let startY; + let startRotation; + + // Knob rotation handling + knobs.forEach(knob => { + knob.addEventListener('mousedown', initKnobTurn); + knob.addEventListener('touchstart', initKnobTurn); + }); + + document.addEventListener('mousemove', turnKnob); + document.addEventListener('touchmove', turnKnob); + document.addEventListener('mouseup', stopKnobTurn); + document.addEventListener('touchend', stopKnobTurn); + + function initKnobTurn(e) { + e.preventDefault(); + activeKnob = e.target; + startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY; + startRotation = getCurrentRotation(activeKnob); + } + + function turnKnob(e) { + if (!activeKnob) return; + + const currentY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY; + const deltaY = startY - currentY; + const rotation = startRotation + deltaY; + + // Limit rotation to 300 degrees + const limitedRotation = Math.max(0, Math.min(300, rotation)); + + activeKnob.style.transform = `rotate(${limitedRotation}deg)`; + activeKnob.dataset.value = Math.round((limitedRotation / 300) * 100); + } + + function stopKnobTurn() { + activeKnob = null; + } + + function getCurrentRotation(element) { + const style = window.getComputedStyle(element); + const matrix = style.getPropertyValue('transform'); + + if (matrix === 'none') return 0; + + const values = matrix.split('(')[1].split(')')[0].split(','); + const a = values[0]; + const b = values[1]; + const angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); + + return angle < 0 ? angle + 360 : angle; + } + + // Save tone functionality + document.getElementById('save-tone').addEventListener('click', () => { + const settings = { + comp: { + value: document.getElementById('comp-knob').dataset.value, + type: document.getElementById('comp').value + }, + od: { + value: document.getElementById('od-knob').dataset.value, + type: document.getElementById('od').value + }, + mod: { + value: document.getElementById('mod-knob').dataset.value, + type: document.getElementById('mod').value + } + }; + + saveTone(settings); + displayTones(); + }); + + // Reset functionality + document.getElementById('reset').addEventListener('click', () => { + knobs.forEach(knob => { + knob.style.transform = 'rotate(0deg)'; + knob.dataset.value = '0'; + }); + + const selects = document.querySelectorAll('select'); + selects.forEach(select => { + select.selectedIndex = 0; + }); + }); +}); + +function saveTone(settings) { + let tones = JSON.parse(localStorage.getItem('tones') || '[]'); + tones.push(settings); + localStorage.setItem('tones', JSON.stringify(tones)); +} + +function displayTones() { + const tones = JSON.parse(localStorage.getItem('tones') || '[]'); + const container = document.getElementById('saved-tones'); + + container.innerHTML = tones.map((tone, index) => ` + <div class="saved-tone"> + <h3>Tone ${index + 1}</h3> + <p>COMP: ${tone.comp.type} (${tone.comp.value}%)</p> + <p>OD/DS: ${tone.od.type} (${tone.od.value}%)</p> + <p>MOD: ${tone.mod.type} (${tone.mod.value}%)</p> + </div> + `).join(''); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..af4d1de --- /dev/null +++ b/style.css @@ -0,0 +1,174 @@ +:root { + --primary-color: #2c3e50; + --accent-color: #e74c3c; + --bg-color: #ecf0f1; + --text-color: #2c3e50; + --knob-size: 80px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: system-ui, -apple-system, sans-serif; + background: var(--bg-color); + color: var(--text-color); + line-height: 1.6; +} + +header { + background: var(--primary-color); + color: white; + padding: 1rem; + text-align: center; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 2rem; + margin-top: 1rem; +} + +nav a { + color: white; + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +nav a:hover { + color: var(--accent-color); +} + +main { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +.me80-panel { + background: linear-gradient(145deg, #1a1a1a, #2a2a2a); + border-radius: 15px; + padding: 2rem; + box-shadow: 0 10px 30px rgba(0,0,0,0.2); +} + +.effects-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.effect-module { + text-align: center; +} + +.effect-module label { + color: white; + display: block; + margin-bottom: 1rem; + font-weight: bold; +} + +.knob-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.knob { + width: var(--knob-size); + height: var(--knob-size); + border-radius: 50%; + background: linear-gradient(145deg, #333, #222); + border: 4px solid #444; + position: relative; + cursor: pointer; + transition: transform 0.2s; +} + +.knob::after { + content: ''; + position: absolute; + width: 4px; + height: 40%; + background: var(--accent-color); + top: 10%; + left: calc(50% - 2px); + border-radius: 2px; +} + +.knob:hover { + transform: scale(1.05); +} + +select { + background: #333; + color: white; + border: none; + padding: 0.5rem; + border-radius: 5px; + cursor: pointer; +} + +.controls { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 2rem; +} + +button { + padding: 0.8rem 1.5rem; + border: none; + border-radius: 5px; + cursor: pointer; + font-weight: bold; + transition: transform 0.2s; +} + +.primary-button { + background: var(--accent-color); + color: white; +} + +.secondary-button { + background: #666; + color: white; +} + +button:hover { + transform: translateY(-2px); +} + +.tone-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +footer { + background: var(--primary-color); + color: white; + text-align: center; + padding: 2rem; + margin-top: 4rem; +} + +@media (max-width: 768px) { + :root { + --knob-size: 60px; + } + + .effects-row { + grid-template-columns: 1fr; + } +}