-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
60 lines (56 loc) · 5.02 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
<!DOCTYPE html>
<html lang="en" class="h-full w-full bg-black">
<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>Computer</title>
<link rel="shortcut icon" href="./public/img/logo.png">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body ondragover="drag_over(event)" ondrop="drop(event)" class="h-full w-full flex flex-grow flex-col overflow-hidden">
<div class="bg-gray-800 w-full border-gray-900 border-8 flex-grow inline-flex relative transition">
<button onclick="add_input_point()" class="absolute h-full bg-gray-600 focus:outline-none w-2 left-10 z-10"></button>
<div id="inputs_points" class="flex flex-col justify-center ml-7 h-full transition-all">
</div>
<div id="content" class="absolute h-full w-full">
<svg id="svg_joint" class="h-full w-full absolute">
</svg>
</div>
<button onclick="add_output_point()" class="h-full bg-gray-600 focus:outline-none w-2 absolute right-10 z-10"></button>
<div id="outputs_points" class="absolute flex flex-col justify-center right-7 h-full">
</div>
</div>
<div id="button_block" class="flex flex-row gap-2 flex-wrap p-2 h-auto bg-gray-800">
<button class="flex items-center gap-1 px-2 py-1 rounded transition text-white/75 transition bg-sky-600/50 hover:text-white hover:bg-sky-600" onclick="alert(`- En bas se trouvent les transistors déjà existants, vous pouvez cliquer dessus pour les ajouter.\n - La barre grise à gauche sert a ajouter un input lorsqu'on clique dessus. Celle de droite sert à ajouter des points de sortie.\n- En cliquant sur le gros rond de l’input vous changez sa valeur (état haut : blanc, bas : rouge).\n- Pour ajouter un fil, il faut cliquer sur les deux points que vous souhaitez relier.\n- Double cliquez sur un fil ou un transistor pour le supprimer.\n- Cliquez sur CREATE pour fabriquer un transistor à partir de votre circuit actuel.\n- Vous pouvez également zoomer et dézoomer via le navigateur.`)">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
Utilisation
</button>
<button onclick="show_create()" class="flex items-center gap-1 px-2 py-1 rounded transition hover:bg-white/25 text-white" type="button" data-modal-toggle="popup-modal">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
Create
</button>
<div id="create_popup" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full">
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow p-2 dark:bg-gray-700">
<div class="p-6 text-center">
<div class="flex m-2">
<input type="text" id="transistor_name" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
id="exampleText0" placeholder="Transistor name" />
</div>
<button onclick="create_block()" data-modal-toggle="popup-modal" type="button" class="text-white bg-green-600 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
Create
</button>
<button onclick="close_create()" data-modal-toggle="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Cancel</button>
</div>
</div>
</div>
</div>
<div class="h-full w-0.5 bg-white/25"></div>
<div id="transistors_block"></div>
</div>
<script src="./public/computer.js"></script>
<script src="./public/cookies.js"></script>
<script src="./public/computerDraw.js"></script>
</body>
</html>