-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathelementProgress.html
275 lines (268 loc) · 12.6 KB
/
elementProgress.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
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>UNO-reverse</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta
name="description"
content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 48+ ready demos."
/>
<!-- favicon icon -->
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png" />
<link
rel="apple-touch-icon"
sizes="72x72"
href="images/apple-touch-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="images/apple-touch-icon-114x114.png"
/>
<!-- google fonts preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- style sheets and font icons -->
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="demos/seo-agency/seo-agency.css" />
</head>
<body
data-mobile-nav-style="full-screen-menu"
data-mobile-nav-bg-color="#2a2b3f"
class="custom-cursor"
>
<!-- start cursor -->
<div class="cursor-page-inner">
<div class="circle-cursor circle-cursor-inner"></div>
<div class="circle-cursor circle-cursor-outer"></div>
</div>
<!-- end cursor -->
<!-- start header -->
<header>
<!-- start navigation -->
<nav
class="navbar navbar-expand-lg bg-transparent header-light header-reverse glass-effect"
data-header-hover="light"
>
<div class="container-fluid">
<div class="col-auto">
<a class="navbar-brand" href="demo-seo-agency.html">
<img
src="images2/logofinal.png"
data-at2x="images2/logofinal.png"
alt=""
class="default-logo"
/>
<img
src="images2/logofinal.png"
data-at2x="images2/logofinal.png"
alt=""
class="alt-logo"
/>
<img
src="images2/logofinal.png"
data-at2x="images2/logofinal.png"
alt=""
class="mobile-logo"
/>
</a>
</div>
<div class="col-auto menu-order left-nav">
<button
class="navbar-toggler float-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav alt-font">
<li class="nav-item">
<a href="demo-seo-agency.html" class="nav-link">Home</a>
</li>
<!-- <li class="nav-item"><a href="demo-seo-agency-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-seo-agency-what-we-do.html" class="nav-link">What we do</a></li>
<li class="nav-item"><a href="demo-seo-agency-process.html" class="nav-link">Process</a></li>
<li class="nav-item"><a href="demo-seo-agency-pricing.html" class="nav-link">Pricing</a></li> -->
<li class="nav-item"><a href="demo-seo-agency-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto ms-auto">
<div class="header-icon">
<div class="d-none d-xl-inline-block me-25px"><a href="tel:1800222000" class="alt-font widget-text fw-600"><i class="feather icon-feather-phone-outgoing me-10px"></i>1 800 222 000</a></div>
</div>
</div>
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- start section -->
<section class="pb-8 md-pb-15 xs-pb-22 background-position-left-top" style="background-image: url('images/demo-it-business-about-bg2.jpg')">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-xl-5 col-lg-6 col-md-9 md-mb-50px text-center text-lg-start" data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggerdata": 300, "easing": "easeOutQuad" }'>
<span class="bg-white text-uppercase fs-13 ps-25px pe-25px alt-font fw-700 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-20px box-shadow-bottom">Analyse your idea</span>
<h1 style="font-size: 50px; font-weight: 550; color: black;">Ultimate ideas thrive beyond AI's realm.</h1>
<p>A best hackathon idea combines innovation, feasibility, scalability, relevance, creativity, impact, and alignment with competition constraints and objectives.</p>
<div class="d-flex flex-row justify-content-center justify-content-lg-start align-items-center mt-30px">
<div class="w-120px me-25px flex-shrink-0">
<div class="chart-percent">
<span class="pie-chart-style-01 d-flex align-items-center justify-content-center text-center"
data-line-width="7" data-size="120" data-track-color="#e1e1ea" data-start-color="#0001bc"
data-end-color="#5758D6" id="percentageElement"></span>
<span class="percent d-flex align-items-center justify-content-center fs-26 text-dark-gray fw-600 ls-minus-1px"></span>
</span>
</div>
</div>
<div id="percentageElement" class=" ""></div>
</div>
</div>
<div class="col-xl-6 col-lg-6 offset-xl-1 position-relative">
<div class="text-end w-80 md-w-75 ms-auto" data-animation-delay="500" data-shadow-animation="true" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
<img src="/images2/hackathon_800x800.png" alt="" class="border-radius-8px">
</div>
<div class="w-60 md-w-50 xs-w-55 overflow-hidden position-absolute left-15px bottom-minus-50px" data-shadow-animation="true" data-animation-delay="500" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
<img src="/images2/element_progress_638x638.jpg" alt="" class="border-radius-8px box-shadow-quadruple-large" />
</div>
</div>
<li class="nav-item">
<a href="demo-seo-agency-contact.html" class="nav-link"
></a
>
</li>
</ul>
<!-- </div>
</div>
<div class="col-auto ms-auto">
<div class="header-icon">
<div class="d-none d-xl-inline-block me-25px">
<a href="tel:1800222000" class="alt-font widget-text fw-600"
><i class="feather icon-feather-phone-outgoing me-10px"></i>1
800 222 000</a
>
</div>
</div>
</div>
</div>
</nav> -->
<!-- end navigation -->
<!-- </header> -->
<!-- end header -->
<!-- start section -->
<!-- <section
<!-- class="pb-8 md-pb-15 xs-pb-22 background-position-left-top"
style="background-image: url('images/demo-it-business-about-bg2.jpg')"
>
<div class="container">
<div class="row align-items-center justify-content-center">
<div
class="col-xl-5 col-lg-6 col-md-9 md-mb-50px text-center text-lg-start"
data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggerdata": 300, "easing": "easeOutQuad" }'
>
<span
class="bg-white text-uppercase fs-13 ps-25px pe-25px alt-font fw-700 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-20px box-shadow-bottom"
>Analyse your idea</span
>
<h1 style="font-size: 50px; font-weight: 550; color: black"> -->
<!-- Ultimate ideas thrive beyond AI's realm.
</h1>
<p>
A best hackathon idea combines innovation, feasibility,
scalability, relevance, creativity, impact, and alignment with
competition constraints and objectives.
</p>
<div
class="d-flex flex-row justify-content-center justify-content-lg-start align-items-center mt-30px"
>
<div class="w-120px me-25px flex-shrink-0">
<div class="chart-percent"> -->
<!-- <span
class="pie-chart-style-01 d-flex align-items-center justify-content-center text-center"
data-line-width="7"
data-percent="72.9"
data-size="120"
data-track-color="#e1e1ea"
data-start-color="#0001bc"
data-end-color="#5758D6"
id="percentageElement"
>
<span
class="percent d-flex align-items-center justify-content-center fs-26 text-dark-gray fw-600 ls-minus-1px"
></span> -->
</span>
</div>
</div>
<div class="text-start">
<span
class="text-decoration-line-bottom-medium fw-600 text-base-color"
></span
></span>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 offset-xl-1 position-relative">
<div
class="text-end w-80 md-w-75 ms-auto"
data-animation-delay="500"
data-shadow-animation="true"
data-bottom-top="transform: translateY(50px)"
data-top-bottom="transform: translateY(-50px)"
>
<img
src="https://via.placeholder.com/750x800"
alt=""
class="border-radius-8px"
/>
</div>
<div
class="w-60 md-w-50 xs-w-55 overflow-hidden position-absolute left-15px bottom-minus-50px"
data-shadow-animation="true"
data-animation-delay="500"
data-bottom-top="transform: translateY(-50px)"
data-top-bottom="transform: translateY(50px)"
>
<img
src="https://via.placeholder.com/638x638"
alt=""
class="border-radius-8px box-shadow-quadruple-large"
/>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- javascript libraries -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const percentageElement = document.getElementById("percentageElement");
// Get the value from the URL query parameter named 'percent'
const urlParams = new URLSearchParams(window.location.search);
const percentValue = urlParams.get("percent");
if (percentValue) {
// Update the data-percent attribute with the value from the URL parameter
percentageElement.setAttribute("data-percent", percentValue / 10);
}
});
</script>
</body>
</html>