<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Voogleブラウザ</title>
<meta property="og:title" content="Voogleブラウザ">
<meta property="og:description" content="次世代タブブラウザ Voogle">
<meta property="og:url" content="https://voogle.onrender.com/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://voogle.onrender.com/ogp.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body.dark {
background-color: #222;
color: #fff;
}
header {
background-color: #4285F4;
padding: 15px;
color: white;
font-size: 24px;
text-align: center;
}
#tabs {
display: flex;
background-color: #e0e0e0;
padding: 10px;
overflow-x: auto;
}
.tab {
padding: 8px 16px;
background-color: white;
border-radius: 20px;
margin-right: 10px;
cursor: grab;
font-weight: bold;
position: relative;
user-select: none;
}
.tab.active {
background-color: #34A853;
color: white;
}
.tab .close {
position: absolute;
top: 0;
right: 5px;
cursor: pointer;
font-family: 'Material Icons';
}
#navbar {
display: flex;
padding: 10px;
background-color: #f1f1f1;
gap: 10px;
}
#url {
flex: 1;
padding: 10px;
border-radius: 20px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #4285F4;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
}
#spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
iframe {
width: 100%;
height: calc(100% - 240px);
border: none;
}
footer {
padding: 10px;
background-color: #e0e0e0;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<header>
<span class="material-icons" style="vertical-align: middle; margin-right: 10px;">language</span>
<a href="https://voogle.onrender.com/">Voogleブラウザ</a>
</header>
<div id="tabs"></div>
<div id="navbar">
<input type="text" id="url" placeholder="https://example.com">
<button id="go"><span class="material-icons">arrow_forward</span>移動</button>
<button id="newTab"><span class="material-icons">add</span>タブ追加</button>
<button id="darkModeToggle"><span class="material-icons">dark_mode</span>ダークモード</button>
</div>
<div id="spinner">読み込み中...</div>
<iframe id="viewer"></iframe>
<footer>
© 2025 Voogle Inc.
</footer>
<script>
const tabs = document.getElementById('tabs');
const viewer = document.getElementById('viewer');
const urlInput = document.getElementById('url');
const goButton = document.getElementById('go');
const newTabButton = document.getElementById('newTab');
const darkModeToggle = document.getElementById('darkModeToggle');
const spinner = document.getElementById('spinner');
let tabData = [];
let activeTab = -1;
function switchTab(index) {
activeTab = index;
document.querySelectorAll('.tab').forEach((tab, i) => {
tab.classList.toggle('active', i === index);
});
loadPage(tabData[index].url);
}
function addTab(url = 'https://voogle.onrender.com/') {
tabData.push({ url });
const index = tabData.length - 1;
const tab = document.createElement('div');
tab.className = 'tab';
tab.setAttribute('draggable', true);
tab.innerHTML = `タブ ${index + 1} <span class="close">close</span>`;
tab.onclick = () => switchTab(index);
tab.querySelector('.close').onclick = (e) => {
e.stopPropagation();
tabs.removeChild(tab);
tabData.splice(index, 1);
if (activeTab === index) {
viewer.src = '';
urlInput.value = '';
}
};
tabs.appendChild(tab);
switchTab(index);
}
function loadPage(url) {
spinner.style.display = 'block';
viewer.src = url;
urlInput.value = url;
viewer.onload = () => {
spinner.style.display = 'none';
document.title = viewer.contentDocument.title || 'Voogleブラウザ';
};
}
goButton.onclick = () => {
if (activeTab >= 0) {
let url = urlInput.value.trim();
if (!url.startsWith('http')) {
url = 'https://' + url;
}
tabData[activeTab].url = url;
loadPage(url);
}
};
newTabButton.onclick = () => addTab();
darkModeToggle.onclick = () => {
document.body.classList.toggle('dark');
localStorage.setItem('darkMode', document.body.classList.contains('dark'));
};
if (localStorage.getItem('darkMode') === 'true') {
document.body.classList.add('dark');
}
addTab();
</script>
</body>
</html>
