HTML redesign
- changed to the webapp approach - rebuild it from scratchpull/18/head^2
Trivernis
6 years ago
parent
27681d42aa
commit
1a7cda36f2
@ -1,4 +1,20 @@
|
||||
$main-color: #9289f5
|
||||
$highlight-color: #FFF
|
||||
$link-color: #FAA
|
||||
$bar-color: #2310f7
|
||||
$cPrimary: #9289f5
|
||||
$cPrimaryVariant: #4c10a5
|
||||
$cSecondary: #c889f5
|
||||
$cSecondaryVariant: #740bce
|
||||
$cBackground: #fff
|
||||
$cBackgroundVariant: #000
|
||||
$cSurface: #fff
|
||||
$cSurfaceVariant: #000
|
||||
$cError: #f59289
|
||||
$cErrorVariant: #b20a00
|
||||
$cOnPrimary: #fff
|
||||
$cOnSecondary: #000
|
||||
$cOnSurface: #000
|
||||
$cOnSurfaceShadow: lighten($cOnSurface, 30%)
|
||||
$cOnSurfaceVariant: #fff
|
||||
$cOnBackground: #000
|
||||
$cOnBackgroundShadow: lighten($cOnBackground, 30%)
|
||||
$cOnBackgroundVariant: #fff
|
||||
$cOnError: #000
|
||||
$cOnErrorVariant: #fff
|
||||
@ -0,0 +1,144 @@
|
||||
@import layout
|
||||
@import colors
|
||||
|
||||
.app
|
||||
background: $cBackground
|
||||
color: $cOnBackground
|
||||
user-select: none
|
||||
::-webkit-scrollbar
|
||||
width: 12px
|
||||
height: 12px
|
||||
::-webkit-scrollbar-thumb
|
||||
background: $cSecondary
|
||||
::-webkit-scrollbar-track
|
||||
background: lighten($cPrimary, 10%)
|
||||
|
||||
.mainview
|
||||
transition-duration: 1s
|
||||
box-shadow: 0 5px 5px $cOnSurfaceShadow
|
||||
background: $cBackground
|
||||
|
||||
.mainview[state=retracted]
|
||||
width: 80%
|
||||
|
||||
.accentBar
|
||||
@extend .bar
|
||||
background: $cSecondary
|
||||
height: 10px
|
||||
|
||||
.navigationBar
|
||||
@extend .bar
|
||||
background: $cPrimary
|
||||
color: $cOnPrimary
|
||||
min-height: 35px
|
||||
box-shadow: 0 5px 5px $cOnSurfaceShadow
|
||||
position: relative
|
||||
z-index: 999
|
||||
text-align: center
|
||||
.menu
|
||||
height: 2em
|
||||
width: 2em
|
||||
padding: calc(0.5em + 5px) $sPadding 0.5em
|
||||
background: url("/icons/menu.svg") no-repeat center, $cPrimary
|
||||
transition-duration: 0.3s
|
||||
cursor: pointer
|
||||
.menu:hover
|
||||
background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%)
|
||||
.menu:active
|
||||
background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%)
|
||||
.button
|
||||
background: $cPrimary
|
||||
padding: 1em $sPadding 0
|
||||
height: 2em
|
||||
float: left
|
||||
text-align: center
|
||||
transition-duration: 0.3s
|
||||
cursor: pointer
|
||||
border-bottom: 5px solid $cPrimary
|
||||
span
|
||||
vertical-align: middle
|
||||
display: inline-block
|
||||
.button:hover
|
||||
background: darken($cPrimary, 4%)
|
||||
border-bottom: 5px solid darken($cPrimary, 4%)
|
||||
.button:active
|
||||
background: lighten($cPrimary, 4%)
|
||||
border-bottom: 5px solid lighten($cPrimary, 4%)
|
||||
.current
|
||||
border-bottom: 5px solid $cSurface !important
|
||||
.title
|
||||
padding: 0.5em $sPadding 0.5em
|
||||
font-size: 18pt
|
||||
font-weight: bold
|
||||
text-align: center
|
||||
width: 100%
|
||||
|
||||
.actionList
|
||||
background: $cPrimary
|
||||
color: $cOnPrimary
|
||||
width: 20%
|
||||
ul
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
li
|
||||
padding: $sPadding
|
||||
width: 100%
|
||||
cursor: pointer
|
||||
transition-duration: 0.3s
|
||||
li:hover
|
||||
background: darken($cPrimary, 4%)
|
||||
li:active
|
||||
background: lighten($cPrimary, 4%)
|
||||
|
||||
.panelContainer
|
||||
background: $cSurface
|
||||
color: $cOnSurface
|
||||
.panel
|
||||
transition-duration: 0.3s
|
||||
background: $cPrimary
|
||||
color: $cOnPrimary
|
||||
display: inline-block
|
||||
position: relative
|
||||
min-height: 225px
|
||||
min-width: 225px
|
||||
padding: $sPadding
|
||||
max-width: 100vw
|
||||
max-height: 100vw
|
||||
margin: 25px
|
||||
border-radius: $sPadding
|
||||
box-shadow: 0 5px 5px $cOnSurfaceShadow
|
||||
cursor: pointer
|
||||
text-align: justify
|
||||
.panel:hover
|
||||
background: darken($cPrimary, 4%)
|
||||
.panel:active
|
||||
background: lighten($cPrimary, 4%)
|
||||
box-shadow: 0 7px 5px $cOnSurfaceShadow
|
||||
.panel
|
||||
.title
|
||||
position: absolute
|
||||
padding: $sPadding
|
||||
text-align: center
|
||||
width: calc(100% - 25px)
|
||||
top: 0
|
||||
left: 0
|
||||
font-size: 16pt
|
||||
font-weight: bold
|
||||
.icon
|
||||
position: absolute
|
||||
padding: $sPadding
|
||||
left: 0
|
||||
top: calc(1em + 12.5px)
|
||||
height: calc(50% - 50px)
|
||||
width: calc(100% - 25px)
|
||||
img
|
||||
height: 100%
|
||||
width: auto
|
||||
margin: 0 calc(50% - 25px)
|
||||
.description
|
||||
position: absolute
|
||||
padding: $sPadding
|
||||
top: 50%
|
||||
height: calc(50% - 37.5px)
|
||||
left: 0
|
||||
overflow: auto
|
||||
@ -0,0 +1,27 @@
|
||||
$sPadding: 12.5px
|
||||
|
||||
.app
|
||||
width: 100%
|
||||
min-height: 100%
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
display: flex
|
||||
|
||||
.mainview
|
||||
width: 100%
|
||||
min-height: 100%
|
||||
position: absolute
|
||||
right: 0
|
||||
|
||||
.content
|
||||
flex: 100%
|
||||
padding: 25px
|
||||
|
||||
.row
|
||||
display: flex
|
||||
|
||||
.bar
|
||||
display: flex
|
||||
width: 100%
|
||||
min-height: 10px
|
||||
@ -0,0 +1,21 @@
|
||||
<div style="width: 100%; margin: auto">
|
||||
<img src="RCN-Logo.png" style="margin: 0 calc(50% - 25px); max-width: 100px; height: auto"/>
|
||||
</div>
|
||||
<p>
|
||||
The Raspberry pi Communication-Network is a network of Raspberry-Pi's.
|
||||
It's currently still in development. <br> The purpose of this server is to
|
||||
display the status of all raspberry-pi's in the network and the data
|
||||
of several sensors that are connected to these raspberry pi's. The data
|
||||
is stored in a database running on the main backend-server. The
|
||||
frontend-server is running either on a differend device or also on the
|
||||
backend-server-device. If this is the case, then the data is directly
|
||||
fetched from several json files instead of using webservices. The json-
|
||||
files are generated by a script running in the background that get's
|
||||
data from the database and stores it in these json-files every few
|
||||
seconds (depending on the type of data).
|
||||
</p>
|
||||
<div class="spacer">
|
||||
</div>
|
||||
<p class="justify">
|
||||
|
||||
</p>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="panelContainer">
|
||||
<div class="panel">
|
||||
<div class="title">
|
||||
<span>Hey, I am a title</span>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="RCN-Logo.png">
|
||||
</div>
|
||||
<div class="description">
|
||||
<span>This very long app description goes from bottom to top.
|
||||
Let us force this description into ULTIMATE-OVERFLOW-MODE!
|
||||
That requires a bit more text so I will just write it here. Looks like it doesn't work</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
</div>
|
||||
<div class="panel">
|
||||
</div>
|
||||
<div class="panel">
|
||||
</div>
|
||||
</div>
|
||||
@ -1,43 +1,37 @@
|
||||
<html>
|
||||
<head>
|
||||
<title> Landing 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1> RCN Landing </h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="RCN-Logo.png" style="width: auto; height: 200px"/>
|
||||
<h1 class="title">
|
||||
Welcome to the Raspberry Communication Network.
|
||||
</h1>
|
||||
<p class="justify">
|
||||
The Raspberry pi Communication-Network is a network of Raspberry-Pi's.
|
||||
It's currently still in development. <br> The purpose of this server is to
|
||||
display the status of all raspberry-pi's in the network and the data
|
||||
of several sensors that are connected to these raspberry pi's. The data
|
||||
is stored in a database running on the main backend-server. The
|
||||
frontend-server is running either on a differend device or also on the
|
||||
backend-server-device. If this is the case, then the data is directly
|
||||
fetched from several json files instead of using webservices. The json-
|
||||
files are generated by a script running in the background that get's
|
||||
data from the database and stores it in these json-files every few
|
||||
seconds (depending on the type of data).
|
||||
</p>
|
||||
<div class="spacer">
|
||||
</div>
|
||||
<p class="justify">
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>
|
||||
This webpage and server can also be found on github:
|
||||
<a href="https://github.com/trivernis/rcn-frontserver">
|
||||
RCN-Frontserver
|
||||
</a>
|
||||
| <i> GNU GPL v3.0 </i>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<title> Landing 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="accentBar"></div>
|
||||
<div class="app">
|
||||
<div class="actionList">
|
||||
<ul>
|
||||
<li onclick="navigate('index.htm', 'Home')">
|
||||
Home
|
||||
</li>
|
||||
<li onclick="navigate('data.htm', 'Data')">
|
||||
Data
|
||||
</li>
|
||||
<li onclick="navigate('about.htm', 'About')">
|
||||
About
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mainview" state="retracted">
|
||||
<div class="navigationBar row">
|
||||
<div class="menu" onclick="toggleActionMenu()">
|
||||
</div>
|
||||
<div class="title">
|
||||
<span> Title </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<script type="text/javascript">
|
||||
navigate('index.htm', 'Home');
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"/></svg>
|
||||
|
After Width: | Height: | Size: 196 B |
Loading…
Reference in New Issue