commit 11cae7fc5af67637f2964a27d19832e0c9c45e41
Author: root <root@hub.scroll.pub>
Date: 2025-01-08 03:37:33 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..ecb324f
--- /dev/null
+++ b/body.html
@@ -0,0 +1,104 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">
+ <img src="logo.svg" alt="Customs Portal Logo" width="40" height="40">
+ <span>CustomsPortal</span>
+ </div>
+ <button class="mobile-menu-btn" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#" class="active">Home</a></li>
+ <li><a href="#new-declaration">New Declaration</a></li>
+ <li><a href="#track">Track Status</a></li>
+ <li><a href="#help">Help</a></li>
+ <li><a href="#login" class="login-btn">Login</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Simple Online Customs Declarations</h1>
+ <p>Submit and manage your customs declarations quickly and securely</p>
+ <a href="#new-declaration" class="cta-button">Start New Declaration</a>
+ </section>
+
+ <section class="features">
+ <h2>Why Choose Our Portal</h2>
+ <div class="features-grid">
+ <div class="feature-card">
+ <div class="icon">📝</div>
+ <h3>Easy Submission</h3>
+ <p>Complete your declaration in minutes with our intuitive form</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">🔒</div>
+ <h3>Secure Platform</h3>
+ <p>Your data is protected with enterprise-grade security</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">⚡</div>
+ <h3>Quick Processing</h3>
+ <p>Fast processing times with real-time status updates</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">📱</div>
+ <h3>Mobile Ready</h3>
+ <p>Submit declarations from any device, anywhere</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="new-declaration" class="declaration-form">
+ <h2>Start Your Declaration</h2>
+ <form id="customsForm">
+ <div class="form-group">
+ <label for="declarationType">Declaration Type</label>
+ <select id="declarationType" required>
+ <option value="">Select type...</option>
+ <option value="import">Import</option>
+ <option value="export">Export</option>
+ <option value="transit">Transit</option>
+ </select>
+ </div>
+ <div class="form-grid">
+ <div class="form-group">
+ <label for="senderName">Sender Name</label>
+ <input type="text" id="senderName" required>
+ </div>
+ <div class="form-group">
+ <label for="receiverName">Receiver Name</label>
+ <input type="text" id="receiverName" required>
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="goodsDescription">Goods Description</label>
+ <textarea id="goodsDescription" rows="3" required></textarea>
+ </div>
+ <button type="submit" class="submit-btn">Submit Declaration</button>
+ </form>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <ul>
+ <li><a href="#about">About Us</a></li>
+ <li><a href="#contact">Contact</a></li>
+ <li><a href="#privacy">Privacy Policy</a></li>
+ <li><a href="#terms">Terms of Service</a></li>
+ </ul>
+ </div>
+ <div class="footer-section">
+ <h4>Support</h4>
+ <ul>
+ <li><a href="#faq">FAQ</a></li>
+ <li><a href="#help">Help Center</a></li>
+ <li><a href="#contact">Contact Support</a></li>
+ </ul>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..e54e85b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://customs.scroll.pub
+metaTags
+title Customs Declaration Portal | Easy Online Customs Forms
+description Submit your customs declarations online quickly and securely. Simple digital customs forms for international shipping and travel.
+keywords customs declaration, customs form, online customs, international shipping, customs portal
+author CustomsPortal
+editButton /edit.html
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..11628bb
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01XcRTohWa8qbeXUMMgFY749",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a customs declaration portal website. For the domain, I suggest:\n\n---domain---\ncustoms.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://customs.scroll.pub\nmetaTags\ntitle Customs Declaration Portal | Easy Online Customs Forms\ndescription Submit your customs declarations online quickly and securely. Simple digital customs forms for international shipping and travel.\nkeywords customs declaration, customs form, online customs, international shipping, customs portal\nauthor CustomsPortal\neditButton /edit.html\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">\n <img src=\"logo.svg\" alt=\"Customs Portal Logo\" width=\"40\" height=\"40\">\n <span>CustomsPortal</span>\n </div>\n <button class=\"mobile-menu-btn\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#\" class=\"active\">Home</a></li>\n <li><a href=\"#new-declaration\">New Declaration</a></li>\n <li><a href=\"#track\">Track Status</a></li>\n <li><a href=\"#help\">Help</a></li>\n <li><a href=\"#login\" class=\"login-btn\">Login</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Simple Online Customs Declarations</h1>\n <p>Submit and manage your customs declarations quickly and securely</p>\n <a href=\"#new-declaration\" class=\"cta-button\">Start New Declaration</a>\n </section>\n\n <section class=\"features\">\n <h2>Why Choose Our Portal</h2>\n <div class=\"features-grid\">\n <div class=\"feature-card\">\n <div class=\"icon\">📝</div>\n <h3>Easy Submission</h3>\n <p>Complete your declaration in minutes with our intuitive form</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">🔒</div>\n <h3>Secure Platform</h3>\n <p>Your data is protected with enterprise-grade security</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">⚡</div>\n <h3>Quick Processing</h3>\n <p>Fast processing times with real-time status updates</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">📱</div>\n <h3>Mobile Ready</h3>\n <p>Submit declarations from any device, anywhere</p>\n </div>\n </div>\n </section>\n\n <section id=\"new-declaration\" class=\"declaration-form\">\n <h2>Start Your Declaration</h2>\n <form id=\"customsForm\">\n <div class=\"form-group\">\n <label for=\"declarationType\">Declaration Type</label>\n <select id=\"declarationType\" required>\n <option value=\"\">Select type...</option>\n <option value=\"import\">Import</option>\n <option value=\"export\">Export</option>\n <option value=\"transit\">Transit</option>\n </select>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"senderName\">Sender Name</label>\n <input type=\"text\" id=\"senderName\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"receiverName\">Receiver Name</label>\n <input type=\"text\" id=\"receiverName\" required>\n </div>\n </div>\n <div class=\"form-group\">\n <label for=\"goodsDescription\">Goods Description</label>\n <textarea id=\"goodsDescription\" rows=\"3\" required></textarea>\n </div>\n <button type=\"submit\" class=\"submit-btn\">Submit Declaration</button>\n </form>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <ul>\n <li><a href=\"#about\">About Us</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n <li><a href=\"#privacy\">Privacy Policy</a></li>\n <li><a href=\"#terms\">Terms of Service</a></li>\n </ul>\n </div>\n <div class=\"footer-section\">\n <h4>Support</h4>\n <ul>\n <li><a href=\"#faq\">FAQ</a></li>\n <li><a href=\"#help\">Help Center</a></li>\n <li><a href=\"#contact\">Contact Support</a></li>\n </ul>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --background-color: #f8fafc;\n --text-color: #1e293b;\n --border-radius: 8px;\n --transition: all 0.3s ease;\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 line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-weight: 700;\n font-size: 1.25rem;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.login-btn {\n background: var(--primary-color);\n color: white !important;\n padding: 0.5rem 1rem;\n border-radius: var(--border-radius);\n}\n\n.mobile-menu-btn {\n display: none;\n}\n\n.hero {\n padding: 8rem 5% 4rem;\n text-align: center;\n background: linear-gradient(135deg, #2563eb11 0%, #1e40af11 100%);\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--primary-color);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius);\n font-weight: 600;\n margin-top: 2rem;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n background: var(--secondary-color);\n transform: translateY(-2px);\n}\n\n.features {\n padding: 4rem 5%;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 12px rgba(0,0,0,0.15);\n}\n\n.icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.declaration-form {\n padding: 4rem 5%;\n background: white;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput, select, textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #e2e8f0;\n border-radius: var(--border-radius);\n font-family: inherit;\n}\n\n.submit-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: 600;\n transition: var(--transition);\n}\n\n.submit-btn:hover {\n background: var(--secondary-color);\n}\n\nfooter {\n background: #1e293b;\n color: white;\n padding: 3rem 5%;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n.footer-section h4 {\n margin-bottom: 1rem;\n}\n\n.footer-section ul {\n list-style: none;\n}\n\n.footer-section a {\n color: #94a3b8;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.footer-section a:hover {\n color: white;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu-btn span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text-color);\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n flex-direction: column;\n padding: 1rem;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const menuBtn = document.querySelector('.mobile-menu-btn');\n const navLinks = document.querySelector('.nav-links');\n\n menuBtn.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const spans = menuBtn.querySelectorAll('span');\n spans[0].style.transform = navLinks.classList.contains('active') ? \n 'rotate(45deg) translate(8px, 8px)' : 'none';\n spans[1].style.opacity = navLinks.classList.contains('active') ? '0' : '1';\n spans[2].style.transform = navLinks.classList.contains('active') ? \n 'rotate(-45deg) translate(7px, -7px)' : 'none';\n });\n\n // Form submission handler\n const customsForm = document.getElementById('customsForm');\n if (customsForm) {\n customsForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n // Collect form data\n const formData = {\n declarationType: document.getElementById('declarationType').value,\n senderName: document.getElementById('senderName').value,\n receiverName: document.getElementById('receiverName').value,\n goodsDescription: document.getElementById('goodsDescription').value\n };\n\n // Show success message\n alert('Declaration submitted successfully!');\n customsForm.reset();\n });\n }\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 273,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3377
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7992603
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# customs.scroll.pub
+
+website generated by Claude from prompt: customs declaration portal
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e633fe5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile menu toggle
+ const menuBtn = document.querySelector('.mobile-menu-btn');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuBtn.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ const spans = menuBtn.querySelectorAll('span');
+ spans[0].style.transform = navLinks.classList.contains('active') ?
+ 'rotate(45deg) translate(8px, 8px)' : 'none';
+ spans[1].style.opacity = navLinks.classList.contains('active') ? '0' : '1';
+ spans[2].style.transform = navLinks.classList.contains('active') ?
+ 'rotate(-45deg) translate(7px, -7px)' : 'none';
+ });
+
+ // Form submission handler
+ const customsForm = document.getElementById('customsForm');
+ if (customsForm) {
+ customsForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ // Collect form data
+ const formData = {
+ declarationType: document.getElementById('declarationType').value,
+ senderName: document.getElementById('senderName').value,
+ receiverName: document.getElementById('receiverName').value,
+ goodsDescription: document.getElementById('goodsDescription').value
+ };
+
+ // Show success message
+ alert('Declaration submitted successfully!');
+ customsForm.reset();
+ });
+ }
+
+ // Smooth scroll for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ad6420e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,242 @@
+:root {
+ --primary-color: #2563eb;
+ --secondary-color: #1e40af;
+ --background-color: #f8fafc;
+ --text-color: #1e293b;
+ --border-radius: 8px;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+}
+
+.main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-weight: 700;
+ font-size: 1.25rem;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.login-btn {
+ background: var(--primary-color);
+ color: white !important;
+ padding: 0.5rem 1rem;
+ border-radius: var(--border-radius);
+}
+
+.mobile-menu-btn {
+ display: none;
+}
+
+.hero {
+ padding: 8rem 5% 4rem;
+ text-align: center;
+ background: linear-gradient(135deg, #2563eb11 0%, #1e40af11 100%);
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--primary-color);
+ color: white;
+ text-decoration: none;
+ border-radius: var(--border-radius);
+ font-weight: 600;
+ margin-top: 2rem;
+ transition: var(--transition);
+}
+
+.cta-button:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+}
+
+.features {
+ padding: 4rem 5%;
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.feature-card {
+ background: white;
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 12px rgba(0,0,0,0.15);
+}
+
+.icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+.declaration-form {
+ padding: 4rem 5%;
+ background: white;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+.form-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+input, select, textarea {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #e2e8f0;
+ border-radius: var(--border-radius);
+ font-family: inherit;
+}
+
+.submit-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ font-weight: 600;
+ transition: var(--transition);
+}
+
+.submit-btn:hover {
+ background: var(--secondary-color);
+}
+
+footer {
+ background: #1e293b;
+ color: white;
+ padding: 3rem 5%;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section h4 {
+ margin-bottom: 1rem;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section a {
+ color: #94a3b8;
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.footer-section a:hover {
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu-btn {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu-btn span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ margin: 5px 0;
+ transition: var(--transition);
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+}