<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exportador ScreenMatch</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(135deg, #141e30, #243b55);
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
form {
background-color: #ffffff;
width: 100%;
max-width: 420px;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
h1 {
position: absolute;
top: 40px;
color: #ffffff;
font-size: 32px;
text-align: center;
}
fieldset {
border: none;
padding: 0;
margin-bottom: 18px;
}
label {
font-weight: bold;
display: block;
margin-bottom: 6px;
color: #243b55;
}
input,
select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 15px;
box-sizing: border-box;
}
input:focus,
select:focus {
outline: none;
border-color: #243b55;
box-shadow: 0 0 5px rgba(36, 59, 85, 0.5);
}
input[type="submit"] {
background-color: #243b55;
color: white;
border: none;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}
input[type="submit"]:hover {
background-color: #141e30;
transform: scale(1.02);
}
</style>
</head>
<body>
<h1>Exportador do ScreenMatch</h1>
<form action="exporta-arquivo.php" method="post">
<fieldset>
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" required>
</fieldset>
<fieldset>
<label for="ano">Ano de lançamento:</label>
<input type="number" name="ano" id="ano" required>
</fieldset>
<fieldset>
<label for="nota">Nota:</label>
<input type="number" name="nota" id="nota" required step="0.1">
</fieldset>
<fieldset>
<label for="genero">Gênero:</label>
<select name="genero" id="genero">
<option value="super-heroi">Super-herói</option>
<option value="comedia">Comédia</option>
<option value="acao">Ação</option>
</select>
</fieldset>
<input type="submit" value="Enviar">
</form>
</body>
</html>
