MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-17 18:59:35 +02:00
Code Issues Projects Releases Wiki Activity

Format HTML and CSS

Browse source
This commit is contained in:
Hans5958 2022-04-16 20:40:57 +07:00
parent 684f70270a
commit 78d47d85c7
3 changed files with 447 additions and 426 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
web/_css/style.css
View file

@ -28,7 +28,8 @@ @font-face {
box-sizing: border-box;
}
html, body {
html,
body {
min-height: 100%;
min-width: 100%;
height: 100%;
@ -44,11 +45,11 @@ body {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
font-family: dejavu, sans, Sans-Serif;
background-color: #111;
color: #FFF;
line-height: 1.15;
}
@ -142,19 +143,19 @@ header {
}
@media (max-width: 600px) {
header{
header {
width: 100%;
}
}
@media (max-width: 400px) {
header h1{
header h1 {
font-size: 28px;
}
}
@media (max-width: 350px) {
header h1{
header h1 {
font-size: 20px;
}
}
@ -164,13 +165,13 @@ header.aboutHeader {
border-right: 0;
}
header > a {
header>a {
display: flex;
color: #FFF;
/*align-items: center;*/
}
header > a:hover {
header>a:hover {
text-decoration: none;
color: #FFAA00;
}
@ -200,8 +201,7 @@ select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E")
,linear-gradient(to bottom, #888, #666);
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E"), linear-gradient(to bottom, #888, #666);
background-repeat: no-repeat, repeat;
background-position: calc(100% - 10px) center, 0 0;
background-size: 10px, cover;
@ -214,12 +214,11 @@ select {
}
select option[disabled] {
display: none;
display: none;
}
select:hover {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E")
,linear-gradient(to bottom, #999, #777);
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E"), linear-gradient(to bottom, #999, #777);
}
select:active {
@ -275,51 +274,54 @@ [data-init-done] #loading {
animation: fadeInOut 4s linear 0s 1;
}
#loading > div {
#loading>div {
margin: 80px auto;
color: #FFF;
text-align: center;
font-size: 40px;
}
#loading > div > div:first-child {
#loading>div>div:first-child {
width: 200px;
height: 200px;
border-radius: 200px;
border: 7px #CCC solid;
display: inline-block;
border-top-color: #FFAA00;
animation-duration: 3s;
animation-name: spinner;
animation-iteration-count: infinite;
}
#loading > div > span {
#loading>div>span {
font-family: dejavu, Helvetica, sans-serif;
font-weight: 200;
}
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
52.5% {
opacity: 1;
}
100% {
opacity: 1;
}
0% {
opacity: 0;
}
50% {
opacity: 0;
}
52.5% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes spinner {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
@ -395,8 +397,7 @@ #closeObjectsListButton {
position: absolute;
top: 10px;
right: 310px;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E")
,linear-gradient(to bottom, #666, #444);
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, #666, #444);
background-size: 15px, cover;
background-position: center, 0 0;
background-repeat: no-repeat, no-repeat;
@ -407,15 +408,15 @@ #closeObjectsListButton.hidden {
}
#closeObjectsListButton:hover {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E")
,linear-gradient(to bottom, #777, #555);
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, #777, #555);
}
@media (max-width: 750px) {
div:not(.listHidden) > #objectsList {
div:not(.listHidden)>#objectsList {
display: none;
}
div:not(.listHidden) > #closeObjectsListButton {
div:not(.listHidden)>#closeObjectsListButton {
display: none;
}
}
@ -438,7 +439,7 @@ @media (max-width: 530px) {
top: 80px;
max-height: calc(100% - 130px);
}
#closeObjectsListButton {
top: 55px;
right: 10px;
@ -468,7 +469,7 @@ .object:hover h2 {
background-color: #777;
}
.object > * {
.object>* {
display: block;
}
@ -534,9 +535,11 @@ .object .objectEdit {
p.edit {
color: #FFFF00;
}
p.add {
color: #00FF00;
}
p.delete {
color: #FF0000;
}
@ -571,7 +574,7 @@ #drawBackButton {
width: 170px;
}
#drawControls > div > * {
#drawControls>div>* {
width: 100%;
display: flex;
justify-content: center;
@ -582,12 +585,12 @@ #drawControls .inline {
display: flex
}
#drawControls .inline > * {
#drawControls .inline>* {
flex-grow: 1;
margin-right: 5px;
}
#drawControls .inline > *:last-child {
#drawControls .inline>*:last-child {
margin-right: 0;
}
@ -663,7 +666,7 @@ #exportWindow {
width: 100%;
height: calc(100% - 100px);
max-width: 500px;
/*max-height: 300px*/;
/*max-height: 300px*/
border: 1px #000 solid;
background-color: #555;
@ -678,9 +681,7 @@ #exportWindow * {
margin-bottom: 10px;
}
#exportWindow p {
}
#exportWindow p {}
#exportString {
flex-grow: 1;
@ -688,13 +689,13 @@ #exportString {
}
.exportButtons {
display: flex;
display: flex;
flex-direction: row;
justify-content: center;
gap: 1em
}
#exportButtons > * {
#exportButtons>* {
margin-bottom: 0;
width: 100px;
align-self: flex-end;
@ -707,16 +708,16 @@ #exportOverlay {
#coordsWrapper {
min-width: 100px;
position: absolute;
display: flex;
display: flex;
gap: 10px;
z-index: 1100;
top: 5px;
left: 364px;
}
#wrapper.listHidden #coordsWrapper {
top: 49px;
left: 149px;
#wrapper.listHidden #coordsWrapper {
top: 49px;
left: 149px;
}
@media (max-width: 750px) {
@ -724,14 +725,15 @@ @media (max-width: 750px) {
display: none;
}
}
#coords {
background-color: #555;
border: 1px #000 solid;
padding: 6.5px;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
justify-content: center;
text-align: center;
}
@ -742,23 +744,23 @@ #coords p {
#bottomBar {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
gap: 10px;
}
#bottomBar > * {
#bottomBar>* {
z-index: 1
}
div:not(.listHidden) > #bottomBar {
div:not(.listHidden)>#bottomBar {
left: 370px !important;
}
@media (max-width: 1280px) {
div:not(.listHidden) > #bottomBar {
div:not(.listHidden)>#bottomBar {
flex-wrap: wrap;
}
@ -793,11 +795,11 @@ #timeControls {
}
#timeControls input {
height: 100%;
height: 100%;
background: #555;
-webkit-appearance: none;
appearance: none;
width: 100%;
width: 100%;
}
#timeControlsTooltip {
@ -832,15 +834,15 @@ .slider::-webkit-slider-thumb {
height: 25px;
background: #d3d3d3;
cursor: pointer;
}
.slider::-moz-range-thumb {
}
.slider::-moz-range-thumb {
appearance: none;
width: 10px;
height: 25px;
background: #d3d3d3;
cursor: pointer;
}
}
#author {
background-color: #555;
@ -851,8 +853,8 @@ #author {
min-width: 320px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
justify-content: center;
}
#author p {
@ -916,16 +918,16 @@ @media (max-width: 500px) {
div#entriesListContainer {
width: calc(100% - 20px);
}
div#entriesListBackground {
width: 100%;
}
div:not(.listHidden) > #bottomBar {
div:not(.listHidden)>#bottomBar {
display: none !important;
}
div:not(.listHidden) > button#hideListButton {
div:not(.listHidden)>button#hideListButton {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg style='stroke:%23fff;stroke-opacity:1'%3E%3Cpath d='m195.278 552.798 115.158-115.157M310.436 552.798 195.278 437.641' style='fill:none;stroke:%23fff;stroke-width:24.74926186;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='matrix(1.21216 0 0 1.21216 -210.083 -503.846)'/%3E%3C/g%3E%3C/svg%3E");
background-size: 20px;
position: absolute;
@ -943,7 +945,7 @@ @media (max-width: 500px) {
}
@media (max-width: 350px) {
#entriesListNav > a#drawLink {
#entriesListNav>a#drawLink {
display: none;
}
}
@ -963,7 +965,7 @@ #entriesListNav {
justify-content: center;
}
#entriesListNav > * {
#entriesListNav>* {
display: block;
cursor: pointer;
width: 120px;
@ -971,34 +973,34 @@ #entriesListNav > * {
margin-right: 10px;
}
#entriesListNav > .small {
#entriesListNav>.small {
width: 30px;
padding: 2px;
flex-shrink: 0;
}
#entriesListNav > .small > img,
#entriesListNav > .small > svg {
#entriesListNav>.small>img,
#entriesListNav>.small>svg {
height: 22px;
width: 22px;
}
#entriesListNav > .small:last-child {
#entriesListNav>.small:last-child {
margin-right: 0;
}
#entriesListNav > a:hover {
#entriesListNav>a:hover {
text-decoration: none;
background-image: linear-gradient(to bottom, #999, #777);
}
#entriesListNav > .small:hover {
#entriesListNav>.small:hover {
background-image: none;
background: transparent;
border-color: transparent;
}
#entriesListDonate:hover > svg {
#entriesListDonate:hover>svg {
text-decoration: none;
background-image: linear-gradient(to bottom, #FFAA00, #FFAA00);
border-radius: 15px;
@ -1007,7 +1009,8 @@ #entriesListDonate:hover > svg {
height: 28px;
width: 28px;
}
#entriesListDiscord:hover > svg {
#entriesListDiscord:hover>svg {
text-decoration: none;
background-image: linear-gradient(to bottom, #7289DA, #7289DA);
border-radius: 12px;
@ -1067,8 +1070,7 @@ [data-mode="draw"] #hideListButton {
}
.listHidden #hideListButton {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='272.844' height='177.594'%3E%3Cpath d='M368.07 380.006 252.857 495.164 137.644 380.006' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-116.438 -348.781)'/%3E%3C/svg%3E")
,linear-gradient(to bottom, #555, #444);
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='272.844' height='177.594'%3E%3Cpath d='M368.07 380.006 252.857 495.164 137.644 380.006' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-116.438 -348.781)'/%3E%3C/svg%3E"), linear-gradient(to bottom, #555, #444);
background-size: 15px, cover;
background-position: 10px center, 0 0;
top: 49px;
@ -1110,9 +1112,7 @@ #searchList {
width: 100%;
}
#sortContainer {
}
#sortContainer {}
#sortContainer label {
width: 70px;
@ -1193,7 +1193,7 @@ #contributors {
#contributors a {
margin: 3px;
line-height: 26px;
line-height: 26px;
}
#donateButton {
@ -1221,19 +1221,19 @@ #donateWindow {
max-width: 800px;
}
#donateWindow > p {
#donateWindow>p {
margin: 2px 0;
padding: 0 20px;
text-align: left;
width: 100%;
}
#donateWindow > * {
#donateWindow>* {
display: inline-block;
margin: 5px 0;
}
#donateWindow > h2 {
#donateWindow>h2 {
font-weight: 200;
background-color: #555;
width: 100%;
@ -1288,7 +1288,7 @@ #viewModes .dropdown-content {
cursor: pointer;
width: 125%
}
#viewModes .dropdown-content a {
color: #FFF;
text-align: left;
@ -1297,11 +1297,11 @@ #viewModes .dropdown-content a {
text-decoration: none;
text-shadow: 1px 1px 0 #444;
}
#viewModes .dropdown-content a:hover {
background-image: linear-gradient(to bottom, #999, #777);
}
#viewModes:hover .dropdown-content,
#viewModes:active .dropdown-content {
display: block;

159
web/about.html
View file

@ -15,89 +15,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The 2022 /r/place Atlas</title>
<meta name="description" content="An Atlas of Reddit's /r/place, with information to each artwork of the canvas.">
<meta name="author" content="Roland Rytz">
<meta name="application-name" content="2022 /r/place Atlas">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta name="color-scheme" content="dark">
<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 href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="./_js/favicon.js" defer></script>
</head>
<body>
<div id="wrapper">
<header class="aboutHeader">
<a href="./">
<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="">
<h1>The 2022 /r/place Atlas</h1>
</a>
<!--nav>
<head>
<meta charset="UTF-8">
<title>The 2022 /r/place Atlas</title>
<meta name="description" content="An Atlas of Reddit's /r/place, with information to each artwork of the canvas.">
<meta name="author" content="Roland Rytz">
<meta name="application-name" content="2022 /r/place Atlas">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta name="color-scheme" content="dark">
<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 href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="./_js/favicon.js" defer></script>
</head>
<body>
<div id="wrapper">
<header class="aboutHeader">
<a href="./">
<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="">
<h1>The 2022 /r/place Atlas</h1>
</a>
<!--nav>
<a id="viewLink" href="./" class="current">View</a>
<a id="drawLink" href="./?mode=draw">Draw</a>
<a id="aboutLink" href="./about.html">About</a>
</nav-->
</header>
<div id="author" style="right:25px">
Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>).
</div>
<div id="aboutContainer">
<div id="about">
<a id="aboutBackButton" class="button" href="./">&lt; Back to the Atlas</a>
<a href="https://www.netlify.com" id="netlifyBadges">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" alt="Deploys by Netlify" />
<img src="https://api.netlify.com/api/v1/badges/1e7291ce-0680-45ed-9843-47a32a992bbb/deploy-status" alt="Deploys by Netlify" />
</a>
<h2 id="abouth2">The 2022 /r/place Atlas</h2>
<p>This is an Atlas aiming to chart all the artworks created during the <a href="https://www.reddit.com/r/place/">/r/place</a> April Fools event on <a href="https://www.reddit.com/" target="_blank">Reddit</a> in 2022.</p>
<p>The original code was developed by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a> (<a href="mailto:roland.rytz@gmail.com" target="_blank">mail</a>, <a href="https://reddit.com/user/draemmli/" target="_blank">reddit</a>) and is available under the free <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">AGPL license</a> on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.</p>
<br>
<p>The currently maintained version of the website is managed by <a href="/" target="_blank" rel="author">Stefano Haagmans</a> and is obtainable under the same license within a <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub fork</a>. Images are provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
<p>Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though <a target="_blank" href="https://paypal.me/placeAtlas/5">PayPal</a>, <a target="_blank" href="https://www.patreon.com/placeAtlas">Patreon</a>, or <a target="_blank" href="https://ko-fi.com/placeatlas">Ko-Fi</a>.</p>
<p>To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project</p>
<br>
<p>Roland Rytz worked on the Atlas full-time (and more!) for over two weeks during the 2017 r/place event.</p>
<p>If you'd like to support Roland, you can do so by <a target="_blank" href="https://paypal.me/draemmli">PayPal</a>.</p>
<p>If you donate more than 10(€/$/CHF/mBTC), He'll (hopefully) send you a nice sticker of the 2017 Place canvas!</p>
<h2>How to contribute</h2>
<p>The /r/Place Atlas project relies on user contributions.</p>
<p>To contribute a label for an artwork, please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this post on Reddit</a> to learn how to submit a new entry.</p>
<p>Alternatively, contributions can be made directly on <a href="https://github.com/placeAtlas/atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
<p>The <a href="https://reddit.com/r/placeAtlas2/" target="_blank">/r/placeAtlas2</a> subreddit is also the place to submit all bug reports, feature requests or questions.</p>
</header>
<h2>r/placeAtlas2 (Current) Contributors and Maintainers</h2>
<div id="contributors">
<a href="https://reddit.com/user/TCOOfficiall" target="_blank">TCOOfficiall (current maintainer)</a> ·
<a href="https://reddit.com/user/prosto_sanja" target="_blank">prosto_sanja (images)</a> <a href="https://place.thatguyalex.com/" target="_blank">(website)</a> ·
<a href="https://reddit.com/user/electric-blue" target="_blank">electric-blue</a> ·
<a href="https://reddit.com/user/m654zy" target="_blank">m654zy</a> ·
<a href="https://reddit.com/user/xXLInkster17Xx" target="_blank">xXLInkster17Xx</a>
</div>
<p>The 2022 Atlas would not have been possible without the help of our reddit contributors. This section will be updated with all of the contributor's usernames.</p>
<p>Thank you to everyone who submitted new entries, amended existing ones, reported bugs and just supported the project in general.</p>
<h2 id="contacth2">Contact?</h2>
<p>If you're press, a influencer or anything media connected, or you would like to use the atlas in one. Please contact us beforehand through:</p>
<p> - <a href="mailto:press@stefanocoding.me" target="_blank">press@stefanocoding.me</a></p>
<br>
<p>If you need to contact me regarding anything else, you can reach me through:</p>
<p> - <a href="mailto:stefano@stefanocoding.me" target="_blank">stefano@stefanocoding.me</a></p>
</div>
<div id="author" style="right:25px">
Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>).
</div>
<div id="aboutContainer">
<div id="about">
<a id="aboutBackButton" class="button" href="./">&lt; Back to the Atlas</a>
<a href="https://www.netlify.com" id="netlifyBadges">
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" alt="Deploys by Netlify" />
<img src="https://api.netlify.com/api/v1/badges/1e7291ce-0680-45ed-9843-47a32a992bbb/deploy-status" alt="Deploys by Netlify" />
</a>
<h2 id="abouth2">The 2022 /r/place Atlas</h2>
<p>This is an Atlas aiming to chart all the artworks created during the <a href="https://www.reddit.com/r/place/">/r/place</a> April Fools event on <a href="https://www.reddit.com/" target="_blank">Reddit</a> in 2022.</p>
<p>The original code was developed by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a> (<a href="mailto:roland.rytz@gmail.com" target="_blank">mail</a>, <a href="https://reddit.com/user/draemmli/" target="_blank">reddit</a>) and is available under the free <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">AGPL license</a> on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.</p>
<br>
<p>The currently maintained version of the website is managed by <a href="/" target="_blank" rel="author">Stefano Haagmans</a> and is obtainable under the same license within a <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub fork</a>. Images are provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
<p>Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though <a target="_blank" href="https://paypal.me/placeAtlas/5">PayPal</a>, <a target="_blank" href="https://www.patreon.com/placeAtlas">Patreon</a>, or <a target="_blank" href="https://ko-fi.com/placeatlas">Ko-Fi</a>.</p>
<p>To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project</p>
<br>
<p>Roland Rytz worked on the Atlas full-time (and more!) for over two weeks during the 2017 r/place event.</p>
<p>If you'd like to support Roland, you can do so by <a target="_blank" href="https://paypal.me/draemmli">PayPal</a>.</p>
<p>If you donate more than 10(€/$/CHF/mBTC), He'll (hopefully) send you a nice sticker of the 2017 Place canvas!</p>
<h2>How to contribute</h2>
<p>The /r/Place Atlas project relies on user contributions.</p>
<p>To contribute a label for an artwork, please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this post on Reddit</a> to learn how to submit a new entry.</p>
<p>Alternatively, contributions can be made directly on <a href="https://github.com/placeAtlas/atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
<p>The <a href="https://reddit.com/r/placeAtlas2/" target="_blank">/r/placeAtlas2</a> subreddit is also the place to submit all bug reports, feature requests or questions.</p>
<h2>r/placeAtlas2 (Current) Contributors and Maintainers</h2>
<div id="contributors">
<a href="https://reddit.com/user/TCOOfficiall" target="_blank">TCOOfficiall (current maintainer)</a> ·
<a href="https://reddit.com/user/prosto_sanja" target="_blank">prosto_sanja (images)</a> <a href="https://place.thatguyalex.com/" target="_blank">(website)</a> ·
<a href="https://reddit.com/user/electric-blue" target="_blank">electric-blue</a> ·
<a href="https://reddit.com/user/m654zy" target="_blank">m654zy</a> ·
<a href="https://reddit.com/user/xXLInkster17Xx" target="_blank">xXLInkster17Xx</a>
</div>
<p>The 2022 Atlas would not have been possible without the help of our reddit contributors. This section will be updated with all of the contributor's usernames.</p>
<p>Thank you to everyone who submitted new entries, amended existing ones, reported bugs and just supported the project in general.</p>
<h2 id="contacth2">Contact?</h2>
<p>If you're press, a influencer or anything media connected, or you would like to use the atlas in one. Please contact us beforehand through:</p>
<p> - <a href="mailto:press@stefanocoding.me" target="_blank">press@stefanocoding.me</a></p>
<br>
<p>If you need to contact me regarding anything else, you can reach me through:</p>
<p> - <a href="mailto:stefano@stefanocoding.me" target="_blank">stefano@stefanocoding.me</a></p>
</div>
</div>
</body>
</html>
</div>
</div>
</body>
</html>

528
web/index.html
View file

@ -15,39 +15,40 @@
<!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="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 href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
<link rel="manifest" href="./manifest.webmanifest">
<script type="text/javascript" src="./_js/favicon.js" defer></script>
<script type="application/ld+json">
<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="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 href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
<link rel="manifest" href="./manifest.webmanifest">
<script type="text/javascript" src="./_js/favicon.js" defer></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
@ -77,245 +78,262 @@
"description": "An interactive map of Reddit's /r/place, with information to each artwork of the canvas. Originally created by Roland Rytz (2022 by Stefano#7366)..",
}
</script>
</head>
<body>
<div id="wrapper">
<header>
<a href="./">
<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="Logo">
<!-- If you wonder why I shrink the image in html,
</head>
<body>
<div id="wrapper">
<header>
<a href="./">
<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="Logo">
<!-- If you wonder why I shrink the image in html,
it's because this is the image that will be used
by reddit and the like as the thumbnail for the site.
The original is only 5.9kB, which wouldn't get much
smaller by reducing the actualy size. -->
<h1 id="title">The 2022 /r/place Atlas</h1>
<h1 id="title">The 2022 /r/place Atlas</h1>
</a>
</header>
<div id="container">
<div id="loading">
<div id="loadingContent">
<div></div><br>
<span>&nbsp;&nbsp;Hang on...</span>
<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="Canvas of /r/place in the state of when the experiment was concluded." />
</div>
</div>
<div id="entriesListContainer">
<nav id="entriesListNav">
<a id="aboutLink" href="./about.html" class="button">About</a>
<a id="drawLink" href="./index.html?mode=draw" class="button">Draw</a>
<div class="dropdown button" id="viewModes">
<span>Modes</span>
<span class="buffer"></span>
<div class="dropdown-content">
<a href="./">Normal</a>
<a href="./?mode=explore">Explore</a>
<a href="./?mode=overlap">Overlap</a>
<a href="./?mode=diff" class="show-only-on-dev">With Diff</a>
<a href="./?mode=diffonly" class="show-only-on-dev">Diff Only</a>
</div>
</div>
<a title="Discord" href="https://discord.gg/pJkm23b2nA" class="button small" id="entriesListDiscord">
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="55" viewBox="0 0 71 55">
<path fill="#FFF" d="M60 5a59 59 0 0 0-15-4l-1 3H27a37 37 0 0 0-2-4 58 58 0 0 0-14 5A60 60 0 0 0 0 46a59 59 0 0 0 18 8l4-5v-1l-6-2v-1a30 30 0 0 0 2-1 42 42 0 0 0 36 0l1 1v1l-6 2v1a47 47 0 0 0 4 6 59 59 0 0 0 18-10A60 60 0 0 0 60 5ZM24 37c-4 0-7-3-7-7s3-7 7-7c3 0 6 3 6 7s-3 7-6 7Zm23 0c-3 0-6-3-6-7s3-7 6-7c4 0 7 3 7 7s-3 7-7 7Z" / alt="Discord">
</svg>
</a>
</header>
<div id="container">
<div id="loading">
<div id="loadingContent">
<div></div><br>
<span>&nbsp;&nbsp;Hang on...</span>
<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="Canvas of /r/place in the state of when the experiment was concluded." />
</div>
</div>
<div id="entriesListContainer">
<nav id="entriesListNav">
<a id="aboutLink" href="./about.html" class="button">About</a>
<a id="drawLink" href="./index.html?mode=draw" class="button">Draw</a>
<div class="dropdown button" id="viewModes">
<span>Modes</span>
<span class="buffer"></span>
<div class="dropdown-content">
<a href="./">Normal</a>
<a href="./?mode=explore">Explore</a>
<a href="./?mode=overlap">Overlap</a>
<a href="./?mode=diff" class="show-only-on-dev">With Diff</a>
<a href="./?mode=diffonly" class="show-only-on-dev">Diff Only</a>
</div>
</div>
<a title="Discord" href="https://discord.gg/pJkm23b2nA" class="button small" id="entriesListDiscord">
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="55" viewBox="0 0 71 55"><path fill="#FFF" d="M60 5a59 59 0 0 0-15-4l-1 3H27a37 37 0 0 0-2-4 58 58 0 0 0-14 5A60 60 0 0 0 0 46a59 59 0 0 0 18 8l4-5v-1l-6-2v-1a30 30 0 0 0 2-1 42 42 0 0 0 36 0l1 1v1l-6 2v1a47 47 0 0 0 4 6 59 59 0 0 0 18-10A60 60 0 0 0 60 5ZM24 37c-4 0-7-3-7-7s3-7 7-7c3 0 6 3 6 7s-3 7-6 7Zm23 0c-3 0-6-3-6-7s3-7 6-7c4 0 7 3 7 7s-3 7-7 7Z"/ alt="Discord"></svg>
</a>
<button title="Donate!" id="entriesListDonate" class="small">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M291 384c-1-6-6-8-13-9v-9h-5v9h-4v-9h-6v9h-10v6h3c3 0 3 1 3 2v10h1-1v14c0 1 0 2-2 2h-3l-1 6h10v9h6v-9h4v9h5v-9c9 0 15-3 16-11 1-7-3-10-8-11 3-1 5-4 5-9zm-7 19c0 7-12 6-15 6v-12c3 0 15-1 15 6zm-3-16c0 6-9 5-12 5v-11c3 0 12-1 12 6z" style="fill:#fff" transform="translate(-239 -363)"/ alt="Donate"></svg>
</button>
</nav>
<div id="entriesListControls">
<input autofocus id="searchList" type="text" placeholder="Search...">
<span id="atlasSize"></span>
<div id="sortContainer"><label>Sort:</label>
<select id="sort">
<option value="shuffle">Random</option>
<option value="relevant" id="relevantOption" disabled>Relevant</option>
<option value="alphaAsc">↓ Alphabetical</option>
<option value="alphaDesc">↑ Alphabetical</option>
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="area">Area</option>
</select>
</div>
</div>
<div id="entriesList">
</div>
</div>
<div id="entriesListBackground"></div>
<button id="hideListButton" aria-label:="Show List Button"></button>
<div id="coordsWrapper" class="collapsed">
<div id="coords">
<p id="coords_p">0, 0</p>
</div>
</div>
<div id="bottomBar">
<div id="zoomControls">
<button title="Zoom In" id="zoomInButton"></button>
<button title="Reset View" id="zoomResetButton"></button>
<button title="Zoom Out" id="zoomOutButton"></button>
</div>
<div id="timeControls">
<div id="timeControlsTooltip"><p>Time control slider</p></div>
<input type="range" min="0" max="1" value="1" class="slider" id="timeControlsSlider">
</div>
<div id="variantControls">
<select name="variants" id="variants">
<button title="Donate!" id="entriesListDonate" class="small">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path d="M291 384c-1-6-6-8-13-9v-9h-5v9h-4v-9h-6v9h-10v6h3c3 0 3 1 3 2v10h1-1v14c0 1 0 2-2 2h-3l-1 6h10v9h6v-9h4v9h5v-9c9 0 15-3 16-11 1-7-3-10-8-11 3-1 5-4 5-9zm-7 19c0 7-12 6-15 6v-12c3 0 15-1 15 6zm-3-16c0 6-9 5-12 5v-11c3 0 12-1 12 6z" style="fill:#fff" transform="translate(-239 -363)" / alt="Donate">
</svg>
</button>
</nav>
<div id="entriesListControls">
<input autofocus id="searchList" type="text" placeholder="Search...">
<span id="atlasSize"></span>
<div id="sortContainer"><label>Sort:</label>
<select id="sort">
<option value="shuffle">Random</option>
<option value="relevant" id="relevantOption" disabled>Relevant</option>
<option value="alphaAsc">↓ Alphabetical</option>
<option value="alphaDesc">↑ Alphabetical</option>
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="area">Area</option>
</select>
</div>
<div id="author">
<p>Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="author">Place Atlas</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. Site powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
</div>
<div id="entriesList">
</div>
</div>
<div id="entriesListBackground"></div>
<button id="hideListButton" aria-label:="Show List Button"></button>
<div id="coordsWrapper" class="collapsed">
<div id="coords">
<p id="coords_p">0, 0</p>
</div>
</div>
<div id="bottomBar">
<div id="zoomControls">
<button title="Zoom In" id="zoomInButton"></button>
<button title="Reset View" id="zoomResetButton"></button>
<button title="Zoom Out" id="zoomOutButton"></button>
</div>
<div id="timeControls">
<div id="timeControlsTooltip">
<p>Time control slider</p>
</div>
<input type="range" min="0" max="1" value="1" class="slider" id="timeControlsSlider">
</div>
<div id="variantControls">
<select name="variants" id="variants">
</select>
</div>
<div id="author">
<p>Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="author">Place Atlas</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. Site powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
</div>
</div>
<div id="drawControlsContainer">
<a id="drawBackButton" class="button" href="./">&lt; Back to the Atlas</a>
<div id="drawControls">
<div id="objectDraw">
<div class="inline">
<button id="undoButton" disabled>Undo</button>
<button disabled id="redoButton">Redo</button>
</div>
<button disabled id="finishButton">Finish (Enter)</button>
<button id="resetButton">Reset</button>
<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel button">
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
</label>
<div id="periods">
<p>Periods</p>
<p id="periodsStatus"></p>
<div id="periodGroups"></div>
<button id="periodsAdd">Add Period</button>
</div>
</div>
<div id="objectInfo">
<label for="nameField">Name</label>
<input id="nameField" type="text" value="" placeholder="A short title">
<label for="descriptionField">Description</label>
<textarea id="descriptionField" placeholder="A short description to be understood by everyone"></textarea>
<label for="websiteField">Website</label>
<textarea id="websiteField" placeholder="https://example.com"></textarea>
<label for="subredditField">Subreddit</label>
<textarea id="subredditField" placeholder="/r/example"></textarea>
<label for="discordField">Discord</label>
<textarea id="discordField" placeholder="pJkm23b2nA"></textarea>
<label for="wikiField">Wiki</label>
<textarea id="wikiField" placeholder="Page Title"></textarea>
<div class="inline">
<button id="cancelButton">Back</button>
<button id="exportButton">OK</button>
</div>
</div>
</div>
<div id="drawControlsContainer">
<a id="drawBackButton" class="button" href="./">&lt; Back to the Atlas</a>
<div id="drawControls">
<div id="objectDraw">
<div class="inline">
<button id="undoButton" disabled>Undo</button>
<button disabled id="redoButton">Redo</button>
</div>
<button disabled id="finishButton">Finish (Enter)</button>
<button id="resetButton">Reset</button>
<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel button">
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
</label>
<div id="periods">
<p>Periods</p>
<p id="periodsStatus"></p>
<div id="periodGroups"></div>
<button id="periodsAdd">Add Period</button>
</div>
</div>
<div id="objectInfo">
<label for="nameField">Name</label>
<input id="nameField" type="text" value="" placeholder="A short title">
<label for="descriptionField">Description</label>
<textarea id="descriptionField" placeholder="A short description to be understood by everyone"></textarea>
<label for="websiteField">Website</label>
<textarea id="websiteField" placeholder="https://example.com"></textarea>
<label for="subredditField">Subreddit</label>
<textarea id="subredditField" placeholder="/r/example"></textarea>
<label for="discordField">Discord</label>
<textarea id="discordField" placeholder="pJkm23b2nA"></textarea>
<label for="wikiField">Wiki</label>
<textarea id="wikiField" placeholder="Page Title"></textarea>
<div class="inline">
<button id="cancelButton">Back</button>
<button id="exportButton">OK</button>
</div>
</div>
</div>
<div id="hint">
<p>You can suggest new entries to the Atlas for art that isn't mapped yet.</p>
<p>Please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this reddit post</a> for instructions.</p>
<p>Click anywhere on the image to start drawing a shape.
<div id="hint">
<p>You can suggest new entries to the Atlas for art that isn't mapped yet.</p>
<p>Please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this reddit post</a> for instructions.</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>
<div style="background-color:#7289DA; padding:20px">
<p><b>Need Help?</b></p>
<b>You can ask for help on <a href="https://discord.gg/pJkm23b2nA">our Discord server</a>!</b><br>
</div>
</div>
</div>
<button class="hidden" id="closeObjectsListButton"></button>
<div id="objectsList">
</div>
<div id="exportOverlay" class="overlay">
<div id="exportWindow">
<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
<div class="exportButtons">
<a href="_blank" id="exportDirectPost" class="button">Post Direct to Reddit</a>
</div>
<hr style="border-bottom: solid black 1px"/>
<i>or...</i>
<p>Please copy the text below and submit it as a
new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas2/">/r/placeAtlas2</a> on Reddit.</p>
<p>Don't forget to flair it with the "New Entry" tag.</p>
<p>We will then check it and add it to the atlas.</p>
<textarea cols="20" rows="5" id="exportString"></textarea>
<div class="exportButtons" id="exportButtons">
<button id="exportBackButton">Back</button>
<button id="exportCloseButton">Done</button>
</div>
</div>
</div>
<div id="donateOverlay" class="overlay">
<div id="donateWindow">
<h2>Donation Links</h2>
<p>Current 2022 Atlas Maintainers:</p>
<a class="button" target="_blank" href="https://paypal.me/placeAtlas/5">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>
PayPal
</a>
<a class="button" target="_blank" href="https://www.patreon.com/placeAtlas">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Patreon</title><path fill="white" 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="button" target="_blank" href="https://ko-fi.com/placeatlas">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Ko-fi</title><path fill="white" 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>
<p>Original 2017 Atlas Developer (draemmli aka Roland Rytz): </p>
<a class="button" target="_blank" href="https://paypal.me/draemmli">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>
PayPal
</a>
<br>
<button id="closeDonateButton">Close</button>
<p>You can then add more information about your object.</p>
<div style="background-color:#7289DA; padding:20px">
<p><b>Need Help?</b></p>
<b>You can ask for help on <a href="https://discord.gg/pJkm23b2nA">our Discord server</a>!</b><br>
</div>
</div>
</div>
<template id="period-group">
<div class="period-group">
<label for="period-start">Start Period</label>
<input class="period-start" type="range" min="0">
<label for="period-end">End Period</label>
<input class="period-end" type="range" min="0">
<p class="period-visible"></p>
<div class="inline">
<button class="period-copy">Copy</button>
<button class="period-delete">Delete</button>
<button class="period-duplicate">Duplicate</button>
<button class="hidden" id="closeObjectsListButton"></button>
<div id="objectsList">
</div>
<div id="exportOverlay" class="overlay">
<div id="exportWindow">
<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
<div class="exportButtons">
<a href="_blank" id="exportDirectPost" class="button">Post Direct to Reddit</a>
</div>
<hr style="border-bottom: solid black 1px" />
<i>or...</i>
<p>Please copy the text below and submit it as a
new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas2/">/r/placeAtlas2</a> on Reddit.</p>
<p>Don't forget to flair it with the "New Entry" tag.</p>
<p>We will then check it and add it to the atlas.</p>
<textarea cols="20" rows="5" id="exportString"></textarea>
<div class="exportButtons" id="exportButtons">
<button id="exportBackButton">Back</button>
<button id="exportCloseButton">Done</button>
</div>
<select class="period-variation"></select>
</div>
</template>
</div>
<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/draw.js"></script>
<script type="text/javascript" src="./_js/main.js"></script>
<!--
<script type="text/javascript" src="./_js/stats.js"></script>
<div id="donateOverlay" class="overlay">
<div id="donateWindow">
<h2>Donation Links</h2>
<p>Current 2022 Atlas Maintainers:</p>
<a class="button" target="_blank" href="https://paypal.me/placeAtlas/5">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>PayPal</title>
<path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z" />
</svg>
PayPal
</a>
<a class="button" target="_blank" href="https://www.patreon.com/placeAtlas">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Patreon</title>
<path fill="white" 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="button" target="_blank" href="https://ko-fi.com/placeatlas">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Ko-fi</title>
<path fill="white" 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>
<p>Original 2017 Atlas Developer (draemmli aka Roland Rytz): </p>
<a class="button" target="_blank" href="https://paypal.me/draemmli">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>PayPal</title>
<path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z" />
</svg>
PayPal
</a>
<br>
<button id="closeDonateButton">Close</button>
</div>
</div>
</div>
<template id="period-group">
<div class="period-group">
<label for="period-start">Start Period</label>
<input class="period-start" type="range" min="0">
<label for="period-end">End Period</label>
<input class="period-end" type="range" min="0">
<p class="period-visible"></p>
<div class="inline">
<button class="period-copy">Copy</button>
<button class="period-delete">Delete</button>
<button class="period-duplicate">Duplicate</button>
</div>
<select class="period-variation"></select>
</div>
</template>
<script type="text/javascript" src="./_js/minified.js"></script>
-->
</body>
</html>
<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/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>