Initial commit of ezweb folder

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;
+    }
+}

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;
+
+
+}

css/pagea.css

@@ -0,0 +1,5 @@
+h1 {
+    text-align: right;
+
+
+}

css/pageb.css

@@ -0,0 +1,4 @@
+h1 {
+text-align: left;
+
+}

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=""

html/index.html

@@ -0,0 +1,28 @@
+<div class="all">
+    <br>
+    <br>
+    <h1>welcome to easyweb</h1>
+    <p>easly merge your nav bar, css, html, and js in one easy place</p> 
+    <br>
+    <div class="section">
+        <h1> How to use </h1>
+        <p>ezweb requires bacic knolage of html and optionaly css and js to take full advantage</p>
+        <br>
+        <p> ezweb uses 3 folders, they should be in the same directory as the python script (ezweb.py)</p>
+        <p>this means if ezweb.py is in /home, there should be /home/css/, /home/html/, /home/script/.</p>
+        <br>
+        <p> to create a webpage, create a html file and optionaly add css and js files with the name of the directory it will display <br> (ex: pagea.html, pagea.js, and pagea.css is at localhost:8080/pagea)</p>
+        <br>
+        <div class="mini">
+            <h1>html</h1>
+            <p>like most webservers, the name index.html has the root directory of the server (localhost:8080/)</p>
+            <br>
+            <p>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) <br> use all.css for styling</p>
+        </div>
+        
+    </div>
+    <br>
+    <p> for you convinence, the example pages " <a href="pagea">pagea</a> " and "<a href="pageb">pageb</a> " are provided</p>
+    <br>
+    
+</div>

html/nav.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navigation Bar</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="logo">This is nav.html + all.css</div>
+        <ul class="nav-links">
+            <li><a href="index">Help</a></li>
+            <li><a href="pagea">Pagea</a></li>
+            <li><a href="pageb">Pageb</a></li>
+        </ul>
+        <div class="burger">
+            <div class="line1"></div>
+            <div class="line2"></div>
+            <div class="line3"></div>
+        </div>
+    </nav>
+
+</body>
+</html>

html/pagea.html

@@ -0,0 +1 @@
+<h1>this is the pagea.html pagea.css and all.css apply here</h1>

html/pageb.html

@@ -0,0 +1 @@
+<h1>this is pageb.html, all.css and pageb.css applys here</h1>

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');
+});

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");
+};

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");
+};