<!DOCTYPE html>
<html>
  <head>
    <title>Neutral</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Neutral - Page de style</h1>
    <p>Cette page est dédiée au développement et n'est pas en relation avec le Panel Neutral.</p>
    <a href="/"><button class="btn red"><span>Revenir sur le panel</span></button></a>
    <hr>
    <p>Police : <code>'Roboto', sans-serif</code></p>
    <p>Liens : <a href="/stylepage">https://neutral.raphix.fr/stylepage</a></p>
    <hr>
    <br>
    <style>
      .box-color {

        width: 100px;
        height: 100px;
        transition: 0.2s;
        border: 1px solid;
      }

      .box-color:hover {

        transform: scale(1.1);
      }
   
      .box-color:active {

        transform: scale(1);
        color: rgb(58, 255, 3);
      }


      button {
        width: fit-content ;
      }

      
    </style>

    <div class="col">
    <p>Classe : <code>btn</code></p>
    <div class="row">
      <button class="btn red"><span>Error Button</span></button>
      <button class="btn blue "><span>Info Button</span></button>
      <button class="btn yellow"><span>Warning Button</span></button>
      <button class="btn green"><span>Confirm Button</span></button>
      <button class="btn"><span>Default Button</span></button>
    </div>
    <p>Classe : <code>btn min</code></p>
    <div class="row">
      <button class="btn min red"><span><i class="fa fa-xmark"></i></span></button>
      <button class="btn min blue"><span><i class="fa fa-info"></i></span></button>
      <button class="btn min"><span><i class="fa fa-def"></i></span></button>
    </div>
    <div class="row">
      <div onclick="copyToClipboard('#323031')" style='background-color: #323031;' class="box-color"><p style="text-align: center;">#323031</p></div>
      <div onclick="copyToClipboard('#f10000')" style='background-color: #f10000;' class="box-color"><p style="text-align: center;">#f10000</p></div>
      <div onclick="copyToClipboard('#605e5863')" style='background-color: #605e5863;' class="box-color"><p style="text-align: center;">#605e5863</p></div>
    </div>
    <p>Classe : <code>field</code></p>
    <input type="text" class="field">
    
    <script>
      function copyToClipboard(text) {
        navigator.clipboard.writeText(text)
      }
      
    </script>
    <script defer="" src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" crossorigin="anonymous"></script>
  </body>
</html>
