Styling
This commit is contained in:
schrom01
parent
7ee78f7f5c
commit
1c22109df7
|
|
@ -1,3 +1,59 @@
|
|||
.active {
|
||||
.activeWatch {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-left: 10px;
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
text-align: center;
|
||||
/*border: 1px solid #0e0017 !important;*/
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
/*background-color: lightgray;*/
|
||||
/*border: none;*/
|
||||
/*color: white;*/
|
||||
padding: 1% 5%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
/*font-size: 16px;*/
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
button, .form-group{
|
||||
margin: 5px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stopButton, .resetButton {
|
||||
width: 98% !important;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.tableHeader {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 10.5rem; /* Footer height */
|
||||
}
|
||||
.footer {
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
65
index.html
65
index.html
|
|
@ -1,21 +1,42 @@
|
|||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<title>Genderwatch-protocol</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="index.html">Genderwatch-protocol </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
|
||||
<div class="navbar-collapse collapse show" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
|
||||
|
||||
<li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li>
|
||||
|
||||
<li class="nav-item"> <a class="nav-link" href="beschreibung.php">Über uns</a> </li>
|
||||
|
||||
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="container">
|
||||
<h1>Genderwatch-protocol</h1>
|
||||
<a href="dataCollector/dataCollector.php">Alle Daten herunterladen (anonymisiert)</a>
|
||||
<h2 style="margin-left: 10px;">Aktuelles Thema</h2>
|
||||
<h2>Aktuelles Thema</h2>
|
||||
<table class="table-bordered">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
|
||||
<div class="form-group">
|
||||
<input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="" onclick="closeTopic()">
|
||||
|
|
@ -70,12 +91,12 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<button class="" style="width: 98%;" onclick="stop()">Hört auf zu Reden, -> Stille</button>
|
||||
<button class="stopButton" onclick="stop()">Hört auf zu Reden, -> Stille</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<button class="" style="width: 98%;" onclick="resetButton()">Reset</button>
|
||||
<button class="resetButton" onclick="resetButton()">Reset</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -91,16 +112,16 @@
|
|||
<table class="table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="min-width: 100px;">
|
||||
<th class="tableHeader">
|
||||
Thema
|
||||
</th>
|
||||
<th style="min-width: 100px;">
|
||||
<th class="tableHeader">
|
||||
M
|
||||
</th>
|
||||
<th style="min-width: 100px;">
|
||||
<th class="tableHeader">
|
||||
W
|
||||
</th>
|
||||
<th style="min-width: 100px;">
|
||||
<th class="tableHeader">
|
||||
D
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -116,6 +137,34 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="text-center">
|
||||
<div class="container footer">
|
||||
<div class="row">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="footer">
|
||||
<div class="col-12">
|
||||
<p><span><b>Impressum</b></span><br>
|
||||
Maurus Pfalzgraf<br>
|
||||
<a href="mailto:info@genderwatchprotocol.com">info@genderwatchprotocol.com</a></p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="footer">
|
||||
<div class="col-12">
|
||||
<p><span><b>Erstellt durch</b></span><br>
|
||||
Silias KLG<br>
|
||||
Toggenburgstrasse 31<br>
|
||||
8245 Feuerthalen<br>
|
||||
<a href="https://www.silias.ch" target="_blank">www.silias.ch</a><br>
|
||||
<a href="mailto:info@silias.ch">info@silias.ch</a></p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/functions.js"></script>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -138,9 +138,9 @@ function refreshWatch(watchIndex) {
|
|||
let timeCell = document.getElementById("time-" + watchIndex)
|
||||
timeCell.textContent = timeToISO(sumForWatch(actualTopic.watches[watchIndex]))
|
||||
if(actualTopic.watches[watchIndex]["actions"].length !== 0 && actualTopic.watches[watchIndex]["actions"].slice(-1)[0]["type"] === "start"){
|
||||
timeCell.classList.add("active")
|
||||
timeCell.classList.add("activeWatch")
|
||||
} else {
|
||||
timeCell.classList.remove("active")
|
||||
timeCell.classList.remove("activeWatch")
|
||||
}
|
||||
let countCell = document.getElementById("count-" + watchIndex)
|
||||
countCell.textContent = countForWatch(actualTopic.watches[watchIndex]) + " Wortmeldungen"
|
||||
|
|
|
|||
Loading…
Reference in New Issue