<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css"
integrity="sha512-w+u2vZqMNUVngx+0GVZYM21Qm093kAexjueWOv9e9nIeYJb1iEfiHC7Y+VvmP/tviQyA5IR32mwN/5hTEJx6Ng=="
crossorigin="anonymous"
/>
<title>Steckbrief</title>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<a href="/" class="pure-menu-item pure-menu-link">Home</a>
<a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
</div>
<main>
<h2 id="username"></h2>
<p>
Bitte fülle diese Seite nur mit korrekten Daten aus, da diese direkt in der Abizeitung dargestellt
werden. Auf dem Kinderbild solltest du gut sichtbar und nicht älter als 8 Jahre sein. Jeder Steckbrief
kann einen <b>optionalen</b> QR-Code beeinhalten, der mithilfe eures Textes generiert wird (letztes
Eingabe-Feld; frei lassen wenn nicht gewollt). Dieser Text kann sowohl auf eure Internet-Präsenzen
verlinken, als auch jeglichen random Text beeinhalten (bitte nicht rickrollen lol).
</p>
<form class="pure-form pure-form-stacked">
<fieldset>
<button type="submit" class="pure-button pure-button-primary">Senden</button>
</fieldset>
</form>
</main>
<div class="popup">
<img id="popup-img" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture" />
<button class="pure-button pure-button-primary" id="save-btn">Übernehmen</button>
<label for="rotation-slider">Drehen</label>
<input id="rotation-slider" type="range" min="-180" max="180" value="0" />
<div class="control-btns">
<button class="pure-button pure-button-primary" id="rot45" data-value="-45" data-rot="true">45</button>
<button class="pure-button pure-button-primary" id="nrot45" data-value="45" data-rot="true">-45</button>
<button class="pure-button pure-button-primary" id="norm" data-value="0" data-rot="false">0</button>
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"
integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw=="
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>