atlas/web/index.html

212 lines
11 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:
https://draemm.li/various/place-atlas/license.txt
========================================================================
-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
The /r/place Atlas
</title>
<meta name="description" content="An interactive map of Reddit's /r/place, with information to each artwork of the canvas.">
<meta name="author" content="Roland Rytz">
<meta name="keywords" content="reddit, /r/place, april">
<meta name="application-name" content="The /r/place Atlas">
<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.32" rel="stylesheet" type="text/css" media="all">
</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 /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/RolandR/place-atlas/">See the source on GitHub</a></p>
</noscript>
</div>
</div>
<canvas id="linesCanvas"></canvas>
<div id="innerContainer">
<canvas id="highlightCanvas" width="1000" height="1000"></canvas>
<img id="image" src="./_img/place-indexed.png" width="1000" height="1000" 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="./?mode=draw">Contribute</a>
<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">
<!--
<img alt="Donate" src="./_img/bitcoin.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>
</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://reddit.com/r/placeAtlas/comments/63afic/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>
</div>
<button class="hidden" id="closeObjectsListButton"></button>
<div id="objectsList">
</div>
<div id="exportOverlay" class="overlay">
<div id="exportWindow">
<p>Please copy the text below and submit it as a<br>
new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas/">/r/placeAtlas</a> on Reddit.</p>
<p>I will then check it and add it to the atlas.</p>
<textarea cols="50" rows="5" id="exportString"></textarea>
<button id="exportCloseButton">Done</button>
</div>
</div>
<div id="donateOverlay" class="overlay">
<div id="donateWindow">
<h2>Donations</h2>
<p>I have worked on the Atlas full-time (and more!) for over two weeks.</p>
<p>If you'd like to support me, 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), I'll send you a nice sticker of the Place canvas!</p>
<p id="bitcoinNotice">If you donate by Bitcoin and want a sticker, please send me a<br>message with your Bitcoin address <i>before</i> you make the transaction!</a>
<h2>My 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>
<button id="closeBitcoinButton">Close</button>
</div>
</div>
<div id="author">
Code by <a href="/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.
</div>
</div>
<!--
<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.101"></script>
</body>
</html>