Changed to cards
This commit is contained in:
parent
b85704c0c3
commit
60d5c84042
@ -9,54 +9,77 @@ body {
|
||||
font-size: 16px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url('/resources/main.jpg') center center / cover no-repeat fixed;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 248, 220, 0.92);
|
||||
border-radius: 12px;
|
||||
padding: 3rem 4rem;
|
||||
header {
|
||||
text-align: center;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||||
max-width: 520px;
|
||||
width: 90%;
|
||||
padding: 3rem 1rem 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
color: #3b2a0e;
|
||||
margin-bottom: 2rem;
|
||||
color: #fdf5e0;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
|
||||
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;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
font-family: inherit;
|
||||
.action-card:hover {
|
||||
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-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #6b5a2a;
|
||||
color: #fdf5e0;
|
||||
transition: background-color 0.2s, transform 0.1s;
|
||||
color: #3b2a0e;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #8b6914;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.97);
|
||||
.card-text {
|
||||
font-size: 0.875rem;
|
||||
color: #5c4a2a;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
@ -96,11 +119,12 @@ button:active {
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#modal-video {
|
||||
|
||||
@ -1,28 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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.gstatic.com" crossorigin />
|
||||
<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') }}" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1>Bienvenido</h1>
|
||||
<div class="buttons">
|
||||
<button data-action="video" data-src="/resources/videos/video1.mp4">Quaderno di campagna digitale</button>
|
||||
<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>
|
||||
<header>
|
||||
<h1>3a sviluppi agro-tech</h1>
|
||||
<h2>Innovazione digitale per l'agricoltura</h2>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Shared modal overlay -->
|
||||
<div id="modal" class="modal hidden" role="dialog" aria-modal="true">
|
||||
<div class="modal-box">
|
||||
<button class="modal-close" id="modal-close" aria-label="Cerrar">×</button>
|
||||
<button class="modal-close" id="modal-close" aria-label="Chiudi">×</button>
|
||||
<video id="modal-video" controls></video>
|
||||
<iframe id="modal-iframe" src="" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user