initial commit

src/img/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e3e3e3"><path d="M99-205v-92h763v92H99Zm0-229v-91h763v91H99Zm0-229v-92h763v92H99Z"/></svg>

src/img/new.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e3e3e3"><path d="M435-434H179v-91h256v-258h91v258h256v91H526v255h-91v-255Z"/></svg>

src/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Risa Web</title>
+  <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body>
+  <iframe src="https://start.duckduckgo.com/" width="100%" height="100%" id="webpage"></iframe>
+  <footer>
+    <input id="search"> 
+    <button type="button" onclick="search()" class="badgebutton" id="searchbutton"> 
+      <img src="img/search.png" alt="Icon" style="vertical-align: middle;" id="searchicon">
+    </button>
+        <button type="button" onclick="search()" class="badgebutton" id="ntbtn" style="margin-left: 10px; background-color: rgb(0, 90, 0);">
+      <img src="img/new.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
+    </button>
+    <div class="dropdown">
+  <button class="dropbtn"><img src="img/menu.svg" alt="Icon" style="vertical-align: middle;" id="searchicon"></button>
+  <div class="dropdown-content">
+    <a href="#">New Tab</a>
+    <a href="#">History</a>
+  </div>
+</div>
+  </footer>
+  <script src="js/search.js">
+  </script>
+  <script src="js/dropdown.js"></script>
+</body>
+
+</html>

src/js/dropdown.js

@@ -0,0 +1,15 @@
+// Toggle the dropdown when the button is clicked
+const dropBtn = document.querySelector('.dropbtn');
+const dropdown = document.querySelector('.dropdown');
+
+dropBtn.addEventListener('click', (e) => {
+    dropdown.classList.toggle('active');
+    e.stopPropagation(); // Prevents the click from reaching the window
+});
+
+// Close the dropdown if the user clicks anywhere else on the screen
+window.addEventListener('click', () => {
+    if (dropdown.classList.contains('active')) {
+        dropdown.classList.remove('active');
+    }
+});

src/js/search.js

@@ -0,0 +1,28 @@
+// Get references to the elements
+const sb = document.getElementById("search");
+const frame = document.getElementById("webpage");
+
+function search() {
+  let input = sb.value.trim();
+  let urladdress;
+  const isUrl = input.includes('.') && !input.includes(' ');
+
+  if (isUrl) {
+    if (!input.startsWith('http://') && !input.startsWith('https://')) {
+      urladdress = 'https://' + input;
+    } else {
+      urladdress = input;
+    }
+  } else {
+    urladdress = 'https://duckduckgo.com/?q=' + encodeURIComponent(input);
+  }
+
+  frame.src = urladdress;
+  console.log("Navigating to: " + urladdress);
+}
+
+sb.addEventListener("keypress", function (event) {
+  if (event.key === "Enter") {
+    search();
+  }
+});

src/styles.css

@@ -0,0 +1,160 @@
+/* Core Layout */
+html, body {
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    font-family: 'Roboto', sans-serif;
+    background-color: #000;
+}
+
+/* The Website Container */
+iframe {
+    flex-grow: 1;
+    border: none;
+    width: 100%;
+    background-color: white;
+}
+
+/* The Bottom Navigation Bar */
+footer {
+    width: 100%;
+    height: 70px;
+    background-color: rgba(26, 26, 26, 0.95); 
+    backdrop-filter: blur(10px);
+    color: white;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    border-top: 1px solid #333;
+    z-index: 10; 
+}
+
+/* The URL/Search Bar */
+#search {
+    flex-grow: 1;
+    height: 44px;
+    font-size: 16px;
+    padding: 0 20px;
+    border: 1px solid #444;
+    border-radius: 22px; 
+    background-color: #2b2b2b;
+    color: #fff;
+    outline: none;
+    transition: all 0.2s ease-in-out;
+    margin-right: 12px;
+}
+
+#search:focus {
+    background-color: #333;
+    border-color: #007bff; 
+}
+
+/* Primary Button Styling */
+.badgebutton {
+    width: 44px;
+    height: 44px;
+    background-color: #007bff;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.1s active;
+}
+
+.badgebutton:active {
+    transform: scale(0.9);
+}
+
+#searchicon {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+}
+
+/* Dropdown Container */
+.dropdown {
+    position: relative;
+    display: inline-block;
+    margin-left: 10px;
+}
+
+/* Secondary Button (Dropbtn) */
+.dropbtn {
+    background-color: #2b2b2b;
+    color: white;
+    width: 44px;
+    height: 44px;
+    border: 1px solid #444;
+    border-radius: 50%;
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+/* The Dropup Menu Content */
+.dropdown-content {
+    display: none; /* Hidden by default */
+    position: absolute;
+    bottom: 100%; 
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 15px; 
+    
+    background-color: rgba(43, 43, 43, 0.95);
+    backdrop-filter: blur(10px);
+    min-width: 160px;
+    border: 1px solid #444;
+    border-radius: 12px;
+    box-shadow: 0px -8px 24px rgba(0,0,0,0.5);
+    z-index: 11;
+    overflow: hidden;
+}
+
+/* State when Toggled Open via JS */
+.dropdown.active .dropdown-content {
+    display: block;
+    animation: slideUp 0.2s ease-out;
+}
+
+.dropdown.active .dropbtn {
+    border-color: #007bff;
+    background-color: #333;
+}
+
+/* Dropdown Menu Links */
+.dropdown-content a {
+    color: #eee;
+    padding: 4px 20px;
+    text-decoration: none;
+    display: block;
+    font-size: 14px;
+    transition: background 0.2s;
+}
+
+.dropdown-content a:hover {
+    background-color: #007bff;
+    color: white;
+}
+
+/* Animations */
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translate(-50%, 10px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
+}