-
Set Up the HTML Structure:
- Create a container for the browser.
- Include elements for the title, content, and status.
-
CSS Styling:
- Center the browser content using flexbox.
- Style elements for a consistent look, including dark text and specific colors.
-
JavaScript Functionality:
- Update the status bar with the current window information.
- Handle tab content switching by updating the selected tab and status.
Here's the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.">Simple Browser</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #;
display: flex;
justify-content: center;
align-items: center;
min-height: 1vh;
overflow: hidden;
}
.browser {
background-color: #333;
padding: 2px;
border-radius: 1px;
box-shadow: 0 0 1px rgba(,,,.1);
max-width: 8px;
width: 9%;
height: 6vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
color: #fff;
font-size: 24px;
font-weight: bold;
margin-bottom: 1px;
text-shadow: 2px 2px 4px rgba(,,,.2);
}
.content {
flex: 1;
padding: 5px;
display: flex;
flex-direction: column;
gap: 2px;
background-color: #fff;
border-radius: 1px;
}
.status {
color: #888;
font-size: 14px;
text-align: center;
padding: 1px;
}
.status-bar {
background-color: #fff;
padding: 1px;
border-radius: 1px;
margin-top: 1px;
display: flex;
align-items: center;
}
.selected-tab {
color: #;
text-decoration: none;
}
.selected-tab-text {
font-weight: bold;
color: #;
}
</style>
</head>
<body>
<div class="browser">
<div class="title">Welcome to the Browser</div>
<div class="content">
<p>This is the content of the browser.</p>
<p>This is the status bar with some information.</p>
</div>
<div class="status-bar">
<span id="status">Current window version: 1.</span>
<span id="user-agent">Your browser/Internet Explorer version</span>
</div>
</div>
<script>
const title = document.querySelector('.title');
const content = document.querySelector('.content');
const statusBar = document.querySelector('.status-bar');
const statusText = document.getElementById('status');
const selectedTab = document.querySelector('.selected-tab');
const selectedTabText = document.querySelector('.selected-tab-text');
function updateStatus() {
statusText.textContent = `Current status: ${window.location}; ${selectedTabText.textContent}`
${selectedTabText.textContent === '' ? 'Click a tab to switch between sections' : 'Click a tab to switch between sections`}
}
function tabUpdate() {
const tabContent = document.querySelector('.tab-content');
const tabName = document.querySelector('.tab-name').textContent;
tabContent.textContent = tabName;
selectedTabText.textContent = tabName;
statusBar.textContent = `<Window: ${window.location}; User Agent: ${window.userAgent}>`;
}
// Update status and tabs every second
window.addEventListener('load', () => {
updateStatus();
tabUpdate();
}).on('change', updateStatus);
// Click a tab
document.querySelector('.tabs a').addEventListener('click', tabUpdate);
</script>
</body>
</html>
Explanation:
-
HTML Structure: The browser container holds the title, content, and status bar. The status bar shows the current window's version and user agent.
-
CSS Styling: Uses flexbox for layout, ensuring the browser is centered and responsive. The design includes a title, content, and status bar with specific colors and styling.
-
JavaScript Functionality:
updateStatus(): Fetches the current window and status bar information and displays it.tabUpdate(): Updates the selected tab's content and status bar text.
-
User Interaction: Users can click tabs to switch between different sections of the page.
This implementation provides a basic client-side browser that shows a title, content, and a static status bar with window information. It's responsive and works without additional setup, but you can expand it with more features like menus, tabs, and dynamic content.
