OurWork/Munir.html at main · SmartMethodsTeam/OurWork · GitHub

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title>Smart Methods</title>
<style>
  p{color: #FFFFFF;}

  body{background-image: url(https://i.pinimg.com/originals/10/96/b9/1096b9af1e75a5b7714793866d1e2cd7.jpg);

    text-align: center;
  }
.slidecontainer {
    width:300px;
  text-align: center;
  width: 100%;

}

.slider {
  text-align: center;
  -webkit-appearance: none;
  width: 20%;
  height: 15px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;

}

.slider:hover {
  opacity: 5;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #d61e27;
  cursor: pointer;

}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;

}
  .button {
   margin: 25px 8px ;
      width:  140px ;
      height: 15px ;

  padding-bottom: 25px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #2a6099;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:hover {background-color: #3d4b8c}

.button:active {
  background-color: #3d4b8c;
  box-shadow: 0 5px #666;
  transform: translateY(4px);


</style>
</head>
<body>

<div style="text-align: center; class="slidecontainer">
  <p style="text-align: center; padding-right:20px;">محرك1</p>
  <input type="range" min="1" max="100" value="50" class="slider"  id="myRange">
</div>

<div style="text-align: center; class="slidecontainer">
  <p style="text-align: center; padding-right:20px;">محرك2</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

<div style="text-align: center; class="slidecontainer">
  <p style="text-align: center; padding-right:20px;">محرك3</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

<div style="text-align: center; class="slidecontainer">
  <p style="text-align: center; padding-right:20px;">محرك4</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

<div style="text-align: center; class="slidecontainer">
  <p style="text-align: center; padding-right:20px;">محرك5</p>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

<div style="text-align: center; class="slidecontainer">
  <p style="text-align: center; padding-right:20px;">محرك6</p>
  <input  type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<br/>
<button class="button" type="button" >حفظ</button>
<button class="button" type="button">تشغيل</button>

</body>
</html>