atlas/web/index.html
2022-04-06 19:05:57 -03:00

250 lines
14 KiB
HTML

<!--
========================================================================
The /r/place Atlas
An Atlas of Reddit's /r/place, with information to each
artwork of the canvas provided by the community.
Copyright (C) 2017 Roland Rytz <roland@draemm.li>
Licensed under the GNU Affero General Public License Version 3
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
For more information, see:
http://place-atlas.stefanocoding.me/license.txt
========================================================================
-->
<!DOCTYPE html>
<html>
<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="keywords" content="reddit, /r/place 2022">
<meta name="application-name" content="The /r/place Atlas 2022">
<meta name="robots" content="index, follow">
<!-- <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, user-scalable=no, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<link href="./_css/style.css?version=1.0.33" rel="stylesheet" type="text/css" media="all">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "The 2022 /r/place Atlas",
"url": "http://place-atlas.stefanocoding.me/",
"author": {
"@type": "Person",
"@id": "#Codixer",
"name": "Stefano Haagmans",
"email": "stefano@stefanocoding.me",
"url": "https://stefanocoding.me/",
"sameAs": "https://stefanocoding.me/",
"familyName": "Haagmans",
"givenName": "Stefano",
"alternateName": "Codixer",
"gender": "Male",
"nationality": "Netherlands"
},
"copyrightHolder": { "@id": "#RolandRytz" },
"copyrightYear": 2017,
"license": "http://place-atlas.stefanocoding.me/license.txt",
"inLanguage": "English",
"isAccessibleForFree": true,
"keywords": "reddit, /r/place",
"thumbnailUrl": "http://place-atlas.stefanocoding.me/_img/logo.png",
"logo": "http://place-atlas.stefanocoding.me/_img/logo.png",
"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.png" 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>
</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" src="./_img/place-indexed-final-place.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
</div>
</div>
<div id="entriesListContainer">
<nav>
<a id="aboutLink" href="./about.html">About</a>
<a id="drawLink" href="./index.html?mode=draw">Draw</a>
<a id="toggleMode" onclick="return changeOverlapMode()">Overlap</a>
<button title="Discord" onclick="window.location.href='https://discord.gg/pJkm23b2nA'">
<img class="Discord" alt="Discord Logo" src="./_img/discord.svg">
</button>
<button title="Donate!" id="donateButton">
<img alt="Donate" src="data:image/svg+xml;utf8,%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%0A%20%20%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20width%3D%2263.97776%22%0A%20%20%20height%3D%2263.985764%22%0A%20%20%20id%3D%22svg2%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%20/%3E%0A%20%20%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata7%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22%20/%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C/dc%3Atitle%3E%0A%20%20%20%20%20%20%3C/cc%3AWork%3E%0A%20%20%20%20%3C/rdf%3ARDF%3E%0A%20%20%3C/metadata%3E%0A%20%20%3Cg%0A%20%20%20%20%20transform%3D%22translate%28-239.44047%2C-363.22698%29%22%0A%20%20%20%20%20id%3D%22layer1%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22m%20290.96332%2C384.19885%20c%20-0.59424%2C-6.27896%20-6.01049%2C-8.39164%20-12.8518%2C-9.00126%20l%200.0128%2C-8.70824%20-5.30062%2C-0.007%20-0.0123%2C8.47872%20c%20-1.39346%2C-0.002%20-2.81788%2C0.0235%20-4.23308%2C0.0496%20l%200.0135%2C-8.53485%20-5.29778%2C-0.008%20-0.0149%2C8.70575%20c%20-1.14765%2C0.0217%20-2.27469%2C0.0414%20-3.3736%2C0.0405%20l%20-5.3e-4%2C-0.0271%20-7.31086%2C-0.0134%20-0.007%2C5.66124%20c%200%2C0%203.91442%2C-0.0688%203.84925%2C0.003%202.14703%2C0.004%202.84397%2C1.25133%203.04562%2C2.32724%20l%20-0.0143%2C9.92049%20c%200.14815%2C0.001%200.34143%2C0.008%200.56022%2C0.0378%20-0.17659%2C-3e-5%20-0.36561%2C-0.002%20-0.55995%2C-1.2e-4%20l%20-0.022%2C13.89765%20c%20-0.0952%2C0.67556%20-0.49402%2C1.75232%20-1.99407%2C1.75269%200.0678%2C0.0602%20-3.85316%2C-0.007%20-3.85316%2C-0.007%20l%20-1.06259%2C6.32874%206.89801%2C0.01%20c%201.28367%2C0.003%202.54669%2C0.0271%203.78665%2C0.0368%20l%20-0.0109%2C8.80736%205.29494%2C0.009%200.0128%2C-8.71427%20c%201.45379%2C0.0322%202.86073%2C0.0459%204.23429%2C0.0466%20l%20-0.0152%2C8.67412%205.30061%2C0.007%200.0147%2C-8.79173%20c%208.91219%2C-0.49805%2015.1527%2C-2.73385%2015.93965%2C-11.10113%200.63533%2C-6.73752%20-2.53%2C-9.74895%20-7.5868%2C-10.97123%203.07554%2C-1.56033%205.00104%2C-4.31475%204.55848%2C-8.90928%20z%20m%20-7.44387%2C18.82121%20c%20-0.007%2C6.58182%20-11.27551%2C5.81643%20-14.86789%2C5.81449%20l%200.0187%2C-11.66923%20c%203.59343%2C0.006%2014.85983%2C-1.01023%2014.84919%2C5.85474%20z%20m%20-2.44078%2C-16.46738%20c%20-0.0106%2C5.98811%20-9.40836%2C5.27536%20-12.40064%2C5.27116%20l%200.016%2C-10.58348%20c%202.99229%2C0.004%2012.39322%2C-0.93337%2012.38461%2C5.31232%20z%22%0A%20%20%20%20%20%20%20id%3D%22path3010%22%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffffff%22%20/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E">
</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>
</select>
</div>
</div>
<div id="entriesList">
</div>
</div>
<div id="entriesListBackground"></div>
<button id="hideListButton"></button>
<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="drawControlsContainer">
<a id="drawBackButton" href="./">&lt; Back to the Atlas</a>
<div id="drawControls">
<div>
<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">
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
</label>
<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>
<input id="websiteField" type="text" value="" placeholder="https://example.com">
<label for="subredditField">Subreddit</label>
<input id="subredditField" type="text" value="" placeholder="/r/example">
<div id="infoButtons">
<button id="cancelButton">Cancel</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.
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:#666; padding:20px">
<p><b>Warning</b></p>
<p><b>DO NOT</b> include the character <b>"</b> (quotation marks) in your submission. It will not be approved.</p>
</div><br>
<div style="background-color:#7289DA; padding:20px">
<p><b>Need Help?</b></p>
<b>You can ask for help on our discord server <a href="https://discord.gg/pJkm23b2nA">here</a>!</b><br>
</div>
</div>
</div>
<button class="hidden" id="closeObjectsListButton"></button>
<div id="objectsList">
</div>
<div id="exportOverlay" class="overlay">
<div id="exportWindow">
<div style="background-color:#666; padding:5px">
<p><b>Warning</b></p>
<p><b>DO NOT</b> include the character <b>"</b> (quotation marks) in your submission. It will not be approved.</p>
</div>
<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
<div style="display:flex; flex-direction:column;align-items:center">
<a href="_blank" id="exportDirectPost">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 style="display:flex; flex-direction:column;align-items:center">
<button id="exportCloseButton">Done</button>
</div>
</div>
</div>
<div id="donateOverlay" class="overlay">
<div id="donateWindow">
<h2>Donations - Original Source Code Creator</h2>
<p>Roland Rytz jas worked on the Atlas full-time (and more!) for over two weeks.</p>
<p>If you'd like to support him, you can do so by <a target="_blank" href="https://paypal.me/draemmli">PayPal</a> or Bitcoin.</p>
<p>If you donate more than 10(€/$/CHF/mBTC), He'll send you a nice sticker of the Place canvas (2017)!</p>
<p id="bitcoinNotice">If you donate by Bitcoin and want a sticker, please send him a<br>message with your Bitcoin address <i>before</i> you make the transaction!</a>
<h2>His Bitcoin Address</h2>
<img id="bitcoinQR" alt="QR Code of Bitcoin Address" height="300" width="300">
<br>
<input type="text" onclick="this.select();" readonly value="1DnBGYpH6HZYHvpCq3QqqtH1HxwwVe2QxN">
<br>
<p>Hi there! The current maintainer of the 2022 version of this website, should I accept donations and make stickers of the 2022 version? Please tell me on our <a href="https://discord.gg/pJkm23b2nA" target="_noblank">Discord Server</a> or on my Reddit (<a href="https://reddit.com/user/TCOOfficiall" target="_noblank">u/TCOOfficiall</a>)</p>
<br>
<button id="closeBitcoinButton">Close</button>
<br>
</div>
</div>
<div id="author">
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/placeAtlas/atlas">GitHub</a>, Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>.
</div>
</div>
<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>
<script type="text/javascript" src="./_js/view.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/overlap.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/draw.js?version=1.0.3"></script>
<script type="text/javascript" src="./_js/main.js?version=1.0.3"></script>
<!--
<script type="text/javascript" src="./_js/stats.js?version=1.0.0"></script>
<script type="text/javascript" src="./_js/minified.js?version=1.0.102"></script>
-->
</body>
</html>