Myang basic q page

README.md

@@ -1,3 +1,5 @@
+#Website : https://l4phs.github.io/starter_helpi/
+
 # Getting Started with Helpi
 
 Packages Included:

package.json

@@ -10,9 +10,10 @@
     "@types/node": "^16.18.76",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "axios": "^1.6.8",
     "bootstrap": "^5.3.2",
     "gh-pages": "^6.1.1",
-    "openai": "^4.26.0",
+    "openai": "^4.38.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",

public/index.html

@@ -26,6 +26,7 @@
     -->
     <title>React App</title>
     <link
+
           rel="stylesheet"
           href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
           integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"

src/App.css

@@ -1,38 +1,134 @@
-.App {
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
+@import url('https://fonts.cdnfonts.com/css/planet-bubble');
+@import url('https://fonts.cdnfonts.com/css/slamming');
+
+/*
+Color pallete
+#cbb19b
+#bd977c
+#9b7960
+#66452a
+#dfe0e0
+https://www.color-hex.com/color-palette/106259
+*/
+
+.TB-ul {
+  list-style-type: none;
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  background-color: #fee4c3;
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  z-index: 9;
+}
+
+.TB-li {
+  float: right;
+  display: block;
+  color: #3d2a19;
   text-align: center;
+  text-decoration: none;
+  padding: 19px 10px;
+  font-size: 12px;
+  border-radius: 8px;
+  /* border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px; */
+  transition: all 0.3s ease; 
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  cursor: pointer;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-right: 5px;
+}
+
+.TB-li:hover {
+  background-color: #3d2a19;
+  color: #fee4c3;
+  transform: scale(1.1); 
+
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.Taskbar {
+  margin: auto;
+  color: #3d2a19;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.APIform {
+  float: left;
+  color: #fee4c3;
+  text-align: center;
+  text-decoration: none;
+  font-size: 12px;
+  padding: 10px 5px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  cursor: pointer;
+  margin-left: 25px;
+}
+
+.APIform input {
+  max-height: 33px;
+  color: #fee4c3;
+  background-color: #3d2a19;
+  border: none;
+}
+.APIform input::placeholder {
+  color: #fee4c3;
 }
+.APIform input:focus {
+  background-color: #fee4c3;
+  color: #3d2a19;
+}
+.APIform:hover {
+  background-color: #fee4c3;
+}
+.SubmitButton {
+  color: #3d2a19;
+  text-align: center;
+  text-decoration: none;
+  padding: 19px 10px;
+  font-size: 12px;
+  border-radius: 8px;
+  /* border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px; */
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  cursor: pointer;
+  float: left;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  transition: all 0.3s ease; 
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
+.SubmitButton:hover {
+  background-color: #3d2a19;
+  color: #fee4c3;
+  transform: scale(1.1); 
 
-.App-link {
-  color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.TaskbarHeader {
+  font-family: 'Slamming', sans-serif;
+  color: #3d2a19;
+  position: absolute;
+  left: 41vw;
+  font-size: 46px;
+  margin: 0px;
+  top: 0px;
+  padding-top: 0vh;
 }
+.TaskbarHeader:hover {
+  background-color: transparent;
+  color: #3d2a19;
+  cursor: default;
+}