(dating) Implementing @samstorment's fantastic design polish
This commit is contained in:
Viktor Lofgren
parent
9338f35cd8
commit
10cad3abb2
@ -47,7 +47,7 @@ public class DatingService extends Service {
|
||||
this.screenshotService = screenshotService;
|
||||
|
||||
Spark.get("/public/reset", this::getReset);
|
||||
Spark.get("/public/", this::serveIndex);
|
||||
Spark.get("/public/", this::getInitSession);
|
||||
Spark.get("/public/view", this::getCurrent);
|
||||
Spark.get("/public/next", this::getNext);
|
||||
Spark.get("/public/similar/:id", this::getSimilar);
|
||||
@ -55,18 +55,6 @@ public class DatingService extends Service {
|
||||
Spark.get("/public/init", this::getInitSession);
|
||||
}
|
||||
|
||||
@SneakyThrows
|
||||
private Object serveIndex(Request request, Response response) {
|
||||
try {
|
||||
ClassPathResource resource = new ClassPathResource("static/dating/index.html");
|
||||
resource.getInputStream().transferTo(response.raw().getOutputStream());
|
||||
}
|
||||
catch (IllegalArgumentException| FileNotFoundException ex) {
|
||||
return false;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
private Object getInitSession(Request request, Response response) {
|
||||
var sessionObjectOpt = getSession(request);
|
||||
if (sessionObjectOpt.isEmpty()) {
|
||||
|
||||
@ -1,150 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Website Explorer - {{url}}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
|
||||
<style type="text/css">
|
||||
<meta charset="UTF-8">
|
||||
<title>Website Explorer - {{url}}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
|
||||
<style type="text/css">
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 60ch;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
:root {
|
||||
--btn-size: 60px;
|
||||
/* give slight roundess to some things so box shadow corners are a bit more subtle */
|
||||
--roundness: 5px;
|
||||
--spacing: 1rem;
|
||||
--glow: 0px 0px 0.5ch black, 0px 0px 1ch red, 0px 0px 1.5ch orange, 0px 0px 2ch yellow, 0px 0px 2.5ch green, 0px 0px 3ch cyan, 0px 0px 3.5ch blue, 0px 0px 4ch indigo, 0px 0px 4.5ch violet;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 16pt;
|
||||
}
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
margin: 1em 0;
|
||||
overflow-wrap: break-word;
|
||||
/* or could remove overflow-wrap above and set overflow auto for scrollable text */
|
||||
/* overflow: auto; */
|
||||
}
|
||||
|
||||
#url {
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
max-width: 80vw;
|
||||
}
|
||||
h1 > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#main-link {
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
}
|
||||
h1 > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#back-button {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
}
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto min-content;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
gap: var(--spacing);
|
||||
padding: 0 var(--spacing);
|
||||
}
|
||||
|
||||
#next-button {
|
||||
grid-column: 3 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
}
|
||||
#main-link {
|
||||
display: block;
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
#like-button {
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 3 / span 1;
|
||||
}
|
||||
#main-link:focus-within #screenshot {
|
||||
box-shadow: #ccca 0px 0px 50px;
|
||||
}
|
||||
|
||||
#reset-button {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 3 / span 1;
|
||||
}
|
||||
#back-button {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
padding: 4ch;
|
||||
}
|
||||
[data-back="false"] #back-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.button:hover, .button:focus {
|
||||
text-shadow: 0px 0px 0.5ch black, 0px 0px 1ch red, 0px 0px 1.5ch orange, 0px 0px 2ch yellow, 0px 0px 2.5ch green, 0px 0px 3ch cyan, 0px 0px 3.5ch blue, 0px 0px 4ch indigo, 0px 0px 4.5ch violet;
|
||||
outline: none;
|
||||
}
|
||||
#next-button {
|
||||
grid-column: 3 / span 1;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
#screenshot {
|
||||
border: 5px solid #ccc;
|
||||
box-shadow: 0px 0px 15px #f0f;
|
||||
}
|
||||
#screenshot {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
border: 5px solid #ccc;
|
||||
box-shadow: 0px 0px 15px #f0f;
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--roundness);
|
||||
background-color: #00a6ed;
|
||||
width: var(--btn-size);
|
||||
height: var(--btn-size);
|
||||
}
|
||||
|
||||
#main-link:focus img {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
.button:hover, .button:focus {
|
||||
box-shadow: none;
|
||||
text-shadow: var(--glow);
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#secondary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--spacing);
|
||||
gap: var(--spacing);
|
||||
}
|
||||
|
||||
#main-link:focus img {
|
||||
filter: brightness(100%);
|
||||
box-shadow: #ccca 0px 0px 50px;
|
||||
}
|
||||
/* changed to max-width insetad of max-device-width, overflows on narrow desktop window otherwise */
|
||||
@media only screen and (max-width: 768px) {
|
||||
main {
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.desktop-navigation {
|
||||
display: none;
|
||||
}
|
||||
main .button {
|
||||
border-radius: var(--roundness);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.the-grid > * {
|
||||
place-self: center;
|
||||
align-self: center;
|
||||
justify-self: center stretch;
|
||||
text-align: center;
|
||||
}
|
||||
#main-link {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
.the-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2vw auto 2vw;
|
||||
grid-template-rows: 80px auto 80px;
|
||||
}
|
||||
#back-button {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 2 / -1;
|
||||
}
|
||||
|
||||
#help {
|
||||
margin-top: 10ch;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
#next-button {
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 2 / -1;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 1024px) {
|
||||
body {
|
||||
margin-top: 10ch;
|
||||
max-width: 90%;
|
||||
}
|
||||
[data-back='false'] #back-button {
|
||||
display: none;
|
||||
grid-row: 1 / -1;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
|
||||
#screenshot {
|
||||
margin-left: -5vw;
|
||||
margin-right: -5vw;
|
||||
width: 90vw;
|
||||
height: unset;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
[data-back='false'] #next-button {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
#back-button, #next-button {
|
||||
padding: 4ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
.button:hover, .button:focus {
|
||||
box-shadow: var(--glow);
|
||||
background-color: #00a6ed;
|
||||
text-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="the-grid">
|
||||
<h1 id="url">{{url}}</h1>
|
||||
<body data-back="true">
|
||||
<h1 id="url">
|
||||
<a rel="nofollow" href="{{url}}">{{url}}</a>
|
||||
</h1>
|
||||
|
||||
<a rel="nofollow" id="main-link" href="{{url}}">
|
||||
<img width="512" height="384" id="screenshot" src="/screenshot/{{domainId}}" alt="Screenshot of {{url}}">
|
||||
</a>
|
||||
<main>
|
||||
<a rel="nofollow" id="main-link" href="{{url}}">
|
||||
<img id="screenshot" src="https://explore.marginalia.nu/screenshot/{{domainId}}"
|
||||
alt="Screenshot of {{url}}">
|
||||
</a>
|
||||
|
||||
{{#if back}}<a title="Previous Website" class="button" id="back-button" href="/rewind">⬅️</a>{{/if}}
|
||||
<a title="Next website" class="button" id="next-button" href="/next">➡️</a>
|
||||
<a title="This is not good! Reset selection." class="button" id="reset-button" href="/reset">🔀</a>
|
||||
<a title="I like this! More like this!" class="button" id="like-button" href="/similar/{{domainId}}">🤩</a>
|
||||
</div>
|
||||
<a title="Previous Website" class="button" id="back-button" href="/rewind">⬅️</a>
|
||||
<a title="Next website" class="button" id="next-button" href="/next">➡️</a>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
<div id="secondary">
|
||||
<a title="This is not good! Reset selection." class="button" id="reset-button" href="/reset">🔀</a>
|
||||
<a title="I like this! More like this!" class="button" id="like-button" href="/similar/{{domainId}}">🤩</a>
|
||||
</div>
|
||||
</body>
|
||||
Loading…
Reference in New Issue
Block a user