<!DOCTYPE html>
<html lang="de">
<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">
    <title>Schere, Stein, Papier</title>
    <link href="static/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap.bundle.min.js"></script>
    <script src="static/script.js"></script>
    <style>
        @font-face {
            font-family: "Open Sans";

            src: url(/static/fonts/OpenSans-Regular.woff2) format("woff2"),
                url(/static/fonts/OpenSans-Regular.woff) format("woff"),
                url(/static/fonts/OpenSans-Regular.ttf) format("truetype");
            font-weight: 400;
            font-style: normal;        }
        html, body {
            background-color: #f6f7f7;
            font-size: 1.4vw;
            font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            text-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
            color: #f6f7f7;
            margin: 0;
            padding: 0;
            height: 100%; 
            overflow: hidden;
            font-weight: bold;
        }
        body {    
            display: flex; 
            justify-content: center; 
            align-items: center; 
            flex-direction: column; 
            min-height: 100vh;
        }
       .container_play {
            background-color: #007cc1;
            width: 100%;
            height: 100%;
            min-height: 400px;
            margin: auto;
            height: 100vh; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            }
        .header {
            border-bottom: 3px solid gray;
            background-color: #f6f7f7;
            height: 12vh;
            position: fixed;
            z-index: 10; 
            text-align: left;
            top: 0;                    /* Der Header soll immer am oberen Rand bleiben */
            left: 0;                   /* Der Header soll am linken Rand bleiben */
            width: 100%;
        }
        .responsive {
            max-width: 100%;
            max-height: 250px;
            height: auto;
        }
        .responsive-small {
            max-width: 30%;
            height: auto;
        }
        .logo {
            padding: 2%;
            max-width: 15%;
            height: auto;
            margin: auto;
            max-height: 120%;
        }
        .col {
            font-size: 1.75rem;
            height: auto;
            display: flex; 
            justify-content: center;
            align-items: center; 
            padding: 0%;
            text-align: center;
        }

        .row {
            min-height: 200px;
            flex-grow: 1;
            display: flex; 
            justify-content: center;
            align-items: center; 
            padding-top: 3%;
            height: 30%;
        }
        .row2 {
            min-height: 100px;
            flex-grow: 1;
            display: flex; 
            justify-content: center;
            align-items: center; 
            padding-top: 3%;
            height: 30%;
        }
        .btn {
            background-color: #f6f7f7;
            font-size: 2.5vw;
            width: auto;
            color: #005b8e;
            font-weight: bold;
            border-color: #005b8e;
        }
        .close-btn {
            position: absolute;         /* Ermöglicht die Positionierung relativ zum nächsten positionierten Element (hier header) */
            top: 10px;                  /* Abstand vom oberen Rand des Headers */
            right: 10px;                /* Abstand vom rechten Rand des Headers */
            background-color: transparent;  /* Hintergrundfarbe transparent, damit es keine Hintergrundfarbe gibt */
            border: none;               /* Entfernt den Rand des Buttons */
            color: #50585c;                /* Farbe des "X" */
            font-size: 2rem;            /* Schriftgröße für das "X" */
            cursor: pointer;           /* Zeigt einen Mauszeiger an, um es als klickbar zu kennzeichnen */
            z-index: 20;                /* Stellt sicher, dass der Button über allen anderen Inhalten im Header liegt */
        }
        .d-grid {
            padding-bottom: 20%;
        }

/* Optionale Anpassungen beim Hover */
        .close-btn:hover {
            color: #ff0000;             /* Farbe des "X" beim Hover (z.B. Rot) */
        }
        #result {
            padding-top: 10%;
        }
        #user_sign, #computer_sign {
            padding: 5%;
            padding-top: 10%;
        }
        @media screen and (min-width: 1400px) {
            html, body {
                font-size: 1rem;
            }
            .btn {
                font-size: smaller;
            }
            .logo {
                max-width: 25%;
                max-height: 130%
            }
        }
        @media screen and (max-height: 700px) {
            .responsive-small {
                max-width: 60%;
            }
            html, body {
                font-size: 1.7vw
            }
            #result {
                	padding-top: 5%;
        }
        }
    </style>
</head>

<body>
    
    <!-- Game Screen -->
  <div class="container_play border" id="play_screen">
    <div class="header">
        <object 
        data="../static/img/SICK_Logo_Claim_RGB.svg"
        type="image/svg+xml"
        class="logo">
    </object>
    <a href="/" class="close-btn" id="close-btn">&#10006;</a>
    </div>
        <div class="row">
            <div class="col" id="user_sign">
            </div>
            <div class="col" id="result">
                <img src="" alt="Ergebnis" class="responsive-small">
            </div>
            <div class="col" id="computer_sign">
            </div>
        </div>
        <div class="row">
            <div class="col" id="user_sign_img">
                <img src="" alt="Hand Spieler" class="responsive">
            </div>
            <div class="col" id="number">
            </div>
            <div class="col" id="computer_sign_img">
                <img src="" alt="Hand Computer" class="responsive">
            </div>
        </div>
        <div class="row2">
            <div class="col" >
                <div class="col" id="user_score">
                    <img src="" alt="Score Spieler" class="responsive">
                </div>
            </div>
            <div class="col">
                <div class="d-grid gap-2 col-6 mx-auto">
                    <a class="btn btn-outline-dark" id="replay" href="/">Nochmal?</a>
                    <button class="btn btn-outline-dark" id="rungame" onClick="runGame()">Start</button>
                </div>
            </div>
        <div class="col">
            <div class="col" id="computer_score">
                <img src="" alt="Score Computer" class="responsive">
            </div>
        </div>
        </div>
    </div>
</body>
</html>