From e2033874dd659e8ee1efa05753a873125d52b9d9 Mon Sep 17 00:00:00 2001 From: vex Date: Fri, 15 Nov 2024 10:07:21 +0100 Subject: [PATCH] added example homepage --- public/example/index.html | 24 ++++++++++ public/index.html | 3 +- scripts/example.js | 11 +++++ scripts/routes/other/route-index.js | 6 ++- static/Styles/example.css | 68 +++++++++++++++++++++++++++++ 5 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 public/example/index.html create mode 100644 scripts/example.js create mode 100644 static/Styles/example.css diff --git a/public/example/index.html b/public/example/index.html new file mode 100644 index 0000000..76a2d64 --- /dev/null +++ b/public/example/index.html @@ -0,0 +1,24 @@ + + + + + Homepage + + + + + +
+ +

Collapsed Sidebar

+

Content...

+
+ + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 876cab2..5682097 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,7 @@ -

Hello there...

+

Hello there...

+Test \ No newline at end of file diff --git a/scripts/example.js b/scripts/example.js new file mode 100644 index 0000000..ca41a87 --- /dev/null +++ b/scripts/example.js @@ -0,0 +1,11 @@ +/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */ +function openNav() { + document.getElementById("mySidebar").style.width = "250px"; + document.getElementById("main").style.marginLeft = "250px"; +} + +/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */ +function closeNav() { + document.getElementById("mySidebar").style.width = "0"; + document.getElementById("main").style.marginLeft = "0"; +} \ No newline at end of file diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js index a89972e..aef688a 100644 --- a/scripts/routes/other/route-index.js +++ b/scripts/routes/other/route-index.js @@ -3,6 +3,10 @@ const router = require('express').Router(); router.get('/', (req, res) => { res.sendFile(path.join(__dirname, '../../../public/index.html')); -}); +}) + +router.get('/example', (req, res) => { + res.sendFile(path.join(__dirname, '../../../public/example/index.html')); +}) module.exports = router; \ No newline at end of file diff --git a/static/Styles/example.css b/static/Styles/example.css new file mode 100644 index 0000000..b4c5134 --- /dev/null +++ b/static/Styles/example.css @@ -0,0 +1,68 @@ +/* The sidebar menu */ +.sidebar { + height: 100%; /* 100% Full-height */ + width: 0; /* 0 width - change this with JavaScript */ + position: fixed; /* Stay in place */ + z-index: 1; /* Stay on top */ + top: 0; + left: 0; + background-color: #111; /* Black*/ + overflow-x: hidden; /* Disable horizontal scroll */ + padding-top: 60px; /* Place content 60px from the top */ + transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ +} + +/* The sidebar links */ +.sidebar a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 25px; + color: #818181; + display: block; + transition: 0.3s; +} + +/* When you mouse over the navigation links, change their color */ +.sidebar a:hover { + color: #f1f1f1; +} + +/* Position and style the close button (top right corner) */ +.sidebar .closebtn { + position: absolute; + top: 0; + right: 25px; + font-size: 36px; + margin-left: 50px; +} + +/* The button used to open the sidebar */ +.openbtn { + font-size: 20px; + cursor: pointer; + background-color: #111; + color: white; + padding: 10px 15px; + border: none; +} + +.openbtn:hover { + background-color: #444; +} + +/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ +#main { + transition: margin-left .5s; /* If you want a transition effect */ + padding: 20px; +} + +/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ +@media screen and (max-height: 450px) { + .sidebar { + padding-top: 15px; + } + + .sidebar a { + font-size: 18px; + } +} \ No newline at end of file