<html>
<head>
<title>On The Dot</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/> <!-- 'monolith' theme -->
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
</head>
<body>
<div>
    <div class="logo">
        <img id="btn_options" src="./ress/gear.png" class="settingsButton" />
        <img src="ress/logo_dark.png" id="logo"/>
        <img src="ress/light" id="light" class="lightButton" onClick="switchLight()"/>
        
    </div>
    
</div>


<div id="modeSelection" class="mode-container">
    <ul id="diff" class="all-container">
        <img id="btn_easy" class="button" src="./ress/button_diff_easy.png"/>
        <img id="btn_med" class="button" src="./ress/button_diff_normal.png"/>
        <img id="btn_hard" class="button" src="./ress/button_diff_hard.png"/>
    </ul>
    <ul id="modes" class="all-container">
        <img id="btn_points" class="button" src="./ress/button_mode_points.png"/>
        <img id="btn_temps" class="button" src="./ress/button_mode_temps.png"/>
        <img id="btn_survie" class="button" src="./ress/button_mode_survie.png"/>
    </ul>
    <ul id="points" class="all-container ad">
        <img id="5p" class="button z" src="./ress/button_points_5.png"/>
        <img id="10p" class="button z" src="./ress/button_points_10.png"/>
        <img id="15p" class="button z" src="./ress/button_points_15.png"/>
        <img id="20p" class="button z" src="./ress/button_points_20.png"/>
    </ul>
    <ul id="temps" class="all-container ad">
        <img id="5m" class="button z" src="./ress/button_temps_5.png"/>
        <img id="10m" class="button z" src="./ress/button_temps_10.png"/>
    </ul>
    <ul id="survie" class="all-container ad">
        <img id="15s" class="button z" src="./ress/button_survie_15.png"/>
        <img id="30s" class="button z" src="./ress/button_survie_30.png"/>
        <img id="45s" class="button z" src="./ress/button_survie_45.png"/> 
    </ul>
</div>
<div class="mode-container">
    <div class="texte">
        Pseudo :
        <input type="text" id="field_pseudo" />
    </div>
    <ul id="btns_play">
        <img id="btn_play" src="ress/button_play.png" onClick="play()"/>
        <img id="btn_play_des" src="ress/button_play_desac.png"/>
        <img id="btn_high" src="ress/button_highscores.png" onClick="goHigh()"/>
    </ul>
</div>

<!-- The Modal -->
<div id="optionsModal" class="modal">

<!-- Modal content -->
<div class="modal-content" id="modal">
    <span class="close">&times;</span>
    <p class="texte ad">Options</p>
    <div class="slidecontainer">
        <div>
            <p class="texte">Changer le nombre de points
            <img src="ress/-" onClick="less()" id="-"/>
            <span id="dotsNumber" class="texteG"></span>
            <img src="ress/+" onClick="more()" id="+"/></p>
        </div>
        <p class="texte">
            Mode d'affichage :
        </p>
        <div id="displays">
            <span id="points_di" class="dot" onClick="selectDisplay('points')"></span>
            <img id="gems_di" src="ress/green.png" onClick="selectDisplay('gems')"/>
            <span id="both_di" class="dot both" onClick="selectDisplay('both')"></span>
        </div>
        <p class="texte"> 
            Mettre le jeu en pause après avoir gagné un point
        </p>
        <input type="radio" id="yes_pause" value="1" name="pause">
        <label for="no_pause" class="texte">Oui</label>
        <input type="radio" id="no_pause" value="0" name="pause">
        <label for="no_pause" class="texte">Non</label>

        
        <div id="color_pickers" class="color-pickers">
            <div class="texte"> Choisir les couleurs des points<br/>
                <span id="col1" class="dot col1 pickr"></span>
                <span id="col2" class="dot col2 pickr"></span>
                <span id="col3" class="dot col3 pickr"></span>
                <span id="col4" class="dot col4 pickr"></span>
                <span id="col5" class="dot col5 pickr"></span>
                <span id="col6" class="dot col6 pickr"></span>
                <span id="col7" class="dot col7 pickr"></span>
                <span id="col8" class="dot col8 pickr"></span>
            </div>
        </div>
        <div id="gems_picker">
            <div class="texte">Choisir les gemmes à afficher<br/></div>
            <img id="gem1" draggable="true" ondragstart="drag(event)"/>
            <img id="gem2" draggable="true" ondragstart="drag(event)"/>
            <img id="gem3" draggable="true" ondragstart="drag(event)"/>
            <img id="gem4" draggable="true" ondragstart="drag(event)"/>
            <img id="gem5" draggable="true" ondragstart="drag(event)"/>
            <img id="gem6" draggable="true" ondragstart="drag(event)"/>
            <img id="gem7" draggable="true" ondragstart="drag(event)"/>
            <img id="gem8" draggable="true" ondragstart="drag(event)"/>
            <div>
            <div id="slot1" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="slot2" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="slot3" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="slot4" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="slot5" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="slot6" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="slot7" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="slot8" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <img id="resetGems2" onClick="resetGems()" src="ress/reset"/>
            </div>
        </div>
        <div>
            <img src="ress/OK.png" id="btn_confirm" onClick="saveOptions()"/>
        </div>
    </div>
</div>

</div>
<script src="bakery.js"></script>
<script src="button_displayer.js"></script>
<script src="options.js"></script>
<script src="themeSwitcher.js"></script>
</body>
</html>
