1 files changed, 28 insertions, 2 deletions
diff --git a/profile/public/index.html b/profile/public/index.html
index 672f409..91cb545 100644
--- a/profile/public/index.html
+++ b/profile/public/index.html
@@ -10,6 +10,12 @@
             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>
 
@@ -20,13 +26,33 @@
         </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.
+            </p>
             <form class="pure-form pure-form-stacked">
                 <fieldset>
-                    <!-- TODO: Consider autosave -->
-                    <button type="submit" class="pure-button pure-button-primary">Wohooo</button>
+                    <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>