Loquicom
/
cv


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <link rel="stylesheet" type="text/css" href="css/cmd.min.css">
</head>
<body>
    <style type="text/css">
        body {
            background: orange;
        }

        #cmd {
  width: 100%;
  height: 400px;
  transition: all .15s linear;
        }

        #cmd.fullscreen {
          z-index: 9998;
          width: 100%;
          height: 100%;
          top: 0 !important;
          left: 0 !important;
        }

        #loader {
            position: fixed;
            z-index: 9999;
          width: 100%;
          height: 100%;
          top: 0 !important;
          left: 0 !important;
          background: blue;
        }


        .window {
            border: 4px solid #f1f1f1;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .window-toolbar {
              padding: 10px;
              background: #f1f1f1;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
        }

                /* Clear floats after the columns */
        .window-toolbar:after {
          content: "";
          display: table;
          clear: both;
        }

        .window-toolbar-left {
            float: left;
            width: 10%;
        }

        .window-toolbar-center {
            float: left;
            width: 75%;
            text-align: center;
        }

        .window-toolbar-right {
            float: left;
            width: 15%;
            text-align: right;
        }

        .dot {
  margin-top: 4px;
  height: 12px;
  width: 12px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}


.hide {
    display: none;
}
    </style>

    <div id="loader"></div>
    <h1>Hello</h1>

    <div class="window">
        <div class="window-toolbar">
            <div class="window-toolbar-left">
                Cmd
            </div>
            <div class="window-toolbar-center">
                Je suis un titre
            </div>
            <div class="window-toolbar-right">
                <span class="dot" onclick="show()" style="background:#5AC05A;"></span>
                  <span class="dot" onclick="test()" style="background:#FDD800;"></span>
                  <span class="dot" onclick="window.close()" style="background:#ED594A;"></span>
            </div>
        </div>
        <div id="cmd">
            <button onclick="test()">FS</button>
        </div>
    </div>
    
    
    <script src="js/jquery.min.js"></script>
    <script src="js/cmd.js"></script>
    <script type="text/javascript">
        const shell = new Cmd({
        selector: '#cmd',
        busy_text: 'Traitement...',
        unknown_cmd: 'Commande non reconnue, tapez "aide" pour avoir la liste des commandes disponibles'
    });

        test();
        setTimeout(() => {
            $('#loader').remove();
        }, 500);

        function test() {
            const pos = $('#cmd').position();
            if (!$('#cmd').hasClass('fullscreen')) {
                $('#cmd').css('top', Math.trunc(pos.top) + 'px');
                $('#cmd').css('left', Math.trunc(pos.left) + 'px');
                $('#cmd').css('position', 'fixed');
            } else {
                $('#cmd').one('transitionend', function() {
                    $('#cmd').css('top', '');
                    $('#cmd').css('left', '');
                    $('#cmd').css('position', '');
                });
            }
            
            $('#cmd').toggleClass('fullscreen');
        }

        function show() {
            if ($('#cmd').hasClass('pasla')) {
                //$('#cmd').toggleClass('hide');
                $('#cmd').css('height', '');
            } else {
                $('#cmd').css('height', '0');
                /*$('#cmd').one('transitionend', () => {
                    $('#cmd').toggleClass('hide');
                });*/
            }

            $('#cmd').toggleClass('pasla');
        }
    </script>
</body>
</html>