fractionbookkeeping / index.html
Pixelweb's picture
make all buttons also #99A833 color with 3d shade effect - Follow Up Deployment
f5aba28 verified
Raw History Blame Contribute Delete
35.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixelweb - Professional Web Design & Hosting</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-text {
background: linear-gradient(90deg, #B2BB63, #99A833);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-bg {
background: radial-gradient(circle at 10% 20%, rgba(178, 187, 99, 0.1) 0%, rgba(255, 255, 255, 1) 50%);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.portfolio-item {
transition: all 0.3s ease;
}
.portfolio-item:hover {
transform: scale(1.05);
}
.chat-widget {
transition: all 0.3s ease;
}
.chat-widget:hover {
transform: scale(1.1);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-sm fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex items-center">
<img src="https://www.pixelweb.co.za/assets/images/pixelico-117x134.png" alt="Pixelweb Logo" class="h-10 w-auto">
<span class="ml-2 text-xl font-bold gradient-text">PIXELWEB</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Home</a>
<a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">About</a>
<a href="#services" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Services</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
<div class="flex space-x-4">
<a href="tel:0659473181" class="text-gray-700 hover:text-blue-600">
<i class="fas fa-phone-alt"></i>
</a>
<a href="mailto:info@pixelweb.co.za" class="text-gray-700 hover:text-blue-600">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">Home</a>
<a href="#about" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">About</a>
<a href="#services" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">Services</a>
<a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">Contact</a>
<div class="flex px-3 py-2 space-x-4">
<a href="tel:0659473181" class="text-gray-700 hover:text-blue-600">
<i class="fas fa-phone-alt"></i> Call Us
</a>
<a href="mailto:info@pixelweb.co.za" class="text-gray-700 hover:text-blue-600">
<i class="fas fa-envelope"></i> Email Us
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
We create <span class="gradient-text">amazing websites</span>
</h1>
<p class="text-lg text-gray-600 mb-8">
Close your eyes and envision your ideal website. Whether you're a small startup or a large corporation, we can turn your dreams into pixels.
</p>
<a href="#contact" class="bg-[#99A833] text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition duration-300 inline-block transform hover:-translate-y-1 hover:shadow-[0_5px_0_0_rgba(153,168,51,0.5)]">
Free Consultation
</a>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-full">
<img src="https://www.pixelweb.co.za/assets/images/hero.webp"
alt="Pixelweb Hero Image"
class="w-full h-auto max-w-xl rounded-lg shadow-xl"
srcset="https://www.pixelweb.co.za/assets/images/hero-small.webp 480w,
https://www.pixelweb.co.za/assets/images/hero-medium.webp 768w,
https://www.pixelweb.co.za/assets/images/hero.webp 1200w"
sizes="(max-width: 480px) 480px,
(max-width: 768px) 768px,
1200px">
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/3 mb-10 md:mb-0 flex justify-center">
<div class="relative">
<div class="w-64 h-64 rounded-full bg-gradient-to-r from-blue-100 to-purple-100 flex items-center justify-center">
<img src="https://www.pixelweb.co.za/assets/images/pixl-1024x1024.webp" alt="Pixl Character" class="w-48 h-48">
</div>
</div>
</div>
<div class="md:w-2/3 md:pl-16">
<h2 class="text-3xl font-bold mb-6">
<span class="gradient-text">Hi there!</span> Welcome, my name is Pixl
</h2>
<p class="text-gray-600 mb-4">
Running a small business is tough—I get it. You've got a million things on your to-do list. Let Pixelweb lighten the load. Whether you're starting fresh with a new domain, setting up email accounts, or giving your logo a modern twist, we've got you covered.
</p>
<p class="text-gray-600 mb-4">
Need a new website but don't have the time to build it yourself? Focus on what you do best and let us handle the rest. From sleek website designs to secure hosting and even online shops, we're your one-stop shop for all things digital.
</p>
<p class="text-gray-600 mb-6">
With over 17 years of experience, we've been turning online dreams into reality for clients across South Africa, Mauritius, London UK, Australia, Zimbabwe, and beyond. At Pixelweb, we blend personalized service with cutting-edge solutions to boost your online presence and unlock your business's full potential.
</p>
<a href="#services" class="bg-[#99A833] text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition duration-300 inline-block transform hover:-translate-y-1 hover:shadow-[0_5px_0_0_rgba(153,168,51,0.5)]">
Get Started
</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Our Services</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Let's Get Creative!</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Web Design -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="h-48 overflow-hidden">
<img src="https://www.pixelweb.co.za/assets/images/mbr-3-816x544.webp" alt="Web Design" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">
<span class="gradient-text">Web</span> Design
</h3>
<p class="text-gray-600 mb-4">
It's time to bring your website to life. We make use of the latest technologies and coding wizardry to build a responsive, user-friendly website that looks amazing on any device. Whether you need a simple landing page or a complex corporate website, we've got you covered.
</p>
</div>
</div>
<!-- Logo Design -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="h-48 overflow-hidden">
<img src="https://www.pixelweb.co.za/assets/images/mbr-2-816x544.webp" alt="Logo Design" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">
<span class="gradient-text">Logo</span> Design
</h3>
<p class="text-gray-600 mb-4">
We will work closely with you to craft a stunning visual identity that captures the essence of your brand. From logos to color schemes, every pixel will be meticulously designed to leave a lasting impression on your audience.
</p>
</div>
</div>
<!-- Web Hosting -->
<div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="h-48 overflow-hidden">
<img src="https://www.pixelweb.co.za/assets/images/mbr-1-816x544.webp" alt="Web Hosting" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">
<span class="gradient-text">Web</span> Hosting
</h3>
<p class="text-gray-600 mb-4">
Pixelweb doesn't just stop at design and development – we also offer top-notch hosting services to ensure that your website stays online and performs flawlessly 24/7. Say goodbye to slow loading times and downtime headaches – with Pixelweb, your website will be in hosting heaven.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Quote Request Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Get a Free Quote</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Tell us about your project and we'll get back to you with a custom quote.
</p>
</div>
<div class="bg-white rounded-xl shadow-md p-8 max-w-3xl mx-auto">
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="quote-name" class="block text-sm font-medium text-gray-700 mb-1">Name*</label>
<input type="text" id="quote-name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="quote-email" class="block text-sm font-medium text-gray-700 mb-1">Email*</label>
<input type="email" id="quote-email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="quote-phone" class="block text-sm font-medium text-gray-700 mb-1">Phone*</label>
<input type="tel" id="quote-phone" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="quote-company" class="block text-sm font-medium text-gray-700 mb-1">Company</label>
<input type="text" id="quote-company" name="company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div>
<label for="quote-service" class="block text-sm font-medium text-gray-700 mb-1">Service Needed*</label>
<select id="quote-service" name="service" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Select a service</option>
<option value="web-design">Web Design</option>
<option value="logo-design">Logo Design</option>
<option value="web-hosting">Web Hosting</option>
<option value="ecommerce">E-commerce Website</option>
<option value="seo">SEO Services</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="quote-details" class="block text-sm font-medium text-gray-700 mb-1">Project Details*</label>
<textarea id="quote-details" name="details" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<div class="flex items-center">
<input type="checkbox" id="quote-newsletter" name="newsletter" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="quote-newsletter" class="ml-2 block text-sm text-gray-700">
Subscribe to our newsletter
</label>
</div>
<button type="submit" class="bg-[#99A833] text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition duration-300 w-full transform hover:-translate-y-1 hover:shadow-[0_5px_0_0_rgba(153,168,51,0.5)]">
Request Quote
</button>
</form>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Portfolio</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
So why settle for ordinary when you can have extraordinary? Experience the Pixelweb difference and discover what amazing web design can do for your business.
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<a href="https://affinity-healthcare.co.uk/" class="portfolio-item">
<img src="https://www.pixelweb.co.za/assets/images/affinity-678x678.webp" alt="Affinity Healthcare" class="w-full h-auto rounded-lg shadow-md">
</a>
<a href="https://atnaturalhealth.co.za/" class="portfolio-item">
<img src="https://www.pixelweb.co.za/assets/images/atnatural-678x678.webp" alt="At Natural Health" class="w-full h-auto rounded-lg shadow-md">
</a>
<a href="https://beadvised.co.za/" class="portfolio-item">
<img src="https://www.pixelweb.co.za/assets/images/beadvised-678x678.webp" alt="Be Advised" class="w-full h-auto rounded-lg shadow-md">
</a>
<a href="https://www.bloktrading.com/" class="portfolio-item">
<img src="https://www.pixelweb.co.za/assets/images/bloktrading-678x678.webp" alt="Blok Trading" class="w-full h-auto rounded-lg shadow-md">
</a>
<a href="https://www.bloktrading.com/" class="portfolio-item">
<img src="https://www.pixelweb.co.za/assets/images/bloktradinglogo-678x678.webp" alt="Blok Trading Logo" class="w-full h-auto rounded-lg shadow-md">
</a>
<a href="https://draesthetics.co.za/" class="portfolio-item">
<img src="https://www.pixelweb.co.za/assets/images/draesthetics-678x678.webp" alt="DR Aesthetics" class="w-full h-auto rounded-lg shadow-md">
</a>
<a href="https://rcfa.co.za/" class="portfolio-item">
<img src="https://www.pixelweb.co.za/assets/images/rcfa-678x678.webp" alt="RCFA" class="w-full h-auto rounded-lg shadow-md">
</a>
</div>
<div class="text-center mt-16">
<p class="text-xl text-gray-600 mb-8">
Get in touch with us today and let's create something truly special together.
</p>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">
At Pixelweb, we believe in the power of <span class="gradient-text">personal service.</span>
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Unlike other web agencies, we're not just another faceless corporation – we're your partners in success. From the initial consultation to the final launch, our dedicated team will be by your side every step of the way, offering personalized support and guidance to help your business thrive online.
</p>
</div>
<div class="flex justify-center">
<a href="#contact" class="bg-[#99A833] text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition duration-300 inline-block transform hover:-translate-y-1 hover:shadow-[0_5px_0_0_rgba(153,168,51,0.5)]">
Contact Us
</a>
</div>
</div>
</section>
<!-- Contact Form Section -->
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<h2 class="text-3xl font-bold mb-6">Contact Form</h2>
<h3 class="text-xl text-gray-600 mb-8">Personal Service Every Step of the Way!</h3>
<form id="contactForm" class="space-y-6">
<div id="formSuccess" class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4">
Thank you for filling out the form! We will respond shortly.
</div>
<div id="formError" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
Oops...! some problem!
</div>
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
<input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<button type="submit" class="bg-[#99A833] text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition duration-300 w-full transform hover:-translate-y-1 hover:shadow-[0_5px_0_0_rgba(153,168,51,0.5)]">
Send message
</button>
</form>
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl font-bold mb-6">Get in touch</h2>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 text-[#99A833] mt-1">
<i class="fas fa-phone-alt"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Phone</h3>
<a href="tel:0659473181" class="text-gray-600 hover:text-blue-600">065 947 3181</a>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-green-500 mt-1">
<i class="fab fa-whatsapp"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">WhatsApp</h3>
<a href="https://wa.me/0659473181" class="text-gray-600 hover:text-green-600">065 947 3181</a>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-[#B2BB63] mt-1">
<i class="fas fa-envelope"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Email</h3>
<a href="mailto:info@pixelweb.co.za" class="text-gray-600 hover:text-purple-600">info@pixelweb.co.za</a>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-red-500 mt-1">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Address</h3>
<p class="text-gray-600">
Krugersdorp, Mogale City, Noordheuwel, Westrand, Johannesburg South Africa
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-yellow-500 mt-1">
<i class="fas fa-clock"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Working hours</h3>
<p class="text-gray-600">
Mon-Fri - 8:00AM - 4:00PM
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<a href="#" class="flex items-center mb-6">
<img src="https://www.pixelweb.co.za/assets/images/pixelico-117x134.png" alt="Pixelweb Logo" class="h-12 w-auto">
<span class="ml-2 text-xl font-bold gradient-text">PIXELWEB</span>
</a>
<p class="text-gray-400 mb-4">
Professional web design, graphic design, and hosting services to help your business thrive online.
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Connect With Us</h3>
<div class="flex space-x-4 mb-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<p class="text-gray-400">
© Copyright 2025 Pixelweb - All Rights Reserved.
</p>
</div>
</div>
</div>
</footer>
<!-- WhatsApp Chat Widget -->
<div id="whatsappWidget" class="fixed bottom-6 right-6 z-50">
<div class="relative">
<div id="chatButton" class="chat-widget bg-green-500 text-white rounded-full p-4 shadow-lg cursor-pointer">
<i class="fab fa-whatsapp text-2xl"></i>
</div>
<div id="chatBox" class="hidden absolute bottom-full right-0 mb-4 w-72 bg-white rounded-lg shadow-xl overflow-hidden">
<div class="bg-green-500 text-white p-3 flex justify-between items-center">
<span class="font-semibold">Chat with us on WhatsApp!</span>
<button id="closeChat" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4 bg-gray-50">
<div class="mb-4 text-sm text-gray-600">
<span class="font-semibold">PIXL BOT</span>: Hi! 👋 Type a message here. It will go straight to our phone! 🔥
</div>
<input type="text" placeholder="Type a message..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
</div>
</div>
</div>
</div>
<!-- Cookie Consent -->
<div id="cookieConsent" class="fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4 z-50">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="mb-4 md:mb-0">
<p class="text-sm">
We use cookies to give you the best experience. Read our <a href="https://www.pixelweb.co.za/privacy.html" class="text-blue-300 hover:text-blue-400">cookie policy</a>.
</p>
</div>
<button id="acceptCookies" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm">
GOT IT
</button>
</div>
</div>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// WhatsApp chat widget
const chatButton = document.getElementById('chatButton');
const chatBox = document.getElementById('chatBox');
const closeChat = document.getElementById('closeChat');
chatButton.addEventListener('click', function() {
chatBox.classList.toggle('hidden');
});
closeChat.addEventListener('click', function() {
chatBox.classList.add('hidden');
});
// Cookie consent
const cookieConsent = document.getElementById('cookieConsent');
const acceptCookies = document.getElementById('acceptCookies');
if (!localStorage.getItem('cookieConsent')) {
cookieConsent.classList.remove('hidden');
}
acceptCookies.addEventListener('click', function() {
localStorage.setItem('cookieConsent', 'accepted');
cookieConsent.classList.add('hidden');
});
// Quote Form submission
const quoteForm = document.querySelector('#quote-request form');
if (quoteForm) {
quoteForm.addEventListener('submit', function(e) {
e.preventDefault();
// Here you would typically send the form data to your server
alert('Thank you for your quote request! We will contact you shortly.');
this.reset();
});
}
// Contact Form submission
const contactForm = document.getElementById('contactForm');
const formSuccess = document.getElementById('formSuccess');
const formError = document.getElementById('formError');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Simulate form submission
setTimeout(function() {
formSuccess.classList.remove('hidden');
formError.classList.add('hidden');
contactForm.reset();
// Hide success message after 5 seconds
setTimeout(function() {
formSuccess.classList.add('hidden');
}, 5000);
}, 1000);
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Pixelweb/fractionbookkeeping" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>