Format HTML and CSS

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

View file

@ -28,7 +28,8 @@ @font-face {
box-sizing: border-box;
}
html, body {
html,
body {
min-height: 100%;
min-width: 100%;
height: 100%;
@ -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;
@ -218,8 +218,7 @@ select option[disabled] {
}
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 {
@ -304,12 +303,15 @@ @keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
52.5% {
opacity: 1;
}
100% {
opacity: 1;
}
@ -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,14 +408,14 @@ #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 {
display: none;
}
div:not(.listHidden)>#closeObjectsListButton {
display: none;
}
@ -534,9 +535,11 @@ .object .objectEdit {
p.edit {
color: #FFFF00;
}
p.add {
color: #00FF00;
}
p.delete {
color: #FF0000;
}
@ -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;
@ -724,6 +725,7 @@ @media (max-width: 750px) {
display: none;
}
}
#coords {
background-color: #555;
border: 1px #000 solid;
@ -1007,6 +1009,7 @@ #entriesListDonate:hover > svg {
height: 28px;
width: 28px;
}
#entriesListDiscord:hover>svg {
text-decoration: none;
background-image: linear-gradient(to bottom, #7289DA, #7289DA);
@ -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;

View file

@ -15,6 +15,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The 2022 /r/place Atlas</title>
@ -33,6 +34,7 @@
<script type="text/javascript" src="./_js/favicon.js" defer></script>
</head>
<body>
<div id="wrapper">
<header class="aboutHeader">
@ -100,4 +102,5 @@ <h2 id="contacth2">Contact?</h2>
</div>
</div>
</body>
</html>

View file

@ -15,6 +15,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The 2022 /r/place Atlas</title>
@ -78,6 +79,7 @@
}
</script>
</head>
<body>
<div id="wrapper">
<header>
@ -129,10 +131,14 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
</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>
<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>
<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">
@ -172,7 +178,9 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
<button title="Zoom Out" id="zoomOutButton"></button>
</div>
<div id="timeControls">
<div id="timeControlsTooltip"><p>Time control slider</p></div>
<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">
@ -265,20 +273,32 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
<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>
<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>
<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>
<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>
<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>
@ -311,11 +331,9 @@ <h2>Donation Links</h2>
<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/stats.js"></script>
<script type="text/javascript" src="./_js/minified.js"></script> -->
<script type="text/javascript" src="./_js/minified.js"></script>
-->
</body>
</html>