commit 010fdbaaf20442bdf7d111bacfd3af842d38be6a
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 09:35:48 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..112c85b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,23 @@
+<main class="container">
+ <header>
+ <h1>Vibez</h1>
+ <p class="tagline">Make your device come alive</p>
+ </header>
+
+ <section class="vibration-control">
+ <button id="vibrateButton" aria-label="Vibrate device">
+ <span class="button-icon">⚡</span>
+ <span class="button-text">Vibrate</span>
+ </button>
+ <p id="status" aria-live="polite"></p>
+ </section>
+
+ <section class="info">
+ <h2>How it works</h2>
+ <p>Tap the button above to create a vibration pattern on supported devices. Works best on mobile phones.</p>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ⚡ by Vibez</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..dca76db
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://vibez.scroll.pub
+metaTags
+editButton /edit.html
+title Vibez - Phone Vibration Controller
+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..3238391
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01LGYHyzxR9SAWgVNX2FeSVx",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a fun, interactive website for phone vibration with a modern design.\n\nSuggested domain name: vibez.scroll.pub (short, memorable, and represents the vibration functionality)\n\n---domain---\nvibez.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://vibez.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Vibez - Phone Vibration Controller\nstyle.css\nbody.html\nscript.js\n---body.html---\n<main class=\"container\">\n <header>\n <h1>Vibez</h1>\n <p class=\"tagline\">Make your device come alive</p>\n </header>\n \n <section class=\"vibration-control\">\n <button id=\"vibrateButton\" aria-label=\"Vibrate device\">\n <span class=\"button-icon\">⚡</span>\n <span class=\"button-text\">Vibrate</span>\n </button>\n <p id=\"status\" aria-live=\"polite\"></p>\n </section>\n\n <section class=\"info\">\n <h2>How it works</h2>\n <p>Tap the button above to create a vibration pattern on supported devices. Works best on mobile phones.</p>\n </section>\n</main>\n\n<footer>\n <p>Made with ⚡ by Vibez</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #a29bfe;\n --background-color: #f8f9fa;\n --text-color: #2d3436;\n --spacing: 2rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: var(--spacing);\n flex: 1;\n}\n\nheader {\n text-align: center;\n margin-bottom: var(--spacing);\n}\n\nh1 {\n font-size: 3.5rem;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n font-size: 1.2rem;\n color: #666;\n}\n\n.vibration-control {\n text-align: center;\n margin: var(--spacing) 0;\n}\n\n#vibrateButton {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1.5rem 3rem;\n border-radius: 50px;\n font-size: 1.25rem;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n#vibrateButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);\n}\n\n#vibrateButton:active {\n transform: translateY(0);\n}\n\n.button-icon {\n font-size: 1.5rem;\n}\n\n#status {\n margin-top: 1rem;\n min-height: 1.5rem;\n color: #666;\n}\n\n.info {\n max-width: 600px;\n margin: 0 auto;\n text-align: center;\n padding: var(--spacing);\n background: white;\n border-radius: 15px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\nh2 {\n color: var(--primary-color);\n margin-bottom: 1rem;\n}\n\nfooter {\n text-align: center;\n padding: var(--spacing);\n background: white;\n box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2.5rem;\n }\n\n .container {\n padding: var(--spacing) 1rem;\n }\n\n #vibrateButton {\n padding: 1.25rem 2.5rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const vibrateButton = document.getElementById('vibrateButton');\n const statusElement = document.getElementById('status');\n \n // Check if vibration is supported\n const hasVibration = 'vibrate' in navigator;\n \n if (!hasVibration) {\n statusElement.textContent = 'Vibration not supported on this device';\n vibrateButton.disabled = true;\n return;\n }\n \n // Vibration pattern in milliseconds (vibrate, pause, vibrate)\n const vibrationPattern = [200, 100, 200];\n \n vibrateButton.addEventListener('click', () => {\n try {\n navigator.vibrate(vibrationPattern);\n statusElement.textContent = 'Vibrating...';\n \n // Clear status message after vibration\n setTimeout(() => {\n statusElement.textContent = '';\n }, 1000);\n \n // Add button animation\n vibrateButton.style.animation = 'none';\n vibrateButton.offsetHeight; // Trigger reflow\n vibrateButton.style.animation = 'shake 0.5s ease-in-out';\n } catch (error) {\n statusElement.textContent = 'Failed to vibrate device';\n }\n });\n});\n\n// Add shake animation keyframes\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px); }\n 75% { transform: translateX(5px); }\n }\n`;\ndocument.head.appendChild(style);\n---end---\n\nThis website features:\n1. Clean, semantic HTML5 structure\n2. Beautiful gradient text and smooth animations\n3. Mobile-responsive design\n4. Accessible button with clear feedback\n5. Error handling and device compatibility checking\n6. Smooth animations and visual feedback\n7. Modern, minimalist design with proper spacing\n8. Clear user instructions\n9. Optimized performance with no external dependencies\n10. Proper ARIA attributes for accessibility\n\nThe vibration feature works on supported mobile devices and provides visual feedback even on devices without vibration support."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 285,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1791
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..e6b5128
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# vibez.scroll.pub
+Website generated by Claude from prompt: A website that has a button which can be used for vibrating the phone
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..6a62971
--- /dev/null
+++ b/script.js
@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const vibrateButton = document.getElementById('vibrateButton');
+ const statusElement = document.getElementById('status');
+
+ // Check if vibration is supported
+ const hasVibration = 'vibrate' in navigator;
+
+ if (!hasVibration) {
+ statusElement.textContent = 'Vibration not supported on this device';
+ vibrateButton.disabled = true;
+ return;
+ }
+
+ // Vibration pattern in milliseconds (vibrate, pause, vibrate)
+ const vibrationPattern = [200, 100, 200];
+
+ vibrateButton.addEventListener('click', () => {
+ try {
+ navigator.vibrate(vibrationPattern);
+ statusElement.textContent = 'Vibrating...';
+
+ // Clear status message after vibration
+ setTimeout(() => {
+ statusElement.textContent = '';
+ }, 1000);
+
+ // Add button animation
+ vibrateButton.style.animation = 'none';
+ vibrateButton.offsetHeight; // Trigger reflow
+ vibrateButton.style.animation = 'shake 0.5s ease-in-out';
+ } catch (error) {
+ statusElement.textContent = 'Failed to vibrate device';
+ }
+ });
+});
+
+// Add shake animation keyframes
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes shake {
+ 0%, 100% { transform: translateX(0); }
+ 25% { transform: translateX(-5px); }
+ 75% { transform: translateX(5px); }
+ }
+`;
+document.head.appendChild(style);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0d39b42
--- /dev/null
+++ b/style.css
@@ -0,0 +1,123 @@
+:root {
+ --primary-color: #6c5ce7;
+ --secondary-color: #a29bfe;
+ --background-color: #f8f9fa;
+ --text-color: #2d3436;
+ --spacing: 2rem;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.container {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: var(--spacing);
+ flex: 1;
+}
+
+header {
+ text-align: center;
+ margin-bottom: var(--spacing);
+}
+
+h1 {
+ font-size: 3.5rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ margin-bottom: 0.5rem;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ color: #666;
+}
+
+.vibration-control {
+ text-align: center;
+ margin: var(--spacing) 0;
+}
+
+#vibrateButton {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 1.5rem 3rem;
+ border-radius: 50px;
+ font-size: 1.25rem;
+ cursor: pointer;
+ transition: transform 0.2s, box-shadow 0.2s;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+#vibrateButton:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
+}
+
+#vibrateButton:active {
+ transform: translateY(0);
+}
+
+.button-icon {
+ font-size: 1.5rem;
+}
+
+#status {
+ margin-top: 1rem;
+ min-height: 1.5rem;
+ color: #666;
+}
+
+.info {
+ max-width: 600px;
+ margin: 0 auto;
+ text-align: center;
+ padding: var(--spacing);
+ background: white;
+ border-radius: 15px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+footer {
+ text-align: center;
+ padding: var(--spacing);
+ background: white;
+ box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
+}
+
+@media (max-width: 600px) {
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .container {
+ padding: var(--spacing) 1rem;
+ }
+
+ #vibrateButton {
+ padding: 1.25rem 2.5rem;
+ }
+}
\ No newline at end of file