504 lines
24 KiB
HTML
504 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>One-Page Websites | Christ IT</title>
|
|
<meta name="description" content="Clean, mobile-ready one-page websites for local professionals in Clarksville, TN.">
|
|
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
/* --- 1. GLOBAL VARIABLES --- */
|
|
:root {
|
|
/* Light Mode */
|
|
--bg-body: #ffffff;
|
|
--bg-offset: #f3f4f6;
|
|
--bg-highlight: #eef2ff;
|
|
--bg-card: #ffffff;
|
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
|
|
|
--text-dark: #1f2937;
|
|
--text-body: #4b5563;
|
|
--text-light: #9ca3af;
|
|
|
|
--primary: #0056b3;
|
|
--primary-dark: #003d6b;
|
|
--accent: #e67e22;
|
|
|
|
--border: #e5e7eb;
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
|
|
--logo-text: #1f2937;
|
|
}
|
|
|
|
/* Dark Mode */
|
|
[data-theme="dark"] {
|
|
--bg-body: #0f172a;
|
|
--bg-offset: #1e293b;
|
|
--bg-highlight: #172554;
|
|
--bg-card: #1e293b;
|
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
|
|
|
--text-dark: #f8fafc;
|
|
--text-body: #cbd5e1;
|
|
--text-light: #94a3b8;
|
|
|
|
--primary: #3b82f6;
|
|
--primary-dark: #60a5fa;
|
|
|
|
--border: #334155;
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
|
|
|
--logo-text: #ffffff;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
background-color: var(--bg-body);
|
|
color: var(--text-body);
|
|
font-family: 'Inter', sans-serif;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: 'Oswald', sans-serif;
|
|
text-transform: uppercase;
|
|
color: var(--text-dark);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
|
|
|
/* --- BUTTONS --- */
|
|
.text-primary { color: var(--primary); }
|
|
.text-accent { color: var(--accent); }
|
|
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 10px; justify-content: center;
|
|
padding: 12px 28px; font-weight: 600; font-size: 1rem;
|
|
text-transform: uppercase; letter-spacing: 0.5px;
|
|
background-color: var(--primary); color: white;
|
|
border-radius: 4px; border: 2px solid transparent;
|
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
|
}
|
|
.btn:hover {
|
|
background-color: var(--primary-dark);
|
|
color: white !important; transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.btn-outline {
|
|
background-color: transparent; color: var(--text-dark);
|
|
border: 2px solid var(--border);
|
|
}
|
|
.btn-outline:hover {
|
|
background-color: var(--primary); border-color: var(--primary);
|
|
color: white !important;
|
|
}
|
|
|
|
/* --- NAVIGATION --- */
|
|
nav {
|
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
|
position: sticky; top: 0; z-index: 100;
|
|
transition: background-color 0.3s, border-color 0.3s;
|
|
}
|
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
|
|
|
.theme-switch-wrapper {
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
|
}
|
|
.theme-switch {
|
|
position: relative; width: 50px; height: 26px;
|
|
background: var(--border); border-radius: 20px;
|
|
cursor: pointer; transition: 0.3s;
|
|
}
|
|
.theme-switch::after {
|
|
content: ""; position: absolute; top: 3px; left: 3px;
|
|
width: 20px; height: 20px; background: white;
|
|
border-radius: 50%; transition: 0.3s;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
|
|
|
/* --- PLACEHOLDER STYLES --- */
|
|
.img-placeholder {
|
|
background-color: var(--bg-offset);
|
|
border: 2px dashed var(--text-light);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-light);
|
|
min-height: 300px;
|
|
width: 100%;
|
|
}
|
|
.img-placeholder i { font-size: 3rem; margin-bottom: 15px; color: var(--primary); opacity: 0.5; }
|
|
.img-placeholder p { font-size: 0.9rem; margin-top: 10px; max-width: 80%; }
|
|
|
|
/* --- HERO --- */
|
|
.hero { padding: 80px 0; background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body)); }
|
|
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
|
|
.hero-content h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.1; }
|
|
.hero-content p { font-size: 1.2rem; color: var(--text-body); margin-bottom: 30px; }
|
|
|
|
/* --- PROCESS & REQUIREMENTS --- */
|
|
.section { padding: 100px 0; }
|
|
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
|
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
|
|
|
.req-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: start; }
|
|
.req-card {
|
|
background: var(--bg-card); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: 40px; box-shadow: var(--shadow-sm);
|
|
}
|
|
.req-card h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--text-dark); }
|
|
.req-list { list-style: none; margin-bottom: 20px; }
|
|
.req-list li { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; }
|
|
.req-list i { color: var(--primary); font-size: 1.2rem; margin-top: 3px; }
|
|
|
|
.timeline-box {
|
|
background: var(--bg-offset); border-radius: 8px; padding: 30px;
|
|
border-left: 4px solid var(--accent);
|
|
}
|
|
.timeline-box h4 { font-size: 1.3rem; margin-bottom: 10px; }
|
|
|
|
/* --- PRICING & HOSTING --- */
|
|
.bg-offset { background-color: var(--bg-offset); }
|
|
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; justify-content: center; }
|
|
.price-card {
|
|
background: var(--bg-card); padding: 40px 30px; border-radius: 8px;
|
|
box-shadow: var(--shadow-sm); border: 1px solid transparent;
|
|
display: flex; flex-direction: column; transition: 0.3s;
|
|
max-width: 500px; margin: 0 auto; width: 100%;
|
|
}
|
|
.price-card.featured { border-top: 4px solid var(--accent); position: relative; }
|
|
.price-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; font-family: 'Oswald', sans-serif; }
|
|
.price-amount { font-size: 3.5rem; color: var(--text-dark); font-weight: 700; line-height: 1; margin-bottom: 5px; }
|
|
.price-meta { font-size: 0.9rem; color: var(--text-body); margin-bottom: 25px; font-weight: 500; }
|
|
.price-list { list-style: none; margin-bottom: 30px; flex-grow: 1; }
|
|
.price-list li { margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
|
|
.price-list li i { color: var(--primary); }
|
|
|
|
.hosting-banner {
|
|
margin-top: 40px; background: var(--bg-card); padding: 40px; border-radius: 8px;
|
|
border: 2px solid var(--primary); box-shadow: var(--shadow-md);
|
|
display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
|
|
max-width: 900px; margin: 40px auto 0;
|
|
}
|
|
.hosting-banner-content {
|
|
display: flex; align-items: center; gap: 30px; flex: 1; min-width: 300px;
|
|
}
|
|
.hosting-banner-content i { font-size: 4rem; color: var(--primary); }
|
|
.hosting-price-box {
|
|
text-align: right; min-width: 180px;
|
|
padding-left: 30px; border-left: 2px solid var(--border);
|
|
}
|
|
|
|
/* --- EXAMPLES SECTION --- */
|
|
.examples-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;
|
|
}
|
|
|
|
/* --- FOOTER --- */
|
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
|
.footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155; text-align: center; font-size: 0.9rem; color: #64748b; }
|
|
|
|
@media (max-width: 900px) {
|
|
.hero-grid, .req-grid { grid-template-columns: 1fr; }
|
|
.hero-content { text-align: center; }
|
|
.nav-links { display: none; }
|
|
.hosting-banner { flex-direction: column; text-align: center; }
|
|
.hosting-banner-content { flex-direction: column; text-align: center; gap: 15px; }
|
|
.hosting-price-box { text-align: center; border-left: none; padding-left: 0; border-top: 2px solid var(--border); padding-top: 20px; width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class="container nav-inner">
|
|
<a href="index.html" class="logo" style="display:flex; align-items:center;">
|
|
<svg height="45" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
|
<g transform="translate(200, 0)">
|
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
<div style="display: flex; align-items: center; gap: 20px;">
|
|
<div class="nav-links">
|
|
<a href="index.html" class="nav-link">Home</a>
|
|
<a href="cards.html" class="nav-link">NFC Cards</a>
|
|
<a href="connections.html" class="nav-link">Remote Support</a>
|
|
</div>
|
|
<div class="theme-switch-wrapper">
|
|
<span>Dark Mode</span>
|
|
<div class="theme-switch" id="theme-toggle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div class="container hero-grid">
|
|
<div class="hero-content">
|
|
<h1>Your Digital Storefront, <span class="text-primary">Simplified.</span></h1>
|
|
<p>
|
|
A massive, complicated 10-page website is overkill for most local businesses. You need a clean, mobile-optimized landing page that tells clients exactly who you are, what you do, and how to contact you.
|
|
</p>
|
|
<a href="#pricing" class="btn">View Packages <i class="fa-solid fa-arrow-down"></i></a>
|
|
</div>
|
|
|
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
|
<i class="fa-solid fa-laptop-mobile"></i>
|
|
<strong>HERO IMAGE PLACEHOLDER</strong>
|
|
<p>A sleek workspace setup showing a laptop and a smartphone side-by-side. Both screens are brightly displaying a modern, clean, single-page website for a local contractor, emphasizing that the site looks perfect on both desktop and mobile.</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="section container">
|
|
<div class="section-header">
|
|
<h2>The Process & <span class="text-primary">Requirements</span></h2>
|
|
<p>I handle the technical heavy lifting, but I need your expertise to tell your story.</p>
|
|
</div>
|
|
|
|
<div class="req-grid">
|
|
<div class="req-card">
|
|
<h3>What You Provide</h3>
|
|
<p style="color: var(--text-body); margin-bottom: 20px;">To keep turnaround times fast and prices low, you are responsible for supplying the core content of the site.</p>
|
|
<ul class="req-list">
|
|
<li>
|
|
<i class="fa-solid fa-image"></i>
|
|
<div>
|
|
<strong>Your Branding & Photos</strong><br>
|
|
<span style="font-size: 0.9rem; color: var(--text-body);">High-resolution files of your logo, headshots, and photos of your past work.</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<i class="fa-solid fa-pen-nib"></i>
|
|
<div>
|
|
<strong>The Written Copy</strong><br>
|
|
<span style="font-size: 0.9rem; color: var(--text-body);">You provide the text for your bio, services, and contact info. <br><em style="color: var(--accent);">(Need help writing? Copywriting services are available for an extra fee.)</em></span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<i class="fa-solid fa-link"></i>
|
|
<div>
|
|
<strong>Your Links</strong><br>
|
|
<span style="font-size: 0.9rem; color: var(--text-body);">URLs for your social media pages, booking software, or existing Google Business profile.</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 20px;">
|
|
<div class="img-placeholder" style="min-height: 250px;">
|
|
<i class="fa-solid fa-list-check"></i>
|
|
<strong>PROCESS IMAGE PLACEHOLDER</strong>
|
|
<p>A top-down shot of a messy but productive desk. A notepad with a wireframe sketch of a website, some printed logo concepts, a cup of coffee, and a keyboard. It visually represents "gathering the pieces."</p>
|
|
</div>
|
|
|
|
<div class="timeline-box">
|
|
<h4><i class="fa-solid fa-stopwatch text-accent"></i> Fast Turnaround Time</h4>
|
|
<p style="color: var(--text-body); font-size: 0.95rem;">
|
|
Once you submit all your text, images, and branding assets to me, your custom one-page website will be fully built, tested, and <strong>live within 3 to 5 business days</strong>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="pricing" class="section bg-offset">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Transparent <span class="text-accent">Pricing</span></h2>
|
|
<p>One flat fee to build it, and one simple yearly fee to keep it online.</p>
|
|
</div>
|
|
|
|
<div class="pricing-grid">
|
|
<div class="price-card featured">
|
|
<div class="price-title text-accent">Pro Digital Profile</div>
|
|
<div class="price-amount">$200</div>
|
|
<div class="price-meta">One-Time Design & Setup Fee</div>
|
|
<ul class="price-list">
|
|
<li><i class="fa-solid fa-check"></i> Custom One-Page Website Design</li>
|
|
<li><i class="fa-solid fa-check"></i> Mobile & Desktop Optimized</li>
|
|
<li><i class="fa-solid fa-check"></i> Contact Forms & Click-to-Call Buttons</li>
|
|
<li><i class="fa-solid fa-check"></i> Perfect Hub for <a href="cards.html" style="text-decoration: underline;">NFC Tap Cards</a></li>
|
|
<li><i class="fa-solid fa-check"></i> Minor text updates included</li>
|
|
</ul>
|
|
<button class="btn secure-contact-btn" data-type="email" style="background: var(--accent); justify-content:center; width:100%;">Start Building</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hosting-banner">
|
|
<div class="hosting-banner-content">
|
|
<i class="fa-solid fa-server"></i>
|
|
<div>
|
|
<h3 style="font-size: 1.6rem; margin-bottom: 5px; color: var(--text-dark); font-family: 'Oswald', sans-serif; text-transform: uppercase;">The Only Hosting Plan You Need</h3>
|
|
<p style="color: var(--text-body); font-size: 1.05rem; line-height: 1.5;">Keep your new site online, secure, and lightning-fast. I handle your custom domain name renewals, SSL security certificates, server maintenance, and uptime monitoring. You never have to touch a line of code or deal with a massive hosting company's tech support.</p>
|
|
</div>
|
|
</div>
|
|
<div class="hosting-price-box">
|
|
<div class="hosting-price-amount" style="font-size: 3rem; font-weight: 700; color: var(--text-dark); line-height: 1;">$60</div>
|
|
<div class="hosting-price-meta" style="font-size: 0.9rem; color: var(--text-body); font-weight: 500;">Per Year</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="portfolio" class="section container">
|
|
<div class="section-header">
|
|
<h2>Example <span class="text-primary">Sites</span></h2>
|
|
<p>Take a look at how other local professionals are using their one-page hubs.</p>
|
|
</div>
|
|
|
|
<div class="examples-grid">
|
|
<div class="img-placeholder" style="min-height: 350px;">
|
|
<i class="fa-solid fa-image"></i>
|
|
<strong>PORTFOLIO IMAGE PLACEHOLDER 1</strong>
|
|
<p>A mockup showing a completed website design displayed on a mobile phone screen. E.g., A local plumber's site with a "Call Now" button prominent.</p>
|
|
</div>
|
|
<div class="img-placeholder" style="min-height: 350px;">
|
|
<i class="fa-solid fa-image"></i>
|
|
<strong>PORTFOLIO IMAGE PLACEHOLDER 2</strong>
|
|
<p>A mockup showing a completed website design displayed on a mobile phone screen. E.g., A real estate agent's profile with a friendly headshot and links to their listings.</p>
|
|
</div>
|
|
<div class="img-placeholder" style="min-height: 350px;">
|
|
<i class="fa-solid fa-image"></i>
|
|
<strong>PORTFOLIO IMAGE PLACEHOLDER 3</strong>
|
|
<p>A mockup showing a completed website design displayed on a mobile phone screen. E.g., A local lawn care service with a gallery of nice lawns and a quote request form.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div style="max-width: 400px;">
|
|
<a href="index.html" class="footer-logo">CHRIST IT</a>
|
|
<p>Providing secure, independent technology and digital branding solutions in Clarksville, TN.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span id="secure-email">Click to Show Email</span></p>
|
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <span id="secure-phone">Click to Show Phone</span></p>
|
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
© 2026 Christ IT. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// --- THEME ENGINE ---
|
|
const toggleBtn = document.getElementById('theme-toggle');
|
|
const root = document.documentElement;
|
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
if (currentTheme === 'dark') { root.setAttribute('data-theme', 'dark'); }
|
|
|
|
toggleBtn.addEventListener('click', () => {
|
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
|
if (isDark) {
|
|
root.setAttribute('data-theme', 'light');
|
|
localStorage.setItem('theme', 'light');
|
|
} else {
|
|
root.setAttribute('data-theme', 'dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
}
|
|
});
|
|
|
|
const contactKey = 43;
|
|
const contactValues = {
|
|
email: [65, 74, 88, 68, 69, 107, 72, 67, 89, 66, 88, 95, 66, 95, 5, 72, 68, 70],
|
|
phone: [3, 25, 28, 27, 2, 11, 19, 19, 18, 6, 19, 25, 28, 25]
|
|
};
|
|
|
|
function revealContact(type) {
|
|
const encoded = contactValues[type];
|
|
if (!encoded) {
|
|
return "";
|
|
}
|
|
|
|
return encoded.map((code) => String.fromCharCode(code ^ contactKey)).join("");
|
|
}
|
|
|
|
function buildContactLink(type) {
|
|
const value = revealContact(type);
|
|
if (!value) {
|
|
return null;
|
|
}
|
|
|
|
const link = document.createElement("a");
|
|
link.href = type === "email" ? `mailto:${value}` : `tel:${value.replace(/\D/g, "")}`;
|
|
link.rel = "nofollow";
|
|
link.textContent = value;
|
|
link.style.textDecoration = "none";
|
|
link.style.color = "inherit";
|
|
return link;
|
|
}
|
|
|
|
function revealInlineContact(el, type) {
|
|
const link = buildContactLink(type);
|
|
if (link) {
|
|
el.replaceWith(link);
|
|
}
|
|
}
|
|
|
|
const secureEmail = document.getElementById("secure-email");
|
|
const securePhone = document.getElementById("secure-phone");
|
|
|
|
if (secureEmail) {
|
|
secureEmail.addEventListener("click", () => revealInlineContact(secureEmail, "email"));
|
|
}
|
|
|
|
if (securePhone) {
|
|
securePhone.addEventListener("click", () => revealInlineContact(securePhone, "phone"));
|
|
}
|
|
|
|
document.querySelectorAll(".secure-contact-btn").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const type = btn.dataset.type;
|
|
const value = revealContact(type);
|
|
|
|
if (type === "email") {
|
|
window.location.href = `mailto:${value}`;
|
|
}
|
|
|
|
if (type === "phone") {
|
|
window.location.href = `tel:${value.replace(/\D/g, "")}`;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|