-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
149 lines (114 loc) · 6.78 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SwapCharGo</title>
<!--Bootstrap scripts-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<!--Google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alkatra&family=Comfortaa&family=Expletus+Sans&family=Merienda:wght@600&family=Montserrat:wght@400;500;700&family=Nunito+Sans&family=Tilt+Warp&family=Ubuntu&display=swap" rel="stylesheet">
<!--(Font awesome) icons-->
<script src="https://kit.fontawesome.com/d5ac8b4c0f.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div>
<!-- Nav Bar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><i class="fa-solid fa-charging-station"></i>SwapCharGo</a>
<button class="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown"aria-expanded="false"aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link nav-txt" href="#title">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-txt" href="#about">ABOUT</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-txt" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
BROWSE
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item nav-txt" href="map.html">map</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item nav-txt" href="#browse">charging points</a></li>
<li><a class="dropdown-item nav-txt" href="#browse">swapping stations</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link nav-txt" href="#footer">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
<div class="home-content">
<img class="title-img rounded" src="images/background_pic.jpeg" alt="charge-station">
<div class="home-text">
<h1 class="big-heading">Find Charging Fast</h1>
<p class="home-info">Discover the public fast charging network near by— enabling you to charge in as little as 30 minutes.</p>
<button onclick="window.location.href='map.html';" class="btn btn-outline-light">LOCATE A CHARGER</button>
</div>
</div>
</div>
</section>
<section id="browse">
<div class="browse-text">
<h2>Power Your EV Hassle-Free: Locate Convenient Charging and Swapping Stations Near You</h2>
</div>
<div class="row">
<div class=" browse-column col-lg-6 col-md-6">
<div class="card">
<img src="images/charge.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="browse-text">Charging Points</h2>
<p>Looking for a convenient way to charge your electric vehicle?</p>
<p>Find available charging points near you with real-time updates on pricing, payment options, and charger availability</p>
<p>Our charging point map lets you filter results based on your preferences, so you can easily find the perfect spot to charge up.</p>
<button onclick="window.location.href='map.html';" class="btn btn-block btn-lg btn-outline-dark">Search</button>
</div>
</div>
</div>
<div class="browse-column col-lg-6 col-md-6">
<div class="card">
<img src="images/ev-battery.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="browse-text">Swapping stations</h2>
<p>Swap out your EV battery and get back on the road in minutes, without the wait time of traditional charging methods.</p>
<p>Our swapping station map lets you filter results based on location, battery type, and pricing, so you can easily find a convenient and affordable option.</p>
<button onclick="window.location.href='map.html';" class="btn btn-block btn-lg btn-block btn-outline-dark">Search</button>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<h1><i class="fa-solid fa-charging-station"></i>About Us</h1>
<br>
<p>SwapCharGo is an EV-battery swapping web application, describes a platform that provides users with information about available charging and swapping stations for electric vehicles. The application enables users to track the location of these stations and check the number of batteries available for use at each station. </p>
<br>
<p> It can be particularly useful for electric vehicle drivers who need to recharge their batteries on the go or plan their routes in advance. The web application aims to streamline the process of finding and accessing charging and swapping stations, making it easier for users to transition to electric vehicles. </p><br>
<p>Charge your EV with peace of mind, knowing you're making a positive impact on the environment and saving money in the long run. </p>
</section>
<!-- Footer -->
<footer id="footer">
<i class="fa-brands fa-github footer-icons"></i>
<i class="fa-solid fa-envelope footer-icons"></i>
<i class="fa-brands fa-linkedin footer-icons"></i>
<p>© Copyright 2023 SwapCharGo</p>
</footer>
</body>
</html>