Scribd
Upload
5 views14 pages

Profile

The document is an HTML template for a profile page dedicated to the Supra GT-R, featuring a video background and a styled layout. It includes sections for user information, avatar upload, and account details, with interactive elements for editing information. The design utilizes CSS for aesthetics, including animations and responsive adjustments for mobile devices.

Uploaded by

thayhuanbao123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views14 pages

Profile

The document is an HTML template for a profile page dedicated to the Supra GT-R, featuring a video background and a styled layout. It includes sections for user information, avatar upload, and account details, with interactive elements for editing information. The design utilizes CSS for aesthetics, including animations and responsive adjustments for mobile devices.

Uploaded by

thayhuanbao123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 14

<!

DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Supra GT-R Profile</title>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap'
);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Rajdhani', sans-serif;
background: #0a0a0a;
color: #fff;
overflow-x: hidden;
position: relative;
}

.video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: cover;
opacity: 0.3;
}

.video-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(200, 200, 200, 0.05) 0%,
rgba(0,0,0,0.8) 100%);
z-index: -1;
}

.header {
background: linear-gradient(135deg, rgba(20,20,20,0.95) 0%, rgba(40,40,40,0.95)
100%);
backdrop-filter: blur(10px);
border-bottom: 2px solid #444;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 4px 20px rgba(255,255,255,0.08);
}
.header-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}

.logo {
font-family: 'Orbitron', monospace;
font-size: 1.8rem;
font-weight: 900;
color: #ccc;
text-shadow: 0 0 20px rgba(255,255,255,0.2);
letter-spacing: 2px;
}

.nav-links a {
position: relative;
padding-bottom: 4px;
overflow: hidden;
color: #fff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}

.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, #aaa, #fff, #aaa);
transition: width 0.4s ease-in-out;
}

.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links a.active:hover::after {
width: 100%;
}

.nav-links a:hover,
.nav-links a.active:hover {
color: #ccc;
text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
min-height: calc(100vh - 80px);
}
.profile-card {
background: linear-gradient(135deg, rgba(20,20,20,0.95) 0%, rgba(40,40,40,0.95)
100%);
backdrop-filter: blur(15px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 40px rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out;
}

.profile-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, rgba(255,255,255,0.1),
rgba(100,100,100,0.1));
border-radius: 22px;
z-index: -1;
animation: borderGlow 3s ease-in-out infinite alternate;
}

@keyframes borderGlow {
0% { opacity: 0.3; }
100% { opacity: 0.7; }
}

.profile-header {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}

.avatar-container {
position: relative;
}

.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #888;
object-fit: cover;
box-shadow: 0 0 30px rgba(255,255,255,0.2);
}

.avatar-upload {
position: absolute;
bottom: 0;
right: 0;
background: #666;
color: white;
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}

.avatar-upload:hover {
background: #888;
transform: scale(1.1);
}

.profile-info h1 {
font-family: 'Orbitron', monospace;
font-size: 2rem;
color: #ccc;
margin-bottom: 0.5rem;
text-shadow: 0 0 15px rgba(255,255,255,0.15);
}

.profile-info .subtitle {
font-size: 1.1rem;
color: #aaa;
margin-bottom: 1rem;
}

.profile-stats {
display: flex;
gap: 2rem;
}

.stat-item {
text-align: center;
}

.stat-number {
font-size: 1.5rem;
font-weight: 700;
color: #ccc;
}

.stat-label {
font-size: 0.9rem;
color: #999;
}

.profile-content {
display: grid;
grid-template-columns: 1.2fr 1.2fr; /* tăng chiều ngang mỗi khối */
gap: 1rem; /* giảm khoảng cách giữa chúng */
padding: 0 3rem; /* đẩy nhẹ ra rìa để bám vào nội dung */
}
.info-section {
background: rgba(30,30,30,0.8);
border-radius: 15px;
padding: 1.5rem;
border: 1px solid rgba(255,255,255,0.08);
}

.section-title {
font-family: 'Orbitron', monospace;
font-size: 1.3rem;
color: #ccc;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}

.info-item:last-child {
border-bottom: none;
}

.info-label {
font-weight: 600;
color: #ccc;
}

.info-value {
color: #fff;
font-weight: 500;
}

.edit-btn {
background: transparent;
border: 1px solid #666;
color: #aaa;
padding: 0.3rem 0.8rem;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}

.edit-btn:hover {
background: #555;
color: white;
box-shadow: 0 4px 12px rgba(255,255,255,0.08);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(5px);
z-index: 1000;
align-items: center;
justify-content: center;
}

.modal-content {
background: linear-gradient(135deg, rgba(20,20,20,0.95) 0%, rgba(40,40,40,0.95)
100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 15px;
padding: 2rem;
max-width: 500px;
width: 90%;
position: relative;
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}

.modal-title {
font-family: 'Orbitron', monospace;
color: #ccc;
font-size: 1.3rem;
}

.close-btn {
background: none;
border: none;
color: #ccc;
font-size: 1.5rem;
cursor: pointer;
transition: color 0.3s ease;
}

.close-btn:hover {
color: #fff;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-label {
display: block;
margin-bottom: 0.5rem;
color: #aaa;
font-weight: 600;
}

.form-input {
width: 100%;
padding: 0.8rem;
background: rgba(40,40,40,0.8);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: #fff;
font-size: 1rem;
transition: all 0.3s ease;
}

.form-input:focus {
outline: none;
border-color: #aaa;
box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

.form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
}

.btn {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}

.btn-primary {
background: #666;
color: white;
}

.btn-primary:hover {
background: #888;
box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}

.btn-secondary {
background: transparent;
border: 1px solid #666;
color: #ccc;
}

.btn-secondary:hover {
background: #555;
color: white;
}

@media (max-width: 768px) {


.profile-content {
grid-template-columns: 1fr;
}

.profile-header {
flex-direction: column;
text-align: center;
}

.profile-stats {
justify-content: center;
}

.container {
padding: 1rem;
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header-content {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}

.left-header {
text-align: left;
}

.center-header {
text-align: center;
}

@keyframes logoPulse {
0% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
50% { filter: drop-shadow(0 0 20px rgba(255,255,255,0.5)); }
100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); }
}

.logo-center {
height: 65px;
animation: logoPulse 3s infinite;
}
.nav-links {
display: flex;
justify-content: flex-end;
gap: 2rem;
}

.nav-links a {
position: relative;
padding-bottom: 4px;
overflow: hidden;
color: #fff;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}

.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, #aaa, #fff, #aaa);
transition: width 0.4s ease-in-out;
}

.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}

.profile-card {
max-width: none !important;
width: 100%;
padding: 3rem;
}

</style>
</head>
<body>
<!-- Video Background -->
<video class="video-background" autoplay muted loop>
<source src="pinterestdownloader.com-1748682210.921216.mp4"
type="video/mp4">
<!-- Thay YOUR_VIDEO_URL_HERE.mp4 bằng đường dẫn video của bạn -->
</video>
<div class="video-overlay"></div>

<!-- Header -->


<!-- Chèn phần <head> và các phần bạn đang dùng như video background ở đây -->
<header class="header">
<div class="header-content">
<div class="left-header">
<div class="logo">SUPRA GT-R</div>
</div>
<div class="center-header">
<img src="3dgifmaker65093.gif" alt="Toyota Logo" class="logo-center">
</div>
<nav class="nav-links">
<a href="#" class="active">Profile</a>
<a href="ManHinhChinh.html">Home</a>
<a href="#">Logout</a>
</nav>
</div>
</header>
<!-- Main Container -->
<div class="container">
<div class="profile-card">
<!-- Profile Header -->
<div class="profile-header">
<div class="avatar-container">
<img src="" alt="Avatar" class="avatar" id="avatarImg">
<button class="avatar-upload"
onclick="uploadAvatar()">📷</button>
<input type="file" id="avatarInput" accept="image/*"
style="display: none;">
</div>
<div class="profile-info">
<h1 id="displayName">Supra Driver</h1>
<div class="subtitle">Professional Racer</div>
<div class="profile-stats">
<div class="stat-item">
</div>
</div>
</div>
</div>

<!-- Profile Content -->


<div class="profile-content">
<!-- Account Information -->
<div class="info-section">
<div class="section-title">
🔐 Account Information
</div>
<div class="info-item">
<span class="info-label">Username:</span>
<div style="display: flex; align-items: center; gap:
1rem;">
<span class="info-value"
id="username">supradriver2024</span>
<button class="edit-btn"
onclick="editField('username')">Edit</button>
</div>
</div>
<div class="info-item">
<span class="info-label">Password:</span>
<div style="display: flex; align-items: center; gap:
1rem;">
<span class="info-value">••••••••</span>
<button class="edit-btn"
onclick="editField('password')">Change</button>
</div>
</div>
<div class="info-item">
<span class="info-label">Email:</span>
<div style="display: flex; align-items: center; gap:
1rem;">
<span class="info-value"
id="email">[email protected]</span>
<button class="edit-btn"
onclick="editField('email')">Edit</button>
</div>
</div>
<div class="info-item">
<span class="info-label">Phone:</span>
<div style="display: flex; align-items: center; gap:
1rem;">
<span class="info-value" id="phone">+84 123 456
789</span>
<button class="edit-btn"
onclick="editField('phone')">Edit</button>
</div>
</div>
</div>

<!-- Personal Information -->


<div class="info-section">
<div class="section-title">
👤 Personal Information
</div>
<div class="info-item">
<span class="info-label">Full Name:</span>
<div style="display: flex; align-items: center; gap:
1rem;">
<span class="info-value" id="fullname">Nguyễn Supra
Driver</span>
<button class="edit-btn"
onclick="editField('fullname')">Edit</button>
</div>
</div>
<div class="info-item">
<span class="info-label">Location:</span>
<span class="info-value">Ho Chi Minh City, Vietnam</span>
</div>
<div class="info-item">
<span class="info-label">Joined:</span>
<span class="info-value">January 2024</span>
</div>
</div>
</div>
</div>
</div>

<!-- Edit Modal -->


<div class="modal" id="editModal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalTitle">Edit Information</h3>
<button class="close-btn" onclick="closeModal()">&times;</button>
</div>
<form id="editForm">
<div class="form-group">
<label class="form-label" id="fieldLabel">Field:</label>
<input type="text" class="form-input" id="fieldInput" required>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary"
onclick="closeModal()">Cancel</button>
<button type="submit" class="btn btn-primary">Save
Changes</button>
</div>
</form>
</div>
</div>
<script>
// User data storage
let userData = {
username: 'supradriver2024',
email: '[email protected]',
phone: '+84 123 456 789',
fullname: 'Nguyễn Supra Driver',
avatar: 'https://via.placeholder.com/120x120/ff4500/ffffff?text=USER'
};

let currentEditField = '';

// Load user data on page load


window.onload = function() {
loadUserData();
};

function loadUserData() {
document.getElementById('username').textContent = userData.username;
document.getElementById('email').textContent = userData.email;
document.getElementById('phone').textContent = userData.phone;
document.getElementById('fullname').textContent = userData.fullname;
document.getElementById('displayName').textContent = userData.fullname;
document.getElementById('avatarImg').src = userData.avatar;
}

function editField(fieldName) {
currentEditField = fieldName;
const modal = document.getElementById('editModal');
const modalTitle = document.getElementById('modalTitle');
const fieldLabel = document.getElementById('fieldLabel');
const fieldInput = document.getElementById('fieldInput');

// Set modal content based on field


switch(fieldName) {
case 'username':
modalTitle.textContent = 'Edit Username';
fieldLabel.textContent = 'Username:';
fieldInput.value = userData.username;
fieldInput.type = 'text';
break;
case 'password':
modalTitle.textContent = 'Change Password';
fieldLabel.textContent = 'New Password:';
fieldInput.value = '';
fieldInput.type = 'password';
break;
case 'email':
modalTitle.textContent = 'Edit Email';
fieldLabel.textContent = 'Email Address:';
fieldInput.value = userData.email;
fieldInput.type = 'email';
break;
case 'phone':
modalTitle.textContent = 'Edit Phone Number';
fieldLabel.textContent = 'Phone Number:';
fieldInput.value = userData.phone;
fieldInput.type = 'tel';
break;
case 'fullname':
modalTitle.textContent = 'Edit Full Name';
fieldLabel.textContent = 'Full Name:';
fieldInput.value = userData.fullname;
fieldInput.type = 'text';
break;
}

modal.style.display = 'flex';
fieldInput.focus();
}

function closeModal() {
document.getElementById('editModal').style.display = 'none';
}

// Handle form submission


document.getElementById('editForm').addEventListener('submit', function(e)
{
e.preventDefault();
const newValue = document.getElementById('fieldInput').value;

if (newValue.trim() === '') {


alert('Please enter a valid value');
return;
}

// Update user data


if (currentEditField !== 'password') {
userData[currentEditField] = newValue;
}

// Update display
if (currentEditField === 'password') {
alert('Password changed successfully!');
} else {
document.getElementById(currentEditField).textContent = newValue;
if (currentEditField === 'fullname') {
document.getElementById('displayName').textContent = newValue;
}
}

closeModal();
});

// Avatar upload functionality


function uploadAvatar() {
document.getElementById('avatarInput').click();
}

document.getElementById('avatarInput').addEventListener('change',
function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const newAvatarUrl = e.target.result;
userData.avatar = newAvatarUrl;
document.getElementById('avatarImg').src = newAvatarUrl;
};
reader.readAsDataURL(file);
}
});

// Close modal when clicking outside


window.addEventListener('click', function(e) {
const modal = document.getElementById('editModal');
if (e.target === modal) {
closeModal();
}
});

// Add some interactive effects


document.addEventListener('DOMContentLoaded', function() {
// Smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target =
document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});

// Add hover effects to info items


document.querySelectorAll('.info-item').forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.background = 'rgba(255, 255, 255, 0.03)'; // ánh sáng trắng tinh tế
this.style.transition = 'all 0.3s ease';
});

item.addEventListener('mouseleave', function() {
this.style.background = 'transparent';
});
});
});
</script>
</body>
</html>

You might also like