Last 10 Commits for roma-imperium.scroll.pub

commit 0f1c55ce86a74df661cc73d156559b273dfff57e Author: root <root@hub.scroll.pub> Date: 2024-12-28 12:35:25 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..69eb1d7 --- /dev/null +++ b/body.html @@ -0,0 +1,87 @@ +<header class="hero"> + <nav> + <ul> + <li><a href="#emperors">Emperors</a></li> + <li><a href="#culture">Culture</a></li> + <li><a href="#food">Food</a></li> + <li><a href="#religion">Religion</a></li> + <li><a href="#military">Military</a></li> + </ul> + </nav> + <h1>The Glory of Rome</h1> + <p class="subtitle">27 BC - 476 AD</p> +</header> + +<main> + <section id="emperors" class="section"> + <h2>Notable Emperors</h2> + <div class="emperor-grid"> + <div class="emperor-card"> + <img src="/images/augustus.jpg" alt="Augustus Caesar" loading="lazy"> + <h3>Augustus</h3> + <p>First Roman Emperor (27 BC - 14 AD)</p> + </div> + <div class="emperor-card"> + <img src="/images/trajan.jpg" alt="Trajan" loading="lazy"> + <h3>Trajan</h3> + <p>Empire at its greatest extent (98-117 AD)</p> + </div> + </div> + </section> + + <section id="culture" class="section"> + <h2>Roman Culture</h2> + <div class="culture-content"> + <div class="text-content"> + <p>Roman culture was rich in art, architecture, literature, and philosophy. The Romans were master builders and engineers, creating magnificent structures that still stand today.</p> + </div> + <div class="image-gallery"> + <img src="/images/colosseum.jpg" alt="Roman Colosseum" loading="lazy"> + <img src="/images/forum.jpg" alt="Roman Forum" loading="lazy"> + </div> + </div> + </section> + + <section id="food" class="section"> + <h2>Roman Cuisine</h2> + <div class="food-grid"> + <div class="food-item"> + <h3>Bread & Garum</h3> + <p>The staples of Roman diet</p> + </div> + <div class="food-item"> + <h3>Wine</h3> + <p>Essential to Roman dining</p> + </div> + </div> + </section> + + <section id="religion" class="section"> + <h2>Religious Life</h2> + <div class="religion-content"> + <p>Roman religion was polytheistic, with gods adopted from Greek mythology and local traditions.</p> + <div class="deity-list"> + <span>Jupiter</span> + <span>Mars</span> + <span>Venus</span> + <span>Mercury</span> + </div> + </div> + </section> + + <section id="military" class="section"> + <h2>Military Might</h2> + <div class="military-content"> + <p>The Roman military was one of the most successful and powerful in history, conquering vast territories.</p> + </div> + </section> +</main> + +<footer> + <p>Roma Imperium - Explore the Legacy of Rome</p> + <nav> + <a href="#emperors">Top</a> + <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..2788078 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://roma-imperium.scroll.pub +metaTags +editButton /edit.html +title The Glory of Rome - First Roman Empire +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..2378d9d --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_013VHeRPpoTWPFC39ywDP3iK", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a website about the Roman Empire with an elegant and historical feel.\n\n---domain---\nroma-imperium.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://roma-imperium.scroll.pub\nmetaTags\neditButton /edit.html\ntitle The Glory of Rome - First Roman Empire\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"hero\">\n <nav>\n <ul>\n <li><a href=\"#emperors\">Emperors</a></li>\n <li><a href=\"#culture\">Culture</a></li>\n <li><a href=\"#food\">Food</a></li>\n <li><a href=\"#religion\">Religion</a></li>\n <li><a href=\"#military\">Military</a></li>\n </ul>\n </nav>\n <h1>The Glory of Rome</h1>\n <p class=\"subtitle\">27 BC - 476 AD</p>\n</header>\n\n<main>\n <section id=\"emperors\" class=\"section\">\n <h2>Notable Emperors</h2>\n <div class=\"emperor-grid\">\n <div class=\"emperor-card\">\n <img src=\"/images/augustus.jpg\" alt=\"Augustus Caesar\" loading=\"lazy\">\n <h3>Augustus</h3>\n <p>First Roman Emperor (27 BC - 14 AD)</p>\n </div>\n <div class=\"emperor-card\">\n <img src=\"/images/trajan.jpg\" alt=\"Trajan\" loading=\"lazy\">\n <h3>Trajan</h3>\n <p>Empire at its greatest extent (98-117 AD)</p>\n </div>\n </div>\n </section>\n\n <section id=\"culture\" class=\"section\">\n <h2>Roman Culture</h2>\n <div class=\"culture-content\">\n <div class=\"text-content\">\n <p>Roman culture was rich in art, architecture, literature, and philosophy. The Romans were master builders and engineers, creating magnificent structures that still stand today.</p>\n </div>\n <div class=\"image-gallery\">\n <img src=\"/images/colosseum.jpg\" alt=\"Roman Colosseum\" loading=\"lazy\">\n <img src=\"/images/forum.jpg\" alt=\"Roman Forum\" loading=\"lazy\">\n </div>\n </div>\n </section>\n\n <section id=\"food\" class=\"section\">\n <h2>Roman Cuisine</h2>\n <div class=\"food-grid\">\n <div class=\"food-item\">\n <h3>Bread & Garum</h3>\n <p>The staples of Roman diet</p>\n </div>\n <div class=\"food-item\">\n <h3>Wine</h3>\n <p>Essential to Roman dining</p>\n </div>\n </div>\n </section>\n\n <section id=\"religion\" class=\"section\">\n <h2>Religious Life</h2>\n <div class=\"religion-content\">\n <p>Roman religion was polytheistic, with gods adopted from Greek mythology and local traditions.</p>\n <div class=\"deity-list\">\n <span>Jupiter</span>\n <span>Mars</span>\n <span>Venus</span>\n <span>Mercury</span>\n </div>\n </div>\n </section>\n\n <section id=\"military\" class=\"section\">\n <h2>Military Might</h2>\n <div class=\"military-content\">\n <p>The Roman military was one of the most successful and powerful in history, conquering vast territories.</p>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Roma Imperium - Explore the Legacy of Rome</p>\n <nav>\n <a href=\"#emperors\">Top</a>\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: #8B0000;\n --secondary-color: #DAA520;\n --bg-color: #FFFAF0;\n --text-color: #333;\n --header-font: 'Trajan Pro', serif;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Helvetica Neue', Arial, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--bg-color);\n}\n\n.hero {\n height: 100vh;\n background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),\n url('/images/rome-bg.jpg') center/cover;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n text-align: center;\n}\n\nnav {\n position: fixed;\n top: 0;\n width: 100%;\n background: rgba(0,0,0,0.8);\n padding: 1rem;\n z-index: 100;\n}\n\nnav ul {\n display: flex;\n justify-content: center;\n list-style: none;\n gap: 2rem;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-family: var(--header-font);\n transition: color 0.3s;\n}\n\nnav a:hover {\n color: var(--secondary-color);\n}\n\nh1 {\n font-family: var(--header-font);\n font-size: 4rem;\n margin-bottom: 1rem;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n}\n\n.subtitle {\n font-size: 1.5rem;\n font-style: italic;\n}\n\n.section {\n padding: 5rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n font-family: var(--header-font);\n color: var(--primary-color);\n font-size: 2.5rem;\n margin-bottom: 2rem;\n text-align: center;\n}\n\n.emperor-grid, .food-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.emperor-card {\n background: white;\n padding: 1rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.emperor-card:hover {\n transform: translateY(-5px);\n}\n\n.emperor-card img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n border-radius: 4px;\n}\n\n.image-gallery {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n margin-top: 2rem;\n}\n\n.image-gallery img {\n width: 100%;\n height: 300px;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.deity-list {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n margin-top: 2rem;\n}\n\n.deity-list span {\n background: var(--primary-color);\n color: white;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n}\n\nfooter {\n background: #333;\n color: white;\n text-align: center;\n padding: 2rem;\n}\n\nfooter nav {\n position: static;\n background: none;\n margin-top: 1rem;\n}\n\n@media (max-width: 768px) {\n nav ul {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n\n h1 {\n font-size: 2.5rem;\n }\n\n .image-gallery {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Parallax effect for hero section\n window.addEventListener('scroll', () => {\n const hero = document.querySelector('.hero');\n const scrolled = window.pageYOffset;\n hero.style.backgroundPositionY = scrolled * 0.5 + 'px';\n });\n\n // Intersection Observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('fade-in');\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis website features:\n1. A dramatic hero section with parallax scrolling\n2. Smooth navigation with fixed header\n3. Responsive grid layouts for emperor and food sections\n4. Beautiful typography with a Roman theme\n5. Elegant animations and transitions\n6. Mobile-responsive design\n7. Semantic HTML structure\n8. Accessible navigation\n9. Performance optimizations (lazy loading images)\n10. Clean, modular CSS with variables\n11. Interactive elements with hover effects\n12. Smooth scroll behavior\n13. Intersection Observer for scroll animations\n\nNote: You'll need to provide appropriate images in the /images directory for the website to work properly. The specified images should include: rome-bg.jpg, augustus.jpg, trajan.jpg, colosseum.jpg, and forum.jpg." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 327, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2580 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..7c18ed7 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# roma-imperium.scroll.pub +Website generated by Claude from prompt: give me a showcase website which is about the first empire of roman empire. It's a single page site with different sections that introcudes the following aspencts: food, culture, religion, emperor and anything you could think of. Use image from internet if necessary, be creative. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a942138 --- /dev/null +++ b/script.js @@ -0,0 +1,31 @@ +document.addEventListener('DOMContentLoaded', () => { + // Smooth scrolling for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Parallax effect for hero section + window.addEventListener('scroll', () => { + const hero = document.querySelector('.hero'); + const scrolled = window.pageYOffset; + hero.style.backgroundPositionY = scrolled * 0.5 + 'px'; + }); + + // Intersection Observer for fade-in animations + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('fade-in'); + } + }); + }, { threshold: 0.1 }); + + document.querySelectorAll('.section').forEach(section => { + observer.observe(section); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..73353be --- /dev/null +++ b/style.css @@ -0,0 +1,169 @@ +:root { + --primary-color: #8B0000; + --secondary-color: #DAA520; + --bg-color: #FFFAF0; + --text-color: #333; + --header-font: 'Trajan Pro', serif; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--bg-color); +} + +.hero { + height: 100vh; + background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), + url('/images/rome-bg.jpg') center/cover; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: white; + text-align: center; +} + +nav { + position: fixed; + top: 0; + width: 100%; + background: rgba(0,0,0,0.8); + padding: 1rem; + z-index: 100; +} + +nav ul { + display: flex; + justify-content: center; + list-style: none; + gap: 2rem; +} + +nav a { + color: white; + text-decoration: none; + font-family: var(--header-font); + transition: color 0.3s; +} + +nav a:hover { + color: var(--secondary-color); +} + +h1 { + font-family: var(--header-font); + font-size: 4rem; + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 0.2em; +} + +.subtitle { + font-size: 1.5rem; + font-style: italic; +} + +.section { + padding: 5rem 2rem; + max-width: 1200px; + margin: 0 auto; +} + +h2 { + font-family: var(--header-font); + color: var(--primary-color); + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; +} + +.emperor-grid, .food-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.emperor-card { + background: white; + padding: 1rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.3s; +} + +.emperor-card:hover { + transform: translateY(-5px); +} + +.emperor-card img { + width: 100%; + height: 300px; + object-fit: cover; + border-radius: 4px; +} + +.image-gallery { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + margin-top: 2rem; +} + +.image-gallery img { + width: 100%; + height: 300px; + object-fit: cover; + border-radius: 8px; +} + +.deity-list { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + margin-top: 2rem; +} + +.deity-list span { + background: var(--primary-color); + color: white; + padding: 0.5rem 1rem; + border-radius: 20px; +} + +footer { + background: #333; + color: white; + text-align: center; + padding: 2rem; +} + +footer nav { + position: static; + background: none; + margin-top: 1rem; +} + +@media (max-width: 768px) { + nav ul { + flex-direction: column; + align-items: center; + gap: 1rem; + } + + h1 { + font-size: 2.5rem; + } + + .image-gallery { + grid-template-columns: 1fr; + } +}