• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>test</title>
7    <style>
8        #visual_area {
9            background-color: #808000;
10            width: 100;
11            height: 100;
12            position: absolute;
13            left: 0px;
14        }
15
16        #attribute_area {
17            background-color: #ffffff;
18            position: absolute;
19            width: 300px;
20            height: 100%;
21            right: 0px;
22        }
23
24        .att_title {
25            background-color: #000000;
26            color: #ffffff;
27            width: 300px;
28            font-family: Consolas, sans-serif;
29            margin-top: 0px;
30            text-align: center;
31        }
32
33        .att_line {
34            width: 300px;
35            margin-top: 0px;
36            text-align: center;
37        }
38
39        .input_text_readonly {
40            color: #000000;
41            width: 80px;
42            display: inline-block;
43            font-family: Consolas, sans-serif;
44            text-align: center;
45            font-size: 16px;
46            font-weight: bold;
47        }
48
49        .input_text {
50            background-color: #ffffff;
51            color: #000000;
52            width: 100px;
53            height: 25px;
54            font-size: 16px;
55            font-family: Consolas, sans-serif;
56            border-radius: 3px;
57            border: 2px solid #D3D3D3;
58            outline: none;
59            padding-left: 10px;
60            padding-right: 10px;
61        }
62
63        .input_text:hover {
64            outline: none;
65            border-color: #487EB8;
66        }
67
68        .button_click {
69            background-color: #487EB8;
70            color: #ffffff;
71            width: 150px;
72            height: 30px;
73            font-size: 16px;
74            font-family: Consolas, sans-serif;
75            border-radius: 3px;
76            border-color: #D3D3D3;
77            border: none;
78            align-self: center;
79            display: block;
80            margin: 0 auto;
81            border: 2px solid #D3D3D3;
82            outline: none;
83        }
84
85        .button_click:hover {
86            outline: none;
87            border-color: #487EB8;
88        }
89
90        .label_button_click {
91            background-color: #487EB8;
92            color: #ffffff;
93            width: 150px;
94            height: 30px;
95            font-size: 16px;
96            font-family: Consolas, sans-serif;
97            border-radius: 3px;
98            border-color: #D3D3D3;
99            border: none;
100            align-self: center;
101            display: inline-block;
102            margin: 0 auto;
103            border: 2px solid #D3D3D3;
104            outline: none;
105        }
106
107        .label_button_click:hover {
108            outline: none;
109            border-color: #487EB8;
110        }
111
112        .button_click_delete {
113            background-color: #487EB8;
114            color: #ffffff;
115            width: 150px;
116            height: 30px;
117            font-family: Consolas, sans-serif;
118            font-size: 16px;
119            border-radius: 3px;
120            border-color: #D3D3D3;
121            align-self: center;
122            display: block;
123            margin: 0 auto;
124            border: 2px solid #D3D3D3;
125            outline: none;
126        }
127
128        .button_click_delete:hover {
129            outline: none;
130            border-color: #487EB8;
131        }
132
133        .select_list {
134            background-color: #ffffff;
135            color: #000000;
136            width: 130px;
137            font-family: Consolas, sans-serif;
138            height: 30px;
139            font-size: 16px;
140            border-radius: 3px;
141            padding-left: 10px;
142            border: 2px solid #C4C4C4;
143            outline: none;
144            appearance: none;
145            -webkit-appearance: none;
146            -moz-appearance: none;
147            background: url("images/arrow.png") no-repeat scroll right 1px center transparent;
148            background-size: 15px;
149        }
150
151        .select_list:hover {
152            outline: none;
153            border-color: #487EB8;
154        }
155
156        .text_area {
157            background-color: #000000;
158            color: #ffffff;
159            margin-left: 10px;
160            width: 180px;
161            height: 180px;
162            resize: vertical;
163        }
164    </style>
165</head>
166
167<body style="margin:0">
168    <canvas id="visual_area"></canvas>
169    <div id="attribute_area"></div>
170
171    <script src="./dist/main.js"></script>
172    <!-- <script src="./src/index.js" type="module"></script> -->
173    <!-- <script src="./src/index.js"></script> -->
174</body>
175
176</html>