commit c84aa91cf29e81fd9d8d01e155ae4b6961f932e8
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:10:35 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..f920216
--- /dev/null
+++ b/body.html
@@ -0,0 +1,87 @@
+<header class="main-header">
+ <nav>
+ <div class="logo">WerkplekPro</div>
+ <button class="mobile-menu-btn" aria-label="Menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#diensten">Diensten</a></li>
+ <li><a href="#over-ons">Over Ons</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <div class="container">
+ <h1>Werkplekbeheer in Almere</h1>
+ <p class="subtitle">Uw partner voor professioneel ICT-beheer</p>
+ <a href="#contact" class="cta-button">Neem Contact Op</a>
+ </div>
+ </section>
+
+ <section id="diensten" class="services">
+ <div class="container">
+ <h2>Onze Diensten</h2>
+ <div class="service-grid">
+ <div class="service-card">
+ <div class="icon">🖥️</div>
+ <h3>Werkplekbeheer</h3>
+ <p>Complete ondersteuning voor uw digitale werkplek</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">🔒</div>
+ <h3>Cybersecurity</h3>
+ <p>Bescherming tegen digitale dreigingen</p>
+ </div>
+ <div class="service-card">
+ <div class="icon">☁️</div>
+ <h3>Cloud Solutions</h3>
+ <p>Flexibele cloud-oplossingen op maat</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="over-ons" class="about">
+ <div class="container">
+ <h2>Over Ons</h2>
+ <p>Als specialist in werkplekbeheer in Almere zorgen wij voor optimale ICT-ondersteuning voor uw organisatie. Met jarenlange ervaring en expertise staan wij klaar om uw digitale werkplek te beheren.</p>
+ </div>
+ </section>
+
+ <section id="contact" class="contact">
+ <div class="container">
+ <h2>Contact</h2>
+ <form id="contact-form">
+ <div class="form-group">
+ <label for="name">Naam</label>
+ <input type="text" id="name" name="name" required>
+ </div>
+ <div class="form-group">
+ <label for="email">E-mail</label>
+ <input type="email" id="email" name="email" required>
+ </div>
+ <div class="form-group">
+ <label for="message">Bericht</label>
+ <textarea id="message" name="message" required></textarea>
+ </div>
+ <button type="submit" class="submit-btn">Verstuur</button>
+ </form>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="container">
+ <div class="footer-content">
+ <div class="contact-info">
+ <p>WerkplekPro</p>
+ <p>Almere, Nederland</p>
+ <p>info@werkplek-almere.scroll.pub</p>
+ </div>
+ </div>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2843806
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://werkplek-almere.scroll.pub
+metaTags
+ description "Professioneel werkplekbeheer in Almere. Wij zorgen voor efficiënt en veilig beheer van uw ICT-werkplekken"
+ keywords "werkplekbeheer Almere, ICT beheer, werkplek management, IT diensten Almere"
+editButton /edit.html
+title Werkplekbeheer Almere | Professioneel ICT Beheer
+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..7eba9ea
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01LDJvxRqBcPPyn3J4ZmQTBu",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website for an IT company focusing on workplace management in Almere.\n\nSuggested domain: werkplek-almere.scroll.pub\n\n---domain---\nwerkplek-almere.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://werkplek-almere.scroll.pub\nmetaTags\n description \"Professioneel werkplekbeheer in Almere. Wij zorgen voor efficiënt en veilig beheer van uw ICT-werkplekken\"\n keywords \"werkplekbeheer Almere, ICT beheer, werkplek management, IT diensten Almere\"\neditButton /edit.html\ntitle Werkplekbeheer Almere | Professioneel ICT Beheer\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"main-header\">\n <nav>\n <div class=\"logo\">WerkplekPro</div>\n <button class=\"mobile-menu-btn\" aria-label=\"Menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#diensten\">Diensten</a></li>\n <li><a href=\"#over-ons\">Over Ons</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <div class=\"container\">\n <h1>Werkplekbeheer in Almere</h1>\n <p class=\"subtitle\">Uw partner voor professioneel ICT-beheer</p>\n <a href=\"#contact\" class=\"cta-button\">Neem Contact Op</a>\n </div>\n </section>\n\n <section id=\"diensten\" class=\"services\">\n <div class=\"container\">\n <h2>Onze Diensten</h2>\n <div class=\"service-grid\">\n <div class=\"service-card\">\n <div class=\"icon\">🖥️</div>\n <h3>Werkplekbeheer</h3>\n <p>Complete ondersteuning voor uw digitale werkplek</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">🔒</div>\n <h3>Cybersecurity</h3>\n <p>Bescherming tegen digitale dreigingen</p>\n </div>\n <div class=\"service-card\">\n <div class=\"icon\">☁️</div>\n <h3>Cloud Solutions</h3>\n <p>Flexibele cloud-oplossingen op maat</p>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"over-ons\" class=\"about\">\n <div class=\"container\">\n <h2>Over Ons</h2>\n <p>Als specialist in werkplekbeheer in Almere zorgen wij voor optimale ICT-ondersteuning voor uw organisatie. Met jarenlange ervaring en expertise staan wij klaar om uw digitale werkplek te beheren.</p>\n </div>\n </section>\n\n <section id=\"contact\" class=\"contact\">\n <div class=\"container\">\n <h2>Contact</h2>\n <form id=\"contact-form\">\n <div class=\"form-group\">\n <label for=\"name\">Naam</label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"email\">E-mail</label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"message\">Bericht</label>\n <textarea id=\"message\" name=\"message\" required></textarea>\n </div>\n <button type=\"submit\" class=\"submit-btn\">Verstuur</button>\n </form>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"container\">\n <div class=\"footer-content\">\n <div class=\"contact-info\">\n <p>WerkplekPro</p>\n <p>Almere, Nederland</p>\n <p>info@werkplek-almere.scroll.pub</p>\n </div>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --text-color: #1f2937;\n --background-color: #ffffff;\n --accent-color: #dbeafe;\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}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n/* Header Styles */\n.main-header {\n background: var(--background-color);\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\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n/* Hero Section */\n.hero {\n padding: 8rem 0 4rem;\n background: linear-gradient(135deg, var(--accent-color), var(--background-color));\n text-align: center;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n color: var(--primary-color);\n}\n\n.subtitle {\n font-size: 1.5rem;\n margin-bottom: 2rem;\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: 0.5rem;\n transition: background 0.3s ease;\n}\n\n.cta-button:hover {\n background: var(--secondary-color);\n}\n\n/* Services Section */\n.services {\n padding: 4rem 0;\n background: var(--background-color);\n}\n\n.service-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.service-card {\n padding: 2rem;\n background: white;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n text-align: center;\n}\n\n.service-card:hover {\n transform: translateY(-5px);\n}\n\n.icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n/* Contact Form */\n.contact {\n padding: 4rem 0;\n background: var(--accent-color);\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput, textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #ddd;\n border-radius: 0.5rem;\n font-size: 1rem;\n}\n\ntextarea {\n height: 150px;\n resize: vertical;\n}\n\n.submit-btn {\n background: var(--primary-color);\n color: white;\n padding: 1rem 2rem;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.submit-btn:hover {\n background: var(--secondary-color);\n}\n\n/* Footer */\nfooter {\n background: var(--text-color);\n color: white;\n padding: 2rem 0;\n}\n\n.footer-content {\n text-align: center;\n}\n\n/* Mobile Menu */\n.mobile-menu-btn {\n display: none;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\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: 0.3s;\n}\n\n@media (max-width: 768px) {\n .mobile-menu-btn {\n display: block;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--background-color);\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 .subtitle {\n font-size: 1.2rem;\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 });\n\n // Smooth Scroll\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 target.scrollIntoView({\n behavior: 'smooth'\n });\n // Close mobile menu after clicking\n navLinks.classList.remove('active');\n });\n });\n\n // Form Submission\n const contactForm = document.getElementById('contact-form');\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n \n // Get form values\n const name = document.getElementById('name').value;\n const email = document.getElementById('email').value;\n const message = document.getElementById('message').value;\n\n // Simple form validation\n if (name && email && message) {\n alert('Bedankt voor uw bericht! We nemen zo spoedig mogelijk contact met u op.');\n contactForm.reset();\n }\n });\n\n // Intersection Observer for animations\n const observerOptions = {\n threshold: 0.1\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n // Animate sections on scroll\n document.querySelectorAll('section').forEach(section => {\n section.style.opacity = '0';\n section.style.transform = 'translateY(20px)';\n section.style.transition = 'all 0.6s ease-out';\n observer.observe(section);\n });\n});\n---end---\n\nThis website features:\n1. Clean, semantic HTML5 structure\n2. Mobile-responsive design with hamburger menu\n3. Smooth scrolling navigation\n4. Beautiful gradient backgrounds and card hover effects\n5. Intersection Observer for scroll animations\n6. Contact form with basic validation\n7. Optimized for the keyword \"werkplekbeheer Almere\"\n8. Accessible design with proper ARIA labels\n9. Modern CSS with variables and flexible layouts\n10. Performance-optimized with minimal JavaScript\n\nThe design is professional yet engaging, with subtle animations and a color scheme that inspires trust and professionalism."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 301,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3288
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..00458d8
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# werkplek-almere.scroll.pub
+Website generated by Claude from prompt: Een website voor mijn ict bedrijf en wil gewonden worden op het keyword in google: werkplekbeheer Almere
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..814bcf5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,61 @@
+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');
+ });
+
+ // Smooth Scroll
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ // Close mobile menu after clicking
+ navLinks.classList.remove('active');
+ });
+ });
+
+ // Form Submission
+ const contactForm = document.getElementById('contact-form');
+ contactForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ // Get form values
+ const name = document.getElementById('name').value;
+ const email = document.getElementById('email').value;
+ const message = document.getElementById('message').value;
+
+ // Simple form validation
+ if (name && email && message) {
+ alert('Bedankt voor uw bericht! We nemen zo spoedig mogelijk contact met u op.');
+ contactForm.reset();
+ }
+ });
+
+ // Intersection Observer for animations
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ // Animate sections on scroll
+ document.querySelectorAll('section').forEach(section => {
+ section.style.opacity = '0';
+ section.style.transform = 'translateY(20px)';
+ section.style.transition = 'all 0.6s ease-out';
+ observer.observe(section);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..62c21e1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,230 @@
+:root {
+ --primary-color: #2563eb;
+ --secondary-color: #1e40af;
+ --text-color: #1f2937;
+ --background-color: #ffffff;
+ --accent-color: #dbeafe;
+}
+
+* {
+ 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);
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+/* Header Styles */
+.main-header {
+ background: var(--background-color);
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+/* Hero Section */
+.hero {
+ padding: 8rem 0 4rem;
+ background: linear-gradient(135deg, var(--accent-color), var(--background-color));
+ text-align: center;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ color: var(--primary-color);
+}
+
+.subtitle {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--primary-color);
+ color: white;
+ text-decoration: none;
+ border-radius: 0.5rem;
+ transition: background 0.3s ease;
+}
+
+.cta-button:hover {
+ background: var(--secondary-color);
+}
+
+/* Services Section */
+.services {
+ padding: 4rem 0;
+ background: var(--background-color);
+}
+
+.service-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.service-card {
+ padding: 2rem;
+ background: white;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+ text-align: center;
+}
+
+.service-card:hover {
+ transform: translateY(-5px);
+}
+
+.icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+/* Contact Form */
+.contact {
+ padding: 4rem 0;
+ background: var(--accent-color);
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+input, textarea {
+ width: 100%;
+ padding: 0.75rem;
+ border: 1px solid #ddd;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+}
+
+textarea {
+ height: 150px;
+ resize: vertical;
+}
+
+.submit-btn {
+ background: var(--primary-color);
+ color: white;
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+.submit-btn:hover {
+ background: var(--secondary-color);
+}
+
+/* Footer */
+footer {
+ background: var(--text-color);
+ color: white;
+ padding: 2rem 0;
+}
+
+.footer-content {
+ text-align: center;
+}
+
+/* Mobile Menu */
+.mobile-menu-btn {
+ display: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+}
+
+.mobile-menu-btn span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ margin: 5px 0;
+ transition: 0.3s;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu-btn {
+ display: block;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--background-color);
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .subtitle {
+ font-size: 1.2rem;
+ }
+}
\ No newline at end of file