WebCAD/index.html at master · William9923/WebCAD · 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D Web CAD | Grafkom</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <link rel="stylesheet" href="./public/style.css">
</head>

<body>

    <!-- <header>
        <h2 class="center-align">
            2D CAD Web
        </h2>
    </header> -->

    <div style="height: 9px;"></div>
    <center>
    <div class="inliners centered">
        <div class="row">
            <div class="col s12" style="margin-bottom: -15px;">
                <center>
                <div id="simpleModal" class="modal-overlay">
                    <div class="modal-content">
                    <div class="modal-header">
                        <span class="closeBtn">x</span>
                        <h5 id="judul">Pilih Opsi Aksi (actions)</h5>
                    </div>
                    <div style="margin-right: 20px;" class="modal-body">
                        <div style="height: 15px;"></div>
                        <h6 style="font-size: medium;" id="isi">Pilih Opsi Tools Menggambar Denah, pilih warna pada roda warna untuk memilih warna sebelum membuat suatu bentuk</h6>
                        <div style="height: 30px;"></div>
                    </div>
                    </div>
                </center>
                </div>
            </div>

            <!-- <center> -->
            <div style="width: 80%; margin-bottom: 10px;">
                <div class="flex-container">
                    <div>
                        <div>
                            <button id="modalBtn" class="btn-primary shadow p-0 px-3 popup-trigger sizewidth">?</button>
                        </div>
                    </div>
                     <div>
                        <div class="col s1">
                            <select style="width: 250px; height: 2.2rem; align-items: flex-start;" id="selector-model" name="model" class="browser-default" required>
                                <option value="" disabled selected>Choose your option</option>
                                <option value="line">Create Line</option>
                                <option value="square">Create Square</option>
                                <option value="poly">Create Polygon</option>
                                <option value="edit-line">Edit Line</option>
                                <option value="edit-square">Edit Square</option>
                                <option value="edit-poly">Edit Polygon</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <div style="margin-left: 2px;" class="input-color-container">
                            <input id="color-input" value="#000002" class="input-color" type="color">
                        </div>
                    </div>
                    <div>
                        <div style="background-color: rgba(0, 0, 0, 0); width: 10px; cursor: context-menu;" id="x" class="btn-primary shadow p-0 px-3 popup-trigger sizewidth">

                        </div>
                    </div>
                    <div>
                        <button id="resetBtn" name="action" type="button" class="btn-primary shadow p-0 px-3 popup-trigger sizewidth">
                            RESET
                        </button>
                    </div>
                    <div>
                        <button id="importBtn" name="action" type="button" class="btn-primary shadow p-0 px-3 popup-trigger sizewidth">
                            IMPORT
                        </button>
                    </div>
                    <div>
                        <button id="exportBtn" name="action" type="button" class="btn-primary shadow p-0 px-3 popup-trigger sizewidth">
                            EXPORT
                        </button>
                    </div>
                </div>
            </div>
            </center>

        </div>
            <center>
                <div class="inliners">
                    <canvas style="display: inline-block;" id="glCanvas" width="582" height="582">
                    </canvas>
                </div>
            </center>


        <center>
            <br>
        <input type="file" id="file-import">
        </center>

    </div>

    <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 vPosition;
        attribute vec4 vColor;
        varying vec4 fColor;
        void main()
        {
          gl_Position = vPosition;
          fColor = vColor;
        }
      </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
        precision mediump float;
        varying vec4 fColor;
        void main()
        {
          gl_FragColor = fColor;
        }
      </script>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">
    </script>
    <script type="text/javascript" src="./public/webgl-utils.js"></script>
    <script type="text/javascript" src="./public/popup.js"></script>
    <script type="text/javascript" src="./public/utility.js"></script>

    <script type="module" src="./src/app.js"></script>
</body>

</html>