-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (64 loc) · 2.55 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Visualization of bounded buffer problem</title>
</head>
<body>
<div class="row">
<div class="col-6">
Next Consume in : <span class="next-consume">5 seconds</span>
</div>
<div class="col-6">
Next Produce in : <span class="next-produce">5 seconds</span>
</div>
</div>
<div class="row">
<div class="col-6">
Consumer Status: <span class="consumer-status">Consuming</span>
</div>
<div class="col-6">
Producer Status: <span class="producer-status">Producing</span>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="slidercontainer">
<label>Consumer Speed: </label>
<input type="range" min="1" max="1000" value="1000" class="slider" id="consumerSpeed">
</div>
</div>
<div class="col-6">
<div class="slidercontainer">
<label>Producer Speed: </label>
<input type="range" min="1" max="1000" value="1000" class="slider" id="producerSpeed">
</div>
</div>
</div>
<div class="row bottlerow">
<svg class="milk-bottle" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 51">
<defs>
<mask id="milk-mask">
<rect class="mask-rect" x="477" y="108" width="15" height="40" transform="rotate(-180 247.5 78.5)" fill="#4FC3F7" />
</mask>
</defs>
<path class="bottle" d="M19 21.1L15 8.74V6a2.3 2.3 0 0 0-.14-.9 1.54 1.54 0 0 0 .14-.65V3c0-.85-.35-1.5-1.19-1.5H7.86C7.02 1.5 6 2.15 6 3v1.47a1.55 1.55 0 0 0 .22.79 1.32 1.32 0 0 0-.22.76v2.72L2 21.09a12.12 12.12 0 0 0-.51 3.21v22.1a3.29 3.29 0 0 0 3.15 3.1h12a2.92 2.92 0 0 0 2.85-3.1V24.3a12.14 12.14 0 0 0-.49-3.2zM7.69 3h5.81v1.47a3.12 3.12 0 0 0 .31.08h-.08l-6-.05zM18 46.4a1.63 1.63 0 0 1-1.4 1.58H4.65C3.93 47.98 3 46.85 3 46.4V24.3a11 11 0 0 1 .61-2.73L7.72 9.1l.08-3a3.72 3.72 0 0 1 .88-.06h4.82v2.79l4.06 12.71a10.67 10.67 0 0 1 .44 2.73z" fill="#000" />
<path class="milk" mask="url(#milk-mask)" d="M4.5 46.5v-23l4-14h4l4 14v23" fill="#4FC3F7" />
</svg>
</div>
<div class="row">
<div class="col-6">
<button class="btn btn-primary btn-consume">Consume</button>
</div>
<div class="col-6">
<button class="btn btn-primary btn-produce">Produce</button>
</div>
</div>
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="all" />
<link rel="stylesheet" href="index.css" type="text/css" media="all" />
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>