Enhanced UI

This commit is contained in:
Juan Pablo Corredor 2026-05-21 11:38:24 +02:00
parent 8a15410985
commit 09a69fb9d7
3 changed files with 30 additions and 14 deletions

5
.gitignore vendored
View File

@ -8,3 +8,8 @@ wheels/
# Virtual environments # Virtual environments
.venv .venv
# Tools
.agents/
.claude/
skills-lock.json

View File

@ -70,13 +70,21 @@ body {
background: url('/resources/main.jpg') center center / cover no-repeat fixed; background: url('/resources/main.jpg') center center / cover no-repeat fixed;
} }
.banner {
width: 100%;
background: rgba(40, 28, 8, 0.65);
backdrop-filter: blur(6px);
padding: 1.5rem 2rem 1.25rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
header { header {
text-align: center; text-align: center;
padding: 0.5rem 1rem 2rem;
} }
h1 { h1 {
font-size: 3.5rem; font-size: clamp(3rem, 5.5vw, 6rem);
font-weight: 600; font-weight: 600;
color: #fdf5e0; color: #fdf5e0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
@ -84,7 +92,7 @@ h1 {
} }
h2 { h2 {
font-size: 1.5rem; font-size: clamp(1.2rem, 2.2vw, 2.4rem);
font-weight: 600; font-weight: 600;
color: #fdf5e0; color: #fdf5e0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
@ -93,10 +101,10 @@ h2 {
.cards-row { .cards-row {
display: flex; display: flex;
gap: 8vw; gap: clamp(1.5rem, 5vw, 6rem);
justify-content: center; justify-content: center;
align-items: center; align-items: stretch;
padding: 0 2rem 3rem; padding: 3rem 2rem 3rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -104,9 +112,10 @@ h2 {
background: rgba(255, 248, 220, 0.92); background: rgba(255, 248, 220, 0.92);
border-radius: 12px; border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
width: 250px; width: clamp(260px, 22vw, 380px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
gap: 1rem; gap: 1rem;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -120,20 +129,20 @@ h2 {
} }
.card-icon { .card-icon {
height: 150px; height: clamp(140px, 14vw, 220px);
/*background: rgba(107, 90, 42, 0.15);*/ /*background: rgba(107, 90, 42, 0.15);*/
border-radius: 8px; border-radius: 8px;
border: 2px rgba(107, 90, 42, 0.3); border: 2px rgba(107, 90, 42, 0.3);
} }
.card-title { .card-title {
font-size: 1rem; font-size: clamp(1rem, 1.4vw, 1.35rem);
font-weight: 600; font-weight: 600;
color: #3b2a0e; color: #3b2a0e;
} }
.card-text { .card-text {
font-size: 0.875rem; font-size: clamp(0.875rem, 1.1vw, 1.1rem);
color: #5c4a2a; color: #5c4a2a;
line-height: 1.5; line-height: 1.5;
} }

View File

@ -23,10 +23,12 @@
<a class="link-btn" href="https://www.green-planet.it/" target="_blank" rel="noopener">Green planet</a> <a class="link-btn" href="https://www.green-planet.it/" target="_blank" rel="noopener">Green planet</a>
</nav> </nav>
<header> <div class="banner">
<h1>3a</h1> <header>
<h2>{{ t.subtitle }}</h2> <h1>3a</h1>
</header> <h2>{{ t.subtitle }}</h2>
</header>
</div>
<div class="cards-row"> <div class="cards-row">
<div class="action-card" data-action="iframe" data-src="{{ t.card3_src }}"> <div class="action-card" data-action="iframe" data-src="{{ t.card3_src }}">