Deploy con DB

2026-04-12 20:10:30 +02:00
parent 304218df75
commit e831d2b4bf
15 changed files with 1150 additions and 0 deletions
--- a/file/add/index.php
+++ b/file/add/index.php
@@ -0,0 +1,140 @@
+<?php
+
+if (isset($_GET['s'])) {
+    highlight_file("index.php");
+    return;
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    // Dati inviati
+    $checks = true;
+
+    $nome = "";
+    $cognome = "";
+    $data_nascita = "";
+
+    // htmlspecialchars effettua una sanitizzazione base
+
+    if (isset($_POST['nome'])) {
+        if ($_POST['nome'] === "" || $_POST['nome'] === null) {
+            $checks = false;
+        }
+        $nome = htmlspecialchars($_POST['nome']);
+    } else {
+        $checks = false;
+    }
+
+    if (isset($_POST['cognome'])) {
+        if ($_POST['cognome'] === "" || $_POST['cognome'] === null) {
+            $checks = false;
+        }
+        $cognome = htmlspecialchars($_POST['cognome']);
+    } else {
+        $checks = false;
+    }
+
+    if (isset($_POST['data-nascita'])) {
+        if ($_POST['data-nascita'] === "" || $_POST['data-nascita'] === null) {
+            $checks = false;
+        }
+        $data_nascita = date("Y-m-d H:i:s", strtotime(htmlspecialchars($_POST['data-nascita'])));
+    } else {
+        $checks = false;
+    }
+
+    if (!$checks) {
+        // Codice HTTP 400: Bad Request
+        http_response_code(400);
+        echo '<code>Dati mancanti nella richiesta POST!</code>';
+        return;
+    }
+
+
+    $conn = mysqli_connect("localhost", "root", "", "film_attori");
+
+    if ($conn === false) {
+        exit("<code>Errore: impossibile stabilire una connessione " . mysqli_connect_error() . "</code>");
+    }
+
+    //echo "<code>Connesso: " . mysqli_get_host_info($conn) . "</code>";
+
+    // Collegamento al DB effettuato, ora facciamo l'inserimento
+
+    $insert = "INSERT INTO attori (nome, cognome, data_nascita) VALUES ('" . $nome . "','" . $cognome . "', '" . $data_nascita . "')";
+
+    if (mysqli_query($conn, $insert) === false) {
+        // Codice HTTP 500: Errore
+        http_response_code(500);
+        echo "<code>Errore: impossibile eseguire la query. " . mysqli_error($conn) . "</code>";
+        mysqli_close($conn);
+        exit();
+    }
+
+    mysqli_close($conn);
+}
+
+?>
+
+<!DOCTYPE html>
+<html lang="it">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aggiungi attore - The NoSpace Cinema</title>
+    <!--- www.francescomancuso.it -->
+    <link rel="stylesheet" href="../style.css">
+</head>
+
+<body>
+    <header>
+        <div class="container">
+            <a href="../" style="text-decoration: none;">
+                <div>
+                    <img src="../logo.png">
+                    <h4>The NoSpace Cinema</h4>
+                </div>
+            </a>
+            <div>
+                <a href=".?s" style="font-size:16px">Vedi sorgente pagina</a>
+                <a href="../search/" class="button">Tutti i film</a>
+            </div>
+        </div>
+    </header>
+    <div class="container">
+        <div class="hero">
+            <h1>Aggiungi attore</h1>
+        </div>
+    </div>
+    <div class="page">
+        <div class="container">
+            <?php if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+                echo "<div class=\"message\">Query eseguita con successo!</div>";
+            } ?>
+            <form action="." method="POST">
+                <fieldset>
+                    <label for="nome">Nome</label>
+                    <input type="text" id="nome" name="nome">
+                </fieldset>
+                <fieldset>
+                    <label for="cognome">Cognome</label>
+                    <input type="text" id="cognome" name="cognome">
+                </fieldset>
+                <fieldset>
+                    <label for="data-nascita">Data di nascita</label>
+                    <input type="date" id="data-nascita" name="data-nascita" max="0">
+                </fieldset>
+                <fieldset>
+                    <button type="submit">Invia</button>
+                </fieldset>
+            </form>
+        </div>
+    </div>
+    <footer>
+        <div class="container">
+            <span>Realizzato da Francesco Giuseppe Mancuso - classe 5E - www.francescomancuso.it</span>
+        </div>
+    </footer>
+</body>
+
+</html>
--- a/file/api/v1/img/film-placeholder.png
+++ b/file/api/v1/img/film-placeholder.png
--- a/file/api/v1/img/index.php
+++ b/file/api/v1/img/index.php
@@ -0,0 +1,53 @@
+<?php
+
+if (isset($_GET['s'])) {
+    highlight_file("index.php");
+    return;
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+    // Leggo il nome del film
+    if (isset($_GET['n'])) {
+        if (!is_string($_GET['n']) || $_GET['n'] === "" || $_GET['n'] === null) {
+            http_response_code(400);
+            echo '<code>Dati mancanti!</code>';
+            return;
+        }
+        $nome = htmlspecialchars($_GET['n']);
+
+        try {
+            $url = "https://imdb.iamidiotareyoutoo.com/search?q=" . urlencode($nome) . "&tt=&lsn=1&v=1";
+            $curl = curl_init($url);
+            curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
+            $res = curl_exec($curl);
+            $json = json_decode($res);
+        } catch (Exception $e) {
+            header("Content-Type: image/png");
+            echo file_get_contents("film-placeholder.png");
+            return;
+        }
+
+        if ($res && $json && isset($json->description[0])) {
+            $imgUrl = $json->description[0]->{'#IMG_POSTER'};
+
+            $downloadImg = curl_init($imgUrl);
+            curl_setopt($downloadImg, CURLOPT_RETURNTRANSFER, true);
+            $imageData = curl_exec($downloadImg);
+            $contentType = curl_getinfo($downloadImg, CURLINFO_CONTENT_TYPE);
+            header("Content-Type: " . $contentType);
+            echo $imageData;
+        } else {
+            header("Content-Type: image/png");
+            echo file_get_contents("film-placeholder.png");
+            return;
+        }
+    } else {
+        http_response_code(400);
+        echo '<code>Dati mancanti!</code>';
+        return;
+    }
+} else {
+    http_response_code(405);
+    echo '<code>Metodo non consentito!</code>';
+    return;
+}
--- a/file/attore-list.png
+++ b/file/attore-list.png
--- a/file/attore.png
+++ b/file/attore.png
--- a/file/bg.jpg
+++ b/file/bg.jpg
--- a/file/film.png
+++ b/file/film.png
--- a/file/film/index.php
+++ b/file/film/index.php
@@ -0,0 +1,159 @@
+<?php
+
+if (isset($_GET['s'])) {
+    highlight_file("index.php");
+    return;
+}
+
+// Ricerca film dal DB
+
+$conn = mysqli_connect("localhost", "root", "", "film_attori");
+
+if ($conn === false) {
+    exit("<code>Errore: impossibile stabilire una connessione " . mysqli_connect_error() . "</code>");
+}
+// Collegamento al DB effettuato
+
+// Leggo ID
+if (!isset($_GET['id'])) {
+    // Codice HTTP 404: Not found
+    http_response_code(404);
+    echo "<code>Film non trovato!</code>";
+    return;
+}
+
+if (!is_numeric($_GET['id']) || $_GET['id'] === "" || $_GET['id'] === null) {
+    // Codice HTTP 404: Not found
+    http_response_code(404);
+    echo "<code>Film non trovato!</code>";
+    return;
+}
+
+$idFilm = intval($_GET['id']);
+$query = "SELECT film.id_film, film.nome, film.trama, film.durata, film.data_uscita, generi.nome as genere FROM film, generi WHERE film.id_genere = generi.id_genere AND film.id_film = " . $idFilm . " ORDER BY film.data_uscita";
+
+// Leggo i dati del film e faccio il JOIN per avere il nome del genere
+$res = mysqli_query($conn, $query);
+
+if ($res === false) {
+    // Codice HTTP 500: Errore
+    http_response_code(500);
+    echo "<code>Errore: impossibile eseguire la query. " . mysqli_error($conn) . "</code>";
+    mysqli_close($conn);
+    exit();
+}
+
+$row = mysqli_fetch_array($res);
+
+mysqli_free_result($res);
+
+if (!$row) {
+    // Codice HTTP 404: Not found
+    http_response_code(404);
+    echo "<code>Film non trovato!</code>";
+    mysqli_close($conn);
+    return;
+}
+
+// Ottengo gli attori
+$queryAttori = "SELECT attori.nome, attori.cognome, attori.data_nascita, recitare.ruolo FROM attori, recitare WHERE attori.id_attore = recitare.id_attore AND recitare.id_film = " . $idFilm . " ORDER BY recitare.ruolo DESC ";
+
+$resAttori = mysqli_query($conn, $queryAttori);
+
+if ($resAttori === false) {
+    // Codice HTTP 500: Errore
+    http_response_code(500);
+    echo "<code>Errore: impossibile eseguire la query. " . mysqli_error($conn) . "</code>";
+    mysqli_close($conn);
+    exit();
+}
+
+?>
+
+<!DOCTYPE html>
+<html lang="it">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php echo $row["nome"]; ?> - Film - The NoSpace Cinema</title>
+    <!--- www.francescomancuso.it -->
+    <link rel="stylesheet" href="../style.css">
+</head>
+
+<body>
+    <header>
+        <div class="container">
+            <a href="../" style="text-decoration: none;">
+                <div>
+                    <img src="../logo.png">
+                    <h4>The NoSpace Cinema</h4>
+                </div>
+            </a>
+            <div>
+                <a href=".?s" style="font-size:16px">Vedi sorgente pagina</a>
+                <a href="../search/" class="button">Tutti i film</a>
+            </div>
+        </div>
+    </header>
+    <div class="container">
+        <div class="hero film" style="background-image: url('<?php echo "../api/v1/img/?n=" . urlencode($row['nome'] . ' ' . date('Y', strtotime($row['data_uscita']))); ?>')">
+            <div>
+                <h1><?php echo $row["nome"]; ?></h1>
+                <div class="genere">
+                    <?php echo $row["genere"]; ?>
+                </div>
+                <div class="meta">
+                    <span><?php echo date("d M Y", strtotime($row["data_uscita"])); ?></span>
+                    <span>|</span>
+                    <span><?php echo $row["durata"]; ?></span>
+                </div>
+            </div>
+            <img src="<?php echo "../api/v1/img/?n=" . urlencode($row['nome'] . ' ' . date('Y', strtotime($row['data_uscita']))); ?>">
+        </div>
+    </div>
+    <div class="page film">
+        <div class="container">
+            <h2>Trama</h2>
+            <div class="trama">
+                <?php echo $row['trama']; ?>
+            </div>
+
+            <h2>Attori</h2>
+            <div class="grid films">
+                <?php
+                $test = true;
+                while ($rowAttori = mysqli_fetch_array($resAttori)) {
+                    $test = false;
+                    ?>
+                    <div class="attore">
+                        <img src="../attore-list.png">
+                        <h5><?php echo $rowAttori['nome']; ?>     <?php echo $rowAttori['cognome']; ?></h5>
+                        <span>Nato/a il <?php echo date("d M Y", strtotime($rowAttori['data_nascita'])); ?></span>
+                        <div class="ruolo">
+                            <?php echo $rowAttori['ruolo']; ?>
+                        </div>
+                    </div>
+                    <?php
+                }
+
+                mysqli_free_result($resAttori);
+                mysqli_close($conn);
+                ?>
+            </div>
+            <?php
+            // Nessun risultato...
+            if ($test) {
+                echo "<div class=\"container\">Nessun attore trovato!</div>";
+            }
+            ?>
+        </div>
+    </div>
+    <footer>
+        <div class="container">
+            <span>Realizzato da Francesco Giuseppe Mancuso - classe 5E - www.francescomancuso.it</span>
+        </div>
+    </footer>
+</body>
+
+</html>
--- a/file/index.html
+++ b/file/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="it">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The NoSpace Cinema</title>
+    <!--- www.francescomancuso.it -->
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <header>
+        <div class="container">
+            <a href="." style="text-decoration: none;">
+                <div>
+                    <img src="logo.png">
+                    <h4>The NoSpace Cinema</h4>
+                </div>
+            </a>
+            <div>
+                <a href="search/" class="button">Tutti i film</a>
+            </div>
+        </div>
+    </header>
+    <div class="container">
+        <div class="hero">
+            <h1>Cinema</h1>
+        </div>
+    </div>
+    <div class="page">
+        <div class="container text-center">
+            <p>Seleziona pagina per proseguire</p>
+        </div>
+        <div class="container" style="max-width: 900px">
+            <div class="grid">
+                <a href="add/">
+                    <div class="card">
+                        <img src="attore.png">
+                        <h2>Aggiungi attore nel DB</h2>
+                    </div>
+                </a>
+                <a href="search/">
+                    <div class="card">
+                        <img src="film.png">
+                        <h2>Scopri gli attori di un film</h2>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+    <footer>
+        <div class="container">
+            <span>Realizzato da Francesco Giuseppe Mancuso - classe 5E - www.francescomancuso.it</span>
+        </div>
+    </footer>
+</body>
+
+</html>
--- a/file/index.php
+++ b/file/index.php
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Funziona!</title>
+    <style>
+        body {
+            padding: 8rem 1rem;
+            margin: 0;
+            background-color: #111111;
+            color: #fafafa;
+            text-align: center;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <h1>Funziona!</h1>
+    <p>Se vedi questa pagina, <code style="display: inline-block;">deploy-dynamic</code> funziona!</p>
+    <br>
+    <img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDcxMWdzaGY1aW1sdXBrN3pjbjR3dXRlc3A2aTRrenFwbjU4aWh1bCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/blSTtZehjAZ8I/giphy.gif" alt="PARTY" style="width:90%;max-width:500px">
+    <br>
+    <br>
+    <span>Pagina generata dinamicamente con PHP il <?php date_default_timezone_set('Europe/Rome'); echo $current_date = date('d/m/Y H:i:s'); ?></span>
+    <br>
+    <br>
+    <p><i>Ospitato su vps.francescomancuso.it</i></p>
+</body>
+</html>
--- a/file/logo.png
+++ b/file/logo.png
--- a/file/search/index.php
+++ b/file/search/index.php
@@ -0,0 +1,122 @@
+<?php
+
+if (isset($_GET['s'])) {
+    highlight_file("index.php");
+    return;
+}
+
+// Ricerca film dal DB
+
+$conn = mysqli_connect("localhost", "root", "", "film_attori");
+
+if ($conn === false) {
+    exit("<code>Errore: impossibile stabilire una connessione " . mysqli_connect_error() . "</code>");
+}
+
+// Collegamento al DB effettuato
+
+$query = "SELECT film.id_film, film.nome, film.trama, film.data_uscita, generi.nome as genere FROM film, generi WHERE film.id_genere = generi.id_genere ORDER BY film.data_uscita";
+$searched = "";
+
+// Leggo la ricerca
+if (isset($_GET['q'])) {
+    if (is_string($_GET['q']) && $_GET['q'] !== "" && $_GET['q'] !== null) {
+        $nome = htmlspecialchars($_GET['q']);
+        $searched = $nome;
+        $query = "SELECT film.id_film, film.nome, film.trama, film.data_uscita, generi.nome as genere FROM film, generi WHERE film.id_genere = generi.id_genere AND film.nome LIKE '%" . $nome . "%' ORDER BY film.data_uscita";
+    }
+}
+
+// Leggo i dati del film e faccio il JOIN per avere il nome del genere
+$res = mysqli_query($conn, $query);
+
+if ($res === false) {
+    // Codice HTTP 500: Errore
+    http_response_code(500);
+    echo "<code>Errore: impossibile eseguire la query. " . mysqli_error($conn) . "</code>";
+    mysqli_close($conn);
+    exit();
+}
+
+?>
+
+<!DOCTYPE html>
+<html lang="it">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Film - The NoSpace Cinema</title>
+    <!--- www.francescomancuso.it -->
+    <link rel="stylesheet" href="../style.css">
+</head>
+
+<body>
+    <header>
+        <div class="container">
+            <a href="../" style="text-decoration: none;">
+                <div>
+                    <img src="../logo.png">
+                    <h4>The NoSpace Cinema</h4>
+                </div>
+            </a>
+            <div>
+                <a href=".?s" style="font-size:16px">Vedi sorgente pagina</a>
+                <a href="../search/" class="button">Tutti i film</a>
+            </div>
+        </div>
+    </header>
+    <div class="container">
+        <div class="hero search">
+            <h1>Film in sala</h1>
+            <form action="." method="GET">
+                <fieldset>
+                    <input type="text" id="query" name="q" value="<?php echo $searched; ?>" placeholder="Scrivi il titolo...">
+                    <button type="submit">Cerca</button>
+                </fieldset>
+            </form>
+        </div>
+    </div>
+    <div class="page">
+        <div class="container">
+            <div class="grid films">
+                <?php
+
+                $test = true;
+
+                while ($row = mysqli_fetch_array($res)) {
+                    $test = false;
+                    ?>
+                    <a href="<?php echo "../film?id=" . $row['id_film']; ?>">
+                        <div class="film">
+                            <img src="<?php echo "../api/v1/img/?n=" . urlencode($row['nome'] . ' ' . date('Y', strtotime($row['data_uscita']))); ?>">
+                            <h5><?php echo $row['nome']; ?></h5>
+                            <div class="genere">
+                                <?php echo $row['genere']; ?>
+                            </div>
+                        </div>
+                    </a>
+                    <?php
+                }
+
+                mysqli_free_result($res);
+                mysqli_close($conn);
+
+                ?>
+            </div>
+            <?php
+            // Nessun risultato...
+            if ($test) {
+                echo "<div class=\"container text-center\">Nessun risultato trovato!</div>";
+            }
+            ?>
+        </div>
+    </div>
+    <footer>
+        <div class="container">
+            <span>Realizzato da Francesco Giuseppe Mancuso - classe 5E - www.francescomancuso.it</span>
+        </div>
+    </footer>
+</body>
+
+</html>
--- a/file/style.css
+++ b/file/style.css
@@ -0,0 +1,357 @@
+@font-face {
+    font-family: "Isonorm";
+    src: url("https://db.onlinewebfonts.com/t/855a3f407942ac7acbc26e4f98cc3ec0.eot");
+    src: url("https://db.onlinewebfonts.com/t/855a3f407942ac7acbc26e4f98cc3ec0.eot?#iefix")format("embedded-opentype"),
+        url("https://db.onlinewebfonts.com/t/855a3f407942ac7acbc26e4f98cc3ec0.woff2")format("woff2"),
+        url("https://db.onlinewebfonts.com/t/855a3f407942ac7acbc26e4f98cc3ec0.woff")format("woff"),
+        url("https://db.onlinewebfonts.com/t/855a3f407942ac7acbc26e4f98cc3ec0.ttf")format("truetype"),
+        url("https://db.onlinewebfonts.com/t/855a3f407942ac7acbc26e4f98cc3ec0.svg#Isonorm W01 Regular")format("svg");
+}
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body,
+button,
+input,
+select {
+    font-family: "Isonorm", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+    background-color: hsl(0, 0%, 5%);
+    color: #fff;
+    background: radial-gradient(hsl(0, 0%, 14%), hsl(0, 0%, 1%));
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-height: 100vh;
+    font-size: 17px;
+    display: flex;
+    flex-direction: column;
+}
+
+.container {
+    width: 92%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 0;
+}
+
+h1 {
+    margin-bottom: 2rem;
+}
+
+a {
+    color: #fff;
+}
+
+form {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+fieldset {
+    width: 100%;
+    border: none;
+    padding: 1rem 1rem;
+}
+
+input[type=text],
+input[type=date] {
+    display: block;
+    width: 100%;
+    margin: 0;
+    border: 1px solid hsl(359, 80%, 43%);
+    outline: none;
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.8rem;
+    background-color: rgba(2, 2, 2, 0.4);
+    color: #fff;
+    fill: #fff;
+    color-scheme: dark;
+    font-size: 18px;
+}
+
+.message {
+    background-color: green;
+    width: 100%;
+    max-width: 400px;
+    border-radius: 1rem;
+    padding: 1rem 1.2rem;
+    margin: 0 auto;
+    margin-bottom: 2rem;
+}
+
+input[type=text]:hover,
+input[type=date]:hover {
+    border: 1px solid hsl(359, 80%, 43%);
+}
+
+form button {
+    margin: 0 auto;
+}
+
+button,
+a.button {
+    display: block;
+    cursor: pointer;
+    background-color: #c51619;
+    border: none;
+    outline: none;
+    padding: 0.5rem 0.8rem;
+    border-radius: 0.8rem;
+    color: #fff;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    width: max-content;
+    text-decoration: none;
+    font-size: 16px;
+}
+
+label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 0.3rem;
+}
+
+header {
+    padding: 1rem 0;
+    font-size: 150%;
+}
+
+header img {
+    width: 80px;
+}
+
+header .container {
+    padding: 0;
+}
+
+header .container div,
+header .container {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.page {
+    flex-grow: 1;
+}
+
+footer .container {
+    padding: 2rem 0;
+    text-align: center;
+    opacity: 0.8;
+    font-size: 90%;
+}
+
+.hero {
+    background: url('bg.jpg');
+    background-size: cover;
+    background-position: center;
+    padding: 6rem 2rem;
+    text-align: center;
+    font-size: 200%;
+    border-radius: 2rem;
+    background-color: rgba(2, 2, 2, 0.4);
+    background-blend-mode: overlay;
+    margin: 2rem 0;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.grid>a {
+    text-decoration: none;
+}
+
+.card {
+    padding: 2rem;
+    border-radius: 2rem;
+    text-align: center;
+    background-color: rgba(2, 2, 2, 1);
+}
+
+.card img {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 2rem;
+}
+
+.films {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+@media only screen and (max-width: 899px) {
+    .films {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+}
+
+@media only screen and (max-width: 599px) {
+    .films {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .hero.film>div {
+        padding: 6.2rem 0rem !important;
+    }
+}
+
+.films .film {
+    width: 100%;
+    text-align: center;
+}
+
+.films .film img {
+    width: 96%;
+    display: block;
+    border-radius: 1rem;
+    margin: 0 auto;
+}
+
+.films .film h5 {
+    font-size: 1.67rem;
+    margin: 1rem 0;
+}
+
+.films .film .genere {
+    text-transform: uppercase;
+    opacity: 0.8;
+    display: inline-block;
+    border-bottom: 2px solid hsl(359, 80%, 43%);
+    padding: 0.2rem 0;
+}
+
+@media only screen and (max-width: 499px) {
+    header {
+        font-size: 90%;
+    }
+
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.hero form fieldset {
+    display: flex;
+    gap: 1rem;
+}
+
+.hero.film {
+    padding: 2rem;
+}
+
+.hero.film {
+    background-color: rgba(2, 2, 2, 0.9);
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: space-between;
+    text-align: left;
+    text-wrap: balance;
+}
+
+.hero.film h1,
+.hero.film .genere {
+    margin-bottom: 1rem;
+}
+
+.hero.film .genere {
+    display: block;
+    border-left: 2px solid hsl(359, 80%, 43%);
+    padding: 0 0.5rem;
+    font-size: 26px;
+}
+
+.hero.film>div {
+    padding: 6.2rem 2rem;
+}
+
+.hero.film img {
+    width: auto;
+    height: 100%;
+    max-height: 480px;
+    max-width: 100%;
+    display: block;
+    border-radius: 1rem;
+    margin: -4rem 0;
+}
+
+.hero.film .meta {
+    opacity: 0.6;
+    font-size: 20px;
+}
+
+.page.film {
+    font-size: 120%;
+}
+
+.page.film .container {
+    max-width: 900px;
+}
+
+.page.film h2 {
+    margin-bottom: 1rem;
+}
+
+.page.film .trama {
+    margin-bottom: 4rem;
+}
+
+.films .attore {
+    width: 100%;
+    text-align: center;
+    padding: 2rem 0;
+}
+
+.films .attore img {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 2rem;
+}
+
+.films .attore h5 {
+    font-size: 1.67rem;
+    margin: 1rem 0;
+}
+
+.films .attore span {
+    display: block;
+    margin: 0 auto;
+    font-size: 80%;
+    opacity: 0.9;
+}
+
+.films .attore .ruolo {
+    text-transform: uppercase;
+    opacity: 0.8;
+    display: inline-block;
+    border-bottom: 2px solid hsl(359, 80%, 43%);
+    padding: 0.2rem 0;
+    margin: 1rem 0;
+    font-size: 80%;
+}