144 lines
9.4 KiB
HTML
144 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Estimate your IT cost | Arizona Computer Guru</title>
|
|
<meta name="description" content="Build a transparent IT estimate in seconds: endpoints, protection tier, support plan, Microsoft 365, phones, and hosting. No email wall, no sales call." />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<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=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
<script>(function(){try{var s=localStorage.getItem("acg-theme");var m=s||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"ledger"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
|
</head>
|
|
<body>
|
|
<a href="#main" class="sr-only">Skip to content</a>
|
|
<header class="site-header">
|
|
<div class="wrap">
|
|
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
|
|
<span class="brand__mark" aria-hidden="true">ACG</span>
|
|
<span><span class="brand__name">Arizona Computer Guru</span><br /><span class="brand__since">Concierge IT · Tucson · since 2001</span></span>
|
|
</a>
|
|
<nav class="nav" aria-label="Primary">
|
|
<div class="nav__links" id="navLinks">
|
|
<a class="nav__link" href="index.html">Home</a>
|
|
<a class="nav__link" href="services.html">Services</a>
|
|
<a class="nav__link" href="pricing.html">Pricing</a>
|
|
<a class="nav__link" href="calculator.html" aria-current="page">Estimate</a>
|
|
<a class="nav__link" href="about.html">About</a>
|
|
<a class="nav__link" href="contact.html">Contact</a>
|
|
</div>
|
|
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
|
|
<button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Paper, Midnight, Verdigris, or Bold)" title="Switch skin: Paper / Midnight / Verdigris / Bold"><span class="sw" aria-hidden="true"></span></button>
|
|
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>☀</span></button>
|
|
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">≡</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section class="page-head ledger">
|
|
<div class="wrap reveal">
|
|
<p class="eyebrow">Live estimate · no email wall</p>
|
|
<h1>Your IT, accounted for</h1>
|
|
<p class="lead">Move the numbers, watch the total. This is the same math we would walk you through in person, with nothing hidden behind a "contact sales" button.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="calc ledger" id="calculator" aria-labelledby="calc-h" style="padding-top:calc(var(--base)*2);">
|
|
<div class="wrap">
|
|
<h2 id="calc-h" class="sr-only">IT cost estimator</h2>
|
|
<div class="calc__shell">
|
|
<div class="calc__grid">
|
|
<form class="calc__inputs" id="calcForm" aria-label="IT cost estimator">
|
|
<div class="calc__row">
|
|
<label for="endpoints">Computers & servers <span class="hint">Every monitored endpoint</span></label>
|
|
<div class="calc__control"><div class="stepper" data-step="endpoints">
|
|
<button type="button" data-dir="-1" aria-label="Fewer endpoints">−</button>
|
|
<input id="endpoints" name="endpoints" type="number" inputmode="numeric" min="0" max="500" value="22" />
|
|
<button type="button" data-dir="1" aria-label="More endpoints">+</button>
|
|
</div></div>
|
|
</div>
|
|
<div class="calc__row">
|
|
<label for="gpsTier">Protection tier <span class="hint">Per-endpoint monitoring level</span></label>
|
|
<div class="calc__control"><select id="gpsTier" name="gpsTier">
|
|
<option value="19">GPS-Basic · $19</option>
|
|
<option value="26" selected>GPS-Pro · $26</option>
|
|
<option value="39">GPS-Advanced · $39</option>
|
|
</select></div>
|
|
</div>
|
|
<div class="calc__row">
|
|
<label for="equip">Equipment monitoring <span class="hint">Network gear, printers, NAS. $25/mo</span></label>
|
|
<div class="calc__control toggle-row"><span class="switch">
|
|
<input type="checkbox" id="equip" name="equip" />
|
|
<span class="track" aria-hidden="true"></span><span class="knob" aria-hidden="true"></span>
|
|
</span></div>
|
|
</div>
|
|
<div class="calc__row">
|
|
<label for="support">Support plan <span class="hint">Bundled labor hours each month</span></label>
|
|
<div class="calc__control"><select id="support" name="support">
|
|
<option value="0">None, pay as you go</option>
|
|
<option value="200">Essential · $200 (2 hr)</option>
|
|
<option value="380" selected>Standard · $380 (4 hr)</option>
|
|
<option value="540">Premium · $540 (6 hr)</option>
|
|
<option value="850">Priority · $850 (10 hr)</option>
|
|
</select></div>
|
|
</div>
|
|
<div class="calc__row">
|
|
<label for="m365">Microsoft 365 users <span class="hint">Business Standard, $14/user</span></label>
|
|
<div class="calc__control"><div class="stepper" data-step="m365">
|
|
<button type="button" data-dir="-1" aria-label="Fewer Microsoft 365 users">−</button>
|
|
<input id="m365" name="m365" type="number" inputmode="numeric" min="0" max="500" value="0" />
|
|
<button type="button" data-dir="1" aria-label="More Microsoft 365 users">+</button>
|
|
</div></div>
|
|
</div>
|
|
<div class="calc__row">
|
|
<label for="voip">Business phone users <span class="hint">GPS-Voice Standard, $28/user</span></label>
|
|
<div class="calc__control"><div class="stepper" data-step="voip">
|
|
<button type="button" data-dir="-1" aria-label="Fewer phone users">−</button>
|
|
<input id="voip" name="voip" type="number" inputmode="numeric" min="0" max="500" value="0" />
|
|
<button type="button" data-dir="1" aria-label="More phone users">+</button>
|
|
</div></div>
|
|
</div>
|
|
<div class="calc__row" style="border-bottom:0;">
|
|
<label for="hosting">Web hosting <span class="hint">Managed, with SSL & backups</span></label>
|
|
<div class="calc__control"><select id="hosting" name="hosting">
|
|
<option value="0" selected>None</option>
|
|
<option value="15">Starter · $15</option>
|
|
<option value="35">Business · $35</option>
|
|
<option value="65">Commerce · $65</option>
|
|
</select></div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="calc__out">
|
|
<h3>Monthly statement</h3>
|
|
<div class="ledger-lines" id="ledgerLines"></div>
|
|
<hr class="calc__divider" />
|
|
<div class="calc__total" aria-live="polite">
|
|
<span class="tlabel">Per month</span>
|
|
<span class="tnum mono" id="totalMonthly">$0</span>
|
|
</div>
|
|
<div class="calc__annual mono" id="totalAnnual">$0 / year</div>
|
|
<div class="calc__perep mono" id="perEndpoint">all-in, per endpoint / mo</div>
|
|
<a class="btn btn--primary calc__cta" href="contact.html#contact" id="sendEstimate">Send me this estimate <span class="arrow" aria-hidden="true">→</span></a>
|
|
<p class="calc__foot">Estimate only, your real quote is tailored to your setup. No card, no commitment, and we will tell you if you are buying more than you need.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="wrap">
|
|
<p>© <span id="year">2026</span> Arizona Computer Guru · Protecting Tucson businesses since 2001</p>
|
|
<p><a href="tel:+15203048300">520.304.8300</a> · <a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
|
|
<p class="disclaimer">Local demonstration build of a proposed azcomputerguru.com (multipage). Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. The contact form is not wired to a mailbox. Photography is representational.</p>
|
|
</div>
|
|
</footer>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|