mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-06-25 22:58:38 +02:00
463 lines
32 KiB
HTML
463 lines
32 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.">
|
|
<meta name="author" content="Roland Rytz (2022 by Stefano#7366)">
|
|
<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.">
|
|
|
|
<!-- <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"> <!-- user-scalable=no -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="color-scheme" content="light dark">
|
|
|
|
<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" type="text/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="text/javascript" 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" href="./">
|
|
<picture>
|
|
<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
|
|
<img class="d-inline-block align-text-top me-2" src="./_img/favicon.svg" height="32" width="32" alt="">
|
|
</picture>
|
|
The 2022 r/place Atlas
|
|
<span class="badge bg-warning text-dark d-none d-md-inline-block">Beta</span>
|
|
</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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
|
</svg>
|
|
</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>
|
|
<li>
|
|
<a class="nav-link px-3 bg-warning text-dark d-md-none rounded" href="https://github.com/placeAtlas/atlas/issues">Beta</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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16"><path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path></svg>
|
|
Discord
|
|
</a>
|
|
<a class="btn btn-outline-primary" href="https://www.reddit.com/r/placeAtlas2/" target="_blank" rel="noopener noreferrer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16"><path d="M6.167 8a.831.831 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661zm1.843 3.647c.315 0 1.403-.038 1.976-.611a.232.232 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83.458 0 .83-.381.83-.83a.831.831 0 0 0-1.66 0z"/><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.203.203 0 0 0-.153.028.186.186 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224c-.02.115-.029.23-.029.353 0 1.795 2.091 3.256 4.669 3.256 2.577 0 4.668-1.451 4.668-3.256 0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165z"/></svg>
|
|
Reddit
|
|
</a>
|
|
<button type="button" title="Donation links" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#donateModal">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-exchange" viewBox="0 0 16 16">
|
|
<path d="M0 5a5.002 5.002 0 0 0 4.027 4.905 6.46 6.46 0 0 1 .544-2.073C3.695 7.536 3.132 6.864 3 5.91h-.5v-.426h.466V5.05c0-.046 0-.093.004-.135H2.5v-.427h.511C3.236 3.24 4.213 2.5 5.681 2.5c.316 0 .59.031.819.085v.733a3.46 3.46 0 0 0-.815-.082c-.919 0-1.538.466-1.734 1.252h1.917v.427h-1.98c-.003.046-.003.097-.003.147v.422h1.983v.427H3.93c.118.602.468 1.03 1.005 1.229a6.5 6.5 0 0 1 4.97-3.113A5.002 5.002 0 0 0 0 5zm16 5.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-7.75 1.322c.069.835.746 1.485 1.964 1.562V14h.54v-.62c1.259-.086 1.996-.74 1.996-1.69 0-.865-.563-1.31-1.57-1.54l-.426-.1V8.374c.54.06.884.347.966.745h.948c-.07-.804-.779-1.433-1.914-1.502V7h-.54v.629c-1.076.103-1.808.732-1.808 1.622 0 .787.544 1.288 1.45 1.493l.358.085v1.78c-.554-.08-.92-.376-1.003-.787H8.25zm1.96-1.895c-.532-.12-.82-.364-.82-.732 0-.41.311-.719.824-.809v1.54h-.005zm.622 1.044c.645.145.943.38.943.796 0 .474-.37.8-1.02.86v-1.674l.077.018z"/>
|
|
</svg>
|
|
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>
|
|
<input autofocus class="form-control" id="searchList" type="search" placeholder="Search…" autocomplete="off" spellcheck="false" aria-describedby="atlasSize">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="sort">Sort:</label>
|
|
<select class="form-select" id="sort" title="Sort entries">
|
|
<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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="zoomResetButton" title="Reset view">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16">
|
|
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="zoomOutButton" title="Zoom out">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
|
|
</svg>
|
|
</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="1" max="1" value="1" id="timeControlsSlider" 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>
|
|
</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.75rem;">Code owned 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 class="offcanvas-body" id="offcanvasDraw-drawControls">
|
|
<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>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/></svg>
|
|
Undo
|
|
</button>
|
|
<button type="button" class="btn btn-secondary flex-fill" id="redoButton" title="Redo line [ctrl-y]" disabled>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>
|
|
Redo
|
|
</button>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="finishButton" title="Finish drawing [enter]" 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"></p>
|
|
<div id="periodGroups"></div>
|
|
<button type="button" class="btn btn-primary d-block mx-auto" id="periodsAdd">Add Period</button>
|
|
</div>
|
|
<div id="hint">
|
|
<p>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.</p>
|
|
<p>Click anywhere on the image to start drawing a shape. When you're happy with the result, click the "Finish" button above or press the Enter key.</p>
|
|
<p>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 class="offcanvas-body" id="offcanvasDraw-objectInfo" style="display: 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" 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>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
|
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
|
</svg>
|
|
</a>
|
|
</label>
|
|
<div id="wikiGroup" class="mb-3 d-flex flex-column gap-2"></div>
|
|
<div id="infoButtons" class="d-flex gap-2">
|
|
<button type="button" class="btn btn-secondary w-50" id="cancelButton">Back</button>
|
|
<button type="submit" class="btn btn-primary w-50" id="exportButton">Ok</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="closeObjectsListButton" class="d-none btn btn-secondary shadow" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
|
|
<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
|
|
</svg>
|
|
</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"></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"></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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paypal" viewBox="0 0 16 16" aria-hidden="true"><path d="M14.06 3.713c.12-1.071-.093-1.832-.702-2.526C12.628.356 11.312 0 9.626 0H4.734a.7.7 0 0 0-.691.59L2.005 13.509a.42.42 0 0 0 .415.486h2.756l-.202 1.28a.628.628 0 0 0 .62.726H8.14c.429 0 .793-.31.862-.731l.025-.13.48-3.043.03-.164.001-.007a.351.351 0 0 1 .348-.297h.38c1.266 0 2.425-.256 3.345-.91.379-.27.712-.603.993-1.005a4.942 4.942 0 0 0 .88-2.195c.242-1.246.13-2.356-.57-3.154a2.687 2.687 0 0 0-.76-.59l-.094-.061ZM6.543 8.82a.695.695 0 0 1 .321-.079H8.3c2.82 0 5.027-1.144 5.672-4.456l.003-.016c.217.124.4.27.548.438.546.623.679 1.535.45 2.71-.272 1.397-.866 2.307-1.663 2.874-.802.57-1.842.815-3.043.815h-.38a.873.873 0 0 0-.863.734l-.03.164-.48 3.043-.024.13-.001.004a.352.352 0 0 1-.348.296H5.595a.106.106 0 0 1-.105-.123l.208-1.32.845-5.214Z"/></svg>
|
|
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="bi" 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="bi" 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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paypal" viewBox="0 0 16 16" aria-hidden="true"><path d="M14.06 3.713c.12-1.071-.093-1.832-.702-2.526C12.628.356 11.312 0 9.626 0H4.734a.7.7 0 0 0-.691.59L2.005 13.509a.42.42 0 0 0 .415.486h2.756l-.202 1.28a.628.628 0 0 0 .62.726H8.14c.429 0 .793-.31.862-.731l.025-.13.48-3.043.03-.164.001-.007a.351.351 0 0 1 .348-.297h.38c1.266 0 2.425-.256 3.345-.91.379-.27.712-.603.993-1.005a4.942 4.942 0 0 0 .88-2.195c.242-1.246.13-2.356-.57-3.154a2.687 2.687 0 0 0-.76-.59l-.094-.061ZM6.543 8.82a.695.695 0 0 1 .321-.079H8.3c2.82 0 5.027-1.144 5.672-4.456l.003-.016c.217.124.4.27.548.438.546.623.679 1.535.45 2.71-.272 1.397-.866 2.307-1.663 2.874-.802.57-1.842.815-3.043.815h-.38a.873.873 0 0 0-.863.734l-.03.164-.48 3.043-.024.13-.001.004a.352.352 0 0 1-.348.296H5.595a.106.106 0 0 1-.105-.123l.208-1.32.845-5.214Z"/></svg>
|
|
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">
|
|
<label for="period-start" class="form-label">Start Period</label>
|
|
<input type="range" class="period-start form-range" id="period-start" min="0">
|
|
<label for="period-end" class="form-label">End Period</label>
|
|
<input type="range" class="period-end form-range mb-2" id="period-end" min="0">
|
|
<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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-back" viewBox="0 0 16 16" aria-hidden="true">
|
|
<path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/>
|
|
</svg>
|
|
Duplicate
|
|
</button>
|
|
<button type="button" class="period-delete btn btn-danger btn-sm flex-fill" id="period-delete">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16" aria-hidden="true">
|
|
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
|
|
</svg>
|
|
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" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
|
<script type="text/javascript" src="./_js/time.js"></script>
|
|
<script type="text/javascript" src="./_js/infoblock.js"></script>
|
|
<script type="text/javascript" src="./_js/pointInPolygon.js"></script>
|
|
<script type="text/javascript" src="./_js/atlas.js"></script>
|
|
<script type="text/javascript" src="./_js/view.js"></script>
|
|
<script type="text/javascript" src="./_js/overlap.js"></script>
|
|
<script type="text/javascript" src="./_js/polylabel.js"></script>
|
|
<script type="text/javascript" src="./_js/draw.js"></script>
|
|
<script type="text/javascript" src="./_js/main.js"></script>
|
|
<!-- <script type="text/javascript" src="./_js/stats.js"></script>
|
|
<script type="text/javascript" src="./_js/minified.js"></script> -->
|
|
</body>
|
|
</html> |