134 lines
6.3 KiB
HTML
134 lines
6.3 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 Minimalism - Input Intelligence</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="container">
|
|
<header class="header">
|
|
<h1 class="title">Input Intelligence</h1>
|
|
<p class="subtitle">Smart form interactions with minimal design</p>
|
|
</header>
|
|
|
|
<section class="input-section">
|
|
<form class="intelligent-form" id="smartForm">
|
|
<div class="input-group" data-input-type="email">
|
|
<label for="emailInput" class="input-label">Email Address</label>
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="text"
|
|
id="emailInput"
|
|
class="intelligent-input"
|
|
placeholder="Type your email"
|
|
autocomplete="off"
|
|
aria-describedby="emailHint emailError"
|
|
>
|
|
<div class="input-progress" aria-hidden="true"></div>
|
|
<div class="input-indicator" aria-hidden="true"></div>
|
|
</div>
|
|
<p id="emailHint" class="input-hint">We'll validate as you type</p>
|
|
<p id="emailError" class="input-error" role="alert" aria-live="polite"></p>
|
|
<ul class="suggestions-list" id="emailSuggestions" role="listbox" aria-label="Email suggestions"></ul>
|
|
</div>
|
|
|
|
<div class="input-group" data-input-type="phone">
|
|
<label for="phoneInput" class="input-label">Phone Number</label>
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="tel"
|
|
id="phoneInput"
|
|
class="intelligent-input"
|
|
placeholder="(123) 456-7890"
|
|
autocomplete="off"
|
|
aria-describedby="phoneHint phoneError"
|
|
>
|
|
<div class="input-progress" aria-hidden="true"></div>
|
|
<div class="input-indicator" aria-hidden="true"></div>
|
|
</div>
|
|
<p id="phoneHint" class="input-hint">Auto-formatting enabled</p>
|
|
<p id="phoneError" class="input-error" role="alert" aria-live="polite"></p>
|
|
</div>
|
|
|
|
<div class="input-group" data-input-type="card">
|
|
<label for="cardInput" class="input-label">Credit Card</label>
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="text"
|
|
id="cardInput"
|
|
class="intelligent-input"
|
|
placeholder="1234 5678 9012 3456"
|
|
autocomplete="off"
|
|
aria-describedby="cardHint cardError"
|
|
>
|
|
<div class="input-progress" aria-hidden="true"></div>
|
|
<div class="input-indicator" aria-hidden="true"></div>
|
|
<div class="card-type" aria-label="Card type"></div>
|
|
</div>
|
|
<p id="cardHint" class="input-hint">Secure input with automatic spacing</p>
|
|
<p id="cardError" class="input-error" role="alert" aria-live="polite"></p>
|
|
</div>
|
|
|
|
<div class="input-group" data-input-type="password">
|
|
<label for="passwordInput" class="input-label">Secure Password</label>
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="password"
|
|
id="passwordInput"
|
|
class="intelligent-input"
|
|
placeholder="Create a strong password"
|
|
autocomplete="new-password"
|
|
aria-describedby="passwordHint passwordError passwordStrength"
|
|
>
|
|
<div class="input-progress" aria-hidden="true"></div>
|
|
<button type="button" class="password-toggle" aria-label="Toggle password visibility">
|
|
<span class="password-toggle-icon"></span>
|
|
</button>
|
|
</div>
|
|
<p id="passwordHint" class="input-hint">Minimum 8 characters</p>
|
|
<div id="passwordStrength" class="password-strength" role="status" aria-live="polite">
|
|
<div class="strength-meter">
|
|
<div class="strength-fill"></div>
|
|
</div>
|
|
<span class="strength-text"></span>
|
|
</div>
|
|
<p id="passwordError" class="input-error" role="alert" aria-live="polite"></p>
|
|
</div>
|
|
|
|
<div class="form-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 0%"></div>
|
|
</div>
|
|
<p class="progress-text">0% Complete</p>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-button" disabled>
|
|
<span class="button-text">Submit Form</span>
|
|
<span class="button-loader"></span>
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="stats">
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="validFields">0</span>
|
|
<span class="stat-label">Valid Fields</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="totalFields">4</span>
|
|
<span class="stat-label">Total Fields</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="inputQuality">0%</span>
|
|
<span class="stat-label">Input Quality</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |