556 lines
14 KiB
HTML
556 lines
14 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CRI Pumps - MIS Portal</title>
|
|
<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=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root{
|
|
--navy-950:#071B2E;
|
|
--navy-800:#0C3B5E;
|
|
--navy-700:#124a72;
|
|
--teal-500:#00AEEF;
|
|
--teal-400:#3FC6F0;
|
|
--steel-300:#9FB8C9;
|
|
--slate-50:#F4F7FA;
|
|
--ink-800:#1E2A33;
|
|
--ink-500:#5B6B78;
|
|
--line:#E1E8ED;
|
|
}
|
|
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
body{
|
|
font-family:'Inter',Arial,sans-serif;
|
|
height:100vh;
|
|
display:flex;
|
|
background:var(--slate-50);
|
|
color:var(--ink-800);
|
|
}
|
|
|
|
/* ============ LEFT PANEL ============ */
|
|
.left-panel{
|
|
position:relative;
|
|
width:58%;
|
|
overflow:hidden;
|
|
background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
|
|
/*background:
|
|
linear-gradient(rgba(7,27,46,.88),rgba(12,59,94,.90)),
|
|
url("{% static 'images/motor.png' %}");*/
|
|
color:#fff;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
padding:80px 90px;
|
|
}
|
|
|
|
/* fine industrial grid texture */
|
|
.left-panel::before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:0;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
|
|
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
|
|
background-size:38px 38px;
|
|
pointer-events:none;
|
|
}
|
|
|
|
/* radial glow, top right this time so it doesn't fight the wave */
|
|
.left-panel::after{
|
|
content:"";
|
|
position:absolute;
|
|
width:560px;height:560px;
|
|
right:-160px;
|
|
top:-180px;
|
|
background:radial-gradient(circle,rgba(0,174,239,.16) 0%,rgba(0,174,239,0) 70%);
|
|
pointer-events:none;
|
|
}
|
|
|
|
.left-content{
|
|
position:relative;
|
|
z-index:2;
|
|
}
|
|
|
|
.eyebrow{
|
|
display:inline-block;
|
|
font-family:'IBM Plex Mono',monospace;
|
|
font-size:12px;
|
|
letter-spacing:.16em;
|
|
color:var(--teal-400);
|
|
background:rgba(0,174,239,.10);
|
|
border:1px solid rgba(0,174,239,.35);
|
|
padding:6px 14px;
|
|
border-radius:100px;
|
|
margin-bottom:22px;
|
|
}
|
|
|
|
/* rotating live-focus ticker */
|
|
.ticker-row{
|
|
display:flex;
|
|
align-items:baseline;
|
|
gap:9px;
|
|
margin-bottom:20px;
|
|
font-family:'IBM Plex Mono',monospace;
|
|
}
|
|
.ticker-label{
|
|
font-size:11px;
|
|
letter-spacing:.12em;
|
|
text-transform:uppercase;
|
|
color:rgba(255,255,255,.4);
|
|
}
|
|
.ticker-label::before{
|
|
content:"● ";
|
|
color:#2FBF71;
|
|
font-size:8px;
|
|
}
|
|
.ticker-text{
|
|
font-size:15px;
|
|
font-weight:500;
|
|
letter-spacing:.06em;
|
|
color:var(--teal-400);
|
|
text-transform:uppercase;
|
|
display:inline-block;
|
|
transition:opacity .22s ease, transform .22s ease;
|
|
}
|
|
.ticker-text.swap{
|
|
opacity:0;
|
|
transform:translateY(-6px);
|
|
}
|
|
|
|
.left-panel h1{
|
|
font-family:'Sora',sans-serif;
|
|
font-weight:800;
|
|
font-size:46px;
|
|
line-height:1.12;
|
|
letter-spacing:-.01em;
|
|
margin-bottom:14px;
|
|
}
|
|
|
|
.left-panel h3{
|
|
font-family:'Sora',sans-serif;
|
|
font-weight:600;
|
|
font-size:17px;
|
|
color:var(--steel-300);
|
|
margin-bottom:22px;
|
|
}
|
|
|
|
.left-panel p{
|
|
font-size:15.5px;
|
|
line-height:1.75;
|
|
color:rgba(255,255,255,.78);
|
|
width:88%;
|
|
margin-bottom:36px;
|
|
}
|
|
|
|
/* module chips - now double as the rotation indicator */
|
|
.modules{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:10px;
|
|
position:relative;
|
|
z-index:2;
|
|
}
|
|
|
|
.module-chip{
|
|
font-family:'IBM Plex Mono',monospace;
|
|
font-size:11.5px;
|
|
letter-spacing:.05em;
|
|
color:var(--steel-300);
|
|
border:1px solid rgba(255,255,255,.16);
|
|
background:rgba(255,255,255,.04);
|
|
padding:8px 14px;
|
|
border-radius:8px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
transition:border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease, color .3s ease;
|
|
}
|
|
|
|
.module-chip span.dot{
|
|
width:6px;height:6px;
|
|
border-radius:50%;
|
|
background:rgba(255,255,255,.3);
|
|
transition:background .3s ease, box-shadow .3s ease;
|
|
}
|
|
|
|
.module-chip.active{
|
|
color:#fff;
|
|
border-color:rgba(0,174,239,.6);
|
|
background:rgba(0,174,239,.14);
|
|
box-shadow:0 0 0 3px rgba(0,174,239,.1);
|
|
transform:translateY(-1px);
|
|
}
|
|
.module-chip.active span.dot{
|
|
background:var(--teal-400);
|
|
box-shadow:0 0 8px var(--teal-400);
|
|
}
|
|
|
|
/* ============ LIQUID WAVE FOOTER (signature element) ============ */
|
|
.wave-wrap{
|
|
position:absolute;
|
|
left:0; right:0; bottom:0;
|
|
height:120px;
|
|
overflow:hidden;
|
|
z-index:1;
|
|
pointer-events:none;
|
|
}
|
|
.wave-layer{
|
|
position:absolute;
|
|
bottom:0; left:0;
|
|
width:200%; height:100%;
|
|
background-repeat:repeat-x;
|
|
background-size:480px 100%;
|
|
}
|
|
.wave-back{
|
|
opacity:.28;
|
|
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120'><path d='M0,64 C 60,20 180,20 240,64 C 300,108 420,108 480,64 L480,120 L0,120 Z' fill='%233FC6F0'/></svg>");
|
|
animation:waveScroll 9s linear infinite;
|
|
}
|
|
.wave-front{
|
|
opacity:.5;
|
|
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120'><path d='M0,74 C 60,108 180,108 240,74 C 300,40 420,40 480,74 L480,120 L0,120 Z' fill='%2300AEEF'/></svg>");
|
|
animation:waveScroll 6s linear infinite reverse;
|
|
}
|
|
@keyframes waveScroll{
|
|
from{ background-position-x:0; }
|
|
to{ background-position-x:480px; }
|
|
}
|
|
|
|
.wave-crest-dot{
|
|
position:absolute;
|
|
bottom:78px;
|
|
width:6px; height:6px;
|
|
border-radius:50%;
|
|
background:var(--teal-400);
|
|
box-shadow:0 0 10px var(--teal-400);
|
|
animation:crestMove 3.2s ease-in-out infinite;
|
|
}
|
|
.wave-crest-dot.d2{ animation-delay:-1.6s; opacity:.6; }
|
|
@keyframes crestMove{
|
|
0% { left:6%; transform:translateY(0); }
|
|
50% { left:52%; transform:translateY(-10px); }
|
|
100% { left:6%; transform:translateY(0); }
|
|
}
|
|
|
|
/* ============ RIGHT PANEL ============ */
|
|
.right-panel{
|
|
width:42%;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
background:var(--slate-50);
|
|
}
|
|
|
|
.login-card{
|
|
width:400px;
|
|
padding:44px 40px;
|
|
background:#fff;
|
|
border:1px solid var(--line);
|
|
border-radius:16px;
|
|
box-shadow:0 20px 45px -20px rgba(7,27,46,.18);
|
|
position:relative;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.login-card::before{
|
|
content:"";
|
|
position:absolute;
|
|
top:0;left:0;right:0;
|
|
height:4px;
|
|
background:linear-gradient(90deg,var(--teal-500),var(--navy-700));
|
|
}
|
|
|
|
.logo{
|
|
text-align:center;
|
|
margin-bottom:32px;
|
|
}
|
|
|
|
.logo-mark{
|
|
width:46px;height:46px;
|
|
margin:0 auto 16px;
|
|
border-radius:12px;
|
|
background:linear-gradient(135deg,var(--navy-800),var(--navy-950));
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
|
|
.logo h2{
|
|
font-family:'Sora',sans-serif;
|
|
font-weight:700;
|
|
color:var(--navy-800);
|
|
font-size:24px;
|
|
letter-spacing:-.01em;
|
|
}
|
|
|
|
.logo p{
|
|
color:var(--ink-500);
|
|
margin-top:6px;
|
|
font-size:14px;
|
|
}
|
|
|
|
.input-box{
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
.input-box label{
|
|
display:block;
|
|
margin-bottom:8px;
|
|
color:var(--ink-800);
|
|
font-weight:600;
|
|
font-size:13.5px;
|
|
}
|
|
|
|
.field{
|
|
position:relative;
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
.field svg{
|
|
position:absolute;
|
|
left:14px;
|
|
width:18px;height:18px;
|
|
stroke:var(--ink-500);
|
|
pointer-events:none;
|
|
}
|
|
|
|
.field input{
|
|
width:100%;
|
|
padding:13px 14px 13px 42px;
|
|
border:1.5px solid var(--line);
|
|
border-radius:10px;
|
|
font-size:14.5px;
|
|
font-family:'Inter',sans-serif;
|
|
color:var(--ink-800);
|
|
transition:border-color .18s, box-shadow .18s;
|
|
}
|
|
|
|
.field input::placeholder{ color:#a7b3bd; }
|
|
|
|
.field input:focus{
|
|
outline:none;
|
|
border-color:var(--teal-500);
|
|
box-shadow:0 0 0 4px rgba(0,174,239,.14);
|
|
}
|
|
|
|
.toggle-pass{
|
|
position:absolute;
|
|
right:14px;
|
|
cursor:pointer;
|
|
width:18px;height:18px;
|
|
stroke:var(--ink-500);
|
|
background:none;
|
|
border:none;
|
|
padding:0;
|
|
}
|
|
|
|
button.login-btn{
|
|
width:100%;
|
|
padding:14px;
|
|
margin-top:6px;
|
|
background:linear-gradient(90deg,var(--navy-800),var(--navy-950));
|
|
color:#fff;
|
|
border:none;
|
|
border-radius:10px;
|
|
font-family:'Sora',sans-serif;
|
|
font-weight:700;
|
|
font-size:15px;
|
|
letter-spacing:.03em;
|
|
cursor:pointer;
|
|
transition:transform .15s, box-shadow .15s, background .3s;
|
|
box-shadow:0 10px 24px -10px rgba(7,27,46,.5);
|
|
}
|
|
|
|
button.login-btn:hover{
|
|
background:linear-gradient(90deg,var(--teal-500),var(--navy-800));
|
|
transform:translateY(-1px);
|
|
box-shadow:0 14px 28px -10px rgba(0,174,239,.45);
|
|
}
|
|
|
|
button.login-btn:active{
|
|
transform:translateY(0);
|
|
}
|
|
|
|
.footer{
|
|
text-align:center;
|
|
margin-top:22px;
|
|
color:var(--ink-500);
|
|
font-size:13.5px;
|
|
}
|
|
|
|
.footer a{
|
|
color:var(--teal-500);
|
|
font-weight:600;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.footer a:hover{ text-decoration:underline; }
|
|
|
|
.error-box{
|
|
background:#FDECEA;
|
|
color:#C4342A;
|
|
border:1px solid #F5C2C7;
|
|
padding:12px 14px;
|
|
border-radius:10px;
|
|
margin-bottom:18px;
|
|
text-align:center;
|
|
font-weight:600;
|
|
font-size:13.5px;
|
|
}
|
|
|
|
@media(max-width:900px){
|
|
.left-panel{ display:none; }
|
|
.right-panel{ width:100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="left-panel">
|
|
|
|
<div class="left-content">
|
|
|
|
<span class="eyebrow">MIS PORTAL · SECURE ACCESS</span>
|
|
|
|
<div class="ticker-row">
|
|
<span class="ticker-label">Live focus</span>
|
|
<span class="ticker-text" id="tickerText">Production</span>
|
|
</div>
|
|
|
|
<h1>CRI Pumps Pvt Ltd</h1>
|
|
<h3>Management Information System</h3>
|
|
|
|
<p>
|
|
Welcome to the CRI Pumps MIS Portal. Access production, quality,
|
|
inventory, planning, maintenance and business reports securely
|
|
through a single platform.
|
|
</p>
|
|
|
|
<div class="modules" id="moduleChips">
|
|
<div class="module-chip active"><span class="dot"></span>PRODUCTION</div>
|
|
<div class="module-chip"><span class="dot"></span>QUALITY</div>
|
|
<div class="module-chip"><span class="dot"></span>INVENTORY</div>
|
|
<div class="module-chip"><span class="dot"></span>PLANNING</div>
|
|
<div class="module-chip"><span class="dot"></span>MAINTENANCE</div>
|
|
<div class="module-chip"><span class="dot"></span>AI INSIGHTS</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- signature element: liquid wave, referencing pump/fluid dynamics -->
|
|
<div class="wave-wrap">
|
|
<div class="wave-layer wave-back"></div>
|
|
<div class="wave-layer wave-front"></div>
|
|
<div class="wave-crest-dot"></div>
|
|
<div class="wave-crest-dot d2"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="login-card">
|
|
|
|
<div class="logo">
|
|
<!-- <div class="logo-mark">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#3FC6F0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="9"/>
|
|
<path d="M12 7v5l3 3"/>
|
|
</svg>
|
|
</div> -->
|
|
<h2>MIS LOGIN</h2>
|
|
<p>Sign in to continue</p>
|
|
</div>
|
|
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="error-box">{{ message }}</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<form method="POST">
|
|
{% csrf_token %}
|
|
|
|
<div class="input-box">
|
|
<label>Username</label>
|
|
<div class="field">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
<input type="text" name="username" placeholder="Enter Username" autocomplete="username">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-box">
|
|
<label>Password</label>
|
|
<div class="field">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="11" width="18" height="10" rx="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
<input id="password" type="password" name="password" placeholder="Enter Password" autocomplete="current-password">
|
|
<button type="button" class="toggle-pass" onclick="togglePassword()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="login-btn">LOGIN</button>
|
|
|
|
<div class="footer">
|
|
Forgot Password? <a href="#">Click Here</a>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
© 2026 CRI Pumps Pvt. Ltd. All rights reserved<br>Made by <a href="https://www.cripumps.com" target="_blank">CRI</a>.
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function togglePassword(){
|
|
const pw = document.getElementById('password');
|
|
pw.type = pw.type == 'password' ? 'text' : 'password';
|
|
}
|
|
|
|
// rotate the "live focus" word in sync with the module chips, every 1.5s
|
|
(function(){
|
|
const words = ['Production','Quality','Inventory','Planning','Maintenance', 'AI Insights'];
|
|
const tickerEl = document.getElementById('tickerText');
|
|
const chips = document.querySelectorAll('#moduleChips .module-chip');
|
|
let idx = 0;
|
|
|
|
setInterval(function(){
|
|
tickerEl.classList.add('swap');
|
|
setTimeout(function(){
|
|
idx = (idx + 1) % words.length;
|
|
tickerEl.textContent = words[idx];
|
|
tickerEl.classList.remove('swap');
|
|
chips.forEach(function(c){ c.classList.remove('active'); });
|
|
chips[idx].classList.add('active');
|
|
}, 220);
|
|
}, 1500);
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |