Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Altın Temalı Giriş Sistemi</title>

<style>

:root {

--primary-gold: #FFD700;

--dark-gold: #B8860B;

--light-gold: #FFF8DC;

--accent-gold: #DAA520;

--text-primary: #2D1810;

--text-secondary: #8B4513;

--white: #FFFFFF;

--cream: #FDF5E6;

--shadow-gold: 0 8px 32px rgba(255, 215, 0, 0.3);

--shadow-dark: 0 15px 35px rgba(45, 24, 16, 0.2);

--gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);

--gradient-dark: linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #CD853F 100%);

--border-radius: 16px;

--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

background: var(--gradient-dark);

min-height: 100vh;

overflow-x: hidden;

position: relative;

}

body::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background:

radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),

radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.1) 0%, transparent 50%),

radial-gradient(circle at 40% 80%, rgba(218, 165, 32, 0.1) 0%, transparent 50%);

pointer-events: none;

}

.container-fluid {

padding: 20px;

position: relative;

z-index: 1;

}

.auth-container {

background: var(--white);

border-radius: 24px;

box-shadow: var(--shadow-dark);

overflow: hidden;

max-width: 1200px;

width: 100%;

min-height: 700px;

position: relative;

animation: slideUp 1s ease-out;

border: 3px solid var(--primary-gold);

}

/* Illustration Section */

.illustration-section {

position: relative;

background: var(--gradient-gold);

display: flex;

align-items: center;

justify-content: center;

min-height: 700px;

overflow: hidden;

}

.illustration {

position: relative;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

.golden-orb {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 200px;

height: 200px;

background: radial-gradient(circle, #FFD700, #FFA500, #FF8C00);

border-radius: 50%;

box-shadow:

0 0 50px rgba(255, 215, 0, 0.6),

inset 0 0 50px rgba(255, 255, 255, 0.2);

animation: pulse 3s ease-in-out infinite, rotate 20s linear infinite;

}

.crown-icon {

font-size: 80px;

color: var(--text-primary);

z-index: 2;

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

animation: float 4s ease-in-out infinite;

}

.floating-elements {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.floating-star {

position: absolute;

color: var(--white);

animation: twinkle 2s ease-in-out infinite;

}

.star-1 { top: 20%; left: 15%; font-size: 24px; animation-delay: 0s; }

.star-2 { top: 30%; right: 20%; font-size: 18px; animation-delay: 0.5s; }

.star-3 { bottom: 25%; left: 10%; font-size: 20px; animation-delay: 1s; }

.star-4 { bottom: 40%; right: 15%; font-size: 16px; animation-delay: 1.5s; }

/* Form Section */

.form-section {

display: flex;

align-items: center;

justify-content: center;

padding: 50px 40px;

min-height: 700px;

background: linear-gradient(45deg, var(--cream) 0%, var(--white) 100%);

}

.form-container {

width: 100%;

max-width: 450px;

}

.form-toggle {

display: flex;

background: var(--light-gold);

border-radius: var(--border-radius);

padding: 4px;

margin-bottom: 40px;

box-shadow: var(--shadow-gold);

}

.toggle-btn {

flex: 1;

padding: 12px;

border: none;

background: transparent;

border-radius: calc(var(--border-radius) - 4px);

font-weight: 600;

color: var(--text-secondary);

cursor: pointer;

transition: var(--transition);

}

.toggle-btn.active {

background: var(--gradient-gold);

color: var(--white);

box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);

transform: translateY(-1px);

}

.form-header {

text-align: center;

margin-bottom: 40px;

}

.welcome-title {

font-size: 36px;

font-weight: 800;

background: var(--gradient-gold);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: 12px;

animation: slideUp 0.8s ease-out 0.2s both;

}

.welcome-subtitle {

font-size: 16px;

color: var(--text-secondary);

font-weight: 400;

animation: slideUp 0.8s ease-out 0.4s both;

}

.auth-form {

animation: slideUp 0.8s ease-out 0.6s both;

}

.form-group {

margin-bottom: 24px;

}

.form-label {

display: block;

margin-bottom: 8px;

font-weight: 600;

color: var(--text-primary);

font-size: 14px;

}

.input-group {

position: relative;

display: flex;

border-radius: var(--border-radius);

overflow: hidden;

box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);

transition: var(--transition);

border: 2px solid transparent;

}

.input-group:focus-within {

border-color: var(--primary-gold);

box-shadow: var(--shadow-gold);

transform: translateY(-2px);

}

.input-group-text {

background: var(--light-gold);

border: none;

color: var(--text-secondary);

display: flex;

align-items: center;

justify-content: center;

width: 55px;

font-size: 18px;

transition: var(--transition);

}

.input-group:focus-within .input-group-text {

color: var(--dark-gold);

background: var(--primary-gold);

}

.form-control {

border: none;

padding: 18px;

font-size: 16px;

background: var(--white);

color: var(--text-primary);

transition: var(--transition);

flex: 1;

}

.form-control:focus {

outline: none;

box-shadow: none;

background: var(--cream);

}

.form-control::placeholder {

color: var(--text-secondary);

opacity: 0.7;

}

.password-toggle {

cursor: pointer;

background: var(--white);

transition: var(--transition);

}

.password-toggle:hover {

color: var(--primary-gold);

background: var(--light-gold);

}

.biometric-login {

display: flex;

align-items: center;

gap: 12px;

margin: 20px 0;

padding: 16px;

background: linear-gradient(45deg, var(--light-gold), var(--cream));

border-radius: var(--border-radius);

border: 2px dashed var(--accent-gold);

cursor: pointer;

transition: var(--transition);

}

.biometric-login:hover {

background: var(--light-gold);

transform: scale(1.02);

}

.biometric-icon {

font-size: 24px;

color: var(--dark-gold);

}

.form-options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 32px;

}

.form-check {

display: flex;

align-items: center;

}

.form-check-input {

margin-right: 8px;

accent-color: var(--primary-gold);

}

.form-check-label {

font-size: 14px;

color: var(--text-secondary);

cursor: pointer;

}

.forgot-password {

font-size: 14px;

color: var(--dark-gold);

text-decoration: none;

font-weight: 600;

transition: var(--transition);

}

.forgot-password:hover {

color: var(--primary-gold);

text-decoration: underline;

}

.auth-btn {

width: 100%;

background: var(--gradient-gold);

border: none;

border-radius: var(--border-radius);

padding: 18px;

color: var(--white);

font-size: 16px;

font-weight: 700;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

cursor: pointer;

transition: var(--transition);

position: relative;

overflow: hidden;

box-shadow: var(--shadow-gold);

text-transform: uppercase;

letter-spacing: 1px;

}

.auth-btn:hover {

transform: translateY(-3px);

box-shadow: 0 12px 40px rgba(255, 215, 0, 0.4);

}

.auth-btn:active {

transform: translateY(-1px);

}

.auth-btn::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

transition: var(--transition);

}

.auth-btn:hover::before {

left: 100%;

}

.divider {

text-align: center;

margin: 40px 0;

position: relative;

}

.divider::before {

content: '';

position: absolute;

top: 50%;

left: 0;

right: 0;

height: 2px;

background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);

}

.divider span {

background: var(--white);

padding: 0 25px;

color: var(--text-secondary);

font-size: 14px;

font-weight: 600;

position: relative;

}

.social-login {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 15px;

margin-bottom: 32px;

}

.social-btn {

border: 2px solid var(--accent-gold);

background: var(--white);

border-radius: var(--border-radius);

padding: 14px;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

cursor: pointer;

transition: var(--transition);

font-size: 14px;

font-weight: 600;

text-decoration: none;

color: var(--text-primary);

}

.social-btn:hover {

transform: translateY(-3px);

box-shadow: 0 8px 25px rgba(0,0,0,0.15);

color: var(--white);

}

.social-btn i {

font-size: 18px;

}

.google-btn:hover {

background: #db4437;

border-color: #db4437;

}

.facebook-btn:hover {

background: #4267B2;

border-color: #4267B2;

}

.twitter-btn:hover {

background: #1DA1F2;

border-color: #1DA1F2;

}

.linkedin-btn:hover {

background: #0077B5;

border-color: #0077B5;

}

.instagram-btn:hover {

background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

border-color: #bc1888;

}

.youtube-btn:hover {

background: #FF0000;

border-color: #FF0000;

}

.auth-switch {

text-align: center;

font-size: 14px;

color: var(--text-secondary);

}

.auth-switch-link {

color: var(--dark-gold);

text-decoration: none;

font-weight: 700;

transition: var(--transition);

}

.auth-switch-link:hover {

color: var(--primary-gold);

text-decoration: underline;

}

.form-hidden {

display: none;

}

/* Animations */

@keyframes slideUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

@keyframes float {

0%, 100% {

transform: translateY(0px) rotate(0deg);

}

50% {

transform: translateY(-15px) rotate(5deg);

}

@keyframes pulse {

0%, 100% {

transform: translate(-50%, -50%) scale(1);

box-shadow: 0 0 50px rgba(255, 215, 0, 0.6);

}

50% {

transform: translate(-50%, -50%) scale(1.1);

box-shadow: 0 0 80px rgba(255, 215, 0, 0.8);

}

@keyframes rotate {

from {

transform: translate(-50%, -50%) rotate(0deg);

}

to {

transform: translate(-50%, -50%) rotate(360deg);

}

@keyframes twinkle {

0%, 100% {

opacity: 0.5;

transform: scale(1);

}

50% {

opacity: 1;

transform: scale(1.2);

}

/* Loading States */

.auth-btn.loading {

pointer-events: none;

opacity: 0.8;

}

.auth-btn.loading::after {

content: '';

width: 20px;

height: 20px;

border: 2px solid transparent;

border-top: 2px solid var(--white);

border-radius: 50%;

animation: spin 1s linear infinite;

margin-left: 10px;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Error and Success States */

.form-control.error {

border-color: #ef4444;

background: rgba(239, 68, 68, 0.05);

}

.form-control.success {

border-color: #10b981;

background: rgba(16, 185, 129, 0.05);

}

.error-message {

color: #ef4444;

font-size: 12px;

margin-top: 6px;

display: none;

font-weight: 500;

}

.form-group.error .error-message {

display: block;

}

/* Toast Notifications */

.toast {

position: fixed;

top: 20px;

right: 20px;

background: var(--gradient-gold);

color: var(--white);

padding: 16px 20px;

border-radius: var(--border-radius);

box-shadow: var(--shadow-gold);

display: flex;

align-items: center;

gap: 10px;

font-size: 14px;

font-weight: 600;

z-index: 9999;

animation: slideInRight 0.4s ease-out;

}

@keyframes slideInRight {

from {

transform: translateX(100%);

opacity: 0;

}

to {

transform: translateX(0);

opacity: 1;

}

/* Responsive Design */

@media (max-width: 991px) {

.auth-container {

max-width: 600px;

}

.illustration-section {

min-height: 350px;

}

.form-section {

padding: 40px 30px;

}

.welcome-title {

font-size: 28px;

}

@media (max-width: 768px) {

.container-fluid {

padding: 15px;

}

.auth-container {

border-radius: 20px;

min-height: auto;

}

.illustration-section {

min-height: 280px;

}

.form-section {

padding: 30px 20px;

}

.welcome-title {

font-size: 24px;

}

.form-container {

max-width: 100%;

}

.golden-orb {

width: 150px;

height: 150px;

}

.crown-icon {

font-size: 60px;

}

.social-login {

grid-template-columns: 1fr;

}

@media (max-width: 480px) {

.form-header {

margin-bottom: 30px;

}

.welcome-title {

font-size: 22px;

}

.welcome-subtitle {

font-size: 14px;

}

.form-group {

margin-bottom: 20px;

}

.form-control {

padding: 16px;

font-size: 14px;

}

.auth-btn {

padding: 16px;

font-size: 14px;

}

.form-options {

flex-direction: column;

gap: 16px;

align-items: flex-start;

}

.form-toggle {

margin-bottom: 30px;

}

.toggle-btn {

padding: 10px;

font-size: 14px;

}

/* Premium Effects */

.shine-effect {

position: relative;

overflow: hidden;

}

.shine-effect::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

transition: var(--transition);

}

.shine-effect:hover::before {

left: 100%;

}

</style>

</head>

<body>

</div>

</div>

<i class="fas fa-sign-in-alt"></i> Oturum Aç

</button>

<i class="fas fa-user-plus"></i> Üye Ol

</button>

</div>

<h2 class="welcome-title">Hoş Geldiniz!</h2>

<p class="welcome-subtitle">Lütfen hesabınıza giriş yapın</p>

</div>

<label class="form-label">E-posta Adresi</label>

</span>

</div>

<label class="form-label">Şifre</label>

</span>

</span>

</div>

<span>Parmak izi ile giriş yap</span>

</div>

Beni hatırla

</label>

</div>

<a href="mailto:atillademir210@" class="forgot-password">Şifremi Unuttum?</a>

</div>

<span>Giriş Yap</span>

</button>

<span>veya sosyal medya ile devam et</span>

</div>

<span>Google</span>

</a>

<span>Facebook</span>

</a>

<span>Twitter</span>

</a>

<span>LinkedIn</span>

</a>

<span>Instagram</span>

</a>

<span>YouTube</span>

</a>

</div>

</form>

</div>

<h2 class="welcome-title">Aramıza Katılın!</h2>

<p class="welcome-subtitle">Yeni hesabınızı oluşturun</p>

</div>

<label class="form-label">Kullanıcı Adı</label>

</span>

</div>

<label class="form-label">E-posta Adresi</label>

</span>

</div>

<label class="form-label">Şifre</label>

</span>

<input type="password" class="form-control" id="registerPassword" placeholder="Şifrenizi girin" require

Mete'nin bir kodu

Recommended

Güvenli bir pastel dizin ile yapılmış kart dizini

Mete'nin bir kodu

Mete'nin bir kodu

HTML

CSS

JS

Recommended

Güvenli bir pastel dizin ile yapılmış kart dizini

Mete'nin bir kodu

Mete'nin bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS