Made forms beautiful.
This commit is contained in:
parent
748213538f
commit
a7d8613dd6
@ -36,7 +36,7 @@ html, body {
|
|||||||
|
|
||||||
/* General typography */
|
/* General typography */
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.8rem;
|
font-size: 2.2rem; /* Slightly larger heading */
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
@ -64,10 +64,10 @@ p {
|
|||||||
/* Card-like styling for sections */
|
/* Card-like styling for sections */
|
||||||
.card {
|
.card {
|
||||||
background-color: var(--card-background);
|
background-color: var(--card-background);
|
||||||
border-radius: 8px;
|
border-radius: 12px; /* Slightly more rounded corners */
|
||||||
box-shadow: 0 4px 12px var(--shadow-color);
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer, more prominent shadow */
|
||||||
padding: 2rem;
|
padding: 3rem; /* Increased padding */
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 35px; /* Increased margin */
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@ -211,6 +211,23 @@ nav .nav-links a:hover {
|
|||||||
background-color: var(--btn-primary-hover-bg);
|
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 content area */
|
||||||
main {
|
main {
|
||||||
flex-grow: 1; /* Allow main content to take available space */
|
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 */
|
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 */
|
/* Responsive adjustments for base.css */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
nav {
|
nav {
|
||||||
|
|||||||
@ -72,6 +72,41 @@
|
|||||||
margin-bottom: 10px;
|
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 {
|
.dashboard-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background-color: var(--card-background);
|
background-color: var(--card-background);
|
||||||
|
|||||||
@ -5,11 +5,17 @@
|
|||||||
<span>HomeBase Storage</span>
|
<span>HomeBase Storage</span>
|
||||||
</a>
|
</a>
|
||||||
<ul class="nav-links">
|
<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="/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>
|
<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>
|
</ul>
|
||||||
<a href="/register" class="btn-primary-nav" aria-label="Start your free trial">Start Your Free Trial</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -11,11 +11,11 @@
|
|||||||
<aside class="dashboard-sidebar">
|
<aside class="dashboard-sidebar">
|
||||||
<div class="sidebar-menu">
|
<div class="sidebar-menu">
|
||||||
<ul>
|
<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="/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> {# Placeholder icon #}
|
<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> {# Placeholder icon #}
|
<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> {# Placeholder icon #}
|
<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> {# Placeholder icon #}
|
<li><a href="#"><img src="/static/images/icon-professionals.svg" alt="Trash Icon" class="icon"> Trash</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -30,11 +30,28 @@
|
|||||||
</div>
|
</div>
|
||||||
<a href="/order" class="btn-primary" style="margin-top: 20px; display: block; text-align: center;">Manage Quota</a>
|
<a href="/order" class="btn-primary" style="margin-top: 20px; display: block; text-align: center;">Manage Quota</a>
|
||||||
</div>
|
</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>
|
</aside>
|
||||||
|
|
||||||
<section class="dashboard-content">
|
<section class="dashboard-content">
|
||||||
<div class="dashboard-content-header">
|
<div class="dashboard-content-header">
|
||||||
<h2>Your Data, Organized and Accessible</h2>
|
<h2>Welcome back, {{ user.full_name }}!</h2>
|
||||||
<div class="dashboard-actions">
|
<div class="dashboard-actions">
|
||||||
<button class="btn-primary">+ New</button>
|
<button class="btn-primary">+ New</button>
|
||||||
<button class="btn-outline">Download</button>
|
<button class="btn-outline">Download</button>
|
||||||
@ -59,21 +76,21 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<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>{{ user.email }}</td>
|
||||||
<td>2025-11-08</td>
|
<td>2025-11-08</td>
|
||||||
<td>256 MB</td>
|
<td>256 MB</td>
|
||||||
<td><span class="action-ellipsis">...</span></td>
|
<td><span class="action-ellipsis">...</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>{{ user.email }}</td>
|
||||||
<td>2025-11-07</td>
|
<td>2025-11-07</td>
|
||||||
<td>1.2 GB</td>
|
<td>1.2 GB</td>
|
||||||
<td><span class="action-ellipsis">...</span></td>
|
<td><span class="action-ellipsis">...</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<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>{{ user.email }}</td>
|
||||||
<td>2025-11-05</td>
|
<td>2025-11-05</td>
|
||||||
<td>512 MB</td>
|
<td>512 MB</td>
|
||||||
|
|||||||
@ -30,7 +30,7 @@ async def test_dashboard_get_authorized(client):
|
|||||||
resp = await client.get("/dashboard")
|
resp = await client.get("/dashboard")
|
||||||
assert resp.status == 200
|
assert resp.status == 200
|
||||||
text = await resp.text()
|
text = await resp.text()
|
||||||
assert "Your Data, Organized and Accessible" in text
|
assert "Welcome back, Test User!" in text
|
||||||
assert "My Files" in text
|
assert "My Files" in text
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user