398 lines
10 KiB
PHP
398 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Identia - Home</title>
|
|
<link rel="shortcut icon" href="images/myn.png" />
|
|
|
|
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg: #ffffff;
|
|
--text-main: #111827;
|
|
--text-muted: #6b7280;
|
|
--nav-bg: rgba(255, 255, 255, 0.8);
|
|
--nav-border: #f3f4f6;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text-main);
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #f4f4f5;
|
|
border-radius: 100px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 32px;
|
|
width: fit-content;
|
|
max-width: calc(100% - 48px);
|
|
gap: 48px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.mobbin-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.nav-brand {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: var(--text-main);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.nav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-right a {
|
|
text-decoration: none;
|
|
color: var(--text-main);
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-right a:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.nav-right .log-in {
|
|
font-weight: 500; /* Same as others */
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
text-align: center;
|
|
padding: 120px 20px 60px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Stack Animation */
|
|
.logo-stack {
|
|
position: relative;
|
|
width: 90px;
|
|
height: 90px;
|
|
margin-bottom: 32px;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.stack-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 24px;
|
|
animation: slideStack 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
overflow: hidden;
|
|
will-change: transform, opacity, z-index;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stack-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
padding: 16px;
|
|
display: block;
|
|
}
|
|
|
|
/* Specific Item Styling */
|
|
.item-1 { background-color: #4b49ac; }
|
|
.item-1 img { filter: brightness(0) invert(1); transform: translateX(3px);}
|
|
|
|
.item-2 { background-color: #212025; }
|
|
.item-2 img { filter: brightness(0) invert(1); transform: scale(1.4); }
|
|
|
|
.item-3 { background-color: #ff0004ff; }
|
|
.item-3 img { filter: brightness(0); transform: scale(1.1); }
|
|
|
|
.item-4 { background-color: #88ea5c; }
|
|
.item-4 img { filter: brightness(0); transform: scale(1.4); }
|
|
|
|
.item-5 { background-color: #0061FE; }
|
|
.item-5 svg { width: 100%; height: 100%; padding: 8px; display: block; }
|
|
|
|
/* Overlay to hide the back cards and show solid grey shapes */
|
|
.stack-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(243, 244, 246, 0);
|
|
animation: overlayAnim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
will-change: background-color;
|
|
}
|
|
|
|
/* Distribute the animations across 15 seconds */
|
|
.item-1, .item-1::after { animation-delay: 0s; }
|
|
.item-2, .item-2::after { animation-delay: -3s; }
|
|
.item-3, .item-3::after { animation-delay: -6s; }
|
|
.item-4, .item-4::after { animation-delay: -9s; }
|
|
.item-5, .item-5::after { animation-delay: -12s; }
|
|
|
|
@keyframes slideStack {
|
|
0%, 15% {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 1;
|
|
z-index: 5;
|
|
}
|
|
15.001% { z-index: 6; } /* Stay on top while exiting */
|
|
20% {
|
|
transform: translateY(40px) scale(1.1);
|
|
opacity: 0;
|
|
z-index: 6;
|
|
}
|
|
20.001%, 35% { /* Teleport to back */
|
|
transform: translateY(-80px) scale(0.5);
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
40%, 55% { /* Back-most position */
|
|
transform: translateY(-36px) scale(0.7);
|
|
opacity: 0;
|
|
z-index: 2;
|
|
}
|
|
60%, 75% { /* Back position */
|
|
transform: translateY(-24px) scale(0.8);
|
|
opacity: 1;
|
|
z-index: 3;
|
|
}
|
|
80%, 95% { /* Middle position */
|
|
transform: translateY(-12px) scale(0.9);
|
|
opacity: 1;
|
|
z-index: 4;
|
|
}
|
|
97.5% { /* Overshoot bounce */
|
|
transform: translateY(1px) scale(1.01);
|
|
opacity: 1;
|
|
z-index: 5;
|
|
}
|
|
100% { /* Arrive at front */
|
|
transform: translateY(0) scale(1);
|
|
opacity: 1;
|
|
z-index: 5;
|
|
}
|
|
}
|
|
|
|
@keyframes overlayAnim {
|
|
0%, 20% { background-color: rgba(243, 244, 246, 0); }
|
|
20.001%, 40% { background-color: #f3f4f6; } /* Back hidden (Putih) */
|
|
40.001%, 60% { background-color: #f3f4f6; } /* Back-most position (Putih) */
|
|
60.001%, 80% { background-color: #f3f4f6; } /* Back position (Putih) */
|
|
80.001%, 95% { background-color: #c2c2c2; } /* Middle position (Abu abu) */
|
|
100% { background-color: rgba(243, 244, 246, 0); }
|
|
}
|
|
|
|
/* Typography */
|
|
h1 {
|
|
font-size: clamp(40px, 6vw, 76px);
|
|
line-height: 1.05;
|
|
font-weight: 700;
|
|
letter-spacing: -0.04em;
|
|
color: var(--text-main);
|
|
margin: 0 0 40px 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
p.subtitle {
|
|
font-size: clamp(16px, 2.5vw, 20px);
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
margin: 0 0 64px 0;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Buttons */
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-black {
|
|
background-color: #4b49ac;
|
|
color: #ffffff;
|
|
padding: 16px 32px;
|
|
border-radius: 100px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
transition: transform 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
.btn-black:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-white {
|
|
background-color: #ffffff;
|
|
color: var(--text-main);
|
|
padding: 10px 10px 10px 24px;
|
|
border-radius: 100px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
border: 1px solid #e5e7eb;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
transition: transform 0.2s, background-color 0.2s;
|
|
}
|
|
|
|
.btn-white:hover {
|
|
background-color: #f9fafb;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.arrow-circle {
|
|
width: 34px;
|
|
height: 34px;
|
|
background-color: #f3f4f6;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
margin-top: 60px;
|
|
font-size: 14px;
|
|
color: #9ca3af;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.navbar {
|
|
top: 16px;
|
|
}
|
|
.nav-right {
|
|
gap: 12px;
|
|
}
|
|
.nav-right a:not(.log-in) {
|
|
display: none;
|
|
}
|
|
.actions {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
}
|
|
.btn-black, .btn-white {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar">
|
|
<div class="nav-left">
|
|
<img src="images/myn.png" alt="MYN Logo" style="height: 24px; filter: brightness(0);">
|
|
<span class="nav-brand">Identification Environment for Telkom Internal Access</span>
|
|
</div>
|
|
<div class="nav-right">
|
|
<a href="https://montaklo.id" class="montaklo" target="_blank" rel="noopener noreferrer">
|
|
Montaklo
|
|
</a>
|
|
<a href="login.php" class="log-in">Log in</a>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Content -->
|
|
<main class="hero">
|
|
|
|
<!-- Logo Stack Animation -->
|
|
<div class="logo-stack">
|
|
<div class="stack-item item-1">
|
|
<img src="images/myn.png" alt="App Logo 1">
|
|
</div>
|
|
<div class="stack-item item-2">
|
|
<img src="images/J.png" alt="App Logo 2">
|
|
</div>
|
|
<div class="stack-item item-3">
|
|
<img src="images/da.png" alt="App Logo 3">
|
|
</div>
|
|
<div class="stack-item item-4">
|
|
<img src="images/mk.png" alt="App Logo 4">
|
|
</div>
|
|
<div class="stack-item item-5">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="col-12">Transforming internal-access <br> security systems.</h1>
|
|
|
|
<p class="subtitle">
|
|
Open your Fiber Termination Management Room-<br>with just one touch.
|
|
</p>
|
|
|
|
<div class="actions">
|
|
<a href="login.php" class="btn-black">Get Started</a>
|
|
<a href="register.php" class="btn-white">
|
|
Sign Up
|
|
<div class="arrow-circle">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="#111827" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|