Skip to content
Snippets Groups Projects
Commit 8636a1a1 authored by Jakob Severin Steffensen Hjelseth's avatar Jakob Severin Steffensen Hjelseth
Browse files

Ferdigstille mye av designet

parent 87608b6a
No related branches found
No related tags found
1 merge request!3Resolve "God html-struktur"
Hide whitespace changes
Inline Side-by-side
Showing
with 77 additions and 21 deletions
ProgGIS.html
+ 77
− 21
View file @ 8636a1a1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ProgGIS</title>
<style>
.h1 {
text-align: center;
font-weight: bold;
font-family: monospace;
}
.button {
font-family: monospace;
background-color: lightgreen;
font-weight: bolder;
background-color: orangered;
color: white;
border-color: lightgreen;
border: 0;
cursor: pointer;
padding-left: 2vw;
padding-right: 2vw;
margin-left: 2vw;
margin-right: 2vw;
margin-top: 0.5vh;
margin-bottom: 0.5vh;
}
#box1 {
font-family: monospace;
height: 6vh;
.box1 {
display: flex;
flex-grow: 4;
flex-grow: 6;
flex-direction: row;
align-items: center;
}
</style>
</head>
<body>
<div style="height: 20vh; width: 100vw; background-color: orange; align-items: center;">
<h1 style="height: 14vh; color: white; font-size: 12vh;">ProgGIS</h1>
<div id="box1">
<button style="padding-left: 2vw; padding-right: 2vw;">Buffer</button>
<button style="padding-left: 2vw; padding-right: 2vw;">Union</button>
<button style="padding-left: 2vw; padding-right: 2vw;">Intersection</button>
<button style="padding-left: 2vw; padding-right: 2vw;">Difference</button>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<body style="margin: 0;">
<div style="display: flex; flex-grow: 3; flex-direction: row;
height: 20vh; background-color: orange; color: white; font-family: monospace;">
<div style="padding-left: 2vh; padding-top: 2vh;">
<svg xmlns="http://www.w3.org/2000/svg" width="16vh" height="16vh" fill="currentColor" class="bi bi-globe-europe-africa" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.809.809 0 0 1 1.034-.275.809.809 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34c.078.028.16.044.243.054.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.333.333 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501Z"/>
</svg>
</div>
<div style="display: flex; flex-grow: 2; flex-direction: column;">
<h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1>
<div class="box1">
<p style="width: 17vw;"></p>
<button class="button">Buffer</button>
<button class="button">Intersection</button>
<button class="button">Union</button>
<button class="button">Difference</button>
<p></p>
</div>
</div>
<div style="padding-right: 2vh; padding-top: 2vh;">
<svg xmlns="http://www.w3.org/2000/svg" width="16vh" height="16vh" fill="currentColor" class="bi bi-globe-asia-australia" viewBox="0 0 16 16">
<path d="m10.495 6.92 1.278-.619a.483.483 0 0 0 .126-.782c-.252-.244-.682-.139-.932.107-.23.226-.513.373-.816.53l-.102.054c-.338.178-.264.626.1.736a.476.476 0 0 0 .346-.027ZM7.741 9.808V9.78a.413.413 0 1 1 .783.183l-.22.443a.602.602 0 0 1-.12.167l-.193.185a.36.36 0 1 1-.5-.516l.112-.108a.453.453 0 0 0 .138-.326ZM5.672 12.5l.482.233A.386.386 0 1 0 6.32 12h-.416a.702.702 0 0 1-.419-.139l-.277-.206a.302.302 0 1 0-.298.52l.761.325Z"/>
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM1.612 10.867l.756-1.288a1 1 0 0 1 1.545-.225l1.074 1.005a.986.986 0 0 0 1.36-.011l.038-.037a.882.882 0 0 0 .26-.755c-.075-.548.37-1.033.92-1.099.728-.086 1.587-.324 1.728-.957.086-.386-.114-.83-.361-1.2-.207-.312 0-.8.374-.8.123 0 .24-.055.318-.15l.393-.474c.196-.237.491-.368.797-.403.554-.064 1.407-.277 1.583-.973.098-.391-.192-.634-.484-.88-.254-.212-.51-.426-.515-.741a6.998 6.998 0 0 1 3.425 7.692 1.015 1.015 0 0 0-.087-.063l-.316-.204a1 1 0 0 0-.977-.06l-.169.082a1 1 0 0 1-.741.051l-1.021-.329A1 1 0 0 0 11.205 9h-.165a1 1 0 0 0-.945.674l-.172.499a1 1 0 0 1-.404.514l-.802.518a1 1 0 0 0-.458.84v.455a1 1 0 0 0 1 1h.257a1 1 0 0 1 .542.16l.762.49a.998.998 0 0 0 .283.126 7.001 7.001 0 0 1-9.49-3.409Z"/>
</svg>
</div>
</div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;">
<div style="display: flex; flex-grow: 2; flex-direction: column;">
<div style="height: 72vh;"></div>
<div style="display: flex; flex-grow: 3; flex-direction: row;">
<div style="padding-left: 2vw;">
<svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>
</div>
<div style="width: 95vw;"></div>
<div style="padding-right: 2vw;">
<svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
</svg>
</div>
</div>
</div>
</div>
<div style="height: 80vh; width: 100vw;"></div>
</body>
</html>
<script type="text/javascript">
// Bestemme URL til basiskartet:
var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
});
// Initialiserer kartet:
var map = L.map('map', {
layers: [osm_map], // Default basiskart
maxZoom: 18, // Justerer zoom-nivået
minZoom: 6,
zoomControl: false // Fjerner defaul zoom-knapper
}).setView([63.418529, 10.40284], 13)
</script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment