user handling
This commit is contained in:
@@ -1,98 +1,326 @@
|
||||
*{
|
||||
font-family: sans-serif;
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #8e8e8e 0%, #1f1f1f 100%);
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-color: #202a55;
|
||||
--secondary-color: #5439ac;
|
||||
--accent-color: #f093fb;
|
||||
--text-color: #333;
|
||||
--light-bg: #c4c4c4;
|
||||
--dark-bg: #343a40;
|
||||
--border-color: #dee2e6;
|
||||
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--border-radius: 8px;
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--secondary-color);
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.main-flex{
|
||||
a:hover {
|
||||
color: var(--accent-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.main-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: white;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 40px);
|
||||
}
|
||||
|
||||
.navbar{
|
||||
flex: 1 10vw;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topbranding, .navbar-inner, .topline{
|
||||
font-weight: bold;
|
||||
border: solid 0.2em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
padding-bottom: 0.25em;
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
|
||||
.navbar-inner{
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.right-flex{
|
||||
flex: 1 60vw;
|
||||
}
|
||||
|
||||
.topline{
|
||||
.navbar {
|
||||
flex: 0 0 250px;
|
||||
background: var(--dark-bg);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.section{
|
||||
|
||||
.topbranding {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
background: var(--primary-color);
|
||||
border-radius: var(--border-radius);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
flex: 1;
|
||||
}
|
||||
.logout{
|
||||
text-align: right;
|
||||
|
||||
.navbar-inner a {
|
||||
color: white;
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.content{
|
||||
padding-left: 1em;
|
||||
.navbar-inner a:hover {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.rooms-table{
|
||||
background-color: lightgray;
|
||||
padding: 0.5em 1.5em;
|
||||
width: min-content;
|
||||
.navbar-inner ul {
|
||||
list-style: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.rooms-table table{
|
||||
width: 50vw;
|
||||
background-color: inherit;
|
||||
text-align: center;
|
||||
border-color: darkgray;
|
||||
border-collapse: collapse;
|
||||
border-left: 10px;
|
||||
.navbar-inner li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.rooms-table tr{
|
||||
padding-left: 1em;
|
||||
|
||||
.navbar-inner li a {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.rooms-table td{
|
||||
padding-bottom: 0.2em;
|
||||
padding-top: 0.2em;
|
||||
|
||||
.right-flex {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 9;
|
||||
}
|
||||
thead{
|
||||
border-bottom: 0.25em darkgray solid;
|
||||
|
||||
|
||||
.topline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
tbody tr{
|
||||
border-bottom: 0.1em darkgray solid;
|
||||
|
||||
.intro-text{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.data-missing{
|
||||
background-color: gray;
|
||||
color: transparent
|
||||
}
|
||||
.data-late{
|
||||
background-color: orange;
|
||||
}
|
||||
.room-table-elem, .searchbar{
|
||||
|
||||
.user {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rooms-table input{
|
||||
width: 90%;
|
||||
.logout a {
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.rooms-table {
|
||||
background: var(--light-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-collapse: collapse;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #f1f3f4;
|
||||
}
|
||||
|
||||
table input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
background: var(--light-bg) !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.searchbar td {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.data-missing {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.data-late {
|
||||
background: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.data-valid {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.current-readings .data-valid,
|
||||
.current-readings .data-late,
|
||||
.current-readings .data-missing{
|
||||
padding: 0.2em 1em;
|
||||
}
|
||||
.current-readings .data-missing {
|
||||
padding: 10px 15px;
|
||||
border-radius: var(--border-radius);
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
form label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
form input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
form button,
|
||||
table button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
form button:hover,
|
||||
table button:hover {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
.fake-button {
|
||||
width: 100%;
|
||||
background: gray;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
margin: 0 auto;
|
||||
border-radius: var(--border-radius);
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.flashes {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.flashes li {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
/* Room Page Styles */
|
||||
.current-readings {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.current-readings h3 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.current-readings > div > div {
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
width: fit-content;
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: var(--shadow);
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.current-readings > div > div > div {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.current-readings > div > div > div:first-child {
|
||||
background: var(--light-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.current-readings > div > div > div:nth-child(2) {
|
||||
font-weight: bolder;
|
||||
font-size: 2rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.current-readings > div > div > div:last-child {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user