Skip to content

Feat/frontend update #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DaTiC0 merged 3 commits into from
May 4, 2026
Merged

Feat/frontend update #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b3d8654
style: update button styles and add new elements for better UI consis…
DaTiC0 May 4, 2026
46e97c5
feat: add wifi icon to icons.svg for enhanced UI elements
DaTiC0 May 4, 2026
62c5ae7
fix: address CSS review feedback - danger token, remove duplicate cla…
Copilot May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions static/md3.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
--border: rgba(255, 255, 255, 0.1);
--accent: #a855f7;
--accent-secondary: #ec4899;
--danger: #ef4444;

--header-gradient: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
--widget-gradient: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
Expand Down Expand Up @@ -201,9 +202,11 @@ svg { width: 100%; height: 100%; display: block; max-width: 100%; max-height: 10
.page-wrap { max-width: 1000px; margin: 3rem auto; padding: 0 2rem; }
.card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow-lg); }

.md-input { width: 100%; background: var(--bg-widget); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; color: #fff; font-size: 1.1rem; margin-bottom: 1.5rem; transition: border-color 0.2s; }
.md-input { width: 100%; background: var(--bg-widget); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; color: var(--text-primary); caret-color: var(--text-primary); font-size: 1.1rem; margin-bottom: 1.5rem; transition: border-color 0.2s; }
.md-input::placeholder { color: var(--text-secondary); opacity: 1; }
.md-input:focus { border-color: var(--accent); outline: none; }
.md-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; background: var(--header-gradient); border: none; border-radius: 16px; padding: 1.25rem; color: #fff; font-weight: 800; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; }
.md-button--compact { width: auto; padding: 0.75rem 2rem; }
.md-button:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4); }

.status-pill--active { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
Expand Down Expand Up @@ -252,11 +255,15 @@ svg { width: 100%; height: 100%; display: block; max-width: 100%; max-height: 10
.auth-icon { width: 40px; height: 40px; }
.auth-client-info { background: var(--bg-widget); border-radius: 16px; padding: 1.5rem; text-align: left; border: 1px solid var(--border); }

.u-ghost-button { background: var(--bg-widget) !important; color: var(--text-secondary) !important; }
.accent-text { color: var(--accent); }
.accent-checkbox { accent-color: var(--accent); }
.u-danger-button { background: var(--danger); color: #fff; border: none; }
.u-ghost-button { background: var(--bg-widget) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; }

@gemini-code-assist gemini-code-assist Bot May 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The use of !important is generally discouraged because it overrides the natural CSS cascade and makes future styling adjustments difficult. Since .u-ghost-button is defined after .md-button, it will naturally override the base styles when both classes are applied to the same element. Consider removing these flags.

.u-ghost-button { background: var(--bg-widget); border: 1px solid var(--border); color: var(--text-secondary); }

.u-margin-left-auto { margin-left: auto; }
.u-padding-top-2 { padding-top: 2rem; }
.u-border-top { border-top: 1px solid var(--border); }
.u-margin-bottom-05 { margin-bottom: 0.5rem; }
.u-opacity-6 { opacity: 0.6; }
.u-font-weight-900 { font-weight: 900; }
.u-font-size-lg { font-size: 1.5rem; }
.u-font-size-sm { font-size: 0.8rem; }
Expand Down
2 changes: 1 addition & 1 deletion templates/device_status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% block content %}
<div class="dash-container">
<!-- Header Section -->
<section class="summary-box summary-box--full">
<section class="summary-box span-full">
<div class="dash-header-inline">
<div>
<a href="{{ url_for('routes.devices') }}" class="accent-text flex-row u-margin-bottom-1">
Expand Down
4 changes: 4 additions & 0 deletions templates/devices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ <h3 class="u-margin-bottom-1">No devices found</h3>
</tbody>
</table>
</div>

<div class="flex-row u-margin-top-2">
<a href="{{ url_for('routes.index') }}" class="md-button md-button--compact u-ghost-button">Back to Dashboard</a>
</div>
</section>
</div>
{% endblock %}
3 changes: 3 additions & 0 deletions templates/icons.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,10 @@ <h3 class="text-center">Power Usage</h3>
<div class="toggle-switch toggle-switch--on"></div>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
<div class="flex-column items-center">
<svg class="u-icon-hero color-light"><use xlink:href="#icon-bulb"></use></svg>
<span class="font-bold">Main Studio</span>
<div class="flex-column items-center">
<svg class="u-icon-hero color-light"><use xlink:href="#icon-bulb"></use></svg>
<span class="font-bold">Main Studio</span>
</div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions templates/mqtt_log.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ <h1>MQTT Monitor</h1>
</div>

<div class="flex-row u-margin-top-2">
<button class="md-button" style="width: auto; padding: 0.75rem 2rem; background: var(--bg-widget);" onclick="location.reload()">Refresh Log</button>
<a href="{{ url_for('routes.index') }}" class="md-button" style="width: auto; padding: 0.75rem 2rem; background: transparent; border: 1px solid var(--border);">Back to Dashboard</a>
<button class="md-button md-button--compact u-ghost-button" onclick="location.reload()">Refresh Log</button>
<a href="{{ url_for('routes.index') }}" class="md-button md-button--compact u-ghost-button">Back to Dashboard</a>
</div>
</section>
</div>
Expand Down
Loading