scayac
/
pySonnerie
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

refactor: Remove unused configuration and styles; inline CSS in base.html

master
scayac 1 month ago
parent
2b9292381c
commit
7c8cb69da5
5 changed files with 458 additions and 493 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      backend/data/conf.json
  2. BIN
      frontend/app/__pycache__/routes.cpython-312.pyc
  3. 2
      frontend/app/routes.py
  4. 455
      frontend/app/static/css/style.css
  5. 458
      frontend/app/templates/base.html

36
backend/data/conf.json
Unescape View File

@ -1,36 +0,0 @@
{
"server": {
"host": "0.0.0.0",
"port": 8443,
"tls_cert": "certs/cert.pem",
"tls_key": "certs/key.pem"
},
"auth": {
"username": "admin",
"password": "admin"
},
"serial": {
"enabled": false,
"port": "/dev/ttyACM0",
"baudrate": 115200,
"timeout": 1
},
"triggers": {
"GPIO3": {
"name": "Test",
"type": "GPIO3",
"music_file": "SONNERIE A.mp3",
"start_seconds": 0.0,
"end_seconds": null,
"volume": 80
},
"GPIO4": {
"name": "Test",
"type": "GPIO4",
"music_file": "SONNERIE A.mp3",
"start_seconds": 0.0,
"end_seconds": null,
"volume": 80
}
}
}

BIN
frontend/app/__pycache__/routes.cpython-312.pyc
View File

Binary file not shown.

2
frontend/app/routes.py
Unescape View File

@ -21,7 +21,7 @@ from werkzeug.utils import secure_filename
from .backend_client import BackendApiError, BackendClient, read_default_backend_url from .backend_client import BackendApiError, BackendClient, read_default_backend_url
ui = Blueprint("ui", __name__, template_folder="templates", static_folder="static") ui = Blueprint("ui", __name__, template_folder="templates")
GPIO_PATTERN = re.compile(r"^GPIO\d+$") GPIO_PATTERN = re.compile(r"^GPIO\d+$")
ALLOWED_AUDIO_EXTENSIONS = {".mp3", ".wav", ".ogg", ".flac", ".aac", ".m4a"} ALLOWED_AUDIO_EXTENSIONS = {".mp3", ".wav", ".ogg", ".flac", ".aac", ".m4a"}

455
frontend/app/static/css/style.css
Unescape View File

@ -1,455 +0,0 @@
:root {
--bg: #f8f6ef;
--ink: #1f1c1a;
--panel: #fffef9;
--brand: #0f6f63;
--brand-strong: #0b544b;
--accent: #d66d2d;
--danger: #b13a2e;
--line: #d8d2c3;
--muted: #665e57;
--shadow: 0 12px 40px rgba(45, 37, 23, 0.12);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
font-family: "Noto Sans", "DejaVu Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: var(--ink);
background:
radial-gradient(circle at 15% -5%, #ffe8cc 0%, transparent 40%),
radial-gradient(circle at 100% 100%, #d5efe6 0%, transparent 40%),
var(--bg);
overflow-x: hidden;
}
h1,
h2,
h3 {
font-family: "Noto Sans", "DejaVu Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
margin: 0 0 0.4rem;
}
.muted {
color: var(--muted);
}
.bg-orb {
position: fixed;
border-radius: 999px;
pointer-events: none;
filter: blur(4px);
z-index: -1;
}
.bg-orb-one {
width: 260px;
height: 260px;
background: rgba(214, 109, 45, 0.25);
top: -60px;
right: -40px;
}
.bg-orb-two {
width: 220px;
height: 220px;
background: rgba(15, 111, 99, 0.18);
bottom: -70px;
left: -40px;
}
.reveal {
animation: reveal-up 0.45s ease both;
}
.delay-1 {
animation-delay: 0.05s;
}
.delay-2 {
animation-delay: 0.11s;
}
.delay-3 {
animation-delay: 0.16s;
}
@keyframes reveal-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flash-stack {
position: fixed;
top: 1rem;
right: 1rem;
display: grid;
gap: 0.5rem;
z-index: 50;
}
.flash {
padding: 0.7rem 0.95rem;
border-radius: 12px;
box-shadow: var(--shadow);
font-size: 0.9rem;
max-width: min(82vw, 420px);
opacity: 1;
transform: translateY(0);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.flash.is-hiding {
opacity: 0;
transform: translateY(-6px);
}
.flash-success {
background: #e3f7ef;
border: 1px solid #9cdcbc;
}
.flash-error {
background: #fdeceb;
border: 1px solid #f2b2ad;
}
.flash-info {
background: #edf4ff;
border: 1px solid #bed4f9;
}
.auth-wrap {
min-height: 100vh;
display: grid;
place-items: center;
padding: 1rem;
}
.auth-card {
width: min(560px, 100%);
background: var(--panel);
border: 1px solid var(--line);
box-shadow: var(--shadow);
border-radius: 22px;
padding: 2rem;
}
.auth-card h1 {
margin-bottom: 2rem;
}
.auth-inline-error {
margin: -1rem 0 1rem;
padding: 0.65rem 0.75rem;
border-radius: 10px;
border: 1px solid #f2b2ad;
background: #fdeceb;
color: #7a1f16;
font-size: 0.9rem;
}
.form-grid {
display: grid;
gap: 0.9rem;
}
.form-grid > * {
min-width: 0;
}
label {
display: grid;
gap: 0.4rem;
font-size: 0.9rem;
}
input,
button {
border-radius: 12px;
border: 1px solid var(--line);
font: inherit;
max-width: 100%;
}
input {
display: block;
width: 100%;
background: #fff;
padding: 0.65rem 0.75rem;
}
input[type="file"] {
min-width: 0;
}
button,
.small-button,
.ghost-link {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.08s ease, background-color 0.2s ease;
}
button {
background: var(--brand);
color: #fff;
padding: 0.65rem 0.85rem;
border: 0;
}
button:hover,
.small-button:hover,
.ghost-link:hover {
transform: translateY(-1px);
}
button.danger {
background: var(--danger);
}
button.small {
padding: 0.45rem 0.6rem;
font-size: 0.82rem;
}
.topbar {
margin: 1.2rem;
padding: 1rem;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.topbar-actions {
display: flex;
align-items: center;
gap: 0.65rem;
}
.ghost-link {
padding: 0.65rem 0.85rem;
border-radius: 12px;
border: 1px solid var(--line);
color: var(--ink);
}
.dashboard-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(12, minmax(0, 1fr));
padding: 0 1.2rem 1.2rem;
}
.panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
padding: 1rem;
box-shadow: var(--shadow);
}
.panel:nth-child(1) {
grid-column: span 4;
}
.panel:nth-child(2) {
grid-column: span 8;
}
.panel:nth-child(3) {
grid-column: span 12;
}
.time-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.time-row > * {
min-width: 0;
}
.volume-row {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.volume-row input[type="range"] {
width: 100%;
accent-color: var(--brand);
}
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border-bottom: 1px solid var(--line);
text-align: left;
padding: 0.45rem;
font-size: 0.9rem;
}
.trigger-row {
cursor: pointer;
}
.trigger-row:hover {
background: #f7f2e6;
}
.inline-form {
display: inline-block;
margin-right: 0.35rem;
}
.upload-row {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-bottom: 0.75rem;
}
.audio-player-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.75rem;
margin-bottom: 0.8rem;
background: #fff;
}
#browser-audio-player {
width: 100%;
margin-top: 0.35rem;
}
.audio-time {
margin: 0.5rem 0 0;
font-size: 0.9rem;
color: var(--muted);
}
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 18, 15, 0.45);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 120;
}
.modal-backdrop.is-open {
display: flex;
}
.modal-card {
width: min(460px, 100%);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow);
padding: 1rem;
}
.modal-actions {
margin-top: 0.9rem;
display: flex;
justify-content: flex-end;
gap: 0.6rem;
}
.audio-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.audio-list li {
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.7rem;
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: center;
background: #fff;
}
.audio-actions {
display: flex;
align-items: center;
gap: 0.45rem;
}
.small-button {
border: 1px solid var(--line);
border-radius: 10px;
padding: 0.45rem 0.6rem;
font-size: 0.82rem;
color: var(--ink);
background: #fff;
}
@media (max-width: 1080px) {
.panel:nth-child(1),
.panel:nth-child(2),
.panel:nth-child(3) {
grid-column: span 12;
}
}
@media (max-width: 640px) {
.topbar {
margin: 0.8rem;
flex-direction: column;
align-items: flex-start;
}
.dashboard-grid {
padding: 0 0.8rem 0.8rem;
}
.audio-list li {
flex-direction: column;
align-items: flex-start;
}
.time-row {
grid-template-columns: 1fr;
}
}

458
frontend/app/templates/base.html
Unescape View File

@ -4,7 +4,463 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>pySonnerie - Interface de controle</title> <title>pySonnerie - Interface de controle</title>
<link rel="stylesheet" href="{{ url_for('ui.static', filename='css/style.css') }}" /> <style>
:root {
--bg: #f8f6ef;
--ink: #1f1c1a;
--panel: #fffef9;
--brand: #0f6f63;
--brand-strong: #0b544b;
--accent: #d66d2d;
--danger: #b13a2e;
--line: #d8d2c3;
--muted: #665e57;
--shadow: 0 12px 40px rgba(45, 37, 23, 0.12);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
font-family: "Noto Sans", "DejaVu Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: var(--ink);
background:
radial-gradient(circle at 15% -5%, #ffe8cc 0%, transparent 40%),
radial-gradient(circle at 100% 100%, #d5efe6 0%, transparent 40%),
var(--bg);
overflow-x: hidden;
}
h1,
h2,
h3 {
font-family: "Noto Sans", "DejaVu Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
margin: 0 0 0.4rem;
}
.muted {
color: var(--muted);
}
.bg-orb {
position: fixed;
border-radius: 999px;
pointer-events: none;
filter: blur(4px);
z-index: -1;
}
.bg-orb-one {
width: 260px;
height: 260px;
background: rgba(214, 109, 45, 0.25);
top: -60px;
right: -40px;
}
.bg-orb-two {
width: 220px;
height: 220px;
background: rgba(15, 111, 99, 0.18);
bottom: -70px;
left: -40px;
}
.reveal {
animation: reveal-up 0.45s ease both;
}
.delay-1 {
animation-delay: 0.05s;
}
.delay-2 {
animation-delay: 0.11s;
}
.delay-3 {
animation-delay: 0.16s;
}
@keyframes reveal-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flash-stack {
position: fixed;
top: 1rem;
right: 1rem;
display: grid;
gap: 0.5rem;
z-index: 50;
}
.flash {
padding: 0.7rem 0.95rem;
border-radius: 12px;
box-shadow: var(--shadow);
font-size: 0.9rem;
max-width: min(82vw, 420px);
opacity: 1;
transform: translateY(0);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.flash.is-hiding {
opacity: 0;
transform: translateY(-6px);
}
.flash-success {
background: #e3f7ef;
border: 1px solid #9cdcbc;
}
.flash-error {
background: #fdeceb;
border: 1px solid #f2b2ad;
}
.flash-info {
background: #edf4ff;
border: 1px solid #bed4f9;
}
.auth-wrap {
min-height: 100vh;
display: grid;
place-items: center;
padding: 1rem;
}
.auth-card {
width: min(560px, 100%);
background: var(--panel);
border: 1px solid var(--line);
box-shadow: var(--shadow);
border-radius: 22px;
padding: 2rem;
}
.auth-card h1 {
margin-bottom: 2rem;
}
.auth-inline-error {
margin: -1rem 0 1rem;
padding: 0.65rem 0.75rem;
border-radius: 10px;
border: 1px solid #f2b2ad;
background: #fdeceb;
color: #7a1f16;
font-size: 0.9rem;
}
.form-grid {
display: grid;
gap: 0.9rem;
}
.form-grid > * {
min-width: 0;
}
label {
display: grid;
gap: 0.4rem;
font-size: 0.9rem;
}
input,
button {
border-radius: 12px;
border: 1px solid var(--line);
font: inherit;
max-width: 100%;
}
input {
display: block;
width: 100%;
background: #fff;
padding: 0.65rem 0.75rem;
}
input[type="file"] {
min-width: 0;
}
button,
.small-button,
.ghost-link {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.08s ease, background-color 0.2s ease;
}
button {
background: var(--brand);
color: #fff;
padding: 0.65rem 0.85rem;
border: 0;
}
button:hover,
.small-button:hover,
.ghost-link:hover {
transform: translateY(-1px);
}
button.danger {
background: var(--danger);
}
button.small {
padding: 0.45rem 0.6rem;
font-size: 0.82rem;
}
.topbar {
margin: 1.2rem;
padding: 1rem;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.topbar-actions {
display: flex;
align-items: center;
gap: 0.65rem;
}
.ghost-link {
padding: 0.65rem 0.85rem;
border-radius: 12px;
border: 1px solid var(--line);
color: var(--ink);
}
.dashboard-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(12, minmax(0, 1fr));
padding: 0 1.2rem 1.2rem;
}
.panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
padding: 1rem;
box-shadow: var(--shadow);
}
.panel:nth-child(1) {
grid-column: span 4;
}
.panel:nth-child(2) {
grid-column: span 8;
}
.panel:nth-child(3) {
grid-column: span 12;
}
.time-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.time-row > * {
min-width: 0;
}
.volume-row {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.volume-row input[type="range"] {
width: 100%;
accent-color: var(--brand);
}
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border-bottom: 1px solid var(--line);
text-align: left;
padding: 0.45rem;
font-size: 0.9rem;
}
.trigger-row {
cursor: pointer;
}
.trigger-row:hover {
background: #f7f2e6;
}
.inline-form {
display: inline-block;
margin-right: 0.35rem;
}
.upload-row {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-bottom: 0.75rem;
}
.audio-player-card {
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.75rem;
margin-bottom: 0.8rem;
background: #fff;
}
#browser-audio-player {
width: 100%;
margin-top: 0.35rem;
}
.audio-time {
margin: 0.5rem 0 0;
font-size: 0.9rem;
color: var(--muted);
}
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 18, 15, 0.45);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 120;
}
.modal-backdrop.is-open {
display: flex;
}
.modal-card {
width: min(460px, 100%);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow);
padding: 1rem;
}
.modal-actions {
margin-top: 0.9rem;
display: flex;
justify-content: flex-end;
gap: 0.6rem;
}
.audio-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.6rem;
}
.audio-list li {
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.7rem;
display: flex;
justify-content: space-between;
gap: 0.8rem;
align-items: center;
background: #fff;
}
.audio-actions {
display: flex;
align-items: center;
gap: 0.45rem;
}
.small-button {
border: 1px solid var(--line);
border-radius: 10px;
padding: 0.45rem 0.6rem;
font-size: 0.82rem;
color: var(--ink);
background: #fff;
}
@media (max-width: 1080px) {
.panel:nth-child(1),
.panel:nth-child(2),
.panel:nth-child(3) {
grid-column: span 12;
}
}
@media (max-width: 640px) {
.topbar {
margin: 0.8rem;
flex-direction: column;
align-items: flex-start;
}
.dashboard-grid {
padding: 0 0.8rem 0.8rem;
}
.audio-list li {
flex-direction: column;
align-items: flex-start;
}
.time-row {
grid-template-columns: 1fr;
}
}
</style>
</head> </head>
<body> <body>
<div class="bg-orb bg-orb-one"></div> <div class="bg-orb bg-orb-one"></div>

Write Preview
Loading…
Cancel
Save