iNet/risa-web
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Change UI, add back and forwards button, change from iframe to webview

Browse Source
This commit is contained in:
Ketan
2026-04-30 20:54:44 -04:00
parent 4fcabf5040
commit 819d2f277a
8 changed files with 144 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e3e3e3"><path d="M424-56 0-480l424-424 80 81-343 343 343 343-80 81Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 175 B

1
src/img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#e3e3e3"><path d="m304-58-80-81 343-343-343-343 80-81 424 424L304-58Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 176 B

29
src/index.html
View File

@@ -10,26 +10,31 @@
</head>
<body>
<iframe src="https://start.duckduckgo.com/" width="100%" height="100%" id="webpage"></iframe>
<webview src="https://start.duckduckgo.com/" width="100%" height="100%" id="webpage"></webview>
<footer>
<input id="search">
<button type="button" onclick="search()" class="badgebutton" id="searchbutton">
<button class="badgebutton" id="arrowbtn1" onclick="back()">
<img src="img/arrow_back_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
</button>
<button class="badgebutton" id="arrowbtn2" onclick="forward()">
<img src="img/arrow_forward_ios_48dp_E3E3E3_FILL0_wght700_GRAD0_opsz48.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
</button>
<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>
<button class="dropbtn">
<img src="img/menu.svg" alt="Icon" style="vertical-align: middle;" id="searchicon">
</button>
<div class="dropdown-content">
<a onclick="homebtn()">Home</a>
</div>
</div>
</footer>
<script src="js/search.js">
</script>
<script src="js/dropdown.js"></script>
<script src="js/history.js"></script>
</body>
</html>

64
src/js/history.js
View File

@@ -0,0 +1,64 @@
const frame = document.getElementById("webpage");
function back() {
if (frame && typeof frame.canGoBack === 'function' && frame.canGoBack()) {
frame.goBack();
} else {
console.log("Cannot go back: No history");
}
}
function forward() {
if (frame && typeof frame.canGoForward === 'function' && frame.canGoForward()) {
frame.goForward();
} else {
console.log("Cannot go forward: No history");
}
}
frame.addEventListener('did-navigate', updateButtonStates);
frame.addEventListener('did-navigate-in-page', updateButtonStates);
function updateButtonStates() {
const backBtn = document.getElementById('arrowbtn1');
const forwardBtn = document.getElementById('arrowbtn2');
backBtn.style.opacity = frame.canGoBack() ? "1" : "0.3";
forwardBtn.style.opacity = frame.canGoForward() ? "1" : "0.3";
}
let historyStack = [];
window.addEventListener('DOMContentLoaded', () => {
if (!frame) {
console.error("Webview element not found!");
return;
}
console.log("Webview found, attaching listeners...");
frame.addEventListener('did-start-navigation', (event) => {
console.log("Navigating to: " + event.url);
saveToHistory(event.url);
});
});
function saveToHistory(url) {
let history = JSON.parse(localStorage.getItem('browser-history')) || [];
history.push(url);
localStorage.setItem('browser-history', JSON.stringify(history));
}
frame.addEventListener('did-navigate', (event) => {
const newUrl = event.url;
if (historyStack[historyStack.length - 1] !== newUrl) {
historyStack.push(newUrl);
localStorage.setItem('browser-history', JSON.stringify(historyStack));
console.log("History Updated:", historyStack);
}
});
// To view your history later:
function getHistory() {
const savedHistory = localStorage.getItem('browser-history');
return savedHistory ? JSON.parse(savedHistory) : [];
}

35
src/js/search.js
View File

@@ -1,4 +1,3 @@
// Get references to the elements
const sb = document.getElementById("search");
const frame = document.getElementById("webpage");
@@ -25,4 +24,36 @@ sb.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
search();
}
});
});
function homebtn(){
frame.src = "https://start.duckduckgo.com/";
}
function back() {
if (frame && typeof frame.canGoBack === 'function' && frame.canGoBack()) {
frame.goBack();
} else {
console.log("Cannot go back: No history");
}
}
function forward() {
if (frame && typeof frame.canGoForward === 'function' && frame.canGoForward()) {
frame.goForward();
} else {
console.log("Cannot go forward: No history");
}
}
frame.addEventListener('did-navigate', updateButtonStates);
frame.addEventListener('did-navigate-in-page', updateButtonStates);
function updateButtonStates() {
const backBtn = document.getElementById('arrowbtn1');
const forwardBtn = document.getElementById('arrowbtn2');
// Change opacity or disable if navigation isn't possible
backBtn.style.opacity = frame.canGoBack() ? "1" : "0.3";
forwardBtn.style.opacity = frame.canGoForward() ? "1" : "0.3";
}

36
src/styles.css
View File

@@ -1,4 +1,3 @@
/* Core Layout */
html, body {
margin: 0;
padding: 0;
@@ -11,15 +10,12 @@ html, body {
background-color: #000;
}
/* The Website Container */
iframe {
webview {
flex-grow: 1;
border: none;
width: 100%;
background-color: white;
}
/* The Bottom Navigation Bar */
footer {
width: 100%;
height: 70px;
@@ -35,14 +31,13 @@ footer {
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;
border-radius: 10px;
background-color: #2b2b2b;
color: #fff;
outline: none;
@@ -52,16 +47,14 @@ footer {
#search:focus {
background-color: #333;
border-color: #007bff;
}
/* Primary Button Styling */
.badgebutton {
width: 44px;
height: 44px;
background-color: #007bff;
border: none;
border-radius: 50%;
border-radius: 25%;
display: flex;
align-items: center;
justify-content: center;
@@ -79,21 +72,19 @@ footer {
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%;
border-radius: 25%;
font-size: 20px;
cursor: pointer;
display: flex;
@@ -101,27 +92,32 @@ footer {
justify-content: center;
transition: all 0.2s ease;
}
/* The Dropup Menu Content */
#arrowbtn1{
background-color: #2b2b2b;
border-radius: 50%;
}
#arrowbtn2{
background-color: #2b2b2b;
border-radius: 50%;
margin: 10px;
}
.dropdown-content {
display: none; /* Hidden by default */
display: none;
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;
text-align: center;
}
/* State when Toggled Open via JS */
.dropdown.active .dropdown-content {
display: block;
animation: slideUp 0.2s ease-out;
@@ -132,7 +128,6 @@ footer {
background-color: #333;
}
/* Dropdown Menu Links */
.dropdown-content a {
color: #eee;
padding: 4px 20px;
@@ -147,7 +142,6 @@ footer {
color: white;
}
/* Animations */
@keyframes slideUp {
from {
opacity: 0;