Vaibhav Surve
2dfe150a5c
- Login page with animated floating stat cards - Executive dashboard with Chart.js KPIs and activity feed - Full asset registry (list, search, filter, bulk actions, QR) - Asset detail page with 6 tabs (financial, maintenance, history…) - 3-step asset creation wizard with category-specific fields - Inventory: stock overview, GRN, location tree, physical audit - Procurement: PR → approval → PO → GRN → asset lifecycle - Maintenance: Kanban board, PM schedule, AMC contracts - Reports: depreciation schedule, utilization, compliance gauge - User management: roles, permission matrix, session control - Settings: 8 config sections (org, depreciation, security, integrations) - Premium dark UI with CSS variables, Chart.js 4, toast system
139 lines
6.6 KiB
HTML
139 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<title>Login | AMS — Asset Management System</title>
|
|
<meta name="description" content="Secure login to Acme Corporation Asset Management System">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<style>
|
|
.feature-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);border-radius:100px;padding:5px 13px;font-size:12px;color:var(--primary-light);font-weight:500}
|
|
.floating-card{position:absolute;background:rgba(19,25,38,.9);backdrop-filter:blur(16px);border:1px solid var(--border-strong);border-radius:14px;padding:16px 18px;font-size:12px;box-shadow:var(--shadow-lg);animation:floatY 4s ease-in-out infinite}
|
|
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
|
|
.fc1{top:18%;left:5%;animation-delay:0s}
|
|
.fc2{top:55%;right:3%;animation-delay:1.5s}
|
|
.fc3{bottom:20%;left:8%;animation-delay:.8s}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-page">
|
|
<div class="login-bg-glow"></div>
|
|
<div class="login-grid-bg"></div>
|
|
|
|
<!-- Floating stat cards (decorative) -->
|
|
<div class="floating-card fc1">
|
|
<div style="color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px">Total Assets</div>
|
|
<div style="font-size:22px;font-weight:800;color:var(--text-primary)">1,247</div>
|
|
<div style="color:var(--success);font-size:11px;margin-top:2px">↑ +3.2% this month</div>
|
|
</div>
|
|
<div class="floating-card fc2">
|
|
<div style="color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px">Asset Value</div>
|
|
<div style="font-size:20px;font-weight:800;color:var(--text-primary)">₹4.29Cr</div>
|
|
<div style="color:var(--cyan-light);font-size:11px;margin-top:2px">Net book value</div>
|
|
</div>
|
|
<div class="floating-card fc3">
|
|
<div style="color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px">Compliance</div>
|
|
<div style="font-size:22px;font-weight:800;color:var(--success)">98.4%</div>
|
|
<div style="color:var(--text-muted);font-size:11px;margin-top:2px">Audit ready ✓</div>
|
|
</div>
|
|
|
|
<div class="login-panel animate-fadein">
|
|
<div class="login-logo-wrap">
|
|
<div class="login-logo-icon">📦</div>
|
|
<div>
|
|
<div class="login-logo-text">AM<span>S</span></div>
|
|
<div style="font-size:11px;color:var(--text-muted);margin-top:1px">Asset Management System</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align:center;margin-bottom:18px">
|
|
<div class="feature-pill">🏢 Acme Corporation Pvt. Ltd.</div>
|
|
</div>
|
|
|
|
<div class="login-card">
|
|
<div class="login-heading">
|
|
<div class="login-title">Welcome back 👋</div>
|
|
<div class="login-subtitle">Sign in to manage your organization's assets</div>
|
|
</div>
|
|
|
|
<form id="loginForm" onsubmit="handleLogin(event)">
|
|
<div class="form-group">
|
|
<label class="form-label">Email Address <span class="req">*</span></label>
|
|
<input id="loginEmail" class="form-input" type="email" placeholder="you@acmecorp.com" value="arjun.sharma@acmecorp.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Password <span class="req">*</span></label>
|
|
<div style="position:relative">
|
|
<input id="loginPassword" class="form-input" type="password" placeholder="Enter your password" value="••••••••" required style="padding-right:44px">
|
|
<button type="button" onclick="togglePwd()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px" id="eyeBtn">👁️</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px">
|
|
<label class="flex items-center gap-2" style="cursor:pointer;font-size:12.5px;color:var(--text-secondary)">
|
|
<input type="checkbox" checked> Remember me
|
|
</label>
|
|
<a href="#" style="font-size:12.5px;color:var(--primary-light)">Forgot password?</a>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-full btn-lg" id="loginBtn">
|
|
<span id="loginBtnText">Sign In →</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="login-divider">or quick access</div>
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
|
|
<button class="btn btn-secondary" onclick="loginAs('asset-manager')">
|
|
<span>📦</span> Asset Manager
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="loginAs('admin')">
|
|
<span>👑</span> Super Admin
|
|
</button>
|
|
</div>
|
|
|
|
<div style="margin-top:18px;padding:12px;background:var(--primary-glow);border:1px solid var(--border-accent);border-radius:var(--radius-md)">
|
|
<div style="font-size:11.5px;color:var(--primary-light);font-weight:600;margin-bottom:4px">🔐 2-Factor Authentication</div>
|
|
<div style="font-size:11px;color:var(--text-muted)">A 6-digit OTP will be sent to your registered mobile/email upon successful password verification.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align:center;margin-top:20px;font-size:11.5px;color:var(--text-muted)">
|
|
AMS v1.0 · <a href="#">Privacy Policy</a> · <a href="#">Support</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<script src="js/data.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script>
|
|
function togglePwd() {
|
|
const inp = document.getElementById('loginPassword');
|
|
const btn = document.getElementById('eyeBtn');
|
|
inp.type = inp.type === 'password' ? 'text' : 'password';
|
|
btn.textContent = inp.type === 'password' ? '👁️' : '🙈';
|
|
}
|
|
|
|
function handleLogin(e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('loginBtn');
|
|
const txt = document.getElementById('loginBtnText');
|
|
btn.disabled = true;
|
|
txt.innerHTML = '<span class="animate-spin" style="display:inline-block">⟳</span> Authenticating…';
|
|
|
|
setTimeout(() => {
|
|
showToast('Login Successful', 'Welcome back, Arjun Sharma!', 'success');
|
|
setTimeout(() => { window.location.href = 'dashboard.html'; }, 800);
|
|
}, 1400);
|
|
}
|
|
|
|
function loginAs(role) {
|
|
showToast('Signing in…', `Logging in as ${role.replace('-',' ')}`, 'info');
|
|
setTimeout(() => { window.location.href = 'dashboard.html'; }, 1000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|