|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Marc-Tek | Technical Consulting & Systems Support</title> |
|
|
<meta name="description" content="Marc-Tek provides practical technical consulting, systems support, networking, and infrastructure guidance for small business, broadcast, and industrial technology environments." /> |
|
|
<meta property="og:title" content="Marc-Tek | Technical Consulting & Systems Support" /> |
|
|
<meta property="og:description" content="Technical consulting and systems support with a practical, no-nonsense approach." /> |
|
|
<meta property="og:type" content="website" /> |
|
|
<link rel="preconnect" href="https://api.fontshare.com" /> |
|
|
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=cabinet-grotesk@500,700,800&display=swap" rel="stylesheet" /> |
|
|
<style> |
|
|
:root, [data-theme="light"] { |
|
|
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); |
|
|
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); |
|
|
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); |
|
|
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); |
|
|
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); |
|
|
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); |
|
|
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; |
|
|
--space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; |
|
|
--space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; |
|
|
--color-bg: #f7f6f2; |
|
|
--color-surface: #f9f8f5; |
|
|
--color-surface-2: #fbfbf9; |
|
|
--color-surface-offset: #edeae5; |
|
|
--color-border: #d4d1ca; |
|
|
--color-divider: #dcd9d5; |
|
|
--color-text: #28251d; |
|
|
--color-text-muted: #63615d; |
|
|
--color-text-faint: #9f9d98; |
|
|
--color-text-inverse: #f9f8f4; |
|
|
--color-primary: #01696f; |
|
|
--color-primary-hover: #0c4e54; |
|
|
--color-primary-highlight: #d7e7e6; |
|
|
--radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; |
|
|
--shadow-sm: 0 1px 2px rgba(40,37,29,.06); |
|
|
--shadow-md: 0 8px 24px rgba(40,37,29,.08); |
|
|
--shadow-lg: 0 18px 48px rgba(40,37,29,.12); |
|
|
--content-default: 1120px; |
|
|
--font-body: 'General Sans', 'Inter', sans-serif; |
|
|
--font-display: 'Cabinet Grotesk', 'Inter', sans-serif; |
|
|
--transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); |
|
|
} |
|
|
[data-theme="dark"] { |
|
|
--color-bg: #171614; |
|
|
--color-surface: #1c1b19; |
|
|
--color-surface-2: #201f1d; |
|
|
--color-surface-offset: #252320; |
|
|
--color-border: #393836; |
|
|
--color-divider: #262523; |
|
|
--color-text: #e6e2da; |
|
|
--color-text-muted: #b5b0a8; |
|
|
--color-text-faint: #7c7770; |
|
|
--color-text-inverse: #171614; |
|
|
--color-primary: #58a5af; |
|
|
--color-primary-hover: #7ec0c7; |
|
|
--color-primary-highlight: #2c3738; |
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,.22); |
|
|
--shadow-md: 0 8px 24px rgba(0,0,0,.28); |
|
|
--shadow-lg: 0 18px 48px rgba(0,0,0,.38); |
|
|
} |
|
|
@media (prefers-color-scheme: dark) { |
|
|
:root:not([data-theme]) { |
|
|
--color-bg: #171614; |
|
|
--color-surface: #1c1b19; |
|
|
--color-surface-2: #201f1d; |
|
|
--color-surface-offset: #252320; |
|
|
--color-border: #393836; |
|
|
--color-divider: #262523; |
|
|
--color-text: #e6e2da; |
|
|
--color-text-muted: #b5b0a8; |
|
|
--color-text-faint: #7c7770; |
|
|
--color-text-inverse: #171614; |
|
|
--color-primary: #58a5af; |
|
|
--color-primary-hover: #7ec0c7; |
|
|
--color-primary-highlight: #2c3738; |
|
|
} |
|
|
} |
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} |
|
|
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth;scroll-padding-top:6rem} |
|
|
body{min-height:100dvh;background:var(--color-bg);color:var(--color-text);font:var(--text-base)/1.6 var(--font-body)} |
|
|
img,svg{display:block;max-width:100%;height:auto} |
|
|
a,button,input,textarea,select{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive)} |
|
|
a{color:inherit;text-decoration:none} |
|
|
button{font:inherit;cursor:pointer;border:none;background:none} |
|
|
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)} |
|
|
.skip-link{position:absolute;left:var(--space-4);top:-3rem;background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100} |
|
|
.skip-link:focus{top:var(--space-4)} |
|
|
.container{width:min(calc(100% - 2rem),var(--content-default));margin-inline:auto} |
|
|
.section{padding-block:clamp(var(--space-12),8vw,var(--space-24))} |
|
|
.eyebrow{display:inline-flex;gap:var(--space-2);align-items:center;padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase} |
|
|
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 86%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--color-text) 10%, transparent)} |
|
|
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0} |
|
|
.brand{display:flex;align-items:center;gap:var(--space-3);font-weight:700} |
|
|
.brand-mark{width:2.75rem;height:2.75rem;padding:.45rem;border-radius:.85rem;background:linear-gradient(145deg,var(--color-surface-2),var(--color-surface-offset));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow-sm)} |
|
|
.brand span{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.01em} |
|
|
.nav{display:flex;align-items:center;gap:var(--space-5)} |
|
|
.nav-links{display:flex;gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)} |
|
|
.nav-links a:hover{color:var(--color-text)} |
|
|
.theme-toggle{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid color-mix(in srgb,var(--color-text) 12%, transparent);border-radius:var(--radius-full);background:var(--color-surface)} |
|
|
.hero{padding-block:clamp(4.5rem,10vw,8rem) clamp(3rem,8vw,6rem)} |
|
|
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center} |
|
|
.hero h1{font-family:var(--font-display);font-size:clamp(2.6rem,4vw,5.1rem);line-height:1.02;letter-spacing:-.03em;max-width:11ch;margin-top:var(--space-5)} |
|
|
.hero-copy{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch;margin-top:var(--space-5)} |
|
|
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)} |
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.9rem 1.25rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600} |
|
|
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)} |
|
|
.btn-primary:hover{background:var(--color-primary-hover)} |
|
|
.btn-secondary{border:1px solid color-mix(in srgb,var(--color-text) 14%, transparent);background:var(--color-surface)} |
|
|
.hero-panel{position:relative;padding:clamp(var(--space-6),4vw,var(--space-8));background:linear-gradient(180deg,var(--color-surface-2),var(--color-surface));border:1px solid color-mix(in srgb,var(--color-text) 10%, transparent);border-radius:calc(var(--radius-xl) + .35rem);box-shadow:var(--shadow-lg);overflow:hidden} |
|
|
.hero-panel::before{content:"";position:absolute;inset:auto auto -20% -10%;width:14rem;height:14rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 14%, transparent);filter:blur(8px)} |
|
|
.panel-grid{display:grid;gap:var(--space-5);position:relative} |
|
|
.stat{padding:var(--space-4);background:color-mix(in srgb,var(--color-surface-offset) 70%, transparent);border:1px solid color-mix(in srgb,var(--color-text) 9%, transparent);border-radius:var(--radius-lg)} |
|
|
.stat strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1} |
|
|
.stat span{display:block;color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)} |
|
|
.section-head{display:grid;gap:var(--space-3);margin-bottom:var(--space-8)} |
|
|
.section-head h2{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.08;letter-spacing:-.02em} |
|
|
.section-head p{max-width:65ch;color:var(--color-text-muted)} |
|
|
.service-grid,.proof-grid,.contact-grid{display:grid;gap:var(--space-5)} |
|
|
.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))} |
|
|
.card{padding:var(--space-6);background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-text) 10%, transparent);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)} |
|
|
.card h3{font-size:var(--text-lg);line-height:1.2;margin-bottom:var(--space-3)} |
|
|
.card p{color:var(--color-text-muted)} |
|
|
.card ul{list-style:none;display:grid;gap:var(--space-2);margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm)} |
|
|
.card li::before{content:"— ";color:var(--color-primary)} |
|
|
.proof-wrap{padding:clamp(var(--space-6),4vw,var(--space-8));background:var(--color-surface);border-radius:calc(var(--radius-xl) + .45rem);border:1px solid color-mix(in srgb,var(--color-text) 10%, transparent)} |
|
|
.proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))} |
|
|
.proof-item strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-2)} |
|
|
.proof-item span{color:var(--color-text-muted);font-size:var(--text-sm)} |
|
|
.about{display:grid;grid-template-columns:1fr .9fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start} |
|
|
.about-panel{padding:var(--space-6);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));border:1px solid color-mix(in srgb,var(--color-text) 10%, transparent);border-radius:var(--radius-xl)} |
|
|
.stack{display:grid;gap:var(--space-4)} |
|
|
.stack + .stack{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-divider)} |
|
|
.contact-card{padding:clamp(var(--space-6),4vw,var(--space-8));background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 9%, var(--color-surface)),var(--color-surface));border:1px solid color-mix(in srgb,var(--color-text) 10%, transparent);border-radius:calc(var(--radius-xl) + .3rem);box-shadow:var(--shadow-md)} |
|
|
.contact-grid{grid-template-columns:1fr auto;align-items:end} |
|
|
.contact-list{display:grid;gap:var(--space-3);margin-top:var(--space-5);color:var(--color-text-muted)} |
|
|
.site-footer{padding:var(--space-8) 0;border-top:1px solid color-mix(in srgb,var(--color-text) 10%, transparent);color:var(--color-text-muted);font-size:var(--text-sm)} |
|
|
.muted{color:var(--color-text-muted)} |
|
|
@media (max-width: 980px){ |
|
|
.hero-grid,.about,.contact-grid,.service-grid,.proof-grid{grid-template-columns:1fr} |
|
|
.nav-links{display:none} |
|
|
.hero h1{max-width:12ch} |
|
|
} |
|
|
@media (max-width: 640px){ |
|
|
.header-inner{align-items:flex-start;flex-wrap:wrap} |
|
|
.nav{width:100%;justify-content:space-between} |
|
|
.hero-actions{flex-direction:column;align-items:stretch} |
|
|
.btn{width:100%} |
|
|
.brand-mark{width:2.35rem;height:2.35rem} |
|
|
} |
|
|
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<a class="skip-link" href="#main">Skip to content</a> |
|
|
<header class="site-header"> |
|
|
<div class="container header-inner"> |
|
|
<a class="brand" href="#top" aria-label="Marc-Tek home"> |
|
|
<svg class="brand-mark" viewBox="0 0 64 64" aria-hidden="true" fill="none"> |
|
|
<path d="M12 48V16h7l13 18 13-18h7v32h-8V29L33 45h-2L20 29v19h-8Z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/> |
|
|
<path d="M18 52h28" stroke="currentColor" stroke-width="3" stroke-linecap="round"/> |
|
|
</svg> |
|
|
<span>Marc-Tek</span> |
|
|
</a> |
|
|
<div class="nav"> |
|
|
<nav class="nav-links" aria-label="Primary"> |
|
|
<a href="#services">Services</a> |
|
|
<a href="#about">About</a> |
|
|
<a href="#approach">Approach</a> |
|
|
<a href="#contact">Contact</a> |
|
|
</nav> |
|
|
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Switch color theme"> |
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main id="main"> |
|
|
<section class="hero container" id="top"> |
|
|
<div class="hero-grid"> |
|
|
<div> |
|
|
<span class="eyebrow">Technical consulting · systems support</span> |
|
|
<h1>Practical technology help for real-world operations.</h1> |
|
|
<p class="hero-copy">Marc-Tek is positioned as a straightforward technical partner for organizations that need dependable support with infrastructure, networking, troubleshooting, and systems that simply have to work.</p> |
|
|
<div class="hero-actions"> |
|
|
<a class="btn btn-primary" href="#contact">Start a conversation</a> |
|
|
<a class="btn btn-secondary" href="#services">View services</a> |
|
|
</div> |
|
|
</div> |
|
|
<aside class="hero-panel" aria-label="Highlights"> |
|
|
<div class="panel-grid"> |
|
|
<div class="stat"> |
|
|
<strong>Broadcast to IT</strong> |
|
|
<span>Built for environments where uptime, signal flow, and disciplined troubleshooting matter.</span> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<strong>Field-ready</strong> |
|
|
<span>Clear guidance for offices, small business networks, technical shops, and specialized systems.</span> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<strong>No fluff</strong> |
|
|
<span>Focused on stable configurations, useful documentation, and support that respects your time.</span> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="services"> |
|
|
<div class="container"> |
|
|
<div class="section-head"> |
|
|
<span class="eyebrow">Services</span> |
|
|
<h2>Support that covers the systems behind the work.</h2> |
|
|
<p>This draft homepage is structured for a technical consulting business and can be customized further with your exact offerings, contact details, service area, and preferred call to action.</p> |
|
|
</div> |
|
|
<div class="service-grid"> |
|
|
<article class="card"> |
|
|
<h3>Infrastructure & networking</h3> |
|
|
<p>Design, cleanup, and troubleshooting for wired and wireless networks, endpoint connectivity, and core office systems.</p> |
|
|
<ul> |
|
|
<li>Router, switch, and firewall review</li> |
|
|
<li>Structured troubleshooting and documentation</li> |
|
|
<li>Performance and reliability improvements</li> |
|
|
</ul> |
|
|
</article> |
|
|
<article class="card"> |
|
|
<h3>Systems & hardware</h3> |
|
|
<p>Practical support for workstations, servers, peripheral integration, upgrade planning, and technology refresh decisions.</p> |
|
|
<ul> |
|
|
<li>PC and server recommendations</li> |
|
|
<li>Hardware lifecycle guidance</li> |
|
|
<li>Recovery and replacement planning</li> |
|
|
</ul> |
|
|
</article> |
|
|
<article class="card"> |
|
|
<h3>Specialized technical consulting</h3> |
|
|
<p>Assistance for operations that depend on communications, monitoring, legacy equipment, or systems that need careful migration.</p> |
|
|
<ul> |
|
|
<li>Site assessments and technical audits</li> |
|
|
<li>Legacy-to-modern transition planning</li> |
|
|
<li>Clear next-step recommendations</li> |
|
|
</ul> |
|
|
</article> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="approach"> |
|
|
<div class="container proof-wrap"> |
|
|
<div class="section-head"> |
|
|
<span class="eyebrow">Approach</span> |
|
|
<h2>Built around clarity, stability, and follow-through.</h2> |
|
|
<p>The tone of this page is intentionally clean and professional so it can serve as a credible starting point for Marc-Tek without feeling generic or overdesigned.</p> |
|
|
</div> |
|
|
<div class="proof-grid"> |
|
|
<div class="proof-item"><strong>Assess</strong><span>Understand the current setup, pain points, and operational priorities.</span></div> |
|
|
<div class="proof-item"><strong>Stabilize</strong><span>Address immediate issues first so users can get back to work quickly.</span></div> |
|
|
<div class="proof-item"><strong>Document</strong><span>Leave behind useful notes, diagrams, and recommendations.</span></div> |
|
|
<div class="proof-item"><strong>Improve</strong><span>Plan sensible upgrades instead of replacing more than necessary.</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="about"> |
|
|
<div class="container about"> |
|
|
<div> |
|
|
<div class="section-head"> |
|
|
<span class="eyebrow">About Marc-Tek</span> |
|
|
<h2>A business presence designed to feel experienced and trustworthy.</h2> |
|
|
<p>If you want, the next revision can be tailored around your actual background, industries served, certifications, story, or a more local Arizona-focused service message.</p> |
|
|
</div> |
|
|
<div class="about-panel"> |
|
|
<div class="stack"> |
|
|
<h3>What this draft already does</h3> |
|
|
<p class="muted">It establishes a strong homepage structure with a hero section, service overview, operating approach, and contact callout, all in a responsive layout with light and dark mode.</p> |
|
|
</div> |
|
|
<div class="stack"> |
|
|
<h3>What can be customized next</h3> |
|
|
<p class="muted">Business phone and email, service territory, testimonials, certifications, industry niches, project examples, and any wording you want to emphasize or remove.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<aside class="about-panel" aria-label="Why clients choose Marc-Tek"> |
|
|
<div class="stack"> |
|
|
<h3>Why this style works</h3> |
|
|
<p class="muted">The design avoids flashy startup visuals and instead leans on disciplined typography, restrained color, and strong layout, which fits a technical services brand well.</p> |
|
|
</div> |
|
|
<div class="stack"> |
|
|
<h3>Good fit for</h3> |
|
|
<p class="muted">Small businesses, specialty operations, consulting engagements, service contractors, and clients who value competent support over marketing language.</p> |
|
|
</div> |
|
|
</aside> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="contact"> |
|
|
<div class="container"> |
|
|
<div class="contact-card"> |
|
|
<div class="contact-grid"> |
|
|
<div> |
|
|
<span class="eyebrow">Contact</span> |
|
|
<h2 style="font-family:var(--font-display);font-size:var(--text-xl);line-height:1.08;margin-top:var(--space-4);">Ready to make this your live homepage?</h2> |
|
|
<p class="hero-copy" style="margin-top:var(--space-4);font-size:var(--text-base);">Replace the sample text with your exact business details and publish the file to your hosting account for marc-tek.com.</p> |
|
|
<div class="contact-list"> |
|
|
<div>Email: yourname@marc-tek.com</div> |
|
|
<div>Phone: (555) 555-5555</div> |
|
|
<div>Service area: Arizona and remote support</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a class="btn btn-primary" href="mailto:yourname@marc-tek.com">Email Marc-Tek</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="site-footer"> |
|
|
<div class="container" style="display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;"> |
|
|
<span>© <span id="year"></span> Marc-Tek. All rights reserved.</span> |
|
|
<span>Technical consulting · infrastructure · systems support</span> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
(function(){ |
|
|
const root = document.documentElement; |
|
|
const btn = document.querySelector('[data-theme-toggle]'); |
|
|
let theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; |
|
|
root.setAttribute('data-theme', theme); |
|
|
const render = () => { |
|
|
btn.innerHTML = theme === 'dark' |
|
|
? '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>' |
|
|
: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'; |
|
|
btn.setAttribute('aria-label', 'Switch to ' + (theme === 'dark' ? 'light' : 'dark') + ' mode'); |
|
|
}; |
|
|
render(); |
|
|
btn.addEventListener('click', () => { theme = theme === 'dark' ? 'light' : 'dark'; root.setAttribute('data-theme', theme); render(); }); |
|
|
document.getElementById('year').textContent = new Date().getFullYear(); |
|
|
})(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |