173 lines
7.3 KiB
HTML
173 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<title>HYPERION MULTICHAR</title>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<img src="assets/corner.png" class="corner-img">
|
|
|
|
<div class="toaster-wrapper">
|
|
<div class="toaster">
|
|
<div class="title-wrapper">
|
|
<div class="title">INDLØS KODE</div>
|
|
<div class="subtitle">For at indløse en kode, skal du bruge dit transaktions-id, angivet i e-mailen fra Tebex.</div>
|
|
</div>
|
|
|
|
<input type="text" placeholder="SKRIV TRANSAKTIONS ID HER">
|
|
|
|
<div class="btn-wrapper">
|
|
<div class="btn submit">
|
|
<div class="text">GODKENDT</div>
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/left-w.png"></div>
|
|
<div class="bottom"><img src="assets/right-w.png"></div>
|
|
</div>
|
|
</div>
|
|
<div class="btn close-box">
|
|
<div class="text">ANNULLER</div>
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/left.png"></div>
|
|
<div class="bottom"><img src="assets/right.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loading">
|
|
<img src="assets/bg-img.png" class="bg">
|
|
|
|
<div class="bars">
|
|
<img src="assets/circle-big.png">
|
|
<img src="assets/circle-small.png">
|
|
</div>
|
|
|
|
<div class="loading-text"><span>INDLÆSER</span></div>
|
|
</div>
|
|
|
|
<div class="char-selected-box">
|
|
<div class="title">Karakter valg</div>
|
|
|
|
<div class="char-name-wrapper">
|
|
<div class="name"><span>IKKE</span> VALGT</div>
|
|
<div class="gender">INTET-KØN</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="subtitle">Her er dit udvalg af karakterer på Hyperion! - Har du fået tildelt ekstra slots, kan du lave en ny karakter, eller spille videre på en nuværrende karakter.</div>
|
|
</div>
|
|
|
|
<div class="characters-box">
|
|
<div class="box-wrapper">
|
|
<div class="box">
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/top.png"></div>
|
|
<div class="bottom"><img src="assets/bottom.png"></div>
|
|
</div>
|
|
|
|
<div class="name-box">
|
|
<div class="identifier">CID:598794268</div>
|
|
<div class="name-wrap">
|
|
<div class="name">HYPERION</div>
|
|
<div class="surname">REBOOTED</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gender">MAND</div>
|
|
|
|
<div class="play-btn">
|
|
<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M-0.000104948 1.00057L-0.000105735 19.0006C0.000465508 19.1828 0.0507289 19.3614 0.145272 19.5172C0.239816 19.673 0.375059 19.8001 0.536447 19.8848C0.697834 19.9694 0.879254 20.0085 1.06118 19.9977C1.2431 19.9869 1.41864 19.9267 1.56889 19.8236L14.5689 10.8236C15.1079 10.4506 15.1079 9.55257 14.5689 9.17857L1.5689 0.178573C1.41895 0.074398 1.24333 0.0133073 1.0611 0.00193832C0.878874 -0.00943065 0.697017 0.029357 0.535288 0.114087C0.373559 0.198817 0.238141 0.326249 0.143751 0.482537C0.0493612 0.638826 -0.00039295 0.817993 -0.000104948 1.00057ZM1.56889 9.5L1.99989 17.0926L1.99989 2.90857L1.56889 9.5Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="create-box">
|
|
<div class="box">
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/top.png"></div>
|
|
<div class="bottom"><img src="assets/bottom.png"></div>
|
|
</div>
|
|
|
|
<div class="text-wrapper">
|
|
<div class="title">KØN</div>
|
|
<select name="gender" id="gender-input">
|
|
<option value="m">MAND</option>
|
|
<option value="f">KVINDE</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/top.png"></div>
|
|
<div class="bottom"><img src="assets/bottom.png"></div>
|
|
</div>
|
|
|
|
<div class="text-wrapper">
|
|
<div class="title">FORNAVN</div>
|
|
<input type="text" placeholder="Anders" id="firstname-input">
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/top.png"></div>
|
|
<div class="bottom"><img src="assets/bottom.png"></div>
|
|
</div>
|
|
|
|
<div class="text-wrapper">
|
|
<div class="title">EFTERNAVN</div>
|
|
<input type="text" placeholder="And" id="lastname-input">
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/top.png"></div>
|
|
<div class="bottom"><img src="assets/bottom.png"></div>
|
|
</div>
|
|
|
|
<div class="text-wrapper">
|
|
<div class="title">LAND</div>
|
|
<input type="text" placeholder="INDTAST LAND" id="nationality-input">
|
|
</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/top.png"></div>
|
|
<div class="bottom"><img src="assets/bottom.png"></div>
|
|
</div>
|
|
|
|
<div class="text-wrapper">
|
|
<div class="title">FØDSELSDATO</div>
|
|
<input type="date" placeholder="ENTER" id="dob-input">
|
|
</div>
|
|
</div>
|
|
<div class="box btn-wrapper">
|
|
<div class="btn create">
|
|
<div class="text">OPRET</div>
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/left-w.png"></div>
|
|
<div class="bottom"><img src="assets/right-w.png"></div>
|
|
</div>
|
|
</div>
|
|
<div class="btn cancel">
|
|
<div class="text">ANNULLER</div>
|
|
<div class="icons">
|
|
<div class="top"><img src="assets/left.png"></div>
|
|
<div class="bottom"><img src="assets/right.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html> |