Commit 08bf85ef authored by Michael Ochmann's avatar Michael Ochmann
Browse files

added initial boilerplate code an rudimentary ui

parent a87d9b32
# Beacon
– a simple monitoring system for server and services uptime, written in node.js
a simple monitoring system for server and services uptime
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg8" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<sodipodi:namedview bordercolor="#666666" borderopacity="1.0" id="base" inkscape:bbox-nodes="false" inkscape:bbox-paths="false" inkscape:current-layer="layer1" inkscape:cx="649.27072" inkscape:cy="296.44582" inkscape:document-units="mm" inkscape:guide-bbox="true" inkscape:measure-end="622.897,709.097" inkscape:measure-start="112.762,708.373" inkscape:object-nodes="true" inkscape:object-paths="true" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:snap-bbox="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-intersection-paths="true" inkscape:snap-smooth-nodes="true" inkscape:window-height="790" inkscape:window-maximized="0" inkscape:window-width="1439" inkscape:window-x="-14" inkscape:window-y="0" inkscape:zoom="0.25" pagecolor="#ffffff" showgrid="false" showguides="true">
</sodipodi:namedview>
<path id="path862" inkscape:connector-curvature="0" class="st0" d="M256,20.6l-45.6,48.9l-4.3,39.9l-55.3-10.9L0,68.7v59.6v59.6
l150.8-29.8l51.1-10.1l-11.1,102.9h130.4L310.1,148l51.1,10.1L512,187.9v-59.6V68.7L361.2,98.5l-55.3,10.9l-4.3-39.9L256,20.6z
M184.3,311l-6.5,60.1h156.3l-6.5-60.1H184.3z M171.3,431.2l-6.5,60.1H256h91.2l-6.5-60.1H171.3z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg8" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#rect4625_1_);}
.st1{opacity:0.25;fill:url(#path4627_1_);enable-background:new ;}
.st2{fill:#FFFFFF;}
</style>
<sodipodi:namedview bordercolor="#666666" borderopacity="1.0" id="base" inkscape:bbox-nodes="false" inkscape:bbox-paths="false" inkscape:current-layer="layer1" inkscape:cx="845.27072" inkscape:cy="296.44582" inkscape:document-units="mm" inkscape:guide-bbox="true" inkscape:measure-end="622.897,709.097" inkscape:measure-start="112.762,708.373" inkscape:object-nodes="true" inkscape:object-paths="true" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:snap-bbox="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-intersection-paths="true" inkscape:snap-smooth-nodes="true" inkscape:window-height="790" inkscape:window-maximized="0" inkscape:window-width="1439" inkscape:window-x="0" inkscape:window-y="1" inkscape:zoom="0.25" pagecolor="#ffffff" showgrid="false" showguides="true">
</sodipodi:namedview>
<g id="layer1" inkscape:groupmode="layer" inkscape:label="Ebene 1">
<g id="g1164" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1166" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1168" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1170" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1172" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1174" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1176" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1178" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1180" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1182" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1184" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1186" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1188" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1190" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g1192" transform="matrix(3.6809851,0,0,3.6809851,162.61906,-55.624972)">
</g>
<g id="g4163" transform="matrix(0.23145817,0,0,-0.23145817,-561.42113,136.39481)">
<g id="g4165" transform="scale(0.150307)">
</g>
</g>
<g id="g5349" transform="translate(-115.35833,-110.06667)">
<linearGradient id="rect4625_1_" gradientUnits="userSpaceOnUse" x1="236.6415" y1="649.4178" x2="236.6415" y2="468.7955" gradientTransform="matrix(2.8346 0 0 -2.8346 -299.4366 1950.9358)">
<stop offset="0" style="stop-color:#FF8333"/>
<stop offset="1" style="stop-color:#AF0F0F"/>
</linearGradient>
<path id="rect4625" inkscape:connector-curvature="0" class="st0" d="M243.4,110.1c-70.7,0-128,57.3-128,128c0,0,0,0,0,0v256
c0,70.7,57.3,128,128,128c0,0,0,0,0,0h256c70.7,0,128-57.3,128-128v-256c0-70.7-57.3-128-128-128c0,0,0,0,0,0H243.4z"/>
<linearGradient id="path4627_1_" gradientUnits="userSpaceOnUse" x1="219.9387" y1="584.7213" x2="391.4534" y2="413.2066" gradientTransform="matrix(2.8346 0 0 -2.8346 -299.4366 1950.9358)">
<stop offset="0" style="stop-color:#000000"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path id="path4627" inkscape:connector-curvature="0" class="st1" d="M370.5,247l-25.9,46.6l-110.4-21.8v63.8l130.3,130.3
l-42,32.2l124,124h52.8c70.7,0,128-57.3,128-128V390.7L508.4,271.8L414,290.4L370.5,247z"/>
<path id="path4629" inkscape:connector-curvature="0" class="st2" d="M371.4,246.1L347,272.2l-2.3,21.4l-29.6-5.9l-80.7-16v31.9
v31.9l80.7-16l27.4-5.4l-6,55.1h69.8l-6-55.1l27.4,5.4l80.7,16v-31.9v-31.9l-80.7,16l-29.6,5.9l-2.3-21.4L371.4,246.1z M333,401.5
l-3.5,32.2h83.7l-3.5-32.2H333z M326,465.9l-3.5,32.2h48.8h48.8l-3.5-32.2H326z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg8" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<sodipodi:namedview bordercolor="#666666" borderopacity="1.0" id="base" inkscape:bbox-nodes="false" inkscape:bbox-paths="false" inkscape:current-layer="layer1" inkscape:cx="649.27072" inkscape:cy="296.44582" inkscape:document-units="mm" inkscape:guide-bbox="true" inkscape:measure-end="622.897,709.097" inkscape:measure-start="112.762,708.373" inkscape:object-nodes="true" inkscape:object-paths="true" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:snap-bbox="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-intersection-paths="true" inkscape:snap-smooth-nodes="true" inkscape:window-height="790" inkscape:window-maximized="0" inkscape:window-width="1439" inkscape:window-x="-14" inkscape:window-y="0" inkscape:zoom="0.25" pagecolor="#ffffff" showgrid="false" showguides="true">
</sodipodi:namedview>
<path id="path862" inkscape:connector-curvature="0" d="M256,20.6l-45.6,48.9l-4.3,39.9l-55.3-10.9L0,68.7v59.6v59.6l150.8-29.8
l51.1-10.1l-11.1,102.9h130.4L310.1,148l51.1,10.1L512,187.9v-59.6V68.7L361.2,98.5l-55.3,10.9l-4.3-39.9L256,20.6z M184.3,311
l-6.5,60.1h156.3l-6.5-60.1H184.3z M171.3,431.2l-6.5,60.1H256h91.2l-6.5-60.1H171.3z"/>
</svg>
$primary : #272a30 !default;
$primary-text : #aaa !default;
$secondary : #3a3f43 !default;
$highlight : #ff8333ff !default;
$header-gradient: linear-gradient(#ff8333ff, #af0f0fff) !default;
$fa-font-path : "../fonts";
@import "lib/fontawesome/solid";
@import "lib/fontawesome/fontawesome";
footer {
display: grid;
align-items: center;
padding: 0 15px;
background: black;
color: #555;
font-size: x-small;
}
header {
display: grid;
grid-template-columns: 1fr 50px 1fr;
background: $header-gradient;
color: white;
padding: 5px 10px;
.logo {
img {
height: 40px;
width: auto;
}
}
nav {
display: grid;
align-items: center;
}
h2 {
padding: 0;
margin: 0;
}
}
div.login {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #eee;
color: #222;
border-radius: 20px;
width: 400px;
filter: none;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
transition: all 0.3s ease-in-out;
padding: 20px;
box-sizing: border-box;
text-align: center;
img {
width: 80px;
height: auto;
}
input {
width: 100%;
border: none;
border-bottom: solid 1px #ccc;
background: transparent;
box-sizing: border-box;
outline: 0 !important;
font-size: large;
padding: 8px;
&[type=password] {
padding-right: 50px;
}
}
p {
position: relative;
}
button {
background: transparent;
border: none;
font-size: xx-large;
position: absolute;
top: -5px;
right: 0;
color: #aaa;
outline: 0 !important;
&:active {
color: #555;
}
}
&:hover {
transform: scale(1.01) translate(-50%, -50%);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
}
}
main {
display: grid;
grid-template-columns: 25% auto;
section.content {
padding: 20px;
}
}
a {
text-decoration: none;
color: $primary-text;
}
aside.sidebar {
background: $secondary;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
&.active {
a {
color: white;
background: rgba(255,255,255,0.05);
&:before {
content: " ";
display: block;
height: 100%;
width: 5px;
position: absolute;
left: 0;
top: 0;
background: $highlight;
}
}
}
a {
padding: 15px 15px 15px 20px;
display: block;
position: relative;
.fas {
margin-right: 15px;
font-size: x-large;
vertical-align: middle;
width: 30px;
}
&:hover {
background: rgba(255,255,255,0.1);
}
}
}
}
}
@import "colors";
@import "overrides";
@import "fonts";
@import "header";
@import "main";
@import "sidebar";
@import "footer";
@import "login";
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: 55px auto 25px;
background: $primary;
color: $primary-text;
margin: 0;
padding: 0;
font-family: sans-serif;
}
header, main, footer {
filter: blur(10px);
}
// Animated Icons
// --------------------------
.#{$fa-css-prefix}-spin {
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
border: solid .08em $fa-border-color;
border-radius: .1em;
padding: .2em .25em .15em;
}
.#{$fa-css-prefix}-pull-left { float: left; }
.#{$fa-css-prefix}-pull-right { float: right; }
.#{$fa-css-prefix},
.fas,
.far,
.fal,
.fab {
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
}
// Base Class Definition
// -------------------------
.#{$fa-css-prefix},
.fas,
.far,
.fal,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fa-icon {
@include fa-icon;
}
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
text-align: center;
width: $fa-fw-width;
}
This diff is collapsed.
// Icon Sizes
// -------------------------
// makes the font 33% larger relative to the icon container
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -.0667em;
}
.#{$fa-css-prefix}-xs {
font-size: .75em;
}
.#{$fa-css-prefix}-sm {
font-size: .875em;
}
@for $i from 1 through 10 {
.#{$fa-css-prefix}-#{$i}x {
font-size: $i * 1em;
}
}
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
list-style-type: none;
margin-left: $fa-li-width * 5/4;
padding-left: 0;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
left: -$fa-li-width;
position: absolute;
text-align: center;
width: $fa-li-width;
line-height: inherit;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment