From 54be8a6fb9c31bfc1f8e5c3a5768e764aa13a96c Mon Sep 17 00:00:00 2001 From: ocueye2 Date: Mon, 19 Aug 2024 05:18:28 +0000 Subject: [PATCH] Initial commit of ezweb folder --- css/all.css | 67 ++++++++++++++++++++++++++++++++++++++ css/index.css | 30 +++++++++++++++++ css/pagea.css | 5 +++ css/pageb.css | 4 +++ proceralweb.py => ezweb.py | 14 +++++--- html/index.html | 28 ++++++++++++++++ html/nav.html | 25 ++++++++++++++ html/pagea.html | 1 + html/pageb.html | 1 + script/all.js | 6 ++++ script/pagea.js | 4 +++ script/pageb.js | 4 +++ 12 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 css/all.css create mode 100644 css/index.css create mode 100644 css/pagea.css create mode 100644 css/pageb.css rename proceralweb.py => ezweb.py (88%) create mode 100644 html/index.html create mode 100644 html/nav.html create mode 100644 html/pagea.html create mode 100644 html/pageb.html create mode 100644 script/all.js create mode 100644 script/pagea.js create mode 100644 script/pageb.js diff --git a/css/all.css b/css/all.css new file mode 100644 index 0000000..1db19b7 --- /dev/null +++ b/css/all.css @@ -0,0 +1,67 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #333; + padding: 10px 20px; +} + +.logo { + color: white; + font-size: 24px; +} + +.nav-links { + list-style: none; + display: flex; +} + +.nav-links li { + margin-left: 20px; +} + +.nav-links a { + color: white; + text-decoration: none; + font-size: 18px; +} + +.burger { + display: none; + cursor: pointer; + flex-direction: column; + justify-content: space-between; + height: 21px; +} + +.burger div { + width: 25px; + height: 3px; + background-color: white; +} + +@media (max-width: 768px) { + .nav-links { + display: none; + flex-direction: column; + width: 100%; + } + + .nav-links.active { + display: flex; + } + + .burger { + display: flex; + } +} diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..1fb494a --- /dev/null +++ b/css/index.css @@ -0,0 +1,30 @@ + +.section { + background-color: #2a5770; + margin-left: 30px; + margin-right: 30px; + padding: 10px; + border-radius: 20px; + text-align: left; + +} +.all { + background-color: #173342; + color:white; + text-align: center; +} + +a { + color: lightblue; +} + +.mini { + background-color: #52a3cf; + margin-left: 30px; + margin-right: 30px; + padding: 10px; + border-radius: 20px; + text-align: left; + + +} \ No newline at end of file diff --git a/css/pagea.css b/css/pagea.css new file mode 100644 index 0000000..8d65688 --- /dev/null +++ b/css/pagea.css @@ -0,0 +1,5 @@ +h1 { + text-align: right; + + +} \ No newline at end of file diff --git a/css/pageb.css b/css/pageb.css new file mode 100644 index 0000000..00c5001 --- /dev/null +++ b/css/pageb.css @@ -0,0 +1,4 @@ +h1 { +text-align: left; + +} \ No newline at end of file diff --git a/proceralweb.py b/ezweb.py similarity index 88% rename from proceralweb.py rename to ezweb.py index 3f261fd..528f78c 100644 --- a/proceralweb.py +++ b/ezweb.py @@ -11,16 +11,22 @@ from http.server import SimpleHTTPRequestHandler, HTTPServer class MyHandler(SimpleHTTPRequestHandler): def do_GET(self): # Check if the request path is /test - paths = f"{self.path}.html" + if self.path == "/": + selfpath = "index" + else: + selfpath = self.path + + paths = f"{selfpath}.html" if paths.replace("/","") in html: # Respond with a 200 status code + self.send_response(200) # html loading try: - h = open(f"{path}/html/{self.path}.html") + h = open(f"{path}/html/{selfpath}.html") ch = h.read() except: ch = "" @@ -35,7 +41,7 @@ class MyHandler(SimpleHTTPRequestHandler): #css loading try: - c = open(f"{path}/css/{self.path}.css") + c = open(f"{path}/css/{selfpath}.css") cc = c.read() except: cc = "" @@ -47,7 +53,7 @@ class MyHandler(SimpleHTTPRequestHandler): #JS LOADING try: - c = open(f"{path}/script/{self.path}.js") + c = open(f"{path}/script/{selfpath}.js") js = c.read() except: js="" diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..ad52fbf --- /dev/null +++ b/html/index.html @@ -0,0 +1,28 @@ +
+
+
+

welcome to easyweb

+

easly merge your nav bar, css, html, and js in one easy place

+
+
+

How to use

+

ezweb requires bacic knolage of html and optionaly css and js to take full advantage

+
+

ezweb uses 3 folders, they should be in the same directory as the python script (ezweb.py)

+

this means if ezweb.py is in /home, there should be /home/css/, /home/html/, /home/script/.

+
+

to create a webpage, create a html file and optionaly add css and js files with the name of the directory it will display
(ex: pagea.html, pagea.js, and pagea.css is at localhost:8080/pagea)

+
+
+

html

+

like most webservers, the name index.html has the root directory of the server (localhost:8080/)

+
+

nav.html is the html file for the nav bar, it will appear on the top of the page of every directory of the server (like the one up top)
use all.css for styling

+
+ +
+
+

for you convinence, the example pages " pagea " and "pageb " are provided

+
+ +
\ No newline at end of file diff --git a/html/nav.html b/html/nav.html new file mode 100644 index 0000000..6ac60b0 --- /dev/null +++ b/html/nav.html @@ -0,0 +1,25 @@ + + + + + + Navigation Bar + + + + + + + diff --git a/html/pagea.html b/html/pagea.html new file mode 100644 index 0000000..a327721 --- /dev/null +++ b/html/pagea.html @@ -0,0 +1 @@ +

this is the pagea.html pagea.css and all.css apply here

\ No newline at end of file diff --git a/html/pageb.html b/html/pageb.html new file mode 100644 index 0000000..1285066 --- /dev/null +++ b/html/pageb.html @@ -0,0 +1 @@ +

this is pageb.html, all.css and pageb.css applys here

\ No newline at end of file diff --git a/script/all.js b/script/all.js new file mode 100644 index 0000000..422a4dc --- /dev/null +++ b/script/all.js @@ -0,0 +1,6 @@ +const burger = document.querySelector('.burger'); +const navLinks = document.querySelector('.nav-links'); + +burger.addEventListener('click', () => { + navLinks.classList.toggle('active'); +}); diff --git a/script/pagea.js b/script/pagea.js new file mode 100644 index 0000000..4e4f2b6 --- /dev/null +++ b/script/pagea.js @@ -0,0 +1,4 @@ +// JavaScript code to show an alert when the webpage is opened +window.onload = function() { + alert("This is the file pagea.js and all.js"); +}; diff --git a/script/pageb.js b/script/pageb.js new file mode 100644 index 0000000..05fdde5 --- /dev/null +++ b/script/pageb.js @@ -0,0 +1,4 @@ +// JavaScript code to show an alert when the webpage is opened +window.onload = function() { + alert("This is the file pageb.js and all.js"); +};