<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menabox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<!-- ***********************************
***   BARRE COMMANDE PRINCIPALE ***
*********************************** -->
<body>
    <div class="container">
        <div class="sidebar">
            <form id="rectangleForm" action="rectangle.php" method="GET">
                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp Titre &nbsp</h2>
                    <div class="submenu"></div>
                </div>


                <!-- ******** FORMAT ******** -->

                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp Format (mm) &nbsp</h2>
                    <div class="submenu">
                        <div class="input-group">
                            <div class="input-container">
                                <!-- Utilisation de la valeur PHP pour les champs -->
                                <input type="number" class="input-mm" id="largeur" name="largX" min="1" max="1700" required value="210"
                                    value="<?php echo htmlspecialchars($largX); ?>">
                                <input type="number" class="input-mm" id="hauteur" name="hautX" min="1" max="1700" required value="297"
                                    value="<?php echo htmlspecialchars($hautX); ?>">
                            </div>

                                 <!-- Icone "reverse" et ligne -->

                            <div class="icon-group">
                                <img src="/images/link_off.svg" alt="Unlink" class="icon-button2">
                                <svg class="line-svg" height="2" width="100%" xmlns="http://www.w3.org/2000/svg">
                                    <line x1="0" y1="0" x2="100%" y2="0" style="stroke:#fff;stroke-width:2" />
                                </svg>
                            </div>
                        </div>
                        <p class="description">À la française :</p>
                        <div class="checkbox-group">
                            <label>
                                <input type="checkbox" name="dicton">
                                déterminer choix
                            </label>
                        </div>
                    </div>
                </div>

                <!-- ******** RELIURE ******** -->

                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp Reliure &nbsp</h2>
                    <div class="submenu">
                        <div class="checkbox-group">
                            <label>
                                <input type="checkbox" name="image1">
                                Cartonato
                            </label>
                            <label>
                                <input type="checkbox" name="image2">
                                Brossura
                            </label>
                            <label>
                                <input type="checkbox" name="image3">
                                Punto metallico
                            </label>
                            <label>
                                <input type="checkbox" name="image4">
                                Olandese
                            </label>
                        </div>
                    </div>
                </div>

                <!-- ******** PAGES ******** -->

                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp Pages &nbsp</h2>
                    <div class="submenu"></div>
                </div>

                <!-- ******** JAQUETTE ******** -->

                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp Jaquette &nbsp</h2>
                    <div class="submenu"></div>
                </div>

                <!-- ******** RABATS ******** -->

                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp Rabats &nbsp</h2>
                    <div class="submenu"></div>
                </div>

                <!-- ******** À PROPOS ******** -->

                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp À propos &nbsp</h2>
                    <div class="submenu"></div>
                </div>

                <!-- ******** CONTACT ******** -->

                <div class="menu-item">
                    <h2><span class="chevron">▶</span>&nbsp Contact &nbsp</h2>
                    <div class="submenu"></div>
                </div>

                <!-- ******** BOUTON VALIDER ******** -->


                <button type="submit" class="scale-btn">Valider</button>
            </form>
        </div>

        <div class="main-content">
            <div class="svg-wrapper">
                <div id="svgContainer"></div>
            </div>
        </div>
    </div>

    <script src="scripts/main.js"></script>
</body>

</html>