diff options
Diffstat (limited to '')
| -rw-r--r-- | style/header.php | 40 | ||||
| -rw-r--r-- | style/style.css | 225 |
2 files changed, 265 insertions, 0 deletions
diff --git a/style/header.php b/style/header.php new file mode 100644 index 0000000..79a4479 --- /dev/null +++ b/style/header.php @@ -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") +?> diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..11f90fe --- /dev/null +++ b/style/style.css @@ -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; +} |