Changes to vibez.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+     
+         Vibez
+         Make your device come alive
+     
+ 
+     
+         
+             ⚡
+             Vibrate
+         
+         
+     
+ 
+     
+         How it works
+         Tap the button above to create a vibration pattern on supported devices. Works best on mobile phones.
+     
+ 
+ 
+ 
+     Made with ⚡ by Vibez
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://vibez.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Vibez - Phone Vibration Controller
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n    \n        Vibez\n        Make your device come alive
\n    \n    \n    \n        \n        
\n    \n\n    \n        How it works\n        Tap the button above to create a vibration pattern on supported devices. Works best on mobile phones.
\n    \n\n\n\n    Made with ⚡ by Vibez
\n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # vibez.scroll.pub

+ Website generated by Claude from prompt: A website that has a button which can be used for vibrating the phone

script.js

Changed around line 1
+ 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);

style.css

Changed around line 1
+ :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;
+     }
+ }