web-tuning/index.html at develop · iradukunda1/web-tuning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>web - Tunings</title>
    <link rel="icon" href="./images/favicon.ico" />
    <link href="./css/index.css" rel="stylesheet">
</head>

<body>
    <!-- <img class="hidden" id="goofyPic"
        src="https://res.cloudinary.com/newpoint/image/upload/v1603986942/image/image_sal4vg.jpg"
        alt="Goofy pic of me" /> -->
    <!-- <img class="hidden" id="goofyPic" src="image_sal4vg.jpg" alt="Goofy pic of me" /> -->
    <container id="canvas">
        <canvas id="canvas">
        <p>Unfortunately, your browser is currently unsupported by our web
        application.  We are sorry for the inconvenience. Please use one of the
        supported browsers listed below, or draw the image you want using an
        offline tool.</p>
        <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a
          href="http://www.mozilla.com">Firefox</a>,
          <a href="https://www.google.com/chrome">Chrome</a>,
          <a href="https://www.apple.com/safari">Safari</a>, and <a
          href="http://www.konqueror.org">Konqueror</a>.</p>
        </canvas>
    </container>
    <div class="lines-control">
        <button id="undo">undo</button>
        <button id="redo">redo</button>
    </div>
    <div class="drawing-tool"><label>Drawing tool: <select id="dtool">
      <option value="line">Line</option>
      <option value="pencil">Pencil</option>
      </select></label>
    </div>
    <div id="controls">
        <div class="lightBorder">
            <p style="display: none;"><label>Fill Color: <input id="fillColor" type="color" value="#24B0D5"></label></p>
            <p style="display: none;"><label>Fill Canvas: <input id="backgroundColor" type="color"
                        value="#FFFFFF"></label></p>
            <p style="display: none;"><label>Stroke Color: <input id="strokeColor" type="color"></label></p>
        </div>

        <div class="lightBorder">
            <p><label>Scale &nbsp;&nbsp;&nbsp; 1:&nbsp;&nbsp;&nbsp;&nbsp;<input id="defaultScale"
                        placeholder="Enter scale eg:1500" type="text" value="100"></label></p>
            <p><label>Centimeters: &nbsp;&nbsp;&nbsp;<input id="centimeters" disabled type="text"></label></p>
            <p><label>Menters: &nbsp;&nbsp;&nbsp;&nbsp;<input id="meters" disabled type="text"></label></p>
        </div>
        <p>
            <input id="calcBtn" type="button" value="Calculate Total">
            <input id="clearCanvas" type="button" value="Erase all">
        </p>

    </div>
</body>
    <script src="./js/index.js"></script>
    <script src="https://unpkg.com/konva@7.2.2/konva.min.js"></script>
</html>