Skip to content

modified the html code #38

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: development
Choose a base branch
from
Open

modified the html code #38

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
237 changes: 117 additions & 120 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,132 @@
<!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" />

<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>

<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>

<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>
<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="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>

<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="Help" id="help-btn" tabindex="0" aria-label="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>

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

<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>

<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>

<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>
</header>
<body>
<div id="left-container">
<div class="box-input" id="search-container" aria-label="Search places">
<!-- Wrapping search input inside a form with role="search" adds semantic meaning -->
<form role="search">
<!-- Visually hidden label for screen readers -->
<label for="search-input" class="visually-hidden">Search Places</label>
<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>
</form>
<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>
<button class="fas fa-directions" tabindex="0" id="trigger-icon" aria-label="Find distance between places"></button>
</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 tabindex="0" id="controls-box">
<button title="Click to Zoom-In" aria-label="Zoom In" class="fa fa-plus" title="Zoom In"></button>
<button title="Click to Zoom-Out" aria-label="Zoom Out" class="fa fa-minus" title="Zoom Out"></button>
<button title="Click to select Layers" aria-label="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 position on map"></button>
</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>
<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>
<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>
<!-- Distance Finder Box (Find Distance Tab) -->
<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 id="distanceHeader">Find Distance</h1>
<div class="box-input">
<span><i class="fas fa-circle"></i></span>
<!-- Visually hidden label for Starting Point -->
<label for="beginning" class="visually-hidden">Enter Starting Point</label>
<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 suggestions" id="b-searchbutton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="box-input">
<span><i class="fas fa-map-marker-alt"></i></span>
<!-- Visually hidden label for Destination -->
<label for="destination" class="visually-hidden">Enter Destination</label>
<div class="dist-input" id="c-destination">
<input type="text" tabindex="0" id="destination" placeholder="Enter Destination" aria-label="Type place and press Enter" />
<button tabindex="0" aria-label="Click to see suggestions" id="d-searchbutton">
<i class="fa fa-search"></i>
</button>
</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>
</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>

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

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