inital commit
This commit is contained in:
40
style/header.php
Normal file
40
style/header.php
Normal file
@ -0,0 +1,40 @@
|
||||
<?php
|
||||
$config = require(__DIR__.'/../config.php');
|
||||
|
||||
$_GET["SFW"] ? $SFW = "checked" : $SFW = NULL;
|
||||
$_GET["Sketchy"] ? $Sketchy = "checked" : $Sketchy = NULL;
|
||||
$_GET["NSFW"] ? $NSFW = "checked" : $NSFW = NULL;
|
||||
$_GET["General"] ? $General = "checked" : $General = NULL;
|
||||
$_GET["Anime"] ? $Anime = "checked" : $Anime = NULL;
|
||||
$_GET["People"] ? $People = "checked" : $People = NULL;
|
||||
|
||||
printf("<head>\n<title>WallHeaven - %s</title>\n", $_GET["q"]);
|
||||
printf("<meta name='description' content='Pictures of %s'>\n", $_GET["q"]);
|
||||
echo <<<GFG
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/style/style.css">
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<a href="/" id="header"><h3>Wall<span id="heaven">Heaven</span></h3></a>
|
||||
<div id="searchbox">
|
||||
<form action="/query.php" method="GET">\n
|
||||
GFG;
|
||||
printf("<input type='text' placeholder='Search...' name='q' value='%s'>\n", $_GET["q"]);
|
||||
printf("<div id='options'>\n");
|
||||
printf(" <input type='checkbox' name='SFW' id='SFW' %s>\n", $SFW);
|
||||
printf(" <label for='SFW'>SFW</label>\n");
|
||||
printf(" <input type='checkbox' name='Sketchy' id='Sketchy' %s>\n", $Sketchy);
|
||||
printf(" <label for='Sketchy'>Sketchy</label>\n");
|
||||
if ($config["frontends"]["wallhaven"]["apikey"]) { /* only display NSFW button with apikey */
|
||||
printf(" <input type='checkbox' name='NSFW' id='NSFW' %s>\n", $NSFW);
|
||||
printf(" <label for='NSFW'>NSFW</label>\n");
|
||||
}
|
||||
printf(" <input type='checkbox' name='General' id='General' %s>\n", $General);
|
||||
printf(" <label for='General'>General</label>\n");
|
||||
printf(" <input type='checkbox' name='Anime' id='Anime' %s>\n", $Anime);
|
||||
printf(" <label for='Anime'>Anime</label>\n");
|
||||
printf(" <input type='checkbox' name='People' id='People' %s>\n", $People);
|
||||
printf(" <label for='People'>People</label>\n");
|
||||
printf("</div>\n");
|
||||
printf("</form>\n<br>\n</div>\n")
|
||||
?>
|
||||
225
style/style.css
Normal file
225
style/style.css
Normal file
@ -0,0 +1,225 @@
|
||||
:root {
|
||||
--bg-color: #161616;
|
||||
|
||||
/* purity colors */
|
||||
--sfw-color-1: #99ff99;
|
||||
--sfw-color-2: #92f592;
|
||||
--sketchy-color-1: #ffff99;
|
||||
--sketchy-color-2: #f0f08f;
|
||||
--nsfw-color-1: #ff9999;
|
||||
--nsfw-color-2: #ff9a99;
|
||||
|
||||
/* role colors */
|
||||
--owner-color-1: #b336ed;
|
||||
--owner-color-2: #b886ed;
|
||||
--developer-color-1: #fa8072;
|
||||
--admin-color-1: #ffd700;
|
||||
--user-color-1: #4169e1;
|
||||
--deleted-color-1: #aaaaaa;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: var(--bg-color);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, #header {
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#searchbox {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#options { display: inline-block; }
|
||||
|
||||
#heaven {
|
||||
-webkit-animation-name: heaven;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes heaven {
|
||||
from {
|
||||
text-shadow: 0 0 10px #ff9, 0 0 20px #ff9, 0 0 30px #fd8, 0 0 40px #fd8;
|
||||
} to {
|
||||
text-shadow: 0 0 10px #ff9, 0 0 20px #ff9, 0 0 30px #fd9, 0 0 40px #fd9, 0 0 50px #fd9, 0 0 60px #fd9;
|
||||
}
|
||||
}
|
||||
|
||||
#wallpapers {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
#wallpapers form { display: inline-block; }
|
||||
|
||||
button[name=wall] {
|
||||
all: unset;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#wallmaster {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#wallpaperinfo {
|
||||
width: 15%;
|
||||
max-height: 100%;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
float: left;
|
||||
overflow-y: auto;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#uploader { text-align: center; }
|
||||
#uploader span[title='Owner/Developer'] {
|
||||
font-weight: bold;
|
||||
color: var(--owner-color-1);
|
||||
text-shadow: 0 0 2px var(--owner-color-1), 0 0 5px var(--owner-color-2);
|
||||
}
|
||||
#uploader span[title=Developer] {
|
||||
font-weight: bold;
|
||||
color: var(--developer-color-1);
|
||||
}
|
||||
#uploader span[title=Administrator] {
|
||||
font-weight: bold;
|
||||
color: var(--admin-color-1);
|
||||
}
|
||||
#uploader span[title=User] { color: var(--user-color-1); }
|
||||
#uploader span[title=deleted] {
|
||||
color: var(--deleted-color-1);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
a#similar {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#tags span {
|
||||
white-space: nowrap;
|
||||
line-height: 1.8;
|
||||
}
|
||||
#tags span a { color: #000; }
|
||||
#tags span[id=sfw], #properties span[id=sfw] {
|
||||
color: #000;
|
||||
background-color: var(--sfw-color-1);
|
||||
border: 3px solid var(--sfw-color-2);
|
||||
}
|
||||
#tags span[id=sketchy], #properties span[id=sketchy] {
|
||||
color: #000;
|
||||
background-color: var(--sketchy-color-1);
|
||||
border: 3px solid var(--sketchy-color-2);
|
||||
}
|
||||
#tags span[id=nsfw], #properties span[id=nsfw] {
|
||||
color: #000;
|
||||
background-color: var(--nsfw-color-1);
|
||||
border: 3px solid var(--nsfw-color-2);
|
||||
}
|
||||
|
||||
#properties p { color: #ccf; }
|
||||
#tags a, summary { user-select: none; }
|
||||
#properties span {
|
||||
color: #fff;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#bwallpaperview {
|
||||
float: left;
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#bwallpaperview img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#footer {
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
/* wallpaper preview borders */
|
||||
#sfw { border: 3px solid var(--sfw-color-1); }
|
||||
#sketchy { border: 3px solid var(--sketchy-color-1); }
|
||||
#nsfw { border: 3px solid var(--nsfw-color-1); }
|
||||
|
||||
/* search category buttons */
|
||||
input[type=checkbox] { display: none; }
|
||||
input[type=checkbox] + label {
|
||||
border: 3px solid var(--bg-color);
|
||||
background-color: var(--bg-color);
|
||||
color: white;
|
||||
user-select: none;
|
||||
}
|
||||
input[type=checkbox] + label:hover {
|
||||
border: 3px solid #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=checkbox]:checked + label { color: #000; }
|
||||
/* sfw */
|
||||
input[id=SFW]:checked + label {
|
||||
background-color: var(--sfw-color-1);
|
||||
border: 3px solid var(--sfw-color-2);
|
||||
}
|
||||
input[id=SFW]:checked + label:hover { border: 3px solid #77ff77; }
|
||||
/* sketchy */
|
||||
input[id=Sketchy]:checked + label {
|
||||
background-color: var(--sketchy-color-1);
|
||||
border: 3px solid var(--sketchy-color-2);
|
||||
}
|
||||
input[id=Sketchy]:checked + label:hover { border: 3px solid #ffff66; }
|
||||
/* nsfw */
|
||||
input[id=NSFW]:checked + label {
|
||||
background-color: var(--nsfw-color-1);
|
||||
border: 3px solid var(--nsfw-color-2);
|
||||
}
|
||||
input[id=NSFW]:checked + label:hover { border: 3px solid #ffaaaa; }
|
||||
/* other tags */
|
||||
input[id=General]:checked + label,
|
||||
input[id=Anime]:checked + label,
|
||||
input[id=People]:checked + label,
|
||||
#properties span[id='category'] {
|
||||
color: #000;
|
||||
background-color: #eeeeee;
|
||||
border: 3px solid #efefef;
|
||||
}
|
||||
input[id=General]:checked + label:hover,
|
||||
input[id=Anime]:checked + label:hover,
|
||||
input[id=People]:checked + label:hover { border: 3px solid #afafaf; }
|
||||
|
||||
/* search box */
|
||||
input[type=text] {
|
||||
padding: 5px;
|
||||
width: 42vw;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid #ccc;
|
||||
-webkit-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
outline: none;
|
||||
}
|
||||
input[type=text]:focus {
|
||||
border: 3px solid #555;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
font-style: italic;
|
||||
}
|
||||
Reference in New Issue
Block a user