Untitled

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Viktor´s lair</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/eec1ab2632.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">Under construction...</h1>
            <p class="lead">Hi there! I´m currently redesigning this webpage, please enjoy this simple javascript drawing tool in the meanwhile :)</p>
            <p>- Viktor Sveinsson</p>
            <div class="social">
                <a href="https://www.facebook.com/viktorsveins/">
                    <i class="fab fa-facebook-square"></i>
                </a>
                <a href="https://www.instagram.com/viktorljosberi/">
                    <i class="fab fa-instagram-square"></i>
                </a>
                <a href="https://www.linkedin.com/in/viktor-sveinsson-333502162/">
                    <i class="fab fa-linkedin"></i>
                </a>
                <a href="https://www.github.com/ViktorSveins/">
                    <i class="fab fa-github-square"></i>
                </a>
            </div>
        </div>
    </div>

    <div id="drawing-board">
        <div id="tools" class="menu" width="800" >
            <div class="shape-icon" data-shape="settings">
                <i class="fas fa-cogs"></i>
            </div>
            <div class ="shape-icon" data-shape="select">
                <i class="fas fa-mouse-pointer"></i>
            </div>
            <div class="shape-icon" data-shape="text">
                <i class="fillable far fa-keyboard"></i>
            </div>
            <div class="shape-icon" data-shape="circle">
                <i class="fillable far fa-circle"></i>
            </div>
            <div class="shape-icon" data-shape="rectangle">
                <i class="fillable far fa-square"></i>
            </div>
            <div class="shape-icon" data-shape="line">
                <i class="fas fa-slash"></i>
            </div>
            <div class="shape-icon selected" data-shape="freehand">
                <i class="fas fa-pencil-alt"></i>
            </div>
        </div>

        <canvas id="my-canvas" width="800" height="500">
            HTML5 &lt;canvas&gt;&lt;/canvas&gt; is not supported
        </canvas>

        <div id="properties" class="menu">
            <div id="load" class="prop-icon">
                    <div class="dropup">
                        <div class="dropup-loads hide-dropup"></div>
                    </div>
                <i class="fas fa-upload" id="load-icon"></i>
            </div>

            <div id="save" class="prop-icon">
                <i id="save-icon" class="fas fa-download"></i>
                    <div class="dropup">
                        <div class="dropup-input hide-dropup">
                                <div class="text-field input-group mb-3 ">
                                    <div class="input-group-prepend ">
                                        <div class="input-group-text">File name</div>
                                    </div>
                                    <input type="text" class="form-control" placeholder="Enter file name here" id="file-name-input">
                                    <button type="button" class="btn btn-success" id="save-button">Save</button>
                                </div>
                        </div>
                    </div>
            </div>
            <div id="undo" class="prop-icon">
                <i class="fas fa-undo-alt"></i>
            </div>
            <div id="redo" class="prop-icon">
                <i class="fas fa-redo-alt"></i>
            </div>
            <div id="clear" class="prop-icon">
                <i class="fas fa-snowplow"></i>
            </div>
            <div id="text" class="prop-icon">
                <div class="text-field input-group mb-3 ">
                    <div class="input-group-prepend ">
                        <i class="input-group-text fas fa-i-cursor"></i>
                    </div>
                    <input type="text" class="form-control" placeholder="Enter text here" id="text-input">
                </div>
            </div>
            <div id="delete" class="prop-icon">
                <i class="fas fa-trash-alt"></i>
            </div>
            <div id="move" class="prop-icon" data-property="move">
                <i class="fas fa-arrows-alt"></i>
            </div>
            <div id="color" class="prop-icon" data-property="color">
                <input type="color" id="color-picker">
                <i class="fas fa-palette"></i>
            </div>
            <div id="fill" class="prop-icon" data-proterty="fill">
                <i class="fas fa-fill"></i>
            </div>
            <div id="fonts" class="prop-icon" data-property="fonts">
                <i id="font-icon" class="fas fa-font"></i>
                <div class="dropup">
                    <div class="dropup-fonts hide-dropup">
                        <div class="font selected-font" data-font="Arial" style="font-family: Arial;">Arial</div>
                        <div class="font" data-font="Helvetica" style="font-family: Helvetica;">Helvetica</div>
                        <div class="font" data-font="Times" style="font-family: Times;">Times</div>
                        <div class="font" data-font="Courier" style="font-family: Courier;">Courier</div>
                        <div class="font" data-font="Verdana" style="font-family: Verdana;">Verdana</div>
                        <div class="font" data-font="Georgia" style="font-family: Georgia;">Georgia</div>
                        <div class="font" data-font="Palatino" style="font-family: Palatino;">Palatino</div>
                        <div class="font" data-font="Garamond" style="font-family: Garamond;">Garamond</div>
                        <div class="font" data-font="Bookman" style="font-family: Bookman;">Bookman</div>
                        <div class="font" data-font="Comic Sans MS" style="font-family: Comic Sans MS;">Comic Sans</div>
                        <div class="font" data-font="Trebuchet MS" style="font-family: Trebuchet MS;">Trebuchet</div>
                        <div class="font" data-font="Impact" style="font-family: Impact;">Impact</div>
                    </div>
                </div>
            </div>
            <div id="font-size" class="prop-icon" data-property="font-size">
                <i class="fas fa-arrows-alt-v"></i>
            </div>
            <div id="width" class="prop-icon" data-property="width">
                <i id="width-icon" class="fas fa-arrows-alt-h"></i>
                <div class="dropup">
                    <div class="dropup-slider hide-dropup">
                        <input type="range" class="custom-range width-setting" min="2" max="15" value="1">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
    <script src="toolbar.js"></script>
    <script src="drawio.js" charset="utf-8"></script>
    <script src="shapes.js" charset="utf-8"></script>
</body>

</html>