jeffersonchaves · June 21, 2025 23:16
diff --git a/vhs-list.html b/vhs-list.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    
    <div class="container">
        <h1>Listagem de Fitas VHS</h1>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>Image</th>
                    <th>Categoria</th>
                    <th>Data de registro</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="vhs : ${vhsList}">
                    <td th:text="${vhs.title}">Título</td>
                    <td th:text="${vhs.imageUrl}">Imagem</td>
                    <td th:text="${vhs.registrationDate}">Data de registro</td>
                    <td>Categoria</td>
                    <td>
                        <a th:href="@{'/vhs/editar/' + ${vhs.id}}">Editar</a> |
                        <a th:href="@{'/vhs/deletar/' + ${vhs.id}}" onclick="return confirm('Tem certeza que deseja deletar?');">Deletar</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <a href="/vhs/novo" class="btn">Adicionar Nova Fita</a>
    </div>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 40px auto;
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        h1 {
            text-align: center;
            margin-bottom: 24px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 16px;
        }
        th, td {
            padding: 12px 8px;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }
        th {
            background: #f0f0f0;
        }
        tr:hover {
            background: #f9f9f9;
        }
        .btn {
            display: inline-block;
            padding: 10px 18px;
            background: #1976d2;
            color: #fff;
            border-radius: 4px;
            text-decoration: none;
            transition: background 0.2s;
        }
        .btn:hover {
            background: #1565c0;
        }
    </style>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>

	<div class="container">
	<h1>Listagem de Fitas VHS</h1>
	<table>
	<thead>
	<tr>
	<th>id</th>
	<th>Image</th>
	<th>Categoria</th>
	<th>Data de registro</th>
	<th>Ações</th>
	</tr>
	</thead>
	<tbody>
	<tr th:each="vhs : ${vhsList}">
	<td th:text="${vhs.title}">Título</td>
	<td th:text="${vhs.imageUrl}">Imagem</td>
	<td th:text="${vhs.registrationDate}">Data de registro</td>
	<td>Categoria</td>
	<td>
	<a th:href="@{'/vhs/editar/' + ${vhs.id}}">Editar</a> \|
	<a th:href="@{'/vhs/deletar/' + ${vhs.id}}" onclick="return confirm('Tem certeza que deseja deletar?');">Deletar</a>
	</td>
	</tr>
	</tbody>
	</table>
	<a href="/vhs/novo" class="btn">Adicionar Nova Fita</a>
	</div>
	<style>
	body {
	font-family: Arial, sans-serif;
	background: #f4f4f4;
	margin: 0;
	padding: 0;
	}
	.container {
	max-width: 800px;
	margin: 40px auto;
	background: #fff;
	padding: 24px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	}
	h1 {
	text-align: center;
	margin-bottom: 24px;
	}
	table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
	}
	th, td {
	padding: 12px 8px;
	border-bottom: 1px solid #ddd;
	text-align: left;
	}
	th {
	background: #f0f0f0;
	}
	tr:hover {
	background: #f9f9f9;
	}
	.btn {
	display: inline-block;
	padding: 10px 18px;
	background: #1976d2;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.2s;
	}
	.btn:hover {
	background: #1565c0;
	}
	</style>

	</body>
	</html>