Spaces:
Sleeping
Sleeping
File size: 6,385 Bytes
d70361b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign In — Vedangsoft Change Detection</title>
<link rel="stylesheet" href="/static/css/style.css?v=34" />
<link rel="stylesheet" href="/static/css/dda.css?v=47" />
<style>
.auth-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.auth-card { width: 100%; max-width: 400px; }
.auth-brand {
display: flex; align-items: center; justify-content: center;
gap: 0.5rem; margin-bottom: 1.5rem;
color: var(--text); font-weight: 600;
}
.auth-toggle {
text-align: center; margin-top: 1rem;
font-size: 0.85rem; color: var(--text-muted);
}
.auth-toggle a {
color: var(--accent); cursor: pointer;
text-decoration: none; font-weight: 500;
}
.auth-toggle a:hover { text-decoration: underline; }
.auth-forgot-link { color: var(--accent); font-size: 0.82rem; text-decoration: none; }
.auth-forgot-link:hover { text-decoration: underline; }
.hidden { display: none !important; }
.field-error { color: var(--danger); font-size: 0.78rem; margin-top: 0.35rem; }
.field-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.35rem; }
.form-group input.invalid,
.form-group select.invalid { border-color: var(--danger); }
.auth-remember-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 1.25rem;
}
</style>
</head>
<body>
<div class="auth-page">
<div class="auth-card">
<div class="auth-brand">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
<span>Vedangsoft Change Detection</span>
</div>
<div class="card">
<div class="card-header">
<h3 id="auth-title">Sign in</h3>
</div>
<div id="dda-error" class="alert alert-error hidden"></div>
<div id="dda-success" class="alert alert-success hidden"></div>
<div class="dda-auth-tabs" id="auth-tabs" role="tablist" aria-label="Sign-in method">
<button type="button" class="dda-auth-tab is-active" data-tab="password" role="tab" aria-selected="true">Password</button>
<button type="button" class="dda-auth-tab" data-tab="otp" role="tab" aria-selected="false">Email OTP</button>
</div>
<form id="auth-form" novalidate>
<div class="form-group" data-field="full_name">
<label for="full_name">Full name</label>
<input type="text" id="full_name" autocomplete="name" />
<div class="field-error hidden" id="err-full_name"></div>
</div>
<div class="form-group" data-field="email">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="username" />
<div class="field-error hidden" id="err-email"></div>
</div>
<div class="form-group" data-field="password">
<label for="password">Password</label>
<input type="password" id="password" autocomplete="current-password" />
<div class="field-hint hidden" id="hint-password">At least 8 characters</div>
<div class="field-error hidden" id="err-password"></div>
</div>
<div class="form-group" data-field="confirm_password">
<label for="confirm_password">Confirm password</label>
<input type="password" id="confirm_password" autocomplete="new-password" />
<div class="field-error hidden" id="err-confirm_password"></div>
</div>
<div class="form-group" data-field="phone">
<label for="phone">Mobile number <span class="dim">(optional)</span></label>
<div class="dda-phone-input">
<select id="country_code" class="dda-country-select" aria-label="Country code"></select>
<input type="tel" id="phone" autocomplete="tel-national" inputmode="numeric" maxlength="15" placeholder="Mobile number" />
</div>
<div class="field-hint" id="hint-phone">Optional — you can add or change this later in your profile.</div>
<div class="field-error hidden" id="err-phone"></div>
</div>
<div class="auth-remember-row" data-field="remember">
<label class="checkbox-group" style="margin-bottom: 0;">
<input type="checkbox" id="remember_me" />
Remember me
</label>
<a href="/forgot-password" class="auth-forgot-link" data-field="forgot">Forgot password?</a>
</div>
<button type="submit" id="auth-submit" class="btn btn-primary btn-block">Sign in</button>
</form>
<form id="otp-form" class="hidden" novalidate>
<p class="sub dim" id="otp-help" style="margin-bottom:1rem">Enter the 6-digit code sent to your email.</p>
<div class="form-group">
<label for="otp_code">Email code</label>
<input type="text" id="otp_code" class="dda-otp-input" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" />
<div class="field-error hidden" id="err-otp_code"></div>
</div>
<button type="submit" id="otp-submit" class="btn btn-primary btn-block">Verify code</button>
<button type="button" id="otp-resend" class="btn btn-secondary btn-block" style="margin-top:0.5rem">Resend code</button>
<button type="button" id="otp-back" class="btn btn-secondary btn-block" style="margin-top:0.5rem">Back</button>
</form>
<div class="auth-toggle">
<span id="toggle-to-register">Need an account? <a id="show-register">Create one</a></span>
<span id="toggle-to-login" class="hidden">Already have an account? <a id="show-login">Sign in</a></span>
</div>
</div>
</div>
</div>
<script src="/static/js/dda/shared.js?v=4"></script>
<script src="/static/js/dda/countries.js?v=1"></script>
<script src="/static/js/dda/login.js?v=10"></script>
</body>
</html>
|