MagnusM76
/

Handyman

Model card Files Files and versions

xet

Community

MagnusM76 commited on Jul 22

Commit

84890be

verified ·

1 Parent(s): f806f83

Upload !DOCTYPE html.txt

Browse files

Files changed (1) hide show

!DOCTYPE html.txt +110 -0

!DOCTYPE html.txt ADDED Viewed

	@@ -0,0 +1,110 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Magnus The Handyman | Maintenance & Repairs</title>
+<meta name="description" content="Magnus The Handyman - reliable home and property maintenance, repairs, installations and handyman services.">
+<style>
+:root{--gold:#f5b400;--dark:#0b0d10;--panel:#15191f;--light:#f5f5f5;--muted:#b8bec7}
+*{box-sizing:border-box;scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#090a0c;color:var(--light);line-height:1.6}
+header{position:sticky;top:0;z-index:10;background:rgba(9,10,12,.96);border-bottom:1px solid #292d33}
+.nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
+.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand img{width:48px;height:48px;object-fit:cover;border-radius:50%}.brand span{color:var(--gold)}
+nav a{color:white;text-decoration:none;margin-left:20px;font-weight:700}nav a:hover{color:var(--gold)}
+.lang{margin-left:18px;background:#20252c;color:white;border:1px solid #444;padding:7px;border-radius:6px}
+.hero{min-height:720px;display:grid;place-items:center;text-align:center;padding:70px 20px;background:radial-gradient(circle at 50% 20%,#30353c 0,#111419 38%,#08090b 75%)}
+.hero-inner{max-width:900px}.hero-logo{width:min(520px,80vw);max-height:420px;object-fit:contain;filter:drop-shadow(0 18px 30px #000)}
+h1{font-size:clamp(2.4rem,6vw,5rem);margin:10px 0;color:white}.gold{color:var(--gold)}
+.btn{display:inline-block;background:var(--gold);color:#111;text-decoration:none;font-weight:900;padding:14px 24px;border-radius:8px;margin:8px;border:0;cursor:pointer}.btn.secondary{background:transparent;color:white;border:1px solid #666}
+section{padding:80px 20px}.wrap{max-width:1180px;margin:auto}h2{text-align:center;font-size:2.4rem;margin-top:0}.lead{text-align:center;color:var(--muted);max-width:760px;margin:0 auto 40px}
+.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.card{background:var(--panel);border:1px solid #2c3138;border-radius:14px;padding:26px;box-shadow:0 10px 30px #0005}.icon{font-size:2rem;color:var(--gold)}
+.alt{background:#11151a}.booking{display:grid;grid-template-columns:1fr 1fr;gap:30px}
+form{background:var(--panel);padding:28px;border-radius:14px;border:1px solid #30353b}label{display:block;margin-top:14px;font-weight:bold}input,select,textarea{width:100%;padding:12px;margin-top:6px;background:#0c0f13;color:white;border:1px solid #444;border-radius:7px}textarea{min-height:110px}
+.notice{padding:12px;background:#201b0c;border-left:4px solid var(--gold);color:#eee;margin-top:15px}.price{font-size:1.6rem;font-weight:bold;color:var(--gold)}
+.review-form{max-width:700px;margin:30px auto}.review{margin-top:20px}.stars{color:var(--gold);font-size:1.2rem}
+footer{background:#050608;padding:45px 20px;text-align:center;color:var(--muted)}footer img{width:80px;border-radius:50%}
+@media(max-width:760px){nav a{display:none}.booking{grid-template-columns:1fr}.hero{min-height:650px}}
+</style>
+</head>
+<body>
+<header><div class="nav">
+<div class="brand"><img src="assets/magnus-logo.png" alt="Magnus The Handyman logo"><div>MAGNUS <span>THE HANDYMAN</span></div></div>
+<nav><a href="#home">Home</a><a href="#services">Services</a><a href="#booking">Book</a><a href="#reviews">Reviews</a><a href="#contact">Contact</a><select class="lang" onchange="changeLang(this.value)"><option value="en">English</option><option value="af">Afrikaans</option><option value="ar">العربية</option></select></nav>
+</div></header>
+<main id="home">
+<section class="hero"><div class="hero-inner">
+<img class="hero-logo" src="assets/magnus-logo.png" alt="Magnus The Handyman">
+<h1 data-en="Reliable Repairs. Quality Work. Done Right." data-af="Betroubare Herstelwerk. Kwaliteit. Reg gedoen." data-ar="إصلاحات موثوقة. جودة عالية. إنجاز متقن.">Reliable Repairs. Quality Work. Done Right.</h1>
+<p class="lead" data-en="Professional handyman and property maintenance services for homes, offices and small businesses." data-af="Professionele handyman- en eiendomsinstandhoudingsdienste vir huise, kantore en klein besighede." data-ar="خدمات صيانة وإصلاح احترافية للمنازل والمكاتب والشركات الصغيرة.">Professional handyman and property maintenance services for homes, offices and small businesses.</p>
+<a class="btn" href="#booking">BOOK A SERVICE</a><a class="btn secondary" href="#services">VIEW SERVICES</a>
+</div></section>
+<section id="services"><div class="wrap"><h2>Our <span class="gold">Services</span></h2><p class="lead">From small repairs to general property maintenance, Magnus The Handyman helps keep your property safe, functional and looking its best.</p>
+<div class="cards">
+<div class="card"><div class="icon">🔧</div><h3>General Repairs</h3><p>Doors, locks, fittings, fixtures and everyday household repairs.</p></div>
+<div class="card"><div class="icon">🛠️</div><h3>Maintenance</h3><p>Preventative and routine maintenance for homes, offices and properties.</p></div>
+<div class="card"><div class="icon">🎨</div><h3>Painting & Touch-Ups</h3><p>Interior touch-ups, feature walls and small painting projects.</p></div>
+<div class="card"><div class="icon">🚿</div><h3>Plumbing Assistance</h3><p>Minor leaks, taps, fittings and basic plumbing maintenance.</p></div>
+<div class="card"><div class="icon">💡</div><h3>Installation</h3><p>Fixtures, shelves, curtain rails, mirrors and other installations.</p></div>
+<div class="card"><div class="icon">🏠</div><h3>Property Care</h3><p>Reliable handyman support to keep your property in good condition.</p></div>
+</div></div></section>
+<section id="booking" class="alt"><div class="wrap"><h2>Book <span class="gold">Magnus</span></h2><p class="lead">Choose a service and request a convenient appointment. This demo is ready to connect to your preferred booking and payment provider.</p>
+<div class="booking">
+<form onsubmit="submitBooking(event)">
+<h3>Request a Booking</h3>
+<label>Name<input id="name" required></label>
+<label>Phone / WhatsApp<input id="phone" required></label>
+<label>Email<input id="email" type="email"></label>
+<label>Service<select id="service" required><option value="">Select a service</option><option>General Repairs</option><option>Maintenance</option><option>Painting & Touch-Ups</option><option>Plumbing Assistance</option><option>Installation</option><option>Property Care</option></select></label>
+<label>Preferred Date<input id="date" type="date" required></label>
+<label>Preferred Time<select id="time"><option>Morning</option><option>Afternoon</option><option>Evening</option></select></label>
+<label>Job Description<textarea id="details" placeholder="Tell us what needs to be done..."></textarea></label>
+<button class="btn" type="submit">SEND BOOKING REQUEST</button>
+<div id="bookingMsg" class="notice" style="display:none"></div>
+</form>
+<div class="card"><h3>Simple & Transparent</h3><p class="price">Request a Quote</p><p>Every job is different. Send your request and Magnus can confirm availability and provide a quotation before work begins.</p><h3>Payments</h3><p>This website includes a payment-ready section. For live payments, connect a secure provider such as Stripe, PayPal or a UAE payment gateway. Never collect raw card details directly in this HTML page.</p><div class="notice">For a live website, booking storage, confirmations and payment processing need a secure backend or trusted third-party integration.</div></div>
+</div></div></section>
+<section id="reviews"><div class="wrap"><h2>Customer <span class="gold">Reviews</span></h2><p class="lead">Share your experience and help future customers choose Magnus The Handyman.</p>
+<div id="reviewList" class="cards"></div>
+<form class="review-form" onsubmit="submitReview(event)"><h3>Leave a Review</h3><label>Your Name<input id="reviewName" required></label><label>Rating<select id="rating"><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option></select></label><label>Your Review<textarea id="reviewText" required></textarea></label><button class="btn" type="submit">POST REVIEW</button></form>
+</div></section>
+<section id="contact" class="alt"><div class="wrap"><h2>Contact <span class="gold">Magnus</span></h2><p class="lead">Ready to get the job done? Send a booking request or contact us directly.</p><div class="cards">
+<div class="card"><h3>📞 Phone / WhatsApp</h3><p><a href="tel:+971585591476" style="color:white">+971 58 559 1476</a></p><p>Replace this number with your business number.</p></div>
+<div class="card"><h3>✉️ Email</h3><p><a href="mailto:magnusthehandyman@gmail.com" style="color:white">magnusthehandyman@gmail.com</a></p></div>
+<div class="card"><h3>📍 Service Area</h3><p>Dubai / Your Local Service Area</p><p>Edit this text to your actual coverage area.</p></div>
+</div></div></section>
+</main>
+<footer><img src="assets/magnus-logo.png" alt="Magnus logo"><p><strong>MAGNUS THE HANDYMAN</strong></p><p>Reliable repairs. Quality work. Done right.</p><p>© <span id="year"></span> Magnus The Handyman. All rights reserved.</p></footer>
+<script>
+const translations={en:{},af:{},ar:{}};
+function changeLang(lang){
+document.documentElement.lang=lang;
+document.querySelectorAll('[data-'+lang+']').forEach(el=>el.textContent=el.getAttribute('data-'+lang));
+if(lang==='ar'){document.body.dir='rtl'}else{document.body.dir='ltr'}
+}
+function submitBooking(e){
+e.preventDefault();
+const data={name:name.value,phone:phone.value,email:email.value,service:service.value,date:date.value,time:time.value,details:details.value};
+localStorage.setItem('latestBooking',JSON.stringify(data));
+bookingMsg.style.display='block';bookingMsg.textContent='Thank you! Your booking request has been saved in this demo. Connect the form to your email/backend to receive live bookings.';
+e.target.reset();
+}
+function loadReviews(){
+const reviews=JSON.parse(localStorage.getItem('magnusReviews')||'[]');
+reviewList.innerHTML=reviews.map(r=>`<div class="card review"><h3>${escapeHtml(r.name)}</h3><div class="stars">${'★'.repeat(Number(r.rating))}${'☆'.repeat(5-Number(r.rating))}</div><p>${escapeHtml(r.text)}</p></div>`).join('')||'<div class="card"><h3>Be our first reviewer!</h3><p>Your customer reviews will appear here.</p></div>';
+}
+function submitReview(e){
+e.preventDefault();const reviews=JSON.parse(localStorage.getItem('magnusReviews')||'[]');
+reviews.unshift({name:reviewName.value,rating:rating.value,text:reviewText.value});localStorage.setItem('magnusReviews',JSON.stringify(reviews));e.target.reset();loadReviews();
+}
+function escapeHtml(s){return s.replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]))}
+document.getElementById('year').textContent=new Date().getFullYear();loadReviews();
+</script>
+</body></html>