forked from TheScienceUniverse/Circuit_Builder
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
61 lines (61 loc) · 3.63 KB
/
index.html
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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circuit Diagram</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="./script.js"></script>
</head>
<body onload="init()">
<main>
<div id="circuit-container">
<div id="circuit-toolbox">
<div id="component-search-box">
<textarea id="component-search-text-box" rows="1" title="Type Search Item"></textarea>
<button id="component-search-button" title="Press to Search">
<img src="./media/search.svg" alt="Search for Components">
</button>
</div>
<div id="component-tool-list">
<div class="component-box"><img class="component-tool" src="./media/dc_power.svg" alt="dc_power" title="DC Power"></div>
<div class="component-box"><img class="component-tool" src="./media/ac_power.svg" alt="ac_power" title="AC Power"></div>
<div class="component-box"><img class="component-tool" src="./media/ground.svg" alt="ground" title="Ground / Earth"></div>
<div class="component-box"><img class="component-tool" src="./media/resistor.svg" alt="resistor" title="Resistor"></div>
<div class="component-box"><img class="component-tool" src="./media/capacitor.svg" alt="capacitor" title="Capacitor"></div>
<div class="component-box"><img class="component-tool" src="./media/inductor.svg" alt="inductor" title="Inductor"></div>
<div class="component-box"><img class="component-tool" src="./media/switch.svg" alt="switch" title="Switch"></div>
<div class="component-box"><img class="component-tool" src="./media/fuse.svg" alt="fuse" title="Fuse"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_buffer_gate.svg" alt="binary_buffer_gate" title="Binary Buffer Gate / PN Diode"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_not_gate.svg" alt="binary_not_gate" title="Binary NOT Gate"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_or_gate.svg" alt="binary_or_gate" title="Binary OR Gate"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_nor_gate.svg" alt="binary_nor_gate" title="Binary NOR (Not OR) Gate"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_and_gate.svg" alt="binary_and_gate" title="Binary AND Gate"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_nand_gate.svg" alt="binary_nand_gate" title="Binary NAND (Not AND) Gate"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_xor_gate.svg" alt="binary_xor_gate" title="Binary XOR (eXclusive OR) Gate"></div>
<div class="component-box"><img class="component-tool" src="./media/binary_xnor_gate.svg" alt="binary_xnor_gate" title="Binary XNOR (eXclusive Not OR) Gate"></div>
<div class="component-box"><img class="component-tool" src="./media/zener_diode.svg" alt="zener_diode" title="Zener Diode"></div>
</div>
</div>
<div id="circuit-map">
<svg xmlns="http://www.w3.org/2000/svg"
id="circuit"
width="1300"
height="710"
viewbox="0 0 1300 710"
>
<g id="connections"></g>
</svg>
<div id="component-selection-area" class="hidden"></div>
</div>
<div id="circuit-overlay">
<p class="overlay_key">View coordinates:</p>
<p class="overlay_value"></p>
<p class="overlay_key">Map coordinates:</p>
<p class="overlay_value"></p>
</div>
</div>
</main>
</body>
</html>