atlas/web/index.html
Stefano Haagmans 4692e67a4c
Fix build problem.
Feel free to end my suffering


FTSIO

Incorect location

Yeah, I messed up git 1.1

Pushing a new build with compressing disabled.

Let's hope it wants to load now.

Parcel is loving it to give me a hard time.

Parcel ISTG

I stg if this was the issue (Removed purge "CSS" from parcel config.

Suffering 1.1

Added parcelIgnore.

Now to fix the webmanifest.

Another manifest fix, PLEASE get this out of publish lock.

ok yeah that was stupid. lol

Fix images and such

New method

:)

>:)

Moved to head

/ score

Attempting background sync

*breaths in* *breaths out*

if the name has been the issue the entire time OH GOD

AND YOU KNOW, DON'T FORGET TO DISABLE THE PARCEL SCAN
2022-07-30 23:25:16 +02:00

461 lines
No EOL
25 KiB
HTML

<!--
========================================================================
The 2022 r/place Atlas
An atlas of Reddit's 2022 r/place, with information to each
artwork of the canvas provided by the community.
Copyright (c) 2017 Roland Rytz <roland@draemm.li>
Copyright (c) 2022 Place Atlas contributors
Licensed under the GNU Affero General Public License Version 3
https://place-atlas.stefanocoding.me/license.txt
========================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The 2022 r/place Atlas</title>
<meta name="description" content="An interactive map of Reddit's 2022 r/place, with information to each artwork of the canvas provided by the community.">
<meta name="author" content="Place Atlas contributors (original by Roland Rytz)">
<meta name="application-name" content="The r/place Atlas 2022">
<meta name="robots" content="index, follow">
<meta property="og:title" content="The 2022 r/place Atlas">
<meta property="og:type" content="website">
<meta property="og:url" content="https://place-atlas.stefanocoding.me/">
<meta property="og:image" content="https://place-atlas.stefanocoding.me/_img/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="512">
<meta property="og:image:height" content="512">
<meta property="og:image:alt" content="The r/place Atlas logo">
<meta property="og:description" content="An interactive map of Reddit's 2022 r/place, with information to each artwork of the canvas provided by the community.">
<!-- <meta name="google-site-verification" content="gZGHpBSMzffAbIn0qB8b00We6EwSGkDTfDoQVv-NWss"/> -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no, viewport-fit=cover"> <!-- user-scalable=no -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#222">
<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
<link rel="stylesheet" href="./_css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="manifest" href="./manifest.webmanifest">
<script type="module" src="./pwabuilder-sw-register.js"></script>
<script src="./_js/favicon.js" defer></script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "The 2022 r/place Atlas",
"url": "https://place-atlas.stefanocoding.me/",
"author": [
{
"@type": "Person",
"name": "Roland Rytz",
"email": "roland.rytz@gmail.com",
"url": "https://draemm.li",
"familyName": "Rytz",
"givenName": "Roland",
"alternateName": "draemmli",
"gender": "Male",
"nationality": "Switzerland"
},
{
"@type": "Person",
"name": "Stefano Haagmans",
"email": "stefano@stefanocoding.me",
"url": "https://stefanocoding.me",
"familyName": "Haagmans",
"givenName": "Stefano",
"alternateName": "Codixer",
"gender": "Male",
"nationality": "Netherlands"
},
{
"@type": "Organization",
"name": "Place Atlas",
"alternateName": "r/placeatlas2",
"url": "https://github.com/placeAtlas",
"image": "http://place-atlas.stefanocoding.me/_img/logo.png",
"founder": {
"@type": "Person",
"@id": "#Codixer",
"name": "Stefano Haagmans",
"email": "stefano@stefanocoding.me",
"url": "https://stefanocoding.me/",
"familyName": "Haagmans",
"givenName": "Stefano",
"alternateName": "Codixer",
"gender": "Male",
"nationality": "Netherlands"
}
}
],
"copyrightYear": 2017,
"license": "https://place-atlas.stefanocoding.me/license.txt",
"inLanguage": "English",
"isAccessibleForFree": true,
"keywords": "reddit, r/place, place, experiment",
"thumbnailUrl": "https://place-atlas.stefanocoding.me/_img/logo.png",
"image": "https://place-atlas.stefanocoding.me/_img/logo.png",
"description": "An interactive map of Reddit's 2022 r/place, with information to each artwork of the canvas."
}
</script>
</head>
<body>
<div id="wrapper" class="listHidden">
<nav id="main-navbar" class="navbar navbar-expand-md fixed-top bg-body border-bottom">
<div class="container-fluid">
<a class="navbar-brand text-body d-flex align-items-center" href="./">
<picture>
<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<img class="d-block me-2" height="32" width="32" src="./_img/favicon.svg" alt="">
</picture>
The 2022 r/place Atlas
</a>
<button class="navbar-toggler text-body collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto my-2 my-md-0">
<li class="nav-item">
<div class="btn-group" role="group">
<button id="showListButton" class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasList" aria-controls="offcanvasList">Entries List</button>
</div>
</li>
</ul>
<ul class="navbar-nav mx-auto d-block d-md-none d-lg-block">
<li class="nav-item d-flex align-items-center gap-2">
<span class="p-2">Coordinates: <span class="badge bg-secondary" id="coords_p">0, 0</span></span>
</li>
</ul>
<hr class="d-md-none">
<ul class="navbar-nav flex-row flex-wrap ms-auto">
<li class="nav-item col-6 col-md-auto">
<a class="nav-link active" href="./" aria-current="page">Atlas Map</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link" href="https://place-wiki.stefanocoding.me/">Wiki</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link" href="./about.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="container">
<div id="loading" class="d-flex justify-content-center">
<div id="loadingContent" class="my-auto mx-3 text-center text-white">
<div class="spinner-border text-warning mb-3" style="width: 5rem; height: 5rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<h4 class="mb-3">Hang on…</h4>
<noscript>
<p>Sorry, you need JavaScript to view the Atlas.</p>
<p>All JavaScript on this site is licensed under either the MIT or AGPL license.</p>
<p><a href="https://github.com/placeAtlas/atlas">See the source on GitHub</a></p>
</noscript>
</div>
</div>
<canvas id="linesCanvas"></canvas>
<div id="innerContainer">
<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
<img id="image" width="2000" height="2000" alt="" />
</div>
</div>
<div class="offcanvas offcanvas-start bg-body" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasList" aria-labelledby="offcanvasListLabel">
<header class="offcanvas-header py-2 border-bottom">
<div class="d-flex align-items-center py-1">
<h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
</div>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</header>
<div class="py-3 mx-3 border-bottom">
<div class="d-flex gap-2 mb-2">
<a class="btn btn-primary w-50" id="drawLink" href="./?mode=draw">Draw</a>
<button type="button" class="btn btn-primary dropdown-toggle w-50" id="dropdownModes" data-bs-toggle="dropdown" aria-expanded="false">Modes</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownModes">
<li><a class="dropdown-item" href="./">Normal</a></li>
<li><a class="dropdown-item" href="./?mode=explore">Explore</a></li>
<li><a class="dropdown-item" href="./?mode=overlap">Overlap</a></li>
<li><hr class="dropdown-divider show-only-on-dev"></li>
<li><a class="dropdown-item show-only-on-dev" href="./?mode=diff" title="View normal mode with diff">With Diff</a></li>
<li><a class="dropdown-item show-only-on-dev" href="./?mode=diffonly" title="View only diff">Diff Only</a></li>
</ul>
</div>
<div class="btn-group w-100 mb-3" role="group" aria-label="Social links and donate button">
<a class="btn btn-outline-primary" href="https://discord.gg/pJkm23b2nA" target="_blank" rel="noopener noreferrer">
<i class="bi bi-discord" aria-hidden="true"></i>
Discord
</a>
<a class="btn btn-outline-primary" href="https://www.reddit.com/r/placeAtlas2/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-reddit" aria-hidden="true"></i>
Reddit
</a>
<button type="button" title="Donation links" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#donateModal">
<i class="bi bi-currency-exchange" aria-hidden="true"></i>
Donate
</button>
</div>
<div id="entriesListControls" class="d-flex flex-column gap-2 p-3 bg-secondary bg-opacity-10 rounded">
<span id="atlasSize"></span>
<div class="input-group">
<input autofocus class="form-control" id="searchList" type="search" placeholder="Search…" autocomplete="off" spellcheck="false" aria-describedby="atlasSize">
<label for="sort" class="visually-hidden">Sort entries</label>
<select class="form-select" id="sort">
<option selected value="shuffle">Random</option>
<option value="relevant" id="relevantOption" disabled>Relevant</option>
<option value="alphaAsc" label="↓ Alphabetical">Descending Alphabetical</option>
<option value="alphaDesc" label="↑ Alphabetical">Ascending Alphabetical</option>
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="area">Area</option>
</select>
</div>
</div>
</div>
<div id="entriesList" class="card-deck ps-2 ms-2 pe-3 me-3 mt-2 pt-2 overflow-auto"></div>
</div>
<div id="bottomBar" class="d-flex flex-wrap gap-2 p-2">
<div id="zoomControls" class="btn-group shadow" role="group" aria-label="Zoom controls">
<button type="button" class="btn btn-secondary" id="zoomInButton" title="Zoom in">
<i class="bi bi-plus-lg" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-secondary" id="zoomResetButton" title="Reset view">
<i class="bi bi-square" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-secondary" id="zoomOutButton" title="Zoom out">
<i class="bi bi-dash-lg" aria-hidden="true"></i>
</button>
</div>
<div id="variantControls">
<div class="input-group">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192" aria-hidden="true"><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"></polygon><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"></polygon><rect x="77" y="77" width="38" height="38"></rect></svg>
</span>
<select class="form-select shadow" name="variants" id="variants" title="Background image variants"></select>
</div>
</div>
<div id="timeControls" class="bg-body px-2 py-1 border rounded shadow">
<label for="timeControlsSlider" class="visually-hidden">Time control slider</label>
<input type="range" class="form-range" min="0" max="1" value="1" id="timeControlsSlider" list="timeControlsList" aria-describedby="timeControlsTooltip"></input>
<div class="tooltip border rounded text-nowrap" role="tooltip" id="timeControlsTooltip"><div class="bg-body rounded p-1">Tooltip</div></div>
<datalist id="timeControlsList">
<option value=""></option>
</datalist>
</div>
<div id="author" class="bg-body d-flex align-items-center justify-content-center py-1 px-2 rounded shadow" style="--bs-bg-opacity: .9;">
<span style="font-size: 0.7rem;">Code by <a href="https://github.com/placeAtlas" target="_blank" rel="noopener noreferrer">Place Atlas</a>. Source on <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">GitHub</a>. Site powered by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">Netlify</a>.</span>
</div>
</div>
<div class="offcanvas offcanvas-start bg-body" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasDraw" aria-labelledby="offcanvasDrawLabel">
<header class="offcanvas-header py-2 border-bottom">
<div class="d-flex align-items-center py-1">
<h5 class="offcanvas-title" id="offcanvasDrawLabel">Edit Entry</h5>
</div>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</header>
<div id="offcanvasDraw-drawControls" class="offcanvas-body">
<div id="drawControls" class="d-flex flex-column gap-2 p-3 pb-2 mb-3 bg-secondary bg-opacity-10 rounded">
<h5>Draw</h5>
<div class="d-flex gap-2">
<button type="button" class="btn btn-secondary flex-fill" id="undoButton" title="Undo line [ctrl-z]" disabled>
<i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>
Undo
</button>
<button type="button" class="btn btn-secondary flex-fill" id="redoButton" title="Redo line [ctrl-y]" disabled>
<i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
Redo
</button>
</div>
<button type="button" class="btn btn-primary" id="finishButton" title="Finish drawing" disabled>Finish</button>
<button type="button" class="btn btn-secondary" id="resetButton">Reset</button>
<div class="form-check" id="highlightUnchartedLabel">
<input class="form-check-input" type="checkbox" id="highlightUncharted" checked>
<label class="form-check-label mb-0" for="highlightUncharted" title="Highlight uncharted areas of the map">
Highlight Empty
</label>
</div>
</div>
<div id="periods" class="p-2 pt-3 mb-3 bg-secondary bg-opacity-10 rounded">
<h5 class="px-2">Timeline</h5>
<p id="periodsStatus" class="px-2 mb-2 small"></p>
<div id="periodGroups" class="pt-1"></div>
<button type="button" class="btn btn-primary d-block mx-auto" id="periodsAdd">Add Period</button>
</div>
<div id="hint">
<p class="text-center">Please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank" rel="noopener noreferrer">this Reddit post</a> for instructions.</p>
<hr>
<p>You can suggest new entries to the Atlas for art that isn't mapped yet, or update entries by editing it.</p>
<p>Click anywhere on the image to start drawing a shape. Switch between periods by adding a period, and/or seek through the timeline.</p>
<p>When you're happy with the result, click the "Finish" button above. You can then add more information about your object. </p>
<hr>
<div class="text-white p-3 rounded shadow" style="background-color: #5865F2;">
<h6>Need Help?</h6>
<p class="mb-0">You can ask for help on <a class="link-light" href="https://discord.gg/pJkm23b2nA" target="_blank" rel="noopener noreferrer">our Discord server</a>!</p>
</div>
</div>
</div>
<div id="offcanvasDraw-objectInfo" class="offcanvas-body d-none">
<form id="objectInfo" class="d-flex flex-column p-3 bg-secondary bg-opacity-10 rounded">
<div class="mb-3">
<label for="nameField" class="form-label">Title</label>
<input type="text" id="nameField" class="form-control" placeholder="A short title" pattern="(.|\s)*\S(.|\s)*" title="Cannot be blank" required>
</div>
<div class="mb-3">
<label for="descriptionField" class="form-label">Description</label>
<textarea id="descriptionField" class="form-control overflow-hidden" placeholder="A short description to be understood by everyone"></textarea>
</div>
<label id="websiteLabel" class="form-label">Website</label>
<div id="websiteGroup" class="mb-3 d-flex flex-column gap-2"></div>
<label id="subredditLabel" class="form-label">Subreddit</label>
<div id="subredditGroup" class="mb-3 d-flex flex-column gap-2"></div>
<label id="discordLabel" class="form-label">Discord</label>
<div id="discordGroup" class="mb-3 d-flex flex-column gap-2"></div>
<label id="wikiLabel" class="form-label">
<a class="text-decoration-none" href="https://place-wiki.stefanocoding.me/" target="_blank" rel="noopener noreferrer">
<span class="text-body">Wiki</span>
<i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
</a>
</label>
<div id="wikiGroup" class="mb-3 d-flex flex-column gap-2"></div>
<div id="infoButtons" class="d-flex flex-wrap flex-row-reverse gap-2">
<input type="submit" class="btn btn-primary flex-fill" id="exportButton" value="Export">
<input type="submit" class="btn btn-secondary flex-fill" id="previewButton" value="Preview">
<button type="button" class="btn btn-secondary flex-fill" id="cancelButton">Back</button>
</div>
</form>
</div>
</div>
<button type="button" id="closeObjectsListButton" class="d-none btn btn-secondary shadow p-0" aria-label="Close">
<i class="bi bi-x-lg"></i>
</button>
<div id="objectsList" class="p-2"></div>
<span id="objectsListOverflowNotice" class="p-2 me-2 btn-primary rounded text-center d-none">Click the map to lock your selection</span>
</div>
<div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-xl modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exportModalLabel">Export Entry</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex flex-column">
<p>Use the Post Direct to Reddit button or manually copy the text below and submit it as a new text post to <a href="https://www.reddit.com/r/placeAtlas2/" target="_blank" rel="noopener noreferrer">r/placeAtlas2</a> on Reddit.</p>
<p>Don't forget to flair it with the <span class="badge rounded-pill bg-primary"><i class="bi bi-tag" aria-hidden="true"></i> <span id="redditFlair">New Entry</span></span> tag.</p>
<p>We will then check it and add it to the atlas.</p>
<textarea class="form-control flex-grow-1" cols="40" rows="20" id="exportString" title="Raw JSON string" readonly></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
<a id="exportDirectPost" class="btn btn-primary" href="#" target="_blank" rel="noopener noreferrer">Post Direct to Reddit</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="donateModal" tabindex="-1" aria-labelledby="donateModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="donateModalLabel">Donation Links</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Current 2022 Atlas Maintainers:</p>
<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://paypal.me/placeAtlas/5">
<i class="bi bi-paypal" aria-hidden="true"></i>
PayPal
</a>
<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://www.patreon.com/placeAtlas">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z"/></svg>
Patreon
</a>
<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://ko-fi.com/placeatlas">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
Ko-Fi
</a>
<hr>
<p>Original 2017 Atlas Developer (draemmli aka Roland Rytz): </p>
<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://paypal.me/draemmli">
<i class="bi bi-paypal" aria-hidden="true"></i>
PayPal
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<template id="period-group">
<div class="period-group card mb-2">
<div class="card-body">
<div class="period-status alert alert-danger small py-2" role="alert"></div>
<div class="period-input-controls d-flex align-items-center mb-2">
<label for="period-start">Start Period</label>
<div class="btn-group btn-group-sm ms-auto" role="group" aria-label="Start period controls">
<button type="button" class="btn btn-secondary" id="periodStartLeft" aria-label="Left"><i class="bi bi-caret-left-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary" id="periodStartRight" aria-label="Right"><i class="bi bi-caret-right-fill" aria-hidden="true"></i></button>
</div>
<button type="button" class="btn btn-secondary btn-sm ms-2" id="periodStartView">View</button>
</div>
<input type="range" class="period-start form-range" id="period-start" min="0" list="periodStartList">
<datalist id="periodStartList"></datalist>
<div class="period-input-controls d-flex align-items-center mb-2">
<label for="period-end">End Period</label>
<div class="btn-group btn-group-sm ms-auto" role="group" aria-label="End period controls">
<button type="button" class="btn btn-secondary" id="periodEndLeft" aria-label="Left"><i class="bi bi-caret-left-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary" id="periodEndRight" aria-label="Right"><i class="bi bi-caret-right-fill" aria-hidden="true"></i></button>
</div>
<button type="button" class="btn btn-secondary btn-sm ms-2" id="periodEndView">View</button>
</div>
<input type="range" class="period-end form-range mb-2" id="period-end" min="0" list="periodEndList">
<datalist id="periodEndList"></datalist>
<div class="d-flex flex-wrap gap-2 mb-2">
<button type="button" class="period-copy btn btn-secondary btn-sm flex-fill" id="period-copy">
<i class="bi bi-clipboard" aria-hidden="true"></i>
Copy
</button>
<button type="button" class="period-duplicate btn btn-secondary btn-sm flex-fill" id="period-duplicate">
<i class="bi bi-back" aria-hidden="true"></i>
Duplicate
</button>
<button type="button" class="period-delete btn btn-danger btn-sm flex-fill" id="period-delete">
<i class="bi bi-trash-fill" aria-hidden="true"></i>
Delete
</button>
</div>
<div class="input-group">
<span class="input-group-text"></span>
<select class="period-variation form-select" title="Select which layer this path is used for"></select>
</div>
</div>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="./_js/time.js"></script>
<script src="./_js/infoblock.js"></script>
<script src="./_js/pointInPolygon.js"></script>
<script src="./_js/atlas.js"></script>
<script src="./_js/view.js"></script>
<script src="./_js/overlap.js"></script>
<script src="./_js/polylabel.js"></script>
<script src="./_js/draw.js"></script>
<script src="./_js/main.js"></script>
<!-- <script src="./_js/stats.js"></script>
<script src="./_js/minified.js"></script> -->
</body>
</html>