223 lines
10 KiB
HTML
223 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hu">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/print.css">
|
|
<link rel="icon" type="image/x-icon" href="media/images/jedi-symbol.png">
|
|
<title>Star Wars - Jedi Generátor</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<a class="visually-hidden-focusable" href="#main">Ugrás a tartalomra</a>
|
|
<h1 class="display-1">STAR WARS</h1>
|
|
<nav>
|
|
<div class="container position-relative p-0">
|
|
<ul class="nav justify-content-center flex-column flex-sm-row">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.html">Főoldal</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="films.html">Filmek</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="series.html">Sorozatok</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="games.xhtml">Játékok</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="jedi.html">Jedi Generátor</a>
|
|
</li>
|
|
</ul>
|
|
<button id="switch-high-contrast" onclick="switchMode()">
|
|
<img src="media/images/high-contrast.svg" alt="Nagy kontraszt">
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main" class="container p-4">
|
|
<article>
|
|
<h2>Jedi Generátor</h2>
|
|
<p>A Star Wars univerzuma olyan sok színű, rengeteg történetet el lehet mesélni benne. Ezen az űrlapon el tudod készíteni a saját <b>Jedi lovag</b>odat és el tudod küldeni.</p>
|
|
</article>
|
|
<form action="mailto:buduf@student.elte.hu" target="_blank">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<fieldset>
|
|
<legend>A karakter</legend>
|
|
<div class="row mb-2">
|
|
<div class="col-6">
|
|
<label for="nev" class="form-label">Név</label><br>
|
|
<input type="text" maxlength="28" id="nev" class="form-control" required>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="faj" class="form-label">Faj</label><br>
|
|
<select id="faj" class="form-select">
|
|
<option value="ember">Ember</option>
|
|
<option value="twilek">Twi'lek</option>
|
|
<option value="wookie">Wookiee</option>
|
|
<option value="togruta">Togruta</option>
|
|
<option value="nautolan">Nautolan</option>
|
|
<option value="zabrak">Zabrak</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label for="story" class="form-label">Háttértörténet</label><br>
|
|
<textarea rows="5" maxlength="800" id="story" class="form-control"></textarea>
|
|
</div>
|
|
<div class="mb-2 form-check">
|
|
<input type="checkbox" id="darkside" class="form-check-input">
|
|
<label for="darkside" class="form-check-label">Átáll a sötét oldalra?</label>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>A fénykard</legend>
|
|
<div class="w-50 float-start">
|
|
<span class="fs-5">Típus</span>
|
|
<div class="form-check">
|
|
<input type="radio" name="type" id="normal" class="form-check-input" required>
|
|
<label for="normal" class="form-check-label">Normál</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="type" id="doublebladed" class="form-check-input" required>
|
|
<label for="doublebladed" class="form-check-label">Kétpengéjű</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="type" id="dualwielding" class="form-check-input" required>
|
|
<label for="dualwielding" class="form-check-label">Dupla kard</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="type" id="hybrid" class="form-check-input" required>
|
|
<label for="hybrid" class="form-check-label">Szétszedhető</label>
|
|
</div>
|
|
</div>
|
|
<div class="w-50 float-start">
|
|
<span class="fs-5">Szín</span>
|
|
<div class="form-check">
|
|
<input type="radio" name="color" id="blue" class="form-check-input" required>
|
|
<label for="blue" class="form-check-label">Kék</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="color" id="green" class="form-check-input" required>
|
|
<label for="green" class="form-check-label">Zöld</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="color" id="cyan" class="form-check-input" required>
|
|
<label for="cyan" class="form-check-label">Cián</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="color" id="purple" class="form-check-input" required>
|
|
<label for="purple" class="form-check-label">Lila</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="color" id="yellow" class="form-check-input" required>
|
|
<label for="yellow" class="form-check-label">Sárga</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" name="color" id="orange" class="form-check-input" required>
|
|
<label for="orange" class="form-check-label">Narancs</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<div class="h-100 d-flex align-items-center">
|
|
<div class="w-100">
|
|
<h3 class="text-center">Különböző fajú karakterek</h3>
|
|
<div id="carouselJedi" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<figure class="text-center">
|
|
<img src="media/images/jedi/ObiWanKenobi.webp" class="jedi" alt="Obi-Wan Kenobi">
|
|
<figcaption>
|
|
<h4>Obi-Wan Kenobi</h4>
|
|
<p class="text-center">Az egyik legismertebb jedi.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<figure class="text-center">
|
|
<img src="media/images/jedi/AaylaSecura.webp" class="jedi" alt="Aayla Secura">
|
|
<figcaption>
|
|
<h4>Aayla Secura</h4>
|
|
<p class="text-center">Twi'lek jedi mester.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<figure class="text-center">
|
|
<img src="media/images/jedi/Chewbacca.png" class="jedi" alt="Chewbacca">
|
|
<figcaption>
|
|
<h4>Chewbacca</h4>
|
|
<p class="text-center">Wookiee, egyik legismertebb karakter, ő nem jedi.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<figure class="text-center">
|
|
<img src="media/images/jedi/AhsokaTano.webp" class="jedi" alt="Ahsoka Tano">
|
|
<figcaption>
|
|
<h4>Ahsoka Tano</h4>
|
|
<p class="text-center">Togruta faj, Anakin padawan-ja. Fan favorite.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<figure class="text-center">
|
|
<img src="media/images/jedi/KitFisto.webp" class="jedi" alt="Kit Fisto">
|
|
<figcaption>
|
|
<h4>Kit Fisto</h4>
|
|
<p class="text-center">Naoutolan jedi mester.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<figure class="text-center">
|
|
<img src="media/images/jedi/EethKoth.webp" class="jedi" alt="Eeth Koth">
|
|
<figcaption>
|
|
<h4>Eeth Koth</h4>
|
|
<p class="text-center">Zabrak jedi mester.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselJedi" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselJedi" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<fieldset>
|
|
<input type="reset" value="Alaphelyzet" class="form-control bg-danger float-start">
|
|
<input type="submit" value="Elküld" class="form-control bg-success float-end">
|
|
</fieldset>
|
|
</form>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container d-flex px-4 py-2">
|
|
<p class="d-inline-block w-50 m-0"><a href="https://starwars.com" target="_blank">StarWars.com</a></p>
|
|
<p class="text-end w-50 m-0">Készítette: Baldauf Márton</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="switch-css.js"></script>
|
|
</body>
|
|
|
|
</html> |