Skip to content

Created the Login modal UI #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Created the Login modal UI #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
369 changes: 255 additions & 114 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,276 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/public/styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Kumbh Sans"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<head>
<link rel="stylesheet" href="/public/styles.css" />
<link href='https://fonts.googleapis.com/css?family=Kumbh Sans' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="/src/components/Login.js" defer></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.overlay {
z-index: 1000;
}
.modal {
z-index: 1001;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/Polyline.encoded.min.js"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/src/leaflet.geometryutil.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/leaflet-pip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.min.js"></script>
<script type="module" src="../src/main.js" defer></script>
<script src="/src/components/Search/osmtogeojson.js"></script>
<script src="/src/components/DistanceFinder/Polyline.encoded.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>World-Map-Explorer</title>
</head>
<header>
<div class="header-content">
<div class="logo">
<img src="/public/map-logo.png" alt="Map Logo" class="map-logo" tabindex="-1" />
<p id="map-explorer-text" tabindex="0"><b>World-Map-Explorer</b></p>
</div>
<div class="header-icons">
<button title="Help" id="help-btn" tabindex="0"
aria-label="select for read user manual" onclick="window.open('/src/pages/user-guide/index.html', '_blank');"
style="cursor: pointer;">
Help <i class="fa fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
</header>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>

<body>
<div id="left-container">
<div class="box-input" id="search-container" aria-label="search places">
<div id="c-search-input"> <input type="text" tabindex="0" id="search-input" placeholder="Search Places" />
<button tabindex="0" id="searchbutton" aria-label="click to search"><i class="fa fa-search"></i></button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Polyline.encoded.min.js"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/src/leaflet.geometryutil.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/leaflet-pip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/[email protected]/turf.min.js"></script>
<script type="module" src="../src/main.js" defer></script>
<script src="/src/components/Search/osmtogeojson.js"></script>
<script
src="/src/components/DistanceFinder/Polyline.encoded.js"
defer
></script>
<script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<title>World-Map-Explorer</title>
</head>
<header>
<div class="header-content">
<div class="logo">
<img
src="/public/map-logo.png"
alt="Map Logo"
class="map-logo"
tabindex="-1"
/>
<p id="map-explorer-text" tabindex="0"><b>World-Map-Explorer</b></p>
</div>
<div id="searchdetails" tabindex="0" class="searchdetails" style="display: none" aria-label="Search results">
<button class="fas fa-times-circle" id="closeBtnD" aria-label="Close details tab"
onclick="notifySreenReader(`details tab closed`)"></button>
<span aria-live="polite" aria-atomic="true" id="detalisElement"></span>
<div class="header-icons">
<button
title="Login"
id="login-btn"
tabindex="0"
aria-label="select for read user manual"
style="cursor: pointer"
>
Login
</button>
<button
title="Help"
id="help-btn"
tabindex="0"
aria-label="select for read user manual"
onclick="window.open('/src/pages/user-guide/index.html', '_blank');"
style="cursor: pointer"
>
Help <i class="fa fa-question-circle" aria-hidden="true"></i>
</button>
</div>

</div>
</header>

<button class="fas fa-directions" tabindex="0" id="trigger-icon" aria-label="find distance between places"></button>
</div>
<body>
<div id="left-container">
<div class="box-input" id="search-container" aria-label="search places">
<div id="c-search-input">
<input
type="text"
tabindex="0"
id="search-input"
placeholder="Search Places"
/>
<button tabindex="0" id="searchbutton" aria-label="click to search">
<i class="fa fa-search"></i>
</button>
</div>
<div
id="searchdetails"
tabindex="0"
class="searchdetails"
style="display: none"
aria-label="Search results"
>
<button
class="fas fa-times-circle"
id="closeBtnD"
aria-label="Close details tab"
onclick="notifySreenReader(`details tab closed`)"
></button>
<span
aria-live="polite"
aria-atomic="true"
id="detalisElement"
></span>
</div>
</div>

<div tabindex="0" id="controls-box">
<button
class="fas fa-directions"
tabindex="0"
id="trigger-icon"
aria-label="find distance between places"
></button>
</div>

<button title="Click to Zoom-In" aria-label="Click to Zoom-In" class="fa fa-plus" title="Zoom In"></button>
<button title="Click to Zoom-Out" aria-label="Click to Zoom-Out" class="fa fa-minus" title="Zoom Out"></button>
<button title="Click to select Layers" aria-label="Click to select layers" class="fa fa-layer-group" title="Layers"
id="layers-btn"></button>
<div id="layers-dropdown" class="dropdown-content">
<button title="geographical-layer" aria-label="geographical-layer" id="geographical-layer">Geographical</button>
<button title="political-layer" aria-label="political-layer" id="political-layer">Political</button>
<div tabindex="0" id="controls-box">
<button
title="Click to Zoom-In"
aria-label="Click to Zoom-In"
class="fa fa-plus"
title="Zoom In"
></button>
<button
title="Click to Zoom-Out"
aria-label="Click to Zoom-Out"
class="fa fa-minus"
title="Zoom Out"
></button>
<button
title="Click to select Layers"
aria-label="Click to select layers"
class="fa fa-layer-group"
title="Layers"
id="layers-btn"
></button>
<div id="layers-dropdown" class="dropdown-content">
<button
title="geographical-layer"
aria-label="geographical-layer"
id="geographical-layer"
>
Geographical
</button>
<button
title="political-layer"
aria-label="political-layer"
id="political-layer"
>
Political
</button>
</div>
<button
class="fa fa-location-arrow"
id="locateme"
title="Locate me"
aria-label="Locate your location on map"
></button>
</div>
<button class="fa fa-location-arrow" id="locateme" title="Locate me"
aria-label="Locate your location on map"></button>
</div>

<div id="infoBox" tabindex="-1">
Place: <span id="placeDisplay"></span><br /><br />
Angle: <span id="angleDisplay"></span><br />
Flat Map Distance: <span id="flatdistance"></span><br />
Real Distance: <span id="distanceDisplay"></span><br />
Real Angle: <span id="realAngle"></span><br />
<h3>coordinates:</h3>
<pre></pre>
<span id="coordinates">
<span id="lat"></span><br />
<span id="lng"></span>
</span>
</div>
<div id="infoBox" tabindex="-1">
Place: <span id="placeDisplay"></span><br /><br />
Angle: <span id="angleDisplay"></span><br />
Flat Map Distance: <span id="flatdistance"></span><br />
Real Distance: <span id="distanceDisplay"></span><br />
Real Angle: <span id="realAngle"></span><br />
<h3>coordinates:</h3>
<pre></pre>
<span id="coordinates">
<span id="lat"></span><br />
<span id="lng"></span>
</span>
</div>

<!-- Box that appears on icon click -->
<div class="box" id="box" tabindex="0" aria-label="distance finder opened">
<button class="fas fa-times-circle" id="closeBtn" aria-label="close distance finder" tabindex="0"
onclick="notifySreenReader(`distance finder closed`)"></button>
<h1>Find Distance</h1>
<!-- Box that appears on icon click -->
<div class="box" id="box" tabindex="0" aria-label="distance finder opened">
<button
class="fas fa-times-circle"
id="closeBtn"
aria-label="close distance finder"
tabindex="0"
onclick="notifySreenReader(`distance finder closed`)"
></button>
<h1>Find Distance</h1>

<div class="box-input">
<span><i class="fas fa-circle"></i></span>
<div class="dist-input" id="c-beginning"><input type="text" tabindex="0" id="beginning"
placeholder="Enter Starting point" aria-label="type place and press enter" />
<button tabindex="0" aria-label="click to see suggessions" id="b-searchbutton"><i
class="fa fa-search"></i></button>
<div class="box-input">
<span><i class="fas fa-circle"></i></span>
<div class="dist-input" id="c-beginning">
<input
type="text"
tabindex="0"
id="beginning"
placeholder="Enter Starting point"
aria-label="type place and press enter"
/>
<button
tabindex="0"
aria-label="click to see suggessions"
id="b-searchbutton"
>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>


<div class="box-input">
<span><i class="fas fa-map-marker-alt"></i></span>
<div class="dist-input" id="c-destination"><input tabindex="0" type="text" id="destination"
placeholder="Enter Destination" aria-label="type place and press enter" />
<button id="d-searchbutton" tabindex="0" aria-label="click to see suggessions"><i
class="fa fa-search"></i></button>
<div class="box-input">
<span><i class="fas fa-map-marker-alt"></i></span>
<div class="dist-input" id="c-destination">
<input
tabindex="0"
type="text"
id="destination"
placeholder="Enter Destination"
aria-label="type place and press enter"
/>
<button
id="d-searchbutton"
tabindex="0"
aria-label="click to see suggessions"
>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>

<button class="fas fa-map-marked-alt" aria-hidden="true" title="Choose from map" id="fromMap"
tabindex="-1"></button>
<button class="fas fa-arrow-circle-right" tabindex="0" id="find" title="Find Distance"
aria-label=" click to Find distance"></button>
<div tabindex="0" id="distanceResult" aria-live="polite">
Distance : <span id="dist"></span><br />
Time : <span id="time"></span>
<button
class="fas fa-map-marked-alt"
aria-hidden="true"
title="Choose from map"
id="fromMap"
tabindex="-1"
></button>
<button
class="fas fa-arrow-circle-right"
tabindex="0"
id="find"
title="Find Distance"
aria-label=" click to Find distance"
></button>
<div tabindex="0" id="distanceResult" aria-live="polite">
Distance : <span id="dist"></span><br />
Time : <span id="time"></span>
</div>
<p style="font-size: 10px" class="text-center">
<br />Directions courtesy of
<a
href="https://gis-ops.com/global-open-valhalla-server-online/"
target="_blank"
>Valhalla (FOSSGIS)</a
>
</p>
</div>
<p style="font-size: 10px;" class="text-center"><br>Directions courtesy of <a
href="https://gis-ops.com/global-open-valhalla-server-online/" target="_blank">Valhalla (FOSSGIS)</a></p>
</div>

<div tabindex="0" aria-label="focused on map. use arrow keys to navigate" id="map"></div>

</body>
<footer>
<span id="status-bar"></span>
<span id="camera-height"></span>
<span id="elevation"></span>
</footer>

</html>
<div
tabindex="0"
aria-label="focused on map. use arrow keys to navigate"
id="map"
></div>
</body>
<footer>
<span id="status-bar"></span>
<span id="camera-height"></span>
<span id="elevation"></span>
</footer>
</html>
Loading