Made forms beautiful.

Browse Source
This commit is contained in:
retoor 2025-11-08 20:33:53 +01:00
parent 748213538f
commit a7d8613dd6
5 changed files with 169 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
retoors/static/css/base.css
View File

@ -36,7 +36,7 @@ html, body {
/* General typography */
h1 {
font-size: 2.8rem;
font-size: 2.2rem; /* Slightly larger heading */
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-color);
@ -64,10 +64,10 @@ p {
/* Card-like styling for sections */
.card {
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 12px var(--shadow-color);
padding: 2rem;
margin-bottom: 1.5rem;
border-radius: 12px; /* Slightly more rounded corners */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer, more prominent shadow */
padding: 3rem; /* Increased padding */
margin-bottom: 35px; /* Increased margin */
}
.container {
@ -211,6 +211,23 @@ nav .nav-links a:hover {
background-color: var(--btn-primary-hover-bg);
}
.btn-outline-nav {
background-color: transparent;
color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-outline-nav:hover {
background-color: rgba(74, 144, 226, 0.1);
color: var(--primary-color);
border-color: var(--primary-color);
}
/* Main content area */
main {
flex-grow: 1; /* Allow main content to take available space */
@ -222,6 +239,82 @@ main {
background-color: var(--background-color); /* Light background for main content */
}
/* Form specific styles */
.form-container {
max-width: 450px;
margin: 50px auto;
background-color: var(--card-background);
border-radius: 12px; /* Slightly more rounded corners */
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer, more prominent shadow */
padding: 3rem; /* Increased padding */
text-align: left;
}
.form-container h2 {
text-align: center;
margin-bottom: 35px; /* Increased margin */
color: var(--text-color);
font-size: 2.2rem; /* Slightly larger heading */
font-weight: 700;
}
.form-group {
margin-bottom: 25px; /* Increased margin */
}
.form-group label {
display: block;
margin-bottom: 10px; /* Increased margin */
font-weight: 600; /* Slightly bolder label */
color: var(--text-color);
font-size: 1rem; /* Slightly larger font size */
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="number"] {
width: 100%;
padding: 14px 16px; /* Increased padding */
border: 1px solid var(--border-color);
border-radius: 8px; /* More rounded input fields */
font-size: 1rem; /* Consistent font size */
color: var(--text-color); /* Ensure text color is readable */
background-color: var(--background-color); /* Light background for inputs */
box-sizing: border-box;
transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
border-color: var(--primary-color); /* Focus color */
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); /* Softer focus shadow */
outline: none;
}
.form-container .btn-primary {
width: 100%;
padding: 16px; /* Increased padding */
font-size: 1.1rem; /* Slightly larger font size */
margin-top: 30px; /* Increased margin */
border-radius: 8px; /* More rounded button */
font-weight: 600;
}
.error {
color: #D32F2F; /* Red for errors */
background-color: #FFEBEE; /* Light red background */
border: 1px solid #EF9A9A; /* Red border */
padding: 1rem 1.5rem; /* Increased padding */
margin-bottom: 1.5rem; /* Increased margin */
border-radius: 8px; /* Rounded error box */
font-size: 0.95rem;
font-weight: 500;
text-align: center;
}
/* Responsive adjustments for base.css */
@media (max-width: 768px) {
nav {

35
retoors/static/css/components/dashboard.css
View File

@ -72,6 +72,41 @@
margin-bottom: 10px;
}
.sidebar-notifications {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.sidebar-notifications h4 {
font-size: 1rem;
color: var(--text-color);
margin-bottom: 10px;
}
.sidebar-notifications ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-notifications ul li {
font-size: 0.9rem;
color: var(--light-text-color);
margin-bottom: 5px;
}
.sidebar-notifications p {
font-size: 0.9rem;
color: var(--light-text-color);
}
.sidebar-help {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.dashboard-content {
flex: 1;
background-color: var(--card-background);

12
retoors/templates/components/navigation.html
View File

@ -5,11 +5,17 @@
<span>HomeBase Storage</span>
</a>
<ul class="nav-links">
<li><a href="/features" aria-label="Features">Features</a></li>
<li><a href="/solutions" aria-label="Our Solutions">Solutions</a></li>
<li><a href="/pricing" aria-label="Pricing Plans">Pricing</a></li>
<li><a href="/reviews" aria-label="Customer Reviews">Reviews</a></li>
<li><a href="/security" aria-label="Security Information">Security</a></li>
<li><a href="/support" aria-label="Support Page">Support</a></li>
{% if request['user'] %}
<li><a href="/dashboard" aria-label="User Dashboard">Dashboard</a></li>
<li><a href="/logout" class="btn-primary-nav" aria-label="Logout">Logout</a></li>
{% else %}
<li><a href="/login" class="btn-outline-nav" aria-label="Sign In to your account">Sign In</a></li>
<li><a href="/register" class="btn-primary-nav" aria-label="Start your free trial">Start Your Free Trial</a></li>
{% endif %}
</ul>
<a href="/register" class="btn-primary-nav" aria-label="Start your free trial">Start Your Free Trial</a>
</nav>
</header>

35
retoors/templates/pages/dashboard.html
View File

@ -11,11 +11,11 @@
<aside class="dashboard-sidebar">
<div class="sidebar-menu">
<ul>
<li><a href="#" class="active"><img src="/static/images/icon-families.svg" alt="My Files Icon" class="icon"> My Files</a></li> {# Placeholder icon #}
<li><a href="#"><img src="/static/images/icon-professionals.svg" alt="Shared Icon" class="icon"> Shared with me</a></li> {# Placeholder icon #}
<li><a href="#"><img src="/static/images/icon-students.svg" alt="Recent Icon" class="icon"> Recent</a></li> {# Placeholder icon #}
<li><a href="#"><img src="/static/images/icon-families.svg" alt="Favorites Icon" class="icon"> Favorites</a></li> {# Placeholder icon #}
<li><a href="#"><img src="/static/images/icon-professionals.svg" alt="Trash Icon" class="icon"> Trash</a></li> {# Placeholder icon #}
<li><a href="/dashboard" class="active"><img src="/static/images/icon-families.svg" alt="My Files Icon" class="icon"> My Files</a></li>
<li><a href="#"><img src="/static/images/icon-professionals.svg" alt="Shared Icon" class="icon"> Shared with me</a></li>
<li><a href="#"><img src="/static/images/icon-students.svg" alt="Recent Icon" class="icon"> Recent</a></li>
<li><a href="#"><img src="/static/images/icon-families.svg" alt="Favorites Icon" class="icon"> Favorites</a></li>
<li><a href="#"><img src="/static/images/icon-professionals.svg" alt="Trash Icon" class="icon"> Trash</a></li>
</ul>
</div>
@ -30,11 +30,28 @@
</div>
<a href="/order" class="btn-primary" style="margin-top: 20px; display: block; text-align: center;">Manage Quota</a>
</div>
<div class="sidebar-notifications">
<h4>Notifications</h4>
{% if user.notifications %} {# Assuming user object has a notifications attribute #}
<ul>
{% for notification in user.notifications %}
<li>{{ notification }}</li>
{% endfor %}
</ul>
{% else %}
<p>No new notifications.</p>
{% endif %}
</div>
<div class="sidebar-help">
<a href="/support" class="btn-outline" style="display: block; text-align: center;">Help & Support</a>
</div>
</aside>
<section class="dashboard-content">
<div class="dashboard-content-header">
<h2>Your Data, Organized and Accessible</h2>
<h2>Welcome back, {{ user.full_name }}!</h2>
<div class="dashboard-actions">
<button class="btn-primary">+ New</button>
<button class="btn-outline">Download</button>
@ -59,21 +76,21 @@
</thead>
<tbody>
<tr>
<td><img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon"> documents.zip</td> {# Placeholder icon #}
<td><img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon"> documents.zip</td>
<td>{{ user.email }}</td>
<td>2025-11-08</td>
<td>256 MB</td>
<td><span class="action-ellipsis">...</span></td>
</tr>
<tr>
<td><img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon"> photos.zip</td> {# Placeholder icon #}
<td><img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon"> photos.zip</td>
<td>{{ user.email }}</td>
<td>2025-11-07</td>
<td>1.2 GB</td>
<td><span class="action-ellipsis">...</span></td>
</tr>
<tr>
<td><img src="/static/images/icon-students.svg" alt="File Icon" class="file-icon"> project_alpha.zip</td> {# Placeholder icon #}
<td><img src="/static/images/icon-students.svg" alt="File Icon" class="file-icon"> project_alpha.zip</td>
<td>{{ user.email }}</td>
<td>2025-11-05</td>
<td>512 MB</td>

2
tests/test_site.py
View File

@ -30,7 +30,7 @@ async def test_dashboard_get_authorized(client):
resp = await client.get("/dashboard")
assert resp.status == 200
text = await resp.text()
assert "Your Data, Organized and Accessible" in text
assert "Welcome back, Test User!" in text
assert "My Files" in text