more optimized web design

jehovahsays · Jun 25, 2024 · 81c3a25 · 81c3a25
1 parent 1bd29ef
commit 81c3a25
Show file tree

Hide file tree

Showing 14 changed files with 214 additions and 82 deletions.
diff --git a/css/edit.css b/css/edit.css
@@ -0,0 +1,51 @@
+html {
+  font-family: sans-serif;
+}
+
+h1,
+h2 {
+  text-align: center;
+}
+
+article {
+  width: 330px;
+  min-height: 500px;
+  margin: 0 auto;
+  padding: 15px;
+  background-image: repeating-linear-gradient(
+      to bottom,
+      transparent 1px,
+      transparent 20px,
+      rgb(0, 0, 150) 21px
+    ),
+    linear-gradient(to bottom right, white, #ccc);
+  border-radius: 20px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
+  line-height: 2.5;
+}
+
+ul {
+  list-style-type: none;
+  padding-left: 0;
+  width: 480px;
+  margin: 0 auto;
+  padding-bottom: 30px;
+}
+
+li {
+  float: left;
+  width: 23%;
+}
+
+ul li a {
+  display: block;
+  text-align: center;
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+ul li a:hover,
+ul li a:focus {
+  text-decoration: none;
+}
diff --git a/css/style.css b/css/style.css
@@ -1,17 +1,5 @@
 /* mobile */
 
-fieldset {
-
-        margin: 0px;   
-		border-radius: 0px;
-	    padding: 0px;
-	    top: 0px;
-		left: 0px;
-		right: 0px;
-        width: 100%;
-		height: 100%;
-}
-
 .chatbot-container {
     width: 80%;
     margin: 0 auto;

diff --git a/en/edit.html b/en/edit.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>edit</title>
+
+    <link rel="stylesheet" href="../css/edit.css" />
+  </head>
+
+  <body>
+  <button><a href="../index.html">return to homepage</a></button>
+    <h1>Fetch text example</h1>
+    <ul>
+      <li><a data-page="page1">Page 1</a></li>
+      <li><a data-page="page2">Page 2</a></li>
+      <li><a data-page="page3">Page 3</a></li>
+    </ul>
+    <article></article>
+
+    <script>
+      const myArticle = document.querySelector("article");
+      const myLinks = document.querySelectorAll("ul a");
+      for (const link of myLinks) {
+        link.onclick = (e) => {
+          e.preventDefault();
+          const linkData = e.target.getAttribute("data-page");
+          getData(linkData);
+        };
+      }
+
+      function getData(pageId) {
+        console.log(pageId);
+        const myRequest = new Request(`${pageId}.txt`);
+
+        fetch(myRequest)
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(`HTTP error, status = ${response.status}`);
+            }
+            return response.text();
+          })
+          .then((text) => {
+            myArticle.innerText = text;
+          })
+          .catch((error) => {
+            myArticle.innerText = `Error: ${error.message}`;
+          });
+      }
+    </script>
+  </body>
+</html>
diff --git a/en/hi.html b/en/hi.html
@@ -0,0 +1,3 @@
+
+<!DOCTYPE html><html lang="en"><head><meta name="viewport"content="width=device-width"><title>hi</title><link rel="stylesheet" href="./css/merge.css" /></link></head><body><center><fieldset><legend><ahref="./hi.html">hi</a></legend><form class="form-group"action="../action.php"method="post"><input type="text"class="form-control"id="secure-form-answer-Human"type="text"name="secure-form-answer"maxlength="40"autocomplete="true"autocorrect="off"autocapitalize="off"spellcheck="true"placeholder="what word defines this word"required><noscript><labelfor="secure-form-answer-Human">Human</label></noscript></form><br><a href="../index.html">return to homepage</a><br><br><a href="../delete.php?action=delete&filename=./en/hi.html">delete this page</a><br><br><article>hi definitions go here</article></fieldset></center></body></html>
+
diff --git a/en/knowledge.html b/en/knowledge.html
@@ -0,0 +1,3 @@
+
+<!DOCTYPE html><html lang="en"><head><meta name="viewport"content="width=device-width"><title>knowledge</title><link rel="stylesheet" href="./css/merge.css" /></link></head><body><center><fieldset><legend><ahref="./knowledge.html">knowledge</a></legend><form class="form-group"action="../action.php"method="post"><input type="text"class="form-control"id="secure-form-answer-Human"type="text"name="secure-form-answer"maxlength="40"autocomplete="true"autocorrect="off"autocapitalize="off"spellcheck="true"placeholder="what word defines this word"required><noscript><labelfor="secure-form-answer-Human">Human</label></noscript></form><br><a href="../index.html">return to homepage</a><br><br><a href="../delete.php?action=delete&filename=./en/knowledge.html">delete this page</a><br><br><article>knowledge definitions go here</article></fieldset></center></body></html>
+
diff --git a/en/page1.txt b/en/page1.txt
@@ -0,0 +1,3 @@
+Page 1: A desparate journey
+
+This is the first exciting part of our story! Once upon a time, a man was creeping into a dark forest, to try to find the woodcutter's cottage. Somewhere, an owl hooted. A feeling of lingering dread spread all over his body, but he pressed on regardless.
diff --git a/en/page2.txt b/en/page2.txt
@@ -0,0 +1,3 @@
+Page 2: Light at the end of the tunnel
+
+Brambles tugged at his clothes, and the rain lashed down, making our hero bruised and cold. when hope was all but lost, he noticed a dim light shining through the trees — this must be the woodcutter's cottage. This very sight spurred him to continue.
diff --git a/en/page3.txt b/en/page3.txt
@@ -0,0 +1,3 @@
+Page 3: The end unseen?
+
+A kilometer or so more, and the cottage was now in sight — our hero could see lights shining in the windows, and a figure shuffling around within! This was the moment he was waiting for surely! He tiptoed up to the door, and carefully tried the handle. Fnding it unlocked, he burst open the door and shouted "your time has come, scoundrel..!" He was slightly disappointed to come face to face with a slightly scared dog.
diff --git a/en/soul.html b/en/soul.html
@@ -0,0 +1,3 @@
+
+<!DOCTYPE html><html lang="en"><head><meta name="viewport"content="width=device-width"><title>soul</title><link rel="stylesheet" href="./css/merge.css" /></link></head><body><center><fieldset><legend><ahref="./soul.html">soul</a></legend><form class="form-group"action="../action.php"method="post"><input type="text"class="form-control"id="secure-form-answer-Human"type="text"name="secure-form-answer"maxlength="40"autocomplete="true"autocorrect="off"autocapitalize="off"spellcheck="true"placeholder="what word defines this word"required><noscript><labelfor="secure-form-answer-Human">Human</label></noscript></form><br><a href="../index.html">return to homepage</a><br><br><a href="../delete.php?action=delete&filename=./en/soul.html">delete this page</a><br><br><article>soul definitions go here</article></fieldset></center></body></html>
+
diff --git a/img/earth.jpg b/img/earth.jpg
diff --git a/img/earth.mp4 b/img/earth.mp4
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <meta charset="charset=UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
 <meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" />
+<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" />
 <meta http-equiv="Cache-Control" content="private, no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" />
 <meta http-equiv="Pragma" content="no-cache" />
 <meta http-equiv="Expires" content="0" />
@@ -52,27 +52,41 @@
 <style>
 /* mobile */
 
-nodes {
+fieldset {
+	    z-index: 0px;
+	    top: 0px;
+		left: 0px;
+	    padding: 0px;
+        margin: 0px;
+        width: 100%;
+		height: 100%;
+		position: absolute;
+}
+
+.nodes {
         list-style: none;
         padding: 0px;
         margin: 0px;
-		position: fixed;
+		position: absolute;
 	    top: 0px;
         left: 0px;			
 }
 .edges {
         margin: 0px;
-	    position: fixed;		
-	    top: 175px;
+	    position: absolute;		
+	     top: 10px;
         left: 100px;
         font-size: 1.0em;
-        padding: 15px;
+        padding: 0px;
         animation: fadeIn 0.5s ease-in-out;
 } 
 .edges:last-child {        
-	    position: fixed;
-	    top: 0px;
-        left: 0px;
+        margin: 0px;
+	    position: absolute;		
+	    top: 340px;
+        left: 100px;
+        font-size: 1.0em;
+        padding: 0px;
         border-bottom: none;
 }
 @keyframes fadeIn {
@@ -121,13 +135,15 @@
     <style>
         .tagcloud {
             font-size: 16px;
+
         }
 
         .tagcloud--item {
             padding: 2px 4px;
             background-color: transparent;
             border: 1px solid transparent;
             cursor: pointer;
+
         }
 
         .tagcloud--item:hover {
@@ -152,66 +168,8 @@
 
 </head>
 <body>
-
-<fieldset>
 <center>
-
-<div class="chatbot-container">
-<div id="header">	
-</div>
-<div id="chatbot">
-<div id="conversation">
-<div class="chatbot-message">
-<p class="chatbot-text">
-ask me to type a random word.
-</p>
-</div>
-</div>
-
-<form id="input-form">
-<message-container>
-<input 
-id="input-field"
-name="secure-form-answer" 
-maxlength="40" 
-autocomplete="true" 
-autocorrect="off" 
-autocapitalize="off" 
-spellcheck="true" 
-type="text" 
-placeholder="ask a random keyword">				
-<button id="submit-button" 
-type="submit">submit</button>	
-</message-container>                
-</form>
-</div>  
-</div>
-
-<script 
-src="./js/chatbot.js">
-</script>
-
-<div 
-class="content">
-<p
-style=" 
-	    position: fixed;
-	    padding: 0;
-        margin: 0px;
-	    top: 150px;
-        left: 150px;			
-        font-size: 9.0em;">
-		*
-		</p>
-<!-- content -->
- <script 
-type="text/javascript" 
-src="./js/merge.js">
-</script>
-</div>
-
-<br>
-search database for your keyword.
+<br><br>
 <form 
 action="./action.php" 
 method="post">		
@@ -239,8 +197,6 @@
 </label>
 </noscript>     
 </form>	 
-</center>
-</fieldset>
 
 <script>
 function edges() {
@@ -271,6 +227,60 @@
 
 </script>
 
+<div 
+class="content">
+<p
+style=" 
+	    position: absolute;
+	    padding: 0;
+        margin: 0px;
+	    top: 120px;
+        left: 155px;			
+        font-size: 9.0em;">
+		*
+		</p>
+<!-- content -->
+ <script 
+type="text/javascript" 
+src="./js/merge.js">
+</script>
+</div>
+
+<div class="chatbot-container">
+<div id="header">	
+</div>
+<div id="chatbot">
+<div id="conversation">
+<div class="chatbot-message">
+<p class="chatbot-text">
+ask me to type a random word.
+</p>
+</div>
+</div>
+
+<form id="input-form">
+<message-container>
+<input 
+id="input-field"
+name="secure-form-answer" 
+maxlength="40" 
+autocomplete="true" 
+autocorrect="off" 
+autocapitalize="off" 
+spellcheck="true" 
+type="text" 
+placeholder="ask a random keyword">				
+<button id="submit-button" 
+type="submit">submit</button>	
+</message-container>                
+</form>
+</div>  
+</div>
+<script 
+src="./js/chatbot.js">
+</script>
+</center>
+
 <center>
 <ul id="nodes">
 <a href="./en/magnetic-polarity.html"class="edges"><button class="earth">magnetic-polarity</button></a><br>
@@ -334,3 +344,6 @@
 <a href="./en/software.html"class="edges"><button class="earth">software</button></a><br>
 <a href="./en/match.html"class="edges"><button class="earth">match</button></a><br>
 <a href="./en/clap.html"class="edges"><button class="earth">clap</button></a><br>
+<a href="./en/soul.html"class="edges"><button class="earth">soul</button></a><br>
+<a href="./en/hi.html"class="edges"><button class="earth">hi</button></a><br>
+<a href="./en/edit.html"class="edges"><button class="earth">edit</button></a><br>
diff --git a/js/chatbot.js b/js/chatbot.js
@@ -370156,4 +370156,8 @@ function generateResponse(input) {
 "software",
 "match",
 "clap",
+"soul",
+"hi",
+"knowledge",
+"edit",
 ];return responses[Math.floor(Math.random() * responses.length)];}window.onblur = function (tabs) {alert('switch tabs alert');};
diff --git a/js/merge.js b/js/merge.js
@@ -61,4 +61,8 @@ var texts = [
 "software",
 "match",
 "clap",
+"soul",
+"hi",
+"knowledge",
+"edit",
 ];var tc = TagCloud('.content', texts);console.log(tc);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@

		<!DOCTYPE html><html lang="en"><head><meta name="viewport"content="width=device-width"><title>hi</title><link rel="stylesheet" href="./css/merge.css" /></link></head><body><center><fieldset><legend><ahref="./hi.html">hi</a></legend><form class="form-group"action="../action.php"method="post"><input type="text"class="form-control"id="secure-form-answer-Human"type="text"name="secure-form-answer"maxlength="40"autocomplete="true"autocorrect="off"autocapitalize="off"spellcheck="true"placeholder="what word defines this word"required><noscript><labelfor="secure-form-answer-Human">Human</label></noscript></form><br><a href="../index.html">return to homepage</a><br><br><a href="../delete.php?action=delete&filename=./en/hi.html">delete this page</a><br><br><article>hi definitions go here</article></fieldset></center></body></html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Page 1: A desparate journey

		This is the first exciting part of our story! Once upon a time, a man was creeping into a dark forest, to try to find the woodcutter's cottage. Somewhere, an owl hooted. A feeling of lingering dread spread all over his body, but he pressed on regardless.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Page 2: Light at the end of the tunnel

		Brambles tugged at his clothes, and the rain lashed down, making our hero bruised and cold. when hope was all but lost, he noticed a dim light shining through the trees — this must be the woodcutter's cottage. This very sight spurred him to continue.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Page 3: The end unseen?

		A kilometer or so more, and the cottage was now in sight — our hero could see lights shining in the windows, and a figure shuffling around within! This was the moment he was waiting for surely! He tiptoed up to the door, and carefully tried the handle. Fnding it unlocked, he burst open the door and shouted "your time has come, scoundrel..!" He was slightly disappointed to come face to face with a slightly scared dog.