-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
88 lines (70 loc) · 4.94 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
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
<head>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type = "text/javascript" src = "script.js" ></script>
<title>Pipometre : detecteur de pipeau</title>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>
</head>
<body onkeydown="arrow_control(event)">>
<div class="filler" id="filler">
<h1>PIPOMETRE</h1>
<p id="angle"></p>
<p id="speed"></p>
</div>
<svg viewBox="0 0 440 440">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="2.5" dy="2.5"/>
</filter>
<g>
<circle id="shadow" style="fill:rgba(0,255,0,0.1)" cx="220" cy="220" r="220" filter="url(#innerShadow)"></circle>
<circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:darkred" cx="220" cy="220" r="200"></circle>
<path d="M20,220 a1,1 0 0,0 400,0" style="stroke: #FFF; stroke-width: 12px; fill:orange;" transform="rotate(135 220 220)" />
<path d="M20,220 a1,1 0 0,0 400,0" style="stroke: #FFF; stroke-width: 12px; fill:green;" transform="rotate(55 220 220)" />
</g>
<g>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(0 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="55" y2="220" transform="rotate(10 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(20 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(30 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="55" y2="220" transform="rotate(40 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(50 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(60 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="55" y2="220" transform="rotate(70 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(80 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(90 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="55" y2="220" transform="rotate(100 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(110 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(120 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="55" y2="220" transform="rotate(130 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(140 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(150 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="55" y2="220" transform="rotate(160 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(170 220 220)" style="stroke-width: 3px; stroke: black;"></line>
<line x1="30" y1="220" x2="35" y2="220" transform="rotate(180 220 220)" style="stroke-width: 3px; stroke: black;"></line>
</g>
<g>
<line x1="220" y1="220" x2="50" y2="220" transform="rotate(2 220 220)" style="stroke-width: 5px; stroke: #fffbf9;" id="pipohand">
</line>
</g>
<circle id="center" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" cx="220" cy="220" r="10"></circle>
<path d="M20,220 a1,1 0 0,0 400,0" id="bottom_captor" style="stroke: #FFF; stroke-width: 12px; fill:steelblue;" />
<circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:grey; opacity:0.7; fill-opacity:0" cx="220" cy="220" r="200"></circle>
</svg>
<footer class="row">
<div class="slider col-xl-6 offset-xl-3" id="slider">
<div class="slide" id="slide-1"></div>
<div class="slide" id="slide-2"></div>
<div class="slide" id="slide-3"></div>
<div class="slide" id="slide-4"></div>
<div class="slide" id="slide-5"></div>
</div>
</footer>
</body>