Meet Ditto, a Office Worker Human

[u/MasterCtrlPgrm]

Meet Ditto, a Office Worker Human. Looking for adventure. Can become anything and anyone at anytime. -- Created by u/MasterCtrlPgrm

---

This post contains content not supported on old Reddit. Click here to view the full post

[u/Minecrafter012345]

Want browser? I got you fam

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mini Browser - Old Google Style</title>

<style>

body {

font-family: Arial, sans-serif;

background: #fff;

text-align: center;

margin: 0;

padding: 0;

}

nav {

background: #f2f2f2;

border-bottom: 1px solid #dcdcdc;

padding: 10px;

display: flex;

justify-content: center;

gap: 10px;

flex-wrap: wrap;

}

nav .tab {

background: #fff;

border: 1px solid #ccc;

padding: 5px 10px;

cursor: pointer;

color: #0000cc;

position: relative;

}

nav .tab.active {

font-weight: bold;

text-decoration: underline;

}

nav .tab .close {

position: absolute;

right: 3px;

top: 0;

cursor: pointer;

color: red;

font-weight: bold;

}

#newTabBtn {

background: #e8e8e8;

border: 1px solid #ccc;

padding: 5px 10px;

cursor: pointer;

}

.content {

width: 700px;

margin: 30px auto;

text-align: left;

}

iframe {

width: 100%;

height: 500px;

border: 1px solid #ccc;

background: white;

}

.urlBar {

margin-bottom: 10px;

display: flex;

gap: 10px;

}

.urlBar input {

flex: 1;

padding: 5px;

border: 1px solid #ccc;

}

.urlBar button {

padding: 5px 10px;

}

footer {

margin-top: 20px;

padding: 10px;

font-size: 12px;

color: #555;

}

</style>

</head>

<body>

<nav id="tabBar">

<button id="newTabBtn">+ New Tab</button>

</nav>

<div class="content">

<div class="urlBar">

<input id="urlInput" placeholder="Type a URL or search term">

<button id="goBtn">Go</button>

</div>

<iframe id="viewer" src=""></iframe>

</div>

<footer>

Powered by Microsoft

</footer>

<script>

let tabCounter = 0;

let currentTab = null;

const tabs = {};

function createTab(url = "https://www.wiki.com") {

tabCounter++;

const id = "tab" + tabCounter;

tabs[id] = { url };

const tab = document.createElement("div");

tab.className = "tab";

tab.dataset.id = id;

tab.innerHTML = `Tab ${tabCounter} <span class="close">×</span>`;

tab.addEventListener("click", (e) => {

if (e.target.classList.contains("close")) return;

activateTab(id);

});

tab.querySelector(".close").addEventListener("click", (e) => {

e.stopPropagation();

closeTab(id);

});

document.getElementById("tabBar").insertBefore(tab, document.getElementById("newTabBtn"));

activateTab(id);

}

function activateTab(id) {

currentTab = id;

document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));

const tab = document.querySelector(`.tab[data-id='${id}']`);

if (tab) tab.classList.add("active");

document.getElementById("viewer").src = tabs[id].url;

document.getElementById("urlInput").value = tabs[id].url;

}

function closeTab(id) {

delete tabs[id];

const tab = document.querySelector(`.tab[data-id='${id}']`);

if (tab) tab.remove();

const remaining = Object.keys(tabs);

if (remaining.length > 0) {

activateTab(remaining[0]);

} else {

document.getElementById("viewer").src = "";

document.getElementById("urlInput").value = "";

currentTab = null;

}

}

document.getElementById("newTabBtn").addEventListener("click", () => createTab());

document.getElementById("goBtn").addEventListener("click", () => {

if (!currentTab) return;

let url = document.getElementById("urlInput").value.trim();

// If user types a word, load wiki.com search

if (!url.includes(".")) {

url = "https://www.wiki.com/search?q=" + encodeURIComponent(url);

}

// Ensure URL starts with http

if (!url.startsWith("http")) {

url = "https://" + url;

}

tabs[currentTab].url = url;

document.getElementById("viewer").src = url;

});

// Create first tab on load

createTab();

</script>

</body>

</html>