Studium
/
Internet-Technologien
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

+ Dark Theme Switcher 

Signed-off-by: Johannes Theiner <j.theiner@live.de>
This commit is contained in:
Johannes Theiner 2019-04-04 20:44:48 +02:00
parent 9c92e7b3d5
commit 863658a43b
6 changed files with 220 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/main/webapp/preview/book.html
View File

@ -3,28 +3,14 @@
<head>
<title>Amazon light</title>
<script>
function getStylesheet() {
var dark = true;
if (dark) {
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
} else {
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
}
}
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
getStylesheet();
</script>
<noscript>
<link href="css/m-light.css" rel="stylesheet">
</noscript>
<link href="css/custom.css" rel="stylesheet">
<link href="css/slick-theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -35,7 +21,7 @@
<nav id="navigation">
<div class="m-container">
<div class="m-row">
<a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Amazon light</a>
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
<a id="m-navbar-show" href="#navigation" title="Show navigation"
class="m-col-t-3 m-hide-m m-text-right"></a>
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
@ -55,6 +41,22 @@
</ol>
</li>
</ol>
<ol class="m-col-t-6 m-col-m-none" start="6">
<li>
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
<ol>
<li>Dark Theme
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
@ -149,6 +151,8 @@
</div>
</div>
</nav>
</footer>
@ -156,10 +160,25 @@
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
function changeTheme() {
if(document.getElementById('myonoffswitch').checked) {
swapStyleSheet("dark", "#22272e");
}else {
swapStyleSheet("light", "#cb4b16");
}
}
function swapStyleSheet(sheet, color) {
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
document.getElementById("pagecolor").setAttribute("content", color);
}
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToShow: 6,
slidesToScroll: 3
})
});

83
src/main/webapp/preview/catalog.html
View File

@ -3,23 +3,10 @@
<head>
<title>Amazon light</title>
<script>
function getStylesheet() {
var dark = true;
if (dark) {
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
} else {
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
}
}
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
getStylesheet();
</script>
<noscript>
<link href="css/m-light.css" rel="stylesheet">
</noscript>
<link href="css/custom.css" rel="stylesheet">
<link href="css/slick-theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
@ -32,15 +19,48 @@
<header>
<nav id="navigation">
<div class="">
<div class="m-container">
<div class="m-row">
<a href="#" id="m-navbar-brand" class="m-col-t-2 m-col-m-none m-left-m">Amazon light</a>
<div class="m-button m-flat m-col-t-1 m-push-l-8">
<a href="#"><span class="fas fa-user"> Anmelden/Registrieren</span></a>
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
<a id="m-navbar-show" href="#navigation" title="Show navigation"
class="m-col-t-3 m-hide-m m-text-right"></a>
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
<div id="m-navbar-collapse" class="m-col-t-12 m-show-m m-col-m-none m-right-m">
<div class="m-row">
<ol class="m-col-t-6 m-col-m-none">
<li><a href="#">Katalog</a></li>
<li><a href="#">(1) Warenkorb</a></li>
</ol>
<ol class="m-col-t-6 m-col-m-none" start="4">
<li>
<a href="#">Mein Account</a>
<ol>
<li><a href="#">Meine Bestellungen</a></li>
<li><a href="#">Adressen & Konten</a></li>
<li><a href="#">Abmelden</a></li>
</ol>
</li>
</ol>
<ol class="m-col-t-6 m-col-m-none" start="6">
<li>
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
<ol>
<li>Dark Theme
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</nav>
</header>
@ -227,6 +247,8 @@
</div>
</div>
</nav>
</footer>
@ -234,12 +256,27 @@
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
function changeTheme() {
if(document.getElementById('myonoffswitch').checked) {
swapStyleSheet("dark", "#22272e");
}else {
swapStyleSheet("light", "#cb4b16");
}
}
function swapStyleSheet(sheet, color) {
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
document.getElementById("pagecolor").setAttribute("content", color);
}
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
})
})
});
</script>

57
src/main/webapp/preview/confirmation.html
View File

@ -3,28 +3,14 @@
<head>
<title>Amazon light</title>
<script>
function getStylesheet() {
var dark = true;
if (dark) {
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
} else {
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
}
}
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
getStylesheet();
</script>
<noscript>
<link href="css/m-light.css" rel="stylesheet">
</noscript>
<link href="css/custom.css" rel="stylesheet">
<link href="css/slick-theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -35,7 +21,7 @@
<nav id="navigation">
<div class="m-container">
<div class="m-row">
<a href="#" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">Amazon light</a>
<a href="" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m"></a>
<a id="m-navbar-show" href="#navigation" title="Show navigation"
class="m-col-t-3 m-hide-m m-text-right"></a>
<a id="m-navbar-hide" href="#" title="Hide navigation" class="m-col-t-3 m-hide-m m-text-right"></a>
@ -55,6 +41,22 @@
</ol>
</li>
</ol>
<ol class="m-col-t-6 m-col-m-none" start="6">
<li>
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
<ol>
<li>Dark Theme
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
@ -164,6 +166,8 @@
</div>
</div>
</nav>
</footer>
@ -171,6 +175,21 @@
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
function changeTheme() {
if(document.getElementById('myonoffswitch').checked) {
swapStyleSheet("dark", "#22272e");
}else {
swapStyleSheet("light", "#cb4b16");
}
}
function swapStyleSheet(sheet, color) {
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
document.getElementById("pagecolor").setAttribute("content", color);
}
$(document).ready(function () {
$('.slider').slick({
infinite: true,

46
src/main/webapp/preview/css/custom.css
View File

@ -0,0 +1,46 @@
.onoffswitch {
position: relative; width: 88px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 50px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 50px; padding: 0; line-height: 50px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 38px; margin: 6px;
background: #A1A1A1;
position: absolute; top: 0; bottom: 0;
right: 34px;
border: 2px solid #999999; border-radius: 50px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #27A1CA;
}

4
src/main/webapp/preview/index.html
View File

@ -3,5 +3,5 @@
<a href="login.html">Login</a><br>
<a href="register.html">Registrierung</a><br>
<a href="detailpage.html">Bücherliste</a><br>
<a href="book.html">Buchdetails</a>
<a href="confirmation.html">Bestätigung</a>
<a href="book.html">Buchdetails</a><br>
<a href="confirmation.html">Bestätigung</a><br>

53
src/main/webapp/preview/start.html
View File

@ -3,28 +3,14 @@
<head>
<title>Amazon light</title>
<script>
function getStylesheet() {
var dark = true;
if (dark) {
document.write("<link rel='stylesheet' href='css/m-dark.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#22272e\" />");
} else {
document.write("<link rel='stylesheet' href='css/m-light.css' type='text/css'>");
document.write("<meta name=\"theme-color\" content=\"#cb4b16\" />");
}
}
<link rel="stylesheet" href="css/m-light.css" id="pagestyle"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700,700i%7CSource+Code+Pro:400,400i,600" />
<meta name="theme-color" content="#cb4b16" id="pagecolor"/>
getStylesheet();
</script>
<noscript>
<link href="css/m-light.css" rel="stylesheet">
</noscript>
<link href="css/custom.css" rel="stylesheet">
<link href="css/slick-theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -55,6 +41,22 @@
</ol>
</li>
</ol>
<ol class="m-col-t-6 m-col-m-none" start="6">
<li>
<a href="#"><i class="fas fa-ellipsis-v"></i></a>
<ol>
<li>Dark Theme
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="changeTheme()">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
@ -212,6 +214,21 @@
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
function changeTheme() {
if(document.getElementById('myonoffswitch').checked) {
swapStyleSheet("dark", "#22272e");
}else {
swapStyleSheet("light", "#cb4b16");
}
}
function swapStyleSheet(sheet, color) {
document.getElementById("pagestyle").setAttribute("href", "css/m-" + sheet + ".css");
document.getElementById("pagecolor").setAttribute("content", color);
}
$(document).ready(function () {
$('.slider').slick({
infinite: true,