119 lines
4.9 KiB
HTML
119 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Request a demo — JQC · LT Services</title>
|
|
<meta name="description" content="Book a live demonstration of LT Services' JQC quality control platform.">
|
|
<meta name="robots" content="noindex">
|
|
<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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ asset_url('css/style.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="grain" aria-hidden="true"></div>
|
|
|
|
<main class="book">
|
|
<a class="book__back" href="{{ url_for('index') }}">← Back to JQC features</a>
|
|
|
|
<header class="book__head">
|
|
<p class="book__kicker">Live demonstration</p>
|
|
<h1 class="book__title">Book a demo</h1>
|
|
<p class="book__lede">
|
|
Pick a day and time that suits you and we'll walk you through JQC — inspections, issue tracking, SLA alerts
|
|
and reporting — on your own facilities' terms. Monday to Friday, {{ tz_label }}.
|
|
</p>
|
|
</header>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="book__alerts" role="alert">
|
|
{% for cat, msg in messages %}
|
|
<p class="book__alert book__alert--{{ cat }}">{{ msg }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form class="book__form" method="post" action="{{ url_for('demo') }}" novalidate
|
|
data-slots-url="{{ url_for('demo_slots_api') }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<!-- honeypot: hidden from people, irresistible to bots -->
|
|
<div class="book__hp" aria-hidden="true">
|
|
<label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="name">Your name <span class="req">*</span></label>
|
|
<input id="name" name="name" type="text" maxlength="120" required autocomplete="name"
|
|
value="{{ form.name or '' }}">
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label for="company">Company / facility</label>
|
|
<input id="company" name="company" type="text" maxlength="160" autocomplete="organization"
|
|
value="{{ form.company or '' }}">
|
|
</div>
|
|
<div class="field">
|
|
<label for="phone">Phone</label>
|
|
<input id="phone" name="phone" type="tel" maxlength="40" autocomplete="tel"
|
|
value="{{ form.phone or '' }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="email">Email <span class="req">*</span></label>
|
|
<input id="email" name="email" type="email" maxlength="200" required autocomplete="email"
|
|
value="{{ form.email or '' }}">
|
|
<p class="hint">We'll send a confirmation here.</p>
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label for="preferred_date">Preferred date <span class="req">*</span></label>
|
|
<input id="preferred_date" name="preferred_date" type="date" required
|
|
min="{{ min_date }}" max="{{ max_date }}" value="{{ form.preferred_date or '' }}">
|
|
<p class="hint">Weekdays only.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="preferred_time">Preferred time <span class="req">*</span></label>
|
|
<select id="preferred_time" name="preferred_time" required>
|
|
<option value="">{{ 'Select a time…' if slots else 'No times available' }}</option>
|
|
{% for slot in slots %}
|
|
<option value="{{ slot }}" {{ 'selected' if form.preferred_time == slot }}>{{ slot }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<!-- Only free slots are listed: the server filters by the chosen date,
|
|
and demo-booking.js refreshes this list whenever the date changes. -->
|
|
<p class="hint" id="slot-note">{{ tz_label }}.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="message">Anything we should prepare?</label>
|
|
<textarea id="message" name="message" rows="4" maxlength="2000"
|
|
placeholder="Number of sites, current QC process, people who'll join…">{{ form.message or '' }}</textarea>
|
|
</div>
|
|
|
|
<button class="book__submit" type="submit">Request this appointment</button>
|
|
<p class="book__fallback">
|
|
Prefer email? <a href="{{ demo_url }}">Contact us directly</a>.
|
|
</p>
|
|
</form>
|
|
</main>
|
|
|
|
<footer class="cta cta--slim">
|
|
<p class="cta__legal">© LT Services Inc. · JQC Quality Control Program</p>
|
|
</footer>
|
|
|
|
<script src="{{ asset_url('js/demo-booking.js') }}" defer></script>
|
|
</body>
|
|
|
|
</html>
|