juan/Fiera_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed to cards

Browse Source
This commit is contained in:
Juan Pablo Corredor 2026-05-19 16:01:04 +02:00
parent b85704c0c3
commit 60d5c84042
2 changed files with 75 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app/resources/css/style.css
View File

@ -9,54 +9,77 @@ body {
font-size: 16px; font-size: 16px;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
background: url('/resources/main.jpg') center center / cover no-repeat fixed; background: url('/resources/main.jpg') center center / cover no-repeat fixed;
} }
.card { header {
background: rgba(255, 248, 220, 0.92);
border-radius: 12px;
padding: 3rem 4rem;
text-align: center; text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); padding: 3rem 1rem 2rem;
max-width: 520px;
width: 90%;
} }
h1 { h1 {
font-size: 2rem; font-size: 3rem;
font-weight: 600; font-weight: 600;
color: #3b2a0e; color: #fdf5e0;
margin-bottom: 2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.buttons { h2 {
font-size: 1.5rem;
font-weight: 600;
color: #fdf5e0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
letter-spacing: 0.02em;
}
.cards-row {
display: flex;
gap: 8vw;
justify-content: center;
align-items: flex-end;
padding: 0 2rem 3rem;
flex-wrap: wrap;
}
.action-card {
background: rgba(255, 248, 220, 0.92);
border-radius: 12px;
padding: 1.5rem;
width: 220px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
text-align: center;
cursor: pointer;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
transition: transform 0.2s, box-shadow 0.2s;
} }
button { .action-card:hover {
font-family: inherit; transform: translateY(-6px);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.card-icon {
height: 80px;
background: rgba(107, 90, 42, 0.15);
border-radius: 8px;
border: 2px dashed rgba(107, 90, 42, 0.3);
}
.card-title {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
padding: 0.75rem 1.5rem; color: #3b2a0e;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #6b5a2a;
color: #fdf5e0;
transition: background-color 0.2s, transform 0.1s;
} }
button:hover { .card-text {
background-color: #8b6914; font-size: 0.875rem;
} color: #5c4a2a;
line-height: 1.5;
button:active {
transform: scale(0.97);
} }
/* Modal */ /* Modal */
@ -96,11 +119,12 @@ button:active {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-weight: 400; font-weight: 400;
border: none;
font-family: inherit;
} }
.modal-close:hover { .modal-close:hover {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
transform: none;
} }
#modal-video { #modal-video {

32
app/templates/index.html
View File

@ -1,28 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="it">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bienvenido</title> <title>3a sviluppi agro-tech</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
</head> </head>
<body> <body>
<div class="card"> <header>
<h1>Bienvenido</h1> <h1>3a sviluppi agro-tech</h1>
<div class="buttons"> <h2>Innovazione digitale per l'agricoltura</h2>
<button data-action="video" data-src="/resources/videos/video1.mp4">Quaderno di campagna digitale</button> </header>
<button data-action="video" data-src="/resources/videos/video2.mp4">Assistente virtuale</button>
<button data-action="iframe" data-src="http://localhost:3000/viewer?userId=1398&lang=it-IT">Reconoscimento fenologico</button> <div class="cards-row">
<div class="action-card" data-action="video" data-src="/resources/videos/video1.mp4">
<div class="card-icon"></div>
<h3 class="card-title">Quaderno di campagna digitale</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula arcu vel ligula fermentum.</p>
</div>
<div class="action-card" data-action="video" data-src="/resources/videos/video2.mp4">
<div class="card-icon"></div>
<h3 class="card-title">Assistente virtuale per la difesa fitopatologica</h3>
<p class="card-text">Pellentesque habitant morbi tristique senectus et netus malesuada fames ac turpis egestas.</p>
</div>
<div class="action-card" data-action="iframe" data-src="http://localhost/viewer?userId=1398&lang=it-IT">
<div class="card-icon"></div>
<h3 class="card-title">Riconoscimento fenologico</h3>
<p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
</div> </div>
</div> </div>
<!-- Shared modal overlay --> <!-- Shared modal overlay -->
<div id="modal" class="modal hidden" role="dialog" aria-modal="true"> <div id="modal" class="modal hidden" role="dialog" aria-modal="true">
<div class="modal-box"> <div class="modal-box">
<button class="modal-close" id="modal-close" aria-label="Cerrar">&times;</button> <button class="modal-close" id="modal-close" aria-label="Chiudi">&times;</button>
<video id="modal-video" controls></video> <video id="modal-video" controls></video>
<iframe id="modal-iframe" src="" allowfullscreen></iframe> <iframe id="modal-iframe" src="" allowfullscreen></iframe>
</div> </div>