Basic HTML framework
This commit is contained in:
@@ -9,3 +9,6 @@ TODO:
|
||||
2. Upload
|
||||
3. Auth
|
||||
|
||||
|
||||
Credit:
|
||||
- Samuel Thornton: [Material Design Box Shadows]("https://codepen.io/sdthornton/pen/wBZdXq")
|
||||
|
8
index.js
8
index.js
@@ -1,8 +1,14 @@
|
||||
|
||||
|
||||
|
||||
const express = require('express')
|
||||
const bodyParser = require('body-parser')
|
||||
const path = require('path')
|
||||
|
||||
const port = 8080;
|
||||
app = express()
|
||||
|
||||
//const DIR=JSON.parse()
|
||||
app.use(bodyParser.urlencoded({extended:false}))
|
||||
app.use(bodyParser.json())
|
||||
|
||||
@@ -16,7 +22,7 @@ app.post('/files/ls',(req,res)=>{
|
||||
console.log("Request attempted")
|
||||
})
|
||||
|
||||
app.get('/',express.static('static'));
|
||||
app.get( '/*', express.static( path.join(__dirname,'static') ) );
|
||||
|
||||
app.all('*',(req,res)=>{
|
||||
res.status(404).json({'error':404});
|
||||
|
6
settings.json
Normal file
6
settings.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"dirname":"./",
|
||||
"sqlFileName":"test.db",
|
||||
"showHidden":false,
|
||||
"authToUpload":false
|
||||
}
|
70
static/base.css
Normal file
70
static/base.css
Normal file
@@ -0,0 +1,70 @@
|
||||
body{
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background-color:#c5c0c0;
|
||||
margin: 0%;
|
||||
}
|
||||
.container{
|
||||
padding:0.5rem;
|
||||
/*display: flex;*/
|
||||
}
|
||||
.navbar-container{
|
||||
/* Primary color */
|
||||
background-color: #2196f3;
|
||||
height:2.5rem;
|
||||
}
|
||||
|
||||
.content{
|
||||
padding:0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
width:50%;
|
||||
max-width: 70rem;
|
||||
margin:0.5rem auto 0.5rem auto;
|
||||
background-color: aliceblue;
|
||||
}
|
||||
|
||||
.nav-bottom-container{
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.nav-bottom{
|
||||
background-color:aliceblue;
|
||||
|
||||
|
||||
padding:0.5rem;
|
||||
height: 1.5rem;
|
||||
width:100%;
|
||||
|
||||
}
|
||||
.nav-bottom-button-container{
|
||||
width:100%;
|
||||
text-align: right;
|
||||
}
|
||||
.nav-bottom-button{
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right:0.5rem;
|
||||
margin-left: auto;
|
||||
/* Button - Secondary color */
|
||||
background-color:royalblue;
|
||||
border:0;
|
||||
border-radius: 5em;
|
||||
color:white;
|
||||
font-size: 2;
|
||||
}
|
||||
|
||||
.nav-bottom-pad{
|
||||
height:1.5rem;
|
||||
margin-top:0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.box-shadow-1{
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
.box-shadow-2{
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.box-shadow-3{
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
@@ -1,9 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>FM</title>
|
||||
<link rel="stylesheet" href="base.css" />
|
||||
</head>
|
||||
<body>
|
||||
<p>Lorem ipsum dolor</p>
|
||||
<div class="navbar-container box-shadow-1">
|
||||
<div class="navbar"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="content box-shadow-1">
|
||||
<div class="lipsum">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat purus suscipit pulvinar sagittis. Nam in quam at neque congue iaculis vel eu est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tristique massa eget velit cursus, vel vehicula turpis aliquam. Sed mollis, nulla porttitor aliquam molestie, purus eros consequat arcu, quis blandit dui nulla in urna. Sed nec nisl ex. Sed vehicula nibh quis ante malesuada venenatis. Integer tempus tincidunt dolor ac scelerisque. Donec ut posuere felis, a tristique libero. Suspendisse bibendum ipsum sit amet justo elementum faucibus. In hac habitasse platea dictumst. Vestibulum condimentum rhoncus ante nec imperdiet. Phasellus sit amet eros non magna rutrum egestas. Donec vel mi vel urna blandit ullamcorper. Mauris consequat maximus lobortis. Nullam condimentum quam est, at convallis massa lacinia et.
|
||||
|
||||
Mauris mattis justo quis nisi pellentesque viverra. Morbi nec iaculis magna. Quisque quis hendrerit sapien. Sed rhoncus dui laoreet lacus maximus, sit amet iaculis turpis feugiat. Nam ut sapien sollicitudin, semper neque ac, tincidunt purus. Integer at quam tempus, ornare nisl luctus, aliquet nunc. Ut id pellentesque tortor. Curabitur a pretium tellus. Donec non massa nec libero interdum blandit ut ut magna. Sed molestie at urna quis ornare. Phasellus placerat, sapien ac malesuada aliquet, augue mi volutpat mi, eu feugiat nunc risus a sem. Cras elementum egestas lorem, sit amet posuere lacus feugiat id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sem augue, ornare sed tincidunt quis, vehicula at est. Nam varius suscipit nunc vitae facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
|
||||
|
||||
Cras hendrerit tellus nec tristique varius. Mauris rhoncus et diam vulputate pellentesque. Vivamus ultrices, elit sed vehicula commodo, urna felis consequat justo, vel egestas purus orci vel mi. Suspendisse potenti. Phasellus nec orci quis magna fringilla lacinia sit amet in nibh. Cras sed tempor lacus. Suspendisse magna sapien, blandit id augue sed, pellentesque pellentesque quam. Sed lacinia rutrum leo eget fermentum. Aenean nec dolor eleifend, semper lacus ac, scelerisque risus. Suspendisse potenti. Vivamus sagittis leo justo, quis tincidunt augue efficitur vitae. Cras ac justo justo. Curabitur vel ornare mauris, vitae pulvinar augue. Sed scelerisque leo sit amet arcu egestas, a lacinia turpis varius. Cras fermentum, arcu eget mattis cursus, tellus arcu egestas ligula, at sodales nibh velit ac massa.
|
||||
|
||||
Vivamus nibh justo, consequat sit amet eros a, feugiat feugiat erat. Cras faucibus mattis lacus ac iaculis. Curabitur sed pellentesque lorem. Aliquam a risus dignissim mauris congue viverra. Nulla velit tortor, congue eu interdum tincidunt, ultrices id leo. Morbi blandit vel nisl in luctus. Sed sagittis id ligula id consectetur. Etiam metus massa, vehicula eget lorem rhoncus, luctus ultricies magna. Fusce sollicitudin tellus vel erat molestie, at auctor quam commodo. Vestibulum ac neque a massa malesuada elementum. Nunc quis tincidunt orci, efficitur condimentum justo. Phasellus vel lacus eu enim vulputate lobortis. Suspendisse eget aliquam risus. Nulla ante felis, feugiat placerat diam et, aliquet pharetra massa.
|
||||
|
||||
Mauris tellus nisi, accumsan eu pellentesque et, lobortis in mi. Vivamus velit velit, ultrices varius posuere nec, fringilla sed elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer id congue orci. Aenean vulputate eros eu risus ornare laoreet. Sed sagittis, magna sed posuere maximus, tortor purus gravida elit, et eleifend dolor ex nec magna. Aenean at ultricies felis, aliquam finibus erat. Pellentesque at leo fringilla, vestibulum turpis et, scelerisque magna. Praesent ut risus a lacus pharetra fermentum quis tincidunt neque.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bottom-pad"></div>
|
||||
<div class="nav-bottom-container">
|
||||
<div class="nav-bottom-button-container">
|
||||
<button class="nav-bottom-button box-shadow-3">+</button>
|
||||
</div>
|
||||
<div class="nav-bottom box-shadow-3">
|
||||
NAV-BOTTOM
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user