Rodrigo Rodriguez (Pragmatismo)
f2624aef94
Update dashboard CSS to use new color scheme matching visual identity, replacing CSS variables with specific color values. Improved button hover state with background transition instead of opacity. Expanded layout.js with additional application sections including dashboard, editor, player, and settings to support new navigation structure.
74 lines
2.7 KiB
HTML
74 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Settings</title>
|
|
<link rel="stylesheet" href="../css/global.css">
|
|
<link rel="stylesheet" href="settings.css">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body x-data="settings">
|
|
<div id="main-content">
|
|
<div class="content-section active">
|
|
<div class="space-y-6 p-4">
|
|
<div>
|
|
<h2 class="text-lg font-medium">Profile</h2>
|
|
<p class="text-sm text-gray-500"></p>
|
|
</div>
|
|
<div class="border-t border-gray-200 my-4"></div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Username Field -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Username</label>
|
|
<input class="w-full p-2 border rounded"
|
|
x-model="username"
|
|
placeholder="Enter username" />
|
|
<template x-if="errors.username">
|
|
<p class="text-red-500 text-xs mt-1" x-text="errors.username"></p>
|
|
</template>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
This is your public display name. It can be your real name or a pseudonym.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Email Field -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<input type="email"
|
|
class="w-full p-2 border rounded"
|
|
x-model="email"
|
|
placeholder="Enter email" />
|
|
<template x-if="errors.email">
|
|
<p class="text-red-500 text-xs mt-1" x-text="errors.email"></p>
|
|
</template>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
You can manage verified email addresses in your email settings.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bio Field -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Bio</label>
|
|
<textarea class="w-full p-2 border rounded"
|
|
x-model="bio"
|
|
rows="4"
|
|
placeholder="Tell us a little bit about yourself"></textarea>
|
|
<template x-if="errors.bio">
|
|
<p class="text-red-500 text-xs mt-1" x-text="errors.bio"></p>
|
|
</template>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
You can @mention other users and organizations to link to them.
|
|
</p>
|
|
</div>
|
|
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
@click="submitForm">
|
|
Update profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="settings.js"></script>
|
|
</body>
|
|
</html>
|