commit 469ec3cb02c0f8cc3ac7a79a35afbb1e1629e06c
Author: ffff:112.210.226.233 <ffff:112.210.226.233@hub.scroll.pub> Date: 2024-12-28 01:08:33 +0000 Subject: updated readme.scroll diff --git a/readme.scroll b/readme.scroll index 99ee93a..024e08e 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # globaltime.scroll.pub -Website generated by Claude from prompt: Create a website that shows the weather and time in manila, new york and london \ No newline at end of file +Website generated by Claude from prompt: Create a website that shows the weather in fahrenheit and celsius and time in manila, new york and london \ No newline at end of file
commit e6f3fc20b4e10e405c4257bd55705e6db820aac7
Author: root <root@hub.scroll.pub> Date: 2024-12-28 01:06:41 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..bfb74f5 --- /dev/null +++ b/body.html @@ -0,0 +1,39 @@ +<header> + <h1>Global Time & Weather</h1> + <p class="tagline">Real-time updates from major cities</p> +</header> + +<main> + <div class="cities-grid"> + <article class="city-card" id="manila"> + <h2>Manila</h2> + <div class="time"></div> + <div class="weather"> + <div class="temperature"></div> + <div class="condition"></div> + </div> + </article> + + <article class="city-card" id="newyork"> + <h2>New York</h2> + <div class="time"></div> + <div class="weather"> + <div class="temperature"></div> + <div class="condition"></div> + </div> + </article> + + <article class="city-card" id="london"> + <h2>London</h2> + <div class="time"></div> + <div class="weather"> + <div class="temperature"></div> + <div class="condition"></div> + </div> + </article> + </div> +</main> + +<footer> + <p>Built with care for global citizens</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..d96a4f1 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://globaltime.scroll.pub +metaTags +editButton /edit.html +title Global Time & Weather +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..2e8d727 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01BMcCs9pZ3eaji7y6hjYape", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a weather and time comparison website for these major cities.\n\n---domain---\nglobaltime.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://globaltime.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Global Time & Weather\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Global Time & Weather</h1>\n <p class=\"tagline\">Real-time updates from major cities</p>\n</header>\n\n<main>\n <div class=\"cities-grid\">\n <article class=\"city-card\" id=\"manila\">\n <h2>Manila</h2>\n <div class=\"time\"></div>\n <div class=\"weather\">\n <div class=\"temperature\"></div>\n <div class=\"condition\"></div>\n </div>\n </article>\n\n <article class=\"city-card\" id=\"newyork\">\n <h2>New York</h2>\n <div class=\"time\"></div>\n <div class=\"weather\">\n <div class=\"temperature\"></div>\n <div class=\"condition\"></div>\n </div>\n </article>\n\n <article class=\"city-card\" id=\"london\">\n <h2>London</h2>\n <div class=\"time\"></div>\n <div class=\"weather\">\n <div class=\"temperature\"></div>\n <div class=\"condition\"></div>\n </div>\n </article>\n </div>\n</main>\n\n<footer>\n <p>Built with care for global citizens</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --background-color: #ecf0f1;\n --card-background: #ffffff;\n --text-color: #2c3e50;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.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-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 2rem 1rem;\n text-align: center;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n font-size: 1.1rem;\n opacity: 0.9;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.cities-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 1rem;\n}\n\n.city-card {\n background: var(--card-background);\n border-radius: 15px;\n padding: 2rem;\n box-shadow: var(--shadow);\n transition: transform 0.3s ease;\n}\n\n.city-card:hover {\n transform: translateY(-5px);\n}\n\n.city-card h2 {\n color: var(--primary-color);\n margin-bottom: 1rem;\n font-size: 1.8rem;\n}\n\n.time {\n font-size: 2.5rem;\n font-weight: bold;\n margin: 1rem 0;\n color: var(--secondary-color);\n}\n\n.weather {\n margin-top: 1.5rem;\n}\n\n.temperature {\n font-size: 2rem;\n font-weight: bold;\n}\n\n.condition {\n font-size: 1.2rem;\n color: #666;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .cities-grid {\n grid-template-columns: 1fr;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .city-card {\n padding: 1.5rem;\n }\n \n .time {\n font-size: 2rem;\n }\n \n .temperature {\n font-size: 1.8rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const cities = {\n manila: {\n timezone: 'Asia/Manila',\n coords: { lat: 14.5995, lon: 120.9842 }\n },\n newyork: {\n timezone: 'America/New_York',\n coords: { lat: 40.7128, lon: -74.0060 }\n },\n london: {\n timezone: 'Europe/London',\n coords: { lat: 51.5074, lon: -0.1278 }\n }\n };\n\n function updateTime() {\n Object.keys(cities).forEach(city => {\n const timeElement = document.querySelector(`#${city} .time`);\n const time = new Date().toLocaleTimeString('en-US', {\n timeZone: cities[city].timezone,\n hour12: true,\n hour: 'numeric',\n minute: '2-digit'\n });\n timeElement.textContent = time;\n });\n }\n\n function updateWeather() {\n Object.keys(cities).forEach(city => {\n const tempElement = document.querySelector(`#${city} .temperature`);\n const condElement = document.querySelector(`#${city} .condition`);\n \n // Simulate weather data (replace with actual API calls in production)\n const temp = Math.floor(Math.random() * 30) + 10;\n const conditions = ['Sunny', 'Cloudy', 'Rainy', 'Partly Cloudy'];\n const condition = conditions[Math.floor(Math.random() * conditions.length)];\n \n tempElement.textContent = `${temp}°C`;\n condElement.textContent = condition;\n });\n }\n\n // Update time every second\n updateTime();\n setInterval(updateTime, 1000);\n\n // Update weather every 5 minutes\n updateWeather();\n setInterval(updateWeather, 300000);\n});\n\n---end---\n\nThis implementation features:\n\n1. Responsive grid layout that adapts to screen size\n2. Beautiful card design with hover effects\n3. Real-time clock updates for each city\n4. Simulated weather data (replace with actual API calls in production)\n5. Smooth animations and transitions\n6. Clean, semantic HTML5 structure\n7. Modern CSS with custom properties\n8. Accessible color contrast and semantic markup\n9. Mobile-first responsive design\n10. Gradient header and professional styling\n\nNote: In a production environment, you would want to replace the simulated weather data with actual API calls to a weather service." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 286, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 1835 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..99ee93a --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# globaltime.scroll.pub +Website generated by Claude from prompt: Create a website that shows the weather and time in manila, new york and london \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f884248 --- /dev/null +++ b/script.js @@ -0,0 +1,52 @@ +document.addEventListener('DOMContentLoaded', () => { + const cities = { + manila: { + timezone: 'Asia/Manila', + coords: { lat: 14.5995, lon: 120.9842 } + }, + newyork: { + timezone: 'America/New_York', + coords: { lat: 40.7128, lon: -74.0060 } + }, + london: { + timezone: 'Europe/London', + coords: { lat: 51.5074, lon: -0.1278 } + } + }; + + function updateTime() { + Object.keys(cities).forEach(city => { + const timeElement = document.querySelector(`#${city} .time`); + const time = new Date().toLocaleTimeString('en-US', { + timeZone: cities[city].timezone, + hour12: true, + hour: 'numeric', + minute: '2-digit' + }); + timeElement.textContent = time; + }); + } + + function updateWeather() { + Object.keys(cities).forEach(city => { + const tempElement = document.querySelector(`#${city} .temperature`); + const condElement = document.querySelector(`#${city} .condition`); + + // Simulate weather data (replace with actual API calls in production) + const temp = Math.floor(Math.random() * 30) + 10; + const conditions = ['Sunny', 'Cloudy', 'Rainy', 'Partly Cloudy']; + const condition = conditions[Math.floor(Math.random() * conditions.length)]; + + tempElement.textContent = `${temp}°C`; + condElement.textContent = condition; + }); + } + + // Update time every second + updateTime(); + setInterval(updateTime, 1000); + + // Update weather every 5 minutes + updateWeather(); + setInterval(updateWeather, 300000); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..adb781c --- /dev/null +++ b/style.css @@ -0,0 +1,120 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --background-color: #ecf0f1; + --card-background: #ffffff; + --text-color: #2c3e50; + --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; +} + +header { + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; + padding: 2rem 1rem; + text-align: center; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.tagline { + font-size: 1.1rem; + opacity: 0.9; +} + +main { + max-width: 1200px; + margin: 2rem auto; + padding: 0 1rem; +} + +.cities-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + padding: 1rem; +} + +.city-card { + background: var(--card-background); + border-radius: 15px; + padding: 2rem; + box-shadow: var(--shadow); + transition: transform 0.3s ease; +} + +.city-card:hover { + transform: translateY(-5px); +} + +.city-card h2 { + color: var(--primary-color); + margin-bottom: 1rem; + font-size: 1.8rem; +} + +.time { + font-size: 2.5rem; + font-weight: bold; + margin: 1rem 0; + color: var(--secondary-color); +} + +.weather { + margin-top: 1.5rem; +} + +.temperature { + font-size: 2rem; + font-weight: bold; +} + +.condition { + font-size: 1.2rem; + color: #666; +} + +footer { + text-align: center; + padding: 2rem; + background: var(--primary-color); + color: white; + margin-top: 2rem; +} + +@media (max-width: 768px) { + .cities-grid { + grid-template-columns: 1fr; + } + + h1 { + font-size: 2rem; + } + + .city-card { + padding: 1.5rem; + } + + .time { + font-size: 2rem; + } + + .temperature { + font-size: 1.8rem; + } +}