Skip to content

Updated index.html and styles.css #37

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

Updated index.html and styles.css #37

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
260 changes: 135 additions & 125 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,145 @@
<!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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>World-Map-Explorer</title>

<!-- External CSS -->
<link rel="stylesheet" href="/public/styles.css" />

<!-- Fonts & Icons -->
<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" />

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />

<!-- External JS Libraries -->
<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>
</head>
<body>
<!-- Header -->
<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"><strong>World-Map-Explorer</strong></p>
</div>
<div class="header-icons">
<button id="help-btn" tabindex="0" aria-label="Read user manual" onclick="window.open('/src/pages/user-guide/index.html', '_blank');">
Help <i class="fa fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</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>
</header>

<!-- Main Content -->
<main>
<!-- Left Sidebar -->
<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" 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>

<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>
<!-- Map Controls -->
<div id="controls-box" tabindex="0">
<button title="Zoom In" aria-label="Zoom In" class="fa fa-plus"></button>
<button title="Zoom Out" aria-label="Zoom Out" class="fa fa-minus"></button>
<button title="Layers" aria-label="Select layers" class="fa fa-layer-group" 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>
</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>
<!-- Map Info Box -->
<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>

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

<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>
<!-- Distance Finder Box -->
<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 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>
<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 id="distanceResult" tabindex="0" aria-live="polite">
Distance: <span id="dist"></span><br />
Time: <span id="time"></span>
</div>
<p class="text-center" style="font-size: 10px;">
<br />Directions courtesy of
<a href="https://gis-ops.com/global-open-valhalla-server-online/" target="_blank">Valhalla (FOSSGIS)</a>
</p>
</div>

</html>
<!-- Map Container -->
<div id="map" tabindex="0" aria-label="Map. Use arrow keys to navigate"></div>
</main>

<!-- Footer -->
<footer>
<span id="status-bar"></span>
<span id="camera-height"></span>
<span id="elevation"></span>
</footer>
</body>
</html>
Loading