サイバーパンクセピアログイン/サインアップコンポーネント
セピア/ブラウンの色調を使用したサイバーパンクにインスパイアされたネオンの美学を備えた、複雑で応答性の高いログイン/サインアップコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。
HTMLコード
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-900 dark:bg-gray-950 font-mono relative overflow-hidden">
<!-- Background Grid/Pattern -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
<div class="absolute inset-0 bg-repeat bg-[size:16px_16px] animate-[pulse_10s_infinite] dark:animate-[pulse_15s_infinite]" style="background-image: linear-gradient(to right, #2a1b0c 1px, transparent 1px), linear-gradient(to bottom, #2a1b0c 1px, transparent 1px);"></div>
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(42,27,12,0.5)_0%,transparent_70%)]"></div>
</div>
<!-- Main Card Container -->
<div class="relative z-10 w-full max-w-md mx-auto rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-[#2a1b0c] to-[#1a0f05]
dark:from-[#1a0f05] dark:to-black
border border-[#4a2e0e] dark:border-[#2a1b0c]
transform perspective-1000 rotateX-3 rotateY-1
animate-[glow_3s_infinite_alternate]">
<!-- Cyberpunk Border Effect -->
<div class="absolute inset-0 pointer-events-none rounded-xl" style="box-shadow: inset 0 0 15px rgba(255,165,0,0.3), 0 0 25px rgba(255,165,0,0.2) neon-glow-effect;"></div>
<div class="absolute inset-0 rounded-xl border border-transparent animate-[borderPulse_5s_infinite] dark:animate-[borderPulse_7s_infinite]" style="background: linear-gradient(45deg, rgba(255,165,0,0.5) 0%, rgba(200,100,0,0.5) 50%, rgba(255,165,0,0.5) 100%) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;"></div>
<div class="p-8 sm:p-10 relative z-20">
<div class="text-center mb-8">
<h1 class="text-4xl sm:text-5xl font-bold text-[#f7c58f] dark:text-[#ffd29e] mb-2 leading-tight tracking-wider flicker-text">
ACCESS TERMINAL
</h1>
<p class="text-[#a07a53] dark:text-[#c4ae93] text-sm sm:text-base">Initiate Protocol Login / Registration</p>
</div>
<!-- Tab Navigation -->
<div class="flex mb-8 border-b-2 border-[#4a2e0e] dark:border-[#2a1b0c]">
<button id="login-tab" class="flex-1 py-3 text-lg font-semibold text-[#f7c58f] dark:text-[#ffd29e]
border-b-4 border-[#ffab4a] dark:border-[#ff9933]
hover:text-white dark:hover:text-white
transition-colors duration-300
tab-active"
onclick="toggleTabs(this, 'login-form')">
LOGIN
</button>
<button id="signup-tab" class="flex-1 py-3 text-lg font-semibold text-[#a07a53] dark:text-[#c4ae93]
border-b-4 border-transparent
hover:text-white dark:hover:text-white
transition-colors duration-300"
onclick="toggleTabs(this, 'signup-form')">
SIGNUP
</button>
</div>
<!-- Login Form -->
<form id="login-form" class="space-y-6 tab-content">
<div>
<label for="username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> USERNAME
</label>
<input type="text" id="username" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Enter your ID" aria-label="Username">
</div>
<div>
<label for="password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> PASSWORD
</label>
<input type="password" id="password" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Access Key" aria-label="Password">
</div>
<div class="flex items-center justify-between text-sm">
<a href="#" class="text-[#ffab4a] hover:underline transition-colors duration-300">Forgot Password?</a>
<div class="flex items-center">
<input type="checkbox" id="remember" class="hidden peer">
<label for="remember" class="relative flex items-center cursor-pointer mr-2">
<span class="w-5 h-5 border-2 border-[#ffab4a] dark:border-[#ff9933] rounded
flex-shrink-0 mr-2 flex items-center justify-center
peer-checked:bg-[#ffab4a] dark:peer-checked:bg-[#ff9933]
peer-checked:border-[#ffab4a] dark:peer-checked:border-[#ff9933]
transition-all duration-200">
<svg class="w-3 h-3 text-[#3a2612] peer-checked:opacity-100 opacity-0 transition-opacity duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span class="text-white dark:text-[#ffd29e]">Remember Me</span>
</label>
</div>
</div>
<button type="submit" class="w-full py-3 rounded-md text-xl font-bold
bg-[#ffab4a] dark:bg-[#ff9933]
text-[#3a2612] dark:text-[#2a1b0c]
hover:bg-[#ffc58a] dark:hover:bg-[#ffb066]
transition-all duration-300
shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30
neon-button-effect">ENTER SYSTEM</button>
</form>
<!-- Signup Form (Hidden by default) -->
<form id="signup-form" class="space-y-6 tab-content hidden">
<div>
<label for="new-username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> NEW USERNAME
</label>
<input type="text" id="new-username" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Designate your ID" aria-label="New Username">
</div>
<div>
<label for="new-email" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> EMAIL ADDRESS
</label>
<input type="email" id="new-email" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Provide Matrix Coordinates" aria-label="Email Address">
</div>
<div>
<label for="new-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> NEW PASSWORD
</label>
<input type="password" id="new-password" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Set Access Key" aria-label="New Password">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
<span class="text-[#ffab4a]">//</span> CONFIRM PASSWORD
</label>
<input type="password" id="confirm-password" class="w-full p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#e0c29f] dark:text-[#f2e6d9]
border border-[#5a3b1a] dark:border-[#3a2612]
focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent
placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c]
shadow-inner-glow leading-normal"
placeholder="Re-enter Access Key" aria-label="Confirm Password">
</div>
<button type="submit" class="w-full py-3 rounded-md text-xl font-bold
bg-[#ffab4a] dark:bg-[#ff9933]
text-[#3a2612] dark:text-[#2a1b0c]
hover:bg-[#ffc58a] dark:hover:bg-[#ffb066]
transition-all duration-300
shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30
neon-button-effect">INITIATE REGISTRATION</button>
</form>
<p class="mt-8 text-center text-sm text-[#a07a53] dark:text-[#c4ae93]">
<span class="text-[#ffab4a] mr-1">//</span> STATUS: ONLINE. SYSTEM READY FOR INTERACTION.
</p>
<!-- Futuristic Social Login Section -->
<div class="mt-8 pt-6 border-t-2 border-[#4a2e0e] dark:border-[#2a1b0c] text-center">
<p class="text-sm text-[#f7c58f] dark:text-[#ffd29e] mb-4">Or Connect Via Integrated Networks:</p>
<div class="flex justify-center space-x-4">
<button class="flex items-center justify-center p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#ffab4a] dark:text-[#ff9933]
border border-[#5a3b1a] dark:border-[#3a2612]
hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612]
hover:text-white dark:hover:text-white
transition-colors duration-300
shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H10.5V9h3.75v9zM12 6.75a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"></path>
</svg>
<span class="hidden sm:inline">Network_ID</span>
</button>
<button class="flex items-center justify-center p-3 rounded-md
bg-[#3a2612] dark:bg-[#2a1b0c]
text-[#ffab4a] dark:text-[#ff9933]
border border-[#5a3b1a] dark:border-[#3a2612]
hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612]
hover:text-white dark:hover:text-white
transition-colors duration-300
shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22.54 6.75H1.46C.66 6.75 0 7.41 0 8.21v7.58c0 .8.66 1.46 1.46 1.46h21.08c.8 0 1.46-.66 1.46-1.46V8.21c0-.8-.66-1.46-1.46-1.46zM8.88 15.69c-3.13 0-5.68-.38-5.68-.38S2.22 13.56 2.22 12s1.08-3.31 1.08-3.31c0 0 2.55-.38 5.68-.38 2.06 0 4.1.28 5.86.81 1.03.31 2.37.89 3.01 1.34 1.33.91 1.63 2.15 1.63 2.15s-.35 1.33-1.63 2.15c-.64.45-1.98 1.03-3.01 1.34-1.76.53-3.8.81-5.86.81z"></path>
</svg>
<span class="hidden sm:inline">Data_Stream</span>
</button>
</div>
</div>
</div>
</div>
<!-- Global Styles & JS for component functionality -->
<style>
@keyframes flicker-text {
0%, 19.99%, 22%, 24%, 28%, 30%, 36%, 38% {
opacity: 1;
text-shadow: 0 0 7px #ffab4a, 0 0 10px #ffab4a, 0 0 15px #ffab4a;
}
20%, 21.99%, 24.01%, 27.99%, 30.01%, 35.99%, 38.01%, 100% {
opacity: 0.9;
text-shadow: none;
}
}
.flicker-text {
animation: flicker-text 3s infinite alternate;
}
@keyframes glow {
0% {
box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
}
50% {
box-shadow: 0 0 15px rgba(255,165,0,0.6), 0 0 30px rgba(255,165,0,0.4);
}
100% {
box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
}
}
.shadow-inner-glow {
box-shadow: inset 0 0 8px rgba(255,165,0,0.1);
}
.dark .shadow-inner-glow {
box-shadow: inset 0 0 8px rgba(255,165,0,0.05);
}
.neon-button-effect {
box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3), 0 0 30px rgba(255,165,0,0.2);
}
.dark .neon-button-effect {
box-shadow: 0 0 10px rgba(255,153,51,0.4), 0 0 20px rgba(255,153,51,0.3), 0 0 30px rgba(255,153,51,0.2);
}
@keyframes borderPulse {
0% {
border-color: rgba(255,165,0,0.5);
}
50% {
border-color: rgba(255,165,0,0.8);
}
100% {
border-color: rgba(255,165,0,0.5);
}
}
/* Tailwind utility for perspective transformation */
.perspective-1000 {
perspective: 1000px;
}
.rotateX-3 {
transform: rotateX(3deg);
}
.rotateY-1 {
transform: rotateY(1deg);
}
@keyframes pulse {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #0d0905;
}
}
</style>
<script>
function toggleTabs(activeTab, formId) {
// Deactivate all tabs and hide all forms
document.querySelectorAll('.tab-active').forEach(tab => {
tab.classList.remove('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
tab.classList.add('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
});
document.querySelectorAll('.tab-content').forEach(form => {
form.classList.add('hidden');
});
// Activate the clicked tab and show its corresponding form
activeTab.classList.add('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
activeTab.classList.remove('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
document.getElementById(formId).classList.remove('hidden');
}
// Initial setup: activate login tab on load
document.addEventListener('DOMContentLoaded', () => {
const loginTab = document.getElementById('login-tab');
if (loginTab) {
toggleTabs(loginTab, 'login-form');
}
});
</script>
</div>関連コンポーネント
レトロダッシュボードログイン/サインアップ
ダッシュボードのレトロ/ビンテージをテーマにしたログインおよびサインアップコンポーネントで、複雑なレイアウトとトライアドカラースキームを備えています。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。
Brutalist_Agri_Auth_Component
農業/農業Webサイト用のブルータリズムスタイルのログイン/サインアップコンポーネントで、温かみのある夕焼けの色調、ハイコントラスト、ダークモードをサポートする複雑なレイアウトが特徴です。