-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (67 loc) · 12.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Charging Animation | Khushboo Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="mobile" style="display: flex; flex-direction: column; justify-content: space-between;">
<div class="notificationBar">
<div class="left">
<div class="time" style="display: flex; gap: 10px;">
<span style="color: white;">9:45</span>
<ul style="list-style: none; display: flex; gap: 5px; justify-content: center; align-items: center;">
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.546 12 3.546 12 3.546s-7.505 0-9.377.504A3.015 3.015 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.504 9.376.504 9.376.504s7.505 0 9.377-.504a3.018 3.018 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.546 15.569V8.431L15.818 12l-6.272 3.569z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class="hovered-paths"><g><path d="M20.463 3.488A11.817 11.817 0 0 0 12.05 0C5.495 0 .16 5.334.157 11.892a11.87 11.87 0 0 0 1.588 5.946L.057 24l6.304-1.654a11.88 11.88 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.817 11.817 0 0 0-3.479-8.413zM12.05 21.785h-.004a9.86 9.86 0 0 1-5.031-1.378l-.361-.214-3.741.981.999-3.648-.235-.374a9.855 9.855 0 0 1-1.511-5.26c.002-5.45 4.437-9.884 9.889-9.884 2.64 0 5.122 1.03 6.988 2.898a9.827 9.827 0 0 1 2.892 6.993c-.003 5.452-4.437 9.886-9.885 9.886zm5.422-7.403c-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.148s-.767.967-.941 1.166c-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059s-.018-.458.13-.606c.134-.133.297-.347.446-.521.15-.172.199-.296.299-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.241-.58-.486-.501-.669-.51-.173-.009-.371-.01-.57-.01-.198 0-.52.074-.792.372s-1.04 1.017-1.04 2.479c0 1.463 1.065 2.876 1.213 3.074.148.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.29.173-1.413-.074-.125-.272-.199-.569-.348z" style="fill-rule:evenodd;clip-rule:evenodd;" fill="#ffffff" opacity="1" data-original="#000000" class="hovered-path"></path></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M12 0C5.373 0 0 5.373 0 12c0 6.628 5.373 12 12 12 6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12zm5.503 17.308a.747.747 0 0 1-1.028.249c-2.818-1.722-6.365-2.111-10.542-1.157a.748.748 0 1 1-.333-1.457c4.571-1.045 8.492-.595 11.655 1.338a.745.745 0 0 1 .248 1.027zm1.469-3.267a.937.937 0 0 1-1.287.308c-3.225-1.982-8.142-2.557-11.958-1.398a.937.937 0 0 1-1.167-.624.937.937 0 0 1 .624-1.167c4.358-1.323 9.776-.682 13.48 1.594.44.271.578.847.308 1.287zm.126-3.403C15.23 8.341 8.85 8.13 5.157 9.251a1.123 1.123 0 0 1-.652-2.148C8.744 5.816 15.79 6.065 20.243 8.708a1.123 1.123 0 0 1-1.145 1.93z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g transform="matrix(1.5000000000000002,0,0,1.5000000000000002,-6.000000000000014,-1.0000000000000142)"><g fill="#000"><path d="M6 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM10.5 12a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM16.5 12a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></g></svg></li>
</ul>
</div>
</div>
<div class="right">
<ul style="display: flex; gap: 6px; list-style: none;">
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" x="0" y="0" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M272.916 132.64v83.314l41.997-41.996zM272.916 297.633v83.314l41.997-41.318z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path><path d="M255.999 0c-89.216 0-161.8 72.584-161.8 161.8v188.398c0 89.217 72.584 161.8 161.8 161.8s161.8-72.584 161.8-161.8V161.8C417.801 72.584 345.217 0 255.999 0zm94.896 327.767c6.642 6.642 6.597 17.433-.098 24.021l-82.933 81.593c-10.624 10.453-28.779 3.004-28.779-12.059V297.633l-54.056 54.056c-6.605 6.606-17.317 6.606-23.922 0-6.606-6.606-6.606-17.317 0-23.923l70.972-70.972-70.972-70.973c-6.606-6.606-6.606-17.317 0-23.922 6.606-6.606 17.317-6.606 23.922 0l54.056 54.056V92.267c0-14.965 18.103-22.562 28.779-12.059l82.933 81.593c6.697 6.587 6.74 17.379.098 24.021l-70.972 70.973 70.972 70.972z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" x="0" y="0" viewBox="0 0 128 128" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="m90.921 94.916-6.365 6.37v-18.39c0-2.152-1.754-3.913-3.912-3.913s-3.913 1.761-3.913 3.913v18.39l-6.358-6.37a3.918 3.918 0 0 0-5.539 5.539l9.354 9.354a9.122 9.122 0 0 0 12.912 0c3.858-3.863 9.354-9.354 9.354-9.354 1.528-1.528 1.528-4.011 0-5.539s-4.012-1.528-5.533 0zM123.851 76.015l-9.354-9.354a9.122 9.122 0 0 0-12.912 0c-3.858 3.863-9.354 9.354-9.354 9.354-1.528 1.528-1.528 4.011 0 5.539s4.011 1.528 5.532 0l6.365-6.37v18.39c0 2.152 1.754 3.913 3.912 3.913s3.913-1.761 3.913-3.913v-18.39l6.358 6.37a3.917 3.917 0 0 0 5.54-5.539zM53.864 68.997c-6.48 0-11.738 5.27-11.738 11.738 0 6.48 5.258 11.738 11.738 11.738s11.738-5.258 11.738-11.738c0-6.468-5.258-11.738-11.738-11.738zm0 15.651a3.908 3.908 0 0 1-3.912-3.913c0-2.152 1.76-3.913 3.912-3.913s3.913 1.761 3.913 3.913a3.909 3.909 0 0 1-3.913 3.913z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path><path d="M71.594 68.752c1.309 1.712 3.766 2.066 5.478.771a3.907 3.907 0 0 0 .782-5.478c-5.478-7.288-14.184-12.007-23.99-12.007s-18.512 4.72-23.99 12.007a3.908 3.908 0 0 0 .783 5.478c1.711 1.296 4.169.941 5.478-.771 4.034-5.392 10.479-8.877 17.729-8.877 7.251 0 13.695 3.485 17.73 8.877z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path><path d="M84.788 55.999a3.913 3.913 0 0 0 5.515.465c1.638-1.394 1.858-3.864.464-5.515-8.852-10.503-22.107-17.167-36.902-17.167s-28.05 6.664-36.902 17.167c-1.395 1.651-1.174 4.121.465 5.515a3.912 3.912 0 0 0 5.514-.465c7.423-8.804 18.525-14.392 30.924-14.392s23.5 5.588 30.922 14.392z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path><path d="M97.883 43.233a3.913 3.913 0 0 0 5.527.343c1.613-1.418 1.76-3.901.342-5.515-12.203-13.83-30.031-22.548-49.889-22.548S16.178 24.232 3.975 38.062c-1.418 1.614-1.271 4.096.343 5.515a3.91 3.91 0 0 0 5.526-.343c10.761-12.19 26.498-19.894 44.02-19.894 17.522-.001 33.26 7.703 44.019 19.893z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" x="0" y="0" viewBox="0 0 60 60" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M6 55h6.94c.55 0 1-.45 1-1V43.76c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1V54c0 .55.45 1 1 1zM26.63 32.53h-6.94c-.55 0-1 .45-1 1V54c0 .55.45 1 1 1h6.94c.55 0 1-.45 1-1V33.53c0-.55-.45-1-1-1zM10.88 26.31c.55 0 1-.44 1-1V6c0-.45-.3-.84-.73-.96a.979.979 0 0 0-1.12.43l-4.88 7.88c-.29.47-.14 1.09.33 1.38s1.08.15 1.37-.32l3.03-4.89v15.79c0 .56.44 1 1 1zM16.81 5c-.55 0-1 .45-1 1v19.31c0 .45.3.84.73.97.09.02.18.03.27.03.34 0 .67-.17.85-.47l4.88-7.88c.29-.47.14-1.09-.33-1.38s-1.09-.14-1.38.33l-3.02 4.88V6c0-.55-.45-1-1-1zM40.32 24.31h-6.94c-.55 0-1 .45-1 1V54c0 .55.45 1 1 1h6.94c.55 0 1-.45 1-1V25.31c0-.55-.45-1-1-1zM54 11.05h-6.93c-.55 0-1 .45-1 1V54c0 .55.45 1 1 1H54c.56 0 1-.45 1-1V12.05c0-.55-.44-1-1-1z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg></li>
<li style="color: white;"><span class="charged" style="color: white;"></span> %</li>
<li><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M384 64h-42.667V10.68c0-5.903-4.063-10.68-9.958-10.68H181.333c-5.896 0-10.667 4.777-10.667 10.68V64H128c-23.531 0-42.667 18.62-42.667 42.18v363.103C85.333 492.842 104.469 512 128 512h256c23.531 0 42.667-19.158 42.667-42.718V106.18C426.667 82.62 407.531 64 384 64zm-44.25 208.26-85.333 138.667a10.675 10.675 0 0 1-9.083 5.073c-.969 0-1.938-.135-2.906-.406a10.654 10.654 0 0 1-7.76-10.26V320h-53.333a10.683 10.683 0 0 1-9.313-5.458 10.669 10.669 0 0 1 .229-10.802l85.333-138.667c2.5-4.063 7.406-5.927 11.99-4.667a10.654 10.654 0 0 1 7.76 10.26V256h53.333c3.865 0 7.427 2.094 9.313 5.458a10.669 10.669 0 0 1-.23 10.802z" fill="#ffffff" opacity="1" data-original="#000000" class=""></path></g></svg></li>
</ul>
</div>
</div>
<div class="charging" style="width: 100%; display: flex; justify-content: center; align-items: center;">
<svg>
<circle r="112" stroke="white" stroke-width="5"></circle>
<circle r="105" stroke="white" stroke-width="1"></circle>
<circle r="99" stroke="white" stroke-width="1"></circle>
<path d="M89,252.5,Q113,260 116,280" stroke="#6185E6" fill="none" style="stroke-width: 2;"></path>
<path d="M92,246,Q116,255 116,284" stroke="#6185E6" fill="none" style="stroke-width: 1.5;"></path>
<path d="M95,240.5,Q118,250 116.5,284" stroke="#6185E6" fill="none" style="stroke-width: 1;"></path>
<path d="M183,251,Q158,265 154,284" stroke="#6185E6" fill="none" style="stroke-width: 2;"></path>
<path d="M182,244,Q155,260 154,284" stroke="#6185E6" fill="none" style="stroke-width: 1.5;"></path>
<path d="M178,239,Q152,258 153.5,284" stroke="#6185E6" fill="none" style="stroke-width: 1;"></path>
</svg>
<div class="circle"></div>
<div class="text" style="color: white; font-size: 1.8rem;">
<span class="value"></span>
<span class="percentage">%</span>
</div>
<div class="image"><img src="img/lines.png" style="position: absolute; top: 80px; left: 158px;" alt=""></div>
<div class="lines">
<div class="line" style="margin-left: 2px;"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line" style="margin-right: 1px;"></div>
</div>
<div class="particles">
<img src="img/circle-loading.png" id="popImg" width="50" alt="">
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>