1325 lines
58 KiB
HTML
1325 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Digital Chalking - AI-Powered Parking Enforcement</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary: #1e40af;
|
||
--primary-dark: #1e3a8a;
|
||
--secondary: #0f172a;
|
||
--accent: #3b82f6;
|
||
--dark: #0f172a;
|
||
--text: #1e293b;
|
||
--text-light: #64748b;
|
||
--bg: #ffffff;
|
||
--bg-light: #f8fafc;
|
||
--warning: #dc2626;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Navigation */
|
||
nav {
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
z-index: 1000;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.nav-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 40px;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-links a {
|
||
text-decoration: none;
|
||
color: var(--text);
|
||
font-weight: 500;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.cta-btn {
|
||
padding: 12px 28px;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.cta-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 28px rgba(30, 64, 175, 0.4);
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
margin-top: 80px;
|
||
padding: 100px 40px 80px;
|
||
background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%);
|
||
color: white;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.hero-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 56px;
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 20px;
|
||
opacity: 0.95;
|
||
margin-bottom: 40px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.hero-buttons {
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.btn-primary {
|
||
padding: 16px 36px;
|
||
background: white;
|
||
color: var(--primary);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn-secondary {
|
||
padding: 16px 36px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 2px solid white;
|
||
border-radius: 12px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.hero-image {
|
||
position: relative;
|
||
}
|
||
|
||
.hero-image img {
|
||
width: 100%;
|
||
}
|
||
|
||
/* Stats Bar */
|
||
.stats-bar {
|
||
background: var(--dark);
|
||
color: white;
|
||
padding: 60px 40px;
|
||
}
|
||
|
||
.stats-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 48px;
|
||
font-weight: 900;
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 16px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Features Section */
|
||
.features {
|
||
padding: 100px 40px;
|
||
background: var(--bg-light);
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
margin: 0 auto 80px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-header p {
|
||
font-size: 20px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.features-grid {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.features-grid.four-col {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
|
||
.feature-card {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 20px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 32px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: var(--text-light);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* How It Works */
|
||
.how-it-works {
|
||
padding: 100px 40px;
|
||
background: white;
|
||
}
|
||
|
||
.steps-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.step {
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.step::after {
|
||
content: '→';
|
||
position: absolute;
|
||
right: -40px;
|
||
top: 50px;
|
||
font-size: 32px;
|
||
color: var(--primary);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.step:last-child::after {
|
||
display: none;
|
||
}
|
||
|
||
.step-number {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 36px;
|
||
font-weight: 800;
|
||
margin: 0 auto 24px;
|
||
}
|
||
|
||
.step h3 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.step p {
|
||
color: var(--text-light);
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* Benefits Section */
|
||
.benefits {
|
||
padding: 100px 40px;
|
||
background: var(--dark);
|
||
color: white;
|
||
}
|
||
|
||
.benefits .section-header h2,
|
||
.benefits .section-header p {
|
||
color: white;
|
||
}
|
||
|
||
.benefits-grid {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 40px;
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
gap: 24px;
|
||
padding: 32px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.benefit-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.benefit-content h3 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.benefit-content p {
|
||
opacity: 0.8;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* CTA Section */
|
||
.cta-section {
|
||
padding: 120px 40px;
|
||
background: linear-gradient(135deg, #1e40af, #0f172a);
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: 48px;
|
||
font-weight: 900;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.cta-section p {
|
||
font-size: 20px;
|
||
opacity: 0.95;
|
||
margin-bottom: 40px;
|
||
max-width: 700px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: var(--dark);
|
||
color: white;
|
||
padding: 60px 40px 40px;
|
||
}
|
||
|
||
.footer-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: 60px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.footer-brand {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.footer-desc {
|
||
opacity: 0.7;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.footer-section h4 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.footer-section ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-section ul li {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.footer-section ul li a {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.footer-section ul li a:hover {
|
||
color: white;
|
||
}
|
||
|
||
.footer-bottom {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding-top: 40px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
text-align: center;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 1024px) {
|
||
.hero-container {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 42px;
|
||
}
|
||
|
||
.hero-buttons {
|
||
justify-content: center;
|
||
}
|
||
|
||
.features-grid,
|
||
.steps-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-container {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.benefits-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.step::after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.steps-container {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.hero {
|
||
padding: 60px 24px;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.cta-section h2 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.stats-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Smooth Scroll */
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav>
|
||
<div class="nav-container">
|
||
<div class="logo">Digital Chalking</div>
|
||
<div class="nav-links">
|
||
<a href="#about">About</a>
|
||
<a href="#features">Features</a>
|
||
<a href="#deployment">Deployment</a>
|
||
<a href="#benefits">Benefits</a>
|
||
<a href="#contact" class="cta-btn">Get Started</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero">
|
||
<div class="hero-container">
|
||
<div class="hero-content">
|
||
<h1>AI-Powered Parking Enforcement</h1>
|
||
<p>Replace manual chalking with intelligent computer vision. Automated vehicle tracking that's accurate, efficient, and court-ready.</p>
|
||
<div style="margin: 32px 0;">
|
||
<div id="message" style="font-size: 22px; color: rgba(255, 255, 255, 0.95); font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">Loading...</div>
|
||
</div>
|
||
<div class="hero-buttons">
|
||
<a href="#contact" class="btn-primary">
|
||
<span class="material-icons">play_arrow</span>
|
||
Request Demo
|
||
</a>
|
||
<a href="#how-it-works" class="btn-secondary">
|
||
<span class="material-icons">info</span>
|
||
Learn More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-image">
|
||
<img src="pana-full.png" alt="Digital Chalking System">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats Bar -->
|
||
<section class="stats-bar">
|
||
<div class="stats-container">
|
||
<div class="stat-item">
|
||
<div class="stat-value">10x</div>
|
||
<div class="stat-label">Efficiency Increase</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">99.5%</div>
|
||
<div class="stat-label">Detection Accuracy</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">24/7</div>
|
||
<div class="stat-label">Automated Monitoring</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">100%</div>
|
||
<div class="stat-label">Court-Ready Evidence</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1);">
|
||
<div style="display: inline-flex; align-items: center; gap: 32px; background: white; padding: 20px 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);">
|
||
<img src="powered-by-aws.png" alt="Powered by AWS" style="height: 50px;">
|
||
<div style="border-left: 2px solid #e5e7eb; padding-left: 32px;">
|
||
<div id="message_aws" style="font-size: 16px; color: #1e293b; font-weight: 600;">Loading...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- What is Digital Chalking -->
|
||
<section class="features" id="about" style="background: white;">
|
||
<div class="section-header">
|
||
<h2>What is Digital Chalking?</h2>
|
||
<p>An electronic parking enforcement system that replaces manual chalk with intelligent automation.</p>
|
||
</div>
|
||
<div style="max-width: 1200px; margin: 0 auto; background: var(--bg-light); padding: 60px; border-radius: 24px;">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;">
|
||
<div>
|
||
<h3 style="font-size: 28px; margin-bottom: 24px;">Traditional vs. Digital</h3>
|
||
<div style="background: white; padding: 32px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
|
||
<div style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--bg-light);">
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>Manual tire marking with chalk</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Automated camera-based detection</strong>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--bg-light);">
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>Chalk washes away in rain</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Permanent digital records</strong>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--bg-light);">
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>Officer must return to verify</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Real-time monitoring & alerts</strong>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: #ef4444;">close</span>
|
||
<strong>No supporting evidence</strong>
|
||
</div>
|
||
<div style="display: flex; gap: 16px; align-items: center; color: var(--primary);">
|
||
<span class="material-icons">check_circle</span>
|
||
<strong>Court-ready photo evidence</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p style="font-size: 18px; line-height: 1.8; color: var(--text); margin-bottom: 24px;">
|
||
Digital chalking uses <strong>cameras and AI-powered software</strong> to monitor vehicle parking duration. Instead of officers manually marking tires with chalk, our system automatically captures, identifies, and tracks vehicles through computer vision.
|
||
</p>
|
||
<p style="font-size: 18px; line-height: 1.8; color: var(--text); margin-bottom: 24px;">
|
||
Using advanced <strong>License Plate Recognition (LPR)</strong> and <strong>Vehicle Recognition Software (VRS)</strong>, the system creates an irrefutable digital audit trail with time-stamped photographs, location data, and vehicle details.
|
||
</p>
|
||
<p style="font-size: 18px; line-height: 1.8; color: var(--text);">
|
||
The result? <strong>More efficient enforcement, fewer errors, and legally defensible citations</strong> that withstand court scrutiny.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Purpose-Built System -->
|
||
<div style="max-width: 1200px; margin: 80px auto 0; background: linear-gradient(135deg, #1e40af, #0f172a); padding: 60px; border-radius: 24px; color: white;">
|
||
<div style="text-align: center; margin-bottom: 40px;">
|
||
<div style="display: inline-block; background: rgba(255, 255, 255, 0.2); padding: 8px 24px; border-radius: 20px; margin-bottom: 24px;">
|
||
<span style="font-weight: 600; font-size: 14px; letter-spacing: 1px;">PURPOSE-BUILT TECHNOLOGY</span>
|
||
</div>
|
||
<h3 style="font-size: 36px; font-weight: 800; margin-bottom: 20px; line-height: 1.2;">Built from the Ground Up for Digital Chalking</h3>
|
||
<p style="font-size: 20px; opacity: 0.95; max-width: 800px; margin: 0 auto;">
|
||
Unlike clunky systems offered by incumbent old-school vendors—cobbled together from multiple third-party components with overlapping licences and integration headaches—our platform is <strong>engineered from scratch</strong> to be a digital chalking expert.
|
||
</p>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px;">
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<span class="material-icons" style="font-size: 48px; margin-bottom: 16px; display: block;">integration_instructions</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Unified Architecture</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">Single integrated platform, not a patchwork of disparate vendor systems requiring costly middleware and ongoing integration fees.</p>
|
||
</div>
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<span class="material-icons" style="font-size: 48px; margin-bottom: 16px; display: block;">science</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Proprietary AI Engine</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">Our custom computer vision algorithms are optimized specifically for parking enforcement—not retrofitted from generic surveillance systems.</p>
|
||
</div>
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<span class="material-icons" style="font-size: 48px; margin-bottom: 16px; display: block;">speed</span>
|
||
<h4 style="font-size: 20px; font-weight: 700; margin-bottom: 12px;">Rapid Innovation</h4>
|
||
<p style="opacity: 0.9; line-height: 1.7;">No vendor lock-in or bureaucratic approval chains. We deploy updates, new features, and improvements at the speed your council needs.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section class="features" id="features">
|
||
<div class="section-header">
|
||
<h2>Powerful Features</h2>
|
||
<p>Everything you need for modern, efficient parking enforcement.</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">videocam</span>
|
||
</div>
|
||
<h3>4K Camera System</h3>
|
||
<p>High-resolution 4K (3840×2160) cameras capture every detail for accurate license plate recognition. Works from 5-50 meters depending on deployment.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">psychology</span>
|
||
</div>
|
||
<h3>AI Vehicle Detection</h3>
|
||
<p>Proprietary neural network identifies cars, trucks, SUVs, motorcycles, and commercial vehicles in real-time with exceptional accuracy.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">track_changes</span>
|
||
</div>
|
||
<h3>Advanced Tracking</h3>
|
||
<p>Purpose-built multi-object tracking maintains 98%+ accuracy even in crowded environments with overlapping vehicles.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">document_scanner</span>
|
||
</div>
|
||
<h3>License Plate Recognition</h3>
|
||
<p>99.5% LPR accuracy in optimal conditions, 95%+ in adverse weather. Reads and validates plates automatically.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">directions_car</span>
|
||
</div>
|
||
<h3>Vehicle Recognition</h3>
|
||
<p>Identifies vehicle make, model, color, and distinctive features. Detects valve stem position to confirm movement.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">schedule</span>
|
||
</div>
|
||
<h3>Time-Stamped Records</h3>
|
||
<p>Immutable digital records with precise timestamps, GPS coordinates, high-res photos, and environmental conditions.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">badge</span>
|
||
</div>
|
||
<h3>Permit Holder Whitelist</h3>
|
||
<p>Centralized database of authorized vehicles with automatic exemption. Import from CSV/Excel or integrate via API. Supports resident permits, business permits, municipal fleet, and VIP vehicles.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">notifications_active</span>
|
||
</div>
|
||
<h3>Real-Time Alerts</h3>
|
||
<p>Officers receive mobile notifications the moment violations occur, with photo evidence and location data.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">cloud</span>
|
||
</div>
|
||
<h3>Cloud Infrastructure</h3>
|
||
<p>Powered by AWS with AES-256 encryption, automatic backups, 99.9% uptime SLA, and configurable data retention (30-90 days).</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Integration & APIs -->
|
||
<section class="features" id="integration" style="background: var(--bg-light);">
|
||
<div class="section-header">
|
||
<h2>Seamless Integration</h2>
|
||
<p>Connect with your existing systems using industry-standard interfaces.</p>
|
||
</div>
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div style="background: white; padding: 60px; border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 60px;">
|
||
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center;">
|
||
<div>
|
||
<div style="width: 80px; height: 80px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||
<span class="material-icons" style="font-size: 40px; color: white;">api</span>
|
||
</div>
|
||
<h3 style="font-size: 32px; font-weight: 800; margin-bottom: 16px;">RESTful APIs</h3>
|
||
<p style="color: var(--text-light); font-size: 18px; line-height: 1.7;">Modern, well-documented APIs for seamless data exchange with your existing infrastructure.</p>
|
||
</div>
|
||
<div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">receipt_long</span>
|
||
<strong>Citation Systems</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Direct integration with T2, ParkMobile, Passport, and municipal citation platforms</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">credit_card</span>
|
||
<strong>Payment Processing</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Connect with Stripe, PayPal, or municipal payment gateways</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">verified_user</span>
|
||
<strong>DMV Databases</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Real-time vehicle registration verification and owner lookup</p>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 24px; border-radius: 12px;">
|
||
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">business</span>
|
||
<strong>Municipal ERP</strong>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--text-light);">Integrate with Tyler, Oracle, SAP, or custom city systems</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%); padding: 48px 60px; border-radius: 20px; color: white;">
|
||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 40px;">
|
||
<div style="flex: 1;">
|
||
<h3 style="font-size: 28px; font-weight: 800; margin-bottom: 16px;">Data Import & Export</h3>
|
||
<p style="opacity: 0.95; font-size: 16px; line-height: 1.7;">Import permit holder databases via CSV, Excel, or API. Export violation records, analytics, and court-ready evidence packages via SFTP, webhooks, or direct download.</p>
|
||
</div>
|
||
<div style="display: flex; gap: 32px; align-items: center;">
|
||
<div style="text-align: center;">
|
||
<span class="material-icons" style="font-size: 48px; opacity: 0.9;">file_upload</span>
|
||
<div style="margin-top: 8px; font-weight: 600;">CSV/Excel Import</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<span class="material-icons" style="font-size: 48px; opacity: 0.9;">webhook</span>
|
||
<div style="margin-top: 8px; font-weight: 600;">Real-time Webhooks</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<span class="material-icons" style="font-size: 48px; opacity: 0.9;">folder_shared</span>
|
||
<div style="margin-top: 8px; font-weight: 600;">SFTP Transfer</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- How It Works -->
|
||
<section class="how-it-works" id="how-it-works">
|
||
<div class="section-header">
|
||
<h2>How It Works</h2>
|
||
<p>From vehicle arrival to citation in five automated steps.</p>
|
||
</div>
|
||
<div class="steps-container" style="grid-template-columns: repeat(5, 1fr);">
|
||
<div class="step">
|
||
<div class="step-number">1</div>
|
||
<h3>Vehicle Identification</h3>
|
||
<p>High-resolution cameras (stationary, mobile, or handheld) capture images of vehicles as they enter monitored parking areas.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">2</div>
|
||
<h3>AI Data Capture</h3>
|
||
<p>Computer vision engine processes imagery to extract license plate, vehicle make/model/color, tire valve stem position, and GPS location.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">3</div>
|
||
<h3>Digital Record Creation</h3>
|
||
<p>System creates immutable, time-stamped record with high-res photos, OCR text, vehicle classification, and environmental data.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">4</div>
|
||
<h3>Intelligent Monitoring</h3>
|
||
<p>Tracks elapsed time, detects vehicle movement, cross-references permit database, and generates alerts when violations occur.</p>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-number">5</div>
|
||
<h3>Automated Citation</h3>
|
||
<p>Officer receives notification with complete evidence package. Citation issued on-site with court-ready documentation.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Deployment Methods -->
|
||
<section class="features" id="deployment" style="background: white;">
|
||
<div class="section-header">
|
||
<h2>Flexible Deployment Options</h2>
|
||
<p>Choose the configuration that fits your enforcement needs.</p>
|
||
</div>
|
||
|
||
<!-- Mobile Patrol Showcase -->
|
||
<div style="max-width: 1200px; margin: 0 auto 80px; background: linear-gradient(135deg, #1e40af, #0f172a); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(30, 64, 175, 0.3);">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0;">
|
||
<div style="padding: 60px;">
|
||
<div style="display: inline-block; background: rgba(255, 255, 255, 0.2); padding: 8px 20px; border-radius: 20px; margin-bottom: 24px;">
|
||
<span style="color: white; font-weight: 600; font-size: 14px;">MOBILE PATROL UNITS</span>
|
||
</div>
|
||
<h3 style="font-size: 36px; font-weight: 800; color: white; margin-bottom: 20px; line-height: 1.2;">Enforcement on the Move</h3>
|
||
<p style="color: rgba(255, 255, 255, 0.95); font-size: 18px; line-height: 1.7; margin-bottom: 32px;">
|
||
Officers use tablet or smartphone apps to capture and track vehicles during normal patrol routes. Real-time dashboard displays violations and provides instant access to vehicle history.
|
||
</p>
|
||
<ul style="list-style: none; padding: 0; color: white; font-size: 16px; line-height: 2;">
|
||
<li style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>Automatic scanning of both curb sides</span>
|
||
</li>
|
||
<li style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>Real-time violation alerts on dashboard</span>
|
||
</li>
|
||
<li style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>Works offline with cloud sync</span>
|
||
</li>
|
||
<li style="display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="background: rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 8px;">check</span>
|
||
<span>GPS-enabled with route tracking</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div style="position: relative; height: 100%; min-height: 500px;">
|
||
<img src="dude-in-car.png" alt="Officer using Digital Chalking mobile app" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Deployment Options Grid -->
|
||
<div class="features-grid" style="max-width: 1200px; margin: 0 auto; grid-template-columns: repeat(3, 1fr);">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">apartment</span>
|
||
</div>
|
||
<h3>Stationary Infrastructure</h3>
|
||
<p style="margin-bottom: 20px;"><strong>Best for:</strong> High-traffic commercial districts, downtown cores, parking structures</p>
|
||
<ul style="text-align: left; color: var(--text-light); line-height: 1.8;">
|
||
<li>Pole-mounted 4K cameras at strategic intersections</li>
|
||
<li>Covers entire street block or parking lot</li>
|
||
<li>24/7 automated monitoring</li>
|
||
<li>Solar-powered or hard-wired options</li>
|
||
<li>Weather-resistant enclosures</li>
|
||
</ul>
|
||
<p style="margin-top: 20px; font-weight: 600; color: var(--primary);">Typical: 2-4 cameras per city block</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">local_shipping</span>
|
||
</div>
|
||
<h3>Mobile Patrol Units</h3>
|
||
<p style="margin-bottom: 20px;"><strong>Best for:</strong> Large geographic areas, suburban zones, residential permits</p>
|
||
<ul style="text-align: left; color: var(--text-light); line-height: 1.8;">
|
||
<li>Vehicle roof/dash-mounted camera systems</li>
|
||
<li>Officer drives normal patrol routes</li>
|
||
<li>Automatic scanning of both curb sides</li>
|
||
<li>Integrates with existing enforcement vehicles</li>
|
||
<li>Real-time violation alerts on dashboard</li>
|
||
</ul>
|
||
<p style="margin-top: 20px; font-weight: 600; color: var(--primary);">Typical: 1-2 cameras per vehicle, GPS-enabled</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<span class="material-icons">smartphone</span>
|
||
</div>
|
||
<h3>Handheld Devices</h3>
|
||
<p style="margin-bottom: 20px;"><strong>Best for:</strong> Targeted enforcement, special events, parking garages</p>
|
||
<ul style="text-align: left; color: var(--text-light); line-height: 1.8;">
|
||
<li>Tablet or smartphone app with camera integration</li>
|
||
<li>Officer manually triggers vehicle capture</li>
|
||
<li>Portable and flexible deployment</li>
|
||
<li>Works offline with sync when connected</li>
|
||
<li>Ideal for supplementing fixed systems</li>
|
||
</ul>
|
||
<p style="margin-top: 20px; font-weight: 600; color: var(--primary);">iOS/Android app, works with device camera</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Use Cases -->
|
||
<section class="features" id="use-cases">
|
||
<div class="section-header">
|
||
<h2>Use Cases & Applications</h2>
|
||
<p>Versatile enforcement for every parking scenario.</p>
|
||
</div>
|
||
<div class="features-grid" style="max-width: 1200px; margin: 0 auto; grid-template-columns: repeat(3, 1fr);">
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">timer</span></div>
|
||
<h3>Time-Limited Street Parking</h3>
|
||
<p>Monitor 1-hour, 2-hour, or custom time zones. Automatically flag vehicles exceeding limits.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">home</span></div>
|
||
<h3>Residential Permit Zones</h3>
|
||
<p>Allow authorized permit holders unlimited parking while enforcing time limits on non-permit vehicles.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">local_parking</span></div>
|
||
<h3>Parking Structure Management</h3>
|
||
<p>Track occupancy, enforce paid parking, and identify vehicles overstaying free periods.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">local_shipping</span></div>
|
||
<h3>Loading Zone Compliance</h3>
|
||
<p>Ensure loading zones are used correctly (commercial vehicles only, 15-minute limits).</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">accessible</span></div>
|
||
<h3>Handicapped Parking</h3>
|
||
<p>Verify permit validity and flag unauthorized use of accessible spaces.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><span class="material-icons">event</span></div>
|
||
<h3>Special Event Parking</h3>
|
||
<p>Temporary enforcement for concerts, sports games, festivals with dynamic time rules.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Benefits Section -->
|
||
<section class="benefits" id="benefits">
|
||
<div class="section-header">
|
||
<h2>Key Benefits for Every Stakeholder</h2>
|
||
<p>Transform parking enforcement across your organization.</p>
|
||
</div>
|
||
<div class="benefits-grid">
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">bolt</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>10x Efficiency for Enforcement Agencies</h3>
|
||
<p>Officers monitor hundreds of vehicles per patrol vs. dozens manually. Fewer officers needed for same coverage. Increased revenue from higher compliance and violation detection.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">check_circle</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Weather-Proof & Always Reliable</h3>
|
||
<p>Rain, snow, and heat don't affect digital records. Unlike chalk that washes away, digital chalking works 24/7 in all conditions with complete audit trail.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">gavel</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Legally Defensible Evidence</h3>
|
||
<p>High-resolution photos with cryptographic timestamps provide irrefutable proof. Drastically reduces contested citations and establishes strong legal precedent.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">insights</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Data-Driven Policy Decisions</h3>
|
||
<p>Analytics reveal parking patterns, violation hotspots, peak times, and compliance trends. Make informed decisions about parking rates, time limits, and enforcement schedules.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">security</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Enhanced Officer Safety</h3>
|
||
<p>Reduce time spent on foot in traffic areas. Monitor from vehicles or stationary positions. Eliminate repetitive bending to mark tires.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">balance</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Fair & Consistent for Motorists</h3>
|
||
<p>Objective, consistent enforcement eliminates human errors. Clear photo evidence available for appeals. Permit holders auto-recognized without dashboard displays.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">trending_up</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>Scalable Growth</h3>
|
||
<p>Easy to expand coverage without proportional staff increases. Start with pilot program, scale to city-wide deployment seamlessly.</p>
|
||
</div>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<div class="benefit-icon">
|
||
<span class="material-icons">account_balance</span>
|
||
</div>
|
||
<div class="benefit-content">
|
||
<h3>ROI in 12-18 Months</h3>
|
||
<p>Break-even typically achieved through increased efficiency, reduced labor costs, higher compliance rates, and improved violation detection.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Technical Specs & Privacy -->
|
||
<section class="features" id="technical" style="background: white;">
|
||
<div class="section-header">
|
||
<h2>Technical Specifications & Privacy</h2>
|
||
<p>Built on cutting-edge technology with privacy and compliance at the core.</p>
|
||
</div>
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px;">
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">computer</span>
|
||
Computer Vision Engine
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Detection:</strong> Proprietary AI model (state-of-the-art)</li>
|
||
<li><strong>Tracking:</strong> Custom algorithm (98%+ accuracy)</li>
|
||
<li><strong>LPR Accuracy:</strong> 99.5% optimal, 95%+ adverse</li>
|
||
<li><strong>Processing:</strong> Real-time edge inference</li>
|
||
<li><strong>Vehicles:</strong> Cars, trucks, SUVs, motorcycles</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">videocam</span>
|
||
Camera Requirements
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Resolution:</strong> 4K (3840×2160) minimum</li>
|
||
<li><strong>Frame Rate:</strong> 30fps for smooth tracking</li>
|
||
<li><strong>Codec:</strong> MJPEG or H.264</li>
|
||
<li><strong>Connectivity:</strong> USB 3.0, Ethernet, wireless</li>
|
||
<li><strong>Range:</strong> 5-50 meters (lens dependent)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">storage</span>
|
||
Data Management
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Storage:</strong> Cloud or on-premise</li>
|
||
<li><strong>Retention:</strong> Configurable (30-90 days)</li>
|
||
<li><strong>Encryption:</strong> AES-256 at rest & in transit</li>
|
||
<li><strong>Compliance:</strong> GDPR/privacy law compliant</li>
|
||
<li><strong>APIs:</strong> RESTful for system integration</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background: var(--bg-light); padding: 40px; border-radius: 20px;">
|
||
<h3 style="font-size: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;">
|
||
<span class="material-icons" style="color: var(--primary);">shield</span>
|
||
Privacy & Legal
|
||
</h3>
|
||
<ul style="list-style: none; line-height: 2;">
|
||
<li><strong>Data Captured:</strong> Plates & vehicles only (no faces)</li>
|
||
<li><strong>Expiration:</strong> Automatic after retention period</li>
|
||
<li><strong>Access Controls:</strong> Audit logs for all usage</li>
|
||
<li><strong>Court Admissible:</strong> Established legal precedent</li>
|
||
<li><strong>Transparency:</strong> Open data on enforcement stats</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta-section" id="contact">
|
||
<h2>Ready to Modernize Your Enforcement?</h2>
|
||
<p>Start with a risk-free pilot program or schedule a demo to see the system in action.</p>
|
||
<div style="margin-bottom: 40px;">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; margin: 0 auto 40px; text-align: left;">
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<h3 style="font-size: 24px; margin-bottom: 16px;">Pilot Program</h3>
|
||
<ul style="list-style: none; line-height: 2; opacity: 0.9;">
|
||
<li>✓ 1-2 city blocks or single structure</li>
|
||
<li>✓ 30-day trial period</li>
|
||
<li>✓ Hands-on officer training</li>
|
||
<li>✓ Performance metrics tracking</li>
|
||
<li>✓ No long-term commitment</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2);">
|
||
<h3 style="font-size: 24px; margin-bottom: 16px;">Full Deployment</h3>
|
||
<ul style="list-style: none; line-height: 2; opacity: 0.9;">
|
||
<li>✓ City-wide infrastructure or fleet</li>
|
||
<li>✓ Permit database integration</li>
|
||
<li>✓ Advanced analytics & reporting</li>
|
||
<li>✓ Ongoing support & optimization</li>
|
||
<li>✓ Multi-year partnership</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-buttons">
|
||
<a href="mailto:info@digitalchalking.com" class="btn-primary" style="font-size: 18px; padding: 18px 40px;">
|
||
<span class="material-icons">email</span>
|
||
Request Demo
|
||
</a>
|
||
<a href="tel:+15555551234" class="btn-secondary" style="font-size: 18px; padding: 18px 40px;">
|
||
<span class="material-icons">phone</span>
|
||
Call Us
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="footer-container">
|
||
<div>
|
||
<div class="footer-brand">Digital Chalking</div>
|
||
<p class="footer-desc">AI-powered parking enforcement that's smarter, fairer, and more efficient. Transform your parking operations with computer vision technology.</p>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Product</h4>
|
||
<ul>
|
||
<li><a href="#features">Features</a></li>
|
||
<li><a href="#how-it-works">How It Works</a></li>
|
||
<li><a href="#benefits">Benefits</a></li>
|
||
<li><a href="#contact">Pricing</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Company</h4>
|
||
<ul>
|
||
<li><a href="#contact">About Us</a></li>
|
||
<li><a href="#contact">Careers</a></li>
|
||
<li><a href="#contact">Case Studies</a></li>
|
||
<li><a href="#contact">Blog</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Support</h4>
|
||
<ul>
|
||
<li><a href="#contact">Documentation</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
<li><a href="#contact">Privacy Policy</a></li>
|
||
<li><a href="#contact">Terms of Service</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2025 Digital Chalking. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(async () => {
|
||
try {
|
||
const res = await fetch("https://ipapi.co/json/");
|
||
const data = await res.json();
|
||
|
||
let message = "Welcome!";
|
||
let message_aws = "Hosted on AWS servers";
|
||
|
||
if (data.country_code === "NZ") {
|
||
message = "Ready for New Zealand";
|
||
message_aws = "Deployed on AWS in Auckland.";
|
||
} else if (data.country_code === "AU") {
|
||
message = "Ready for Australia";
|
||
message_aws = "Deployed on AWS in Sydney";
|
||
} else {
|
||
message = "Ready worldwide";
|
||
message_aws = "Hosted on AWS servers";
|
||
}
|
||
|
||
document.getElementById("message").textContent = message;
|
||
document.getElementById("message_aws").textContent = message_aws;
|
||
} catch (e) {
|
||
console.error("Geo lookup failed", e);
|
||
document.getElementById("message").textContent = "Ready worldwide";
|
||
document.getElementById("message_aws").textContent = "Hosted on AWS servers";
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|