Spaces:
Running
Running
File size: 7,265 Bytes
9b9128f |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile | Customization Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.profile-pic {
transition: all 0.3s ease;
}
.profile-pic:hover {
transform: scale(1.05);
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<div class="container mx-auto px-4 py-8">
<header class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold flex items-center">
<i data-feather="user" class="mr-2 text-indigo-400"></i>
My Profile
</h1>
<a href="MyGarageView.html" class="flex items-center">
<i data-feather="home" class="mr-2"></i>
<span>Back to Garage</span>
</a>
</header>
<div class="bg-gray-800 rounded-xl p-8 shadow-lg mb-8">
<div class="flex flex-col md:flex-row gap-8">
<!-- Profile Picture Column -->
<div class="md:w-1/3 flex flex-col items-center">
<div class="relative group mb-4">
<img src="http://static.photos/people/200x200/1" alt="Profile"
class="w-32 h-32 rounded-full border-4 border-indigo-500 profile-pic">
<button class="absolute bottom-0 right-0 bg-indigo-600 rounded-full p-2 hover:bg-indigo-700 transition-all">
<i data-feather="camera" class="w-5 h-5"></i>
</button>
</div>
<h1 class="text-2xl font-bold">Racer123</h1>
<p class="text-gray-400 mb-4">Customization Enthusiast</p>
<div class="flex gap-4">
<div class="stat-card bg-gray-700 px-4 py-2 rounded-lg text-center">
<div class="text-sm text-gray-400">Friends</div>
<div class="text-xl font-bold">42</div>
</div>
<div class="stat-card bg-gray-700 px-4 py-2 rounded-lg text-center">
<div class="text-sm text-gray-400">Cars</div>
<div class="text-xl font-bold">7</div>
</div>
</div>
</div>
<!-- Profile Form Column -->
<div class="md:w-2/3">
<h2 class="text-xl font-semibold mb-6 border-b border-gray-700 pb-2">Profile Settings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div>
<label class="block text-gray-400 text-sm mb-2">Display Name</label>
<input type="text" value="Racer123" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-gray-400 text-sm mb-2">Email</label>
<input type="email" value="[email protected]" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-gray-400 text-sm mb-2">Website</label>
<input type="url" placeholder="https://" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-gray-400 text-sm mb-2">Location</label>
<input type="text" value="Los Angeles, CA" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
</div>
<div class="mb-8">
<label class="block text-gray-400 text-sm mb-2">Bio</label>
<textarea class="w-full bg-gray-700 rounded-lg px-4 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-indigo-500">Passionate about car customization and racing. Always looking for new ways to push my vehicles to the limit!</textarea>
</div>
<div class="flex justify-end">
<button class="bg-indigo-600 hover:bg-indigo-700 px-6 py-2 rounded-lg font-medium flex items-center">
<i data-feather="save" class="mr-2"></i> Save Changes
</button>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="bg-gray-800 rounded-xl p-6">
<h2 class="text-xl font-semibold mb-6">Recent Activity</h2>
<div class="space-y-4">
<div class="flex items-start gap-4">
<div class="bg-indigo-600 p-2 rounded-full">
<i data-feather="edit-2" class="w-5 h-5"></i>
</div>
<div>
<h3 class="font-medium">Updated HyperSport GT design</h3>
<p class="text-gray-400 text-sm">2 hours ago</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-green-600 p-2 rounded-full">
<i data-feather="zap" class="w-5 h-5"></i>
</div>
<div>
<h3 class="font-medium">Upgraded engine in Urban Drift Racer</h3>
<p class="text-gray-400 text-sm">1 day ago</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-purple-600 p-2 rounded-full">
<i data-feather="award" class="w-5 h-5"></i>
</div>
<div>
<h3 class="font-medium">Unlocked Tier 3 performance parts</h3>
<p class="text-gray-400 text-sm">3 days ago</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-yellow-600 p-2 rounded-full">
<i data-feather="users" class="w-5 h-5"></i>
</div>
<div>
<h3 class="font-medium">Added 3 new friends</h3>
<p class="text-gray-400 text-sm">1 week ago</p>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html> |