initial commit

public/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /search
+Disallow: /*?*q=*
+Disallow: /static
+Disallow: /images

public/static/catppuccin-mocha.css

@@ -0,0 +1,12 @@
+:root {
+  /* catppuccin-mocha colorscheme */
+  --bg: #1e1e2e;
+  --fg: #cdd6f4;
+  --1: #45475a;
+  --2: #f38ba8;
+  --3: #a6e3a1;
+  --4: #f9e2af;
+  --5: #89b4fa;
+  --6: #f5c2e7;
+  --7: #ffffff;
+}

public/static/index.js

@@ -0,0 +1,10 @@
+let search_box = document.querySelector('input')
+function search_web() {
+  window.location = `search?q=${search_box.value}`
+}
+
+search_box.addEventListener('keyup', (e) => {
+  if (e.keyCode === 13) {
+    search_web()
+  }
+})

public/static/style.css

@@ -0,0 +1,242 @@
+@import url('./catppuccin-mocha.css');
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100vh;
+  background: var(--1);
+}
+
+/* styles for the index page */
+
+.search-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-container div {
+  display: flex;
+}
+
+/* styles for the search box and search button */
+
+.search_bar {
+  display: flex;
+}
+
+.search_bar input {
+  padding: 1rem;
+  width: 50rem;
+  height: 3rem;
+  outline: none;
+  border: none;
+  box-shadow: rgba(0, 0, 0, 1);
+  background: var(--fg);
+}
+
+.search_bar button {
+  padding: 1rem;
+  border-radius: 0;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  border: none;
+  gap: 0;
+  background: var(--bg);
+  color: var(--3);
+  font-weight: 600;
+  letter-spacing: 0.1rem;
+}
+
+.search_bar button:active,
+.search_bar button:hover {
+  filter: brightness(1.2);
+}
+
+/* styles for the footer and header */
+
+header {
+  background: var(--bg);
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  padding: 1rem;
+}
+
+header ul,
+footer ul {
+  list-style: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 1.5rem;
+  gap: 2rem;
+}
+
+header ul li a,
+footer ul li a,
+header ul li a:visited,
+footer ul li a:visited {
+  text-decoration: none;
+  color: var(--2);
+  text-transform: capitalize;
+  letter-spacing: 0.1rem;
+}
+
+header ul li a {
+  font-weight: 600;
+}
+
+header ul li a:hover,
+footer ul li a:hover {
+  color: var(--5);
+}
+
+footer div span {
+  font-size: 1.5rem;
+  color: var(--4);
+}
+
+footer div {
+  display: flex;
+  gap: 1rem;
+}
+
+footer {
+  background: var(--bg);
+  width: 100%;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Styles for the search page */
+
+.results {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.results .search_bar {
+  margin: 1rem 0;
+}
+
+.results_aggregated {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 2rem 0;
+}
+
+.results_aggregated .result {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1rem;
+}
+
+.results_aggregated .result h1 a {
+  font-size: 1.5rem;
+  color: var(--2);
+  text-decoration: none;
+  letter-spacing: 0.1rem;
+}
+
+.results_aggregated .result h1 a:hover {
+  color: var(--5);
+}
+
+.results_aggregated .result h1 a:visited {
+  color: var(--bg);
+}
+
+.results_aggregated .result small {
+  color: var(--3);
+  font-size: 1.1rem;
+  word-wrap: break-word;
+  line-break: anywhere;
+}
+
+.results_aggregated .result p {
+  color: var(--fg);
+  font-size: 1.2rem;
+  margin-top: 0.3rem;
+  word-wrap: break-word;
+  line-break: anywhere;
+}
+
+.results_aggregated .result .upstream_engines {
+  text-align: right;
+  font-size: 1.2rem;
+  padding: 1rem;
+  color: var(--5);
+}
+
+/* Styles for the 404 page  */
+
+.error_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 5rem;
+}
+
+.error_container img {
+  width: 30%;
+}
+
+.error_content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.error_content h1,
+.error_content h2 {
+  letter-spacing: 0.1rem;
+}
+
+.error_content h1 {
+  font-size: 3rem;
+}
+
+.error_content h2 {
+  font-size: 2rem;
+}
+
+.error_content p {
+  font-size: 1.2rem;
+}
+
+.error_content p a,
+.error_content p a:visited {
+  color: var(--2);
+  text-decoration: none;
+}
+
+.error_content p a:hover {
+  color: var(--5);
+}

public/templates/404.html

@@ -0,0 +1,10 @@
+{{>header}}
+<main class="error_container">
+  <img src="images/robot-404.svg" alt="Image of broken robot." />
+  <div class="error_content">
+    <h1>Aw! snap</h1>
+    <h2>404 Page Not Found!</h2>
+    <p>Go to <a href="/">search page</a></p>
+  </div>
+</main>
+{{>footer}}

public/templates/about.html

@@ -0,0 +1,20 @@
+{{>header}}
+<main class="about-container">
+  <h1>Websurfx</h1>
+  <small
+    >a lightening fast, privacy respecting, secure meta search engine</small
+  >
+  <article>
+    Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
+    labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
+    Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
+    Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
+    Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
+    occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
+    officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
+    Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
+    excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut
+    ea consectetur et est culpa et culpa duis.
+  </article>
+</main>
+{{>footer}}

public/templates/footer.html

@@ -0,0 +1,15 @@
+<footer>
+    <div>
+        <span>Powered By <b>Websurfx</b></span><span>-</span><span>a lightening fast, privacy respecting, secure meta
+            search engine</span>
+    </div>
+    <div>
+        <ul>
+            <li><a href="#">Source Code</a></li>
+            <li><a href="#">Issues/Bugs</a></li>
+        </ul>
+    </div>
+</footer>
+</body>
+
+</html>

public/templates/header.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="static/style.css" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body>
+    <header>{{>navbar}}</header>

public/templates/index.html

@@ -0,0 +1,7 @@
+{{>header}}
+<main class="search-container">
+    <img src="images/fps_logo.png" alt="Websurfx meta-search engine logo" />
+    {{>search_bar}}
+</main>
+<script src="static/index.js"></script>
+{{>footer}}

public/templates/navbar.html

@@ -0,0 +1,6 @@
+<nav>
+  <ul>
+    <li><a href="about">about</a></li>
+    <li><a href="settings">settings</a></li>
+  </ul>
+</nav>

public/templates/search.html

@@ -0,0 +1,20 @@
+{{>header}}
+<main class="results">
+    {{>search_bar}}
+    <div class="results_aggregated">
+        {{#each results}}
+        <div class="result">
+            <h1><a href="{{this.visitingUrl}}">{{{this.title}}}</a></h1>
+            <small>{{this.url}}</small>
+            <p>{{{this.description}}}</p>
+            <div class="upstream_engines">
+                {{#each engine}}
+                <span>{{this}}</span>
+                {{/each}}
+            </div>
+        </div>
+        {{/each}}
+    </div>
+</main>
+<script src="static/index.js"></script>
+{{>footer}}

public/templates/search_bar.html

@@ -0,0 +1,9 @@
+<div class="search_bar">
+  <input
+    type="search"
+    name="search-box"
+    value="{{this.pageQuery}}"
+    placeholder="Type to search"
+  />
+  <button type="submit" onclick="search_web()">search</button>
+</div>

public/templates/settings.html

@@ -0,0 +1,5 @@
+{{>header}}
+<main class="settings">
+  <h1>Page is under construction</h1>
+</main>
+{{>footer}}