Spaces:
Running
Running
File size: 7,516 Bytes
ba8990f 1b65ae3 |
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 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Forge - Secure Access</title>
<script src="https://cdn.tailwindcss.com"></script>
<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;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
/* The main container for the parallax background */
.parallax-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #0a0a0a;
}
/* The background image itself, which will be moved by JS */
.parallax-bg {
position: absolute;
left: -5%; /* Start with a buffer for movement */
top: -5%;
width: 110%; /* Make image larger than viewport for parallax effect */
height: 110%;
background-image: url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?q=80&w=1935&auto=format&fit=crop');
background-size: cover;
background-position: center center;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: brightness(0.6);
}
/* Custom styling for the form elements to match the theme */
.form-input {
background-color: rgba(10, 10, 10, 0.7);
border: 1px solid rgba(100, 116, 139, 0.4);
color: #e2e8f0;
transition: all 0.3s ease;
}
.form-input:focus {
background-color: rgba(10, 10, 10, 0.9);
border-color: #f97316; /* Orange accent color from the brief */
box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
outline: none;
}
/* Thematic styling for the login button */
.login-btn {
background-color: #f97316;
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.2);
}
.login-btn:hover {
background-color: #fb923c;
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
transform: translateY(-2px);
}
/* Styling for the glassmorphism effect on the login panel */
.access-panel {
background: rgba(17, 24, 39, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-gray-900">
<div id="parallax-container" class="parallax-container">
<!-- The background image that will have the parallax effect -->
<div id="parallax-bg" class="parallax-bg"></div>
<!-- The main content, centered on the page -->
<div class="relative flex items-center justify-center w-full h-full px-4">
<!-- The "Secure Access Panel" -->
<div class="w-full max-w-md p-8 space-y-6 rounded-lg shadow-2xl access-panel md:p-10">
<!-- Platform Logo -->
<div class="flex justify-center">
<svg class="w-16 h-16 text-orange-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- Header Text -->
<div class="text-center">
<h1 class="text-3xl font-bold text-white tracking-tight">THE FORGE</h1>
<p class="mt-2 text-sm text-slate-400">Secure Team Entry</p>
</div>
<!-- Login Form -->
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-slate-300">Email Address / Username</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required
class="w-full px-4 py-3 rounded-md form-input placeholder-slate-500"
placeholder="u.name@team.com">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-slate-300">Password</label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required
class="w-full px-4 py-3 rounded-md form-input placeholder-slate-500"
placeholder="••••••••">
</div>
</div>
<div class="flex items-center justify-between">
<div class="text-sm">
<a href="#" class="font-medium text-orange-500 hover:text-orange-400 transition-colors">
Forgot password?
</a>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 rounded-md shadow-sm text-sm login-btn">
Login
</button>
</div>
</form>
</div>
</div>
</div>
<script>
// JavaScript for the parallax effect on the background image
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('parallax-container');
const bg = document.getElementById('parallax-bg');
// This function handles the mouse movement and updates the background position
container.addEventListener('mousemove', (e) => {
// Calculate the mouse position as a percentage of the window size
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
// Define the intensity of the parallax effect
const intensity = 10; // A higher number means more movement
// Calculate the new transform values.
// We move the background in the opposite direction of the mouse.
const moveX = -(x * intensity);
const moveY = -(y * intensity);
// Apply the transform to the background element
bg.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});
</script>
</body>
</html>
|