ZewpolOS for starters
Even though I hate open source I recommend ZewpolOS. It is a clean nice OS with Faceone viewing and zewpol searching. To get the code there are 2 options: go to the site or get the code here. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zewpolOS Web Edition</title>
<style>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #1a1a1a;
color: #e0e0e0;
height: 100vh;
overflow: hidden;
}
/* Desktop Area */
#desktop {
width: 100%;
height: calc(100% - 40px);
position: relative;
background-color: #2a2a2a;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBvcGFjaXR5PSIwLjEiPjxnIGZpbGw9IiNmZmYiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgeD0iMCIgeT0iMCI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgeD0iMjAiIHk9IjIwIj48L3JlY3Q+PC9nPjwvc3ZnPg=');
overflow: hidden;
}
/* Taskbar Styles */
#taskbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: #252525;
display: flex;
align-items: center;
padding: 0 10px;
gap: 5px;
z-index: 1000;
}
.taskbar-icon {
width: 30px;
height: 30px;
background-color: #3a3a3a;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.taskbar-icon:hover {
background-color: #4a4a4a;
}
.taskbar-icon.active {
background-color: #4d9be6;
}
#clock {
margin-left: auto;
padding: 0 10px;
font-size: 12px;
}
/* Window Styles */
.window {
position: absolute;
background-color: #3a3a3a;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
overflow: hidden;
min-width: 300px;
min-height: 200px;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s;
}
.window.active {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}
.window-header {
background-color: #2a2a2a;
padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
user-select: none;
}
.window-title {
font-weight: bold;
font-size: 14px;
}
.window-controls {
display: flex;
gap: 8px;
}
.window-control {
width: 16px;
height: 16px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 10px;
font-weight: bold;
}
.window-close {
background-color: #ff5f56;
}
.window-minimize {
background-color: #ffbd2e;
}
.window-maximize {
background-color: #27c93f;
}
.window-content {
flex-grow: 1;
padding: 12px;
overflow: auto;
}
/* Start Menu */
#start-menu {
position: absolute;
bottom: 40px;
left: 10px;
width: 300px;
background-color: #2a2a2a;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
display: none;
z-index: 1001;
overflow: hidden;
}
.start-menu-header {
padding: 15px;
background-color: #1e1e1e;
font-size: 18px;
font-weight: bold;
}
.start-menu-item {
padding: 10px 15px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.start-menu-item:hover {
background-color: #3a3a3a;
}
.start-menu-icon {
width: 20px;
height: 20px;
background-color: #4d9be6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
/* Search Window Specific Styles */
.search-container {
display: flex;
margin-bottom: 15px;
}
#search-input {
flex-grow: 1;
padding: 8px;
border-radius: 4px;
border: none;
background: #4a4a4a;
color: white;
}
.search-button {
margin-left: 8px;
padding: 8px 16px;
background: #4d9be6;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
.search-results {
margin-top: 15px;
}
.search-result {
padding: 8px;
border-bottom: 1px solid #4a4a4a;
}
.search-result-title {
color: #4d9be6;
font-weight: bold;
}
.search-result-url {
color: #5d9e5d;
font-size: 12px;
}
.search-result-desc {
font-size: 14px;
margin-top: 4px;
}
/* File Explorer Styles */
.file-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.file-item {
width: 80px;
text-align: center;
cursor: pointer;
padding: 5px;
border-radius: 4px;
}
.file-item:hover {
background-color: #4a4a4a;
}
.file-icon {
width: 50px;
height: 50px;
background-color: #4a4a4a;
border-radius: 8px;
margin: 0 auto 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.file-name {
font-size: 12px;
word-break: break-all;
}
</style>
</head>
<body>
<div id="desktop">
<!-- Windows will be created here dynamically -->
</div>
<div id="taskbar">
<div class="taskbar-icon" id="start-button">Z</div>
<div class="taskbar-icon" id="search-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<div class="taskbar-icon" id="explorer-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<div id="clock">00:00</div>
</div>
<div id="start-menu">
<div class="start-menu-header">zewpolOS</div>
<div class="start-menu-item" id="start-search">
<div class="start-menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<div>Search</div>
</div>
<div class="start-menu-item" id="start-explorer">
<div class="start-menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<div>File Explorer</div>
</div>
<div class="start-menu-item" id="start-settings">
<div class="start-menu-icon">⚙</div>
<div>Settings</div>
</div>
<div class="start-menu-item" id="start-about">
<div class="start-menu-icon">?</div>
<div>About zewpolOS</div>
</div>
</div>
<script>
// Window management system
class WindowManager {
constructor() {
this.zIndexCounter = 1;
this.activeWindows = new Set();
this.currentActiveWindow = null;
}
createWindow(options) {
const windowElement = document.createElement('div');
windowElement.className = 'window';
windowElement.style.width = `${options.width}px`;
windowElement.style.height = `${options.height}px`;
windowElement.style.zIndex = this.zIndexCounter;
this.zIndexCounter++;
windowElement.innerHTML = `
<div class="window-header">
<span class="window-title">${options.title}</span>
<div class="window-controls">
<div class="window-control window-minimize">−</div>
<div class="window-control window-maximize">□</div>
<div class="window-control window-close">×</div>
</div>
</div>
<div class="window-content">${options.content}</div>
`;
// Position window
if (options.x && options.y) {
windowElement.style.left = `${options.x}px`;
windowElement.style.top = `${options.y}px`;
} else {
this.centerWindow(windowElement);
}
// Add drag functionality
this.setupDragBehavior(windowElement);
// Add control buttons
this.setupWindowControls(windowElement);
// Add click handler to bring to front
windowElement.addEventListener('mousedown', () => {
this.activateWindow(windowElement);
});
document.getElementById('desktop').appendChild(windowElement);
this.activeWindows.add(windowElement);
this.activateWindow(windowElement);
return windowElement;
}
centerWindow(windowElement) {
const desktop = document.getElementById('desktop');
if (desktop) {
const desktopRect = desktop.getBoundingClientRect();
const windowRect = windowElement.getBoundingClientRect();
windowElement.style.left = `${(desktopRect.width - windowRect.width) / 2}px`;
windowElement.style.top = `${(desktopRect.height - windowRect.height) / 2}px`;
}
}
setupDragBehavior(windowElement) {
const header = windowElement.querySelector('.window-header');
let isDragging = false;
let offsetX, offsetY;
header.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - windowElement.getBoundingClientRect().left;
offsetY = e.clientY - windowElement.getBoundingClientRect().top;
this.activateWindow(windowElement);
e.preventDefault(); // Prevent text selection
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const desktop = document.getElementById('desktop');
const desktopRect = desktop.getBoundingClientRect();
const windowRect = windowElement.getBoundingClientRect();
let newX = e.clientX - offsetX - desktopRect.left;
let newY = e.clientY - offsetY - desktopRect.top;
// Constrain to desktop bounds
newX = Math.max(0, Math.min(newX, desktopRect.width - windowRect.width));
newY = Math.max(0, Math.min(newY, desktopRect.height - windowRect.height));
windowElement.style.left = `${newX}px`;
windowElement.style.top = `${newY}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
}
setupWindowControls(windowElement) {
// Close button
windowElement.querySelector('.window-close').addEventListener('click', () => {
this.closeWindow(windowElement);
});
// Minimize button
windowElement.querySelector('.window-minimize').addEventListener('click', () => {
windowElement.style.display = 'none';
this.activeWindows.delete(windowElement);
});
// Maximize button (toggle)
windowElement.querySelector('.window-maximize').addEventListener('click', () => {
if (windowElement.classList.contains('maximized')) {
windowElement.classList.remove('maximized');
windowElement.style.width = windowElement.dataset.prevWidth;
windowElement.style.height = windowElement.dataset.prevHeight;
windowElement.style.left = windowElement.dataset.prevLeft;
windowElement.style.top = windowElement.dataset.prevTop;
} else {
windowElement.classList.add('maximized');
windowElement.dataset.prevWidth = windowElement.style.width;
windowElement.dataset.prevHeight = windowElement.style.height;
windowElement.dataset.prevLeft = windowElement.style.left;
windowElement.dataset.prevTop = windowElement.style.top;
const desktop = document.getElementById('desktop');
const desktopRect = desktop.getBoundingClientRect();
windowElement.style.width = `${desktopRect.width}px`;
windowElement.style.height = `${desktopRect.height}px`;
windowElement.style.left = '0px';
windowElement.style.top = '0px';
}
});
}
activateWindow(windowElement) {
// Reset z-index of all windows
this.activeWindows.forEach(win => {
win.classList.remove('active');
});
// Set this window to highest z-index
windowElement.style.zIndex = this.zIndexCounter;
windowElement.classList.add('active');
this.zIndexCounter++;
this.currentActiveWindow = windowElement;
}
closeWindow(windowElement) {
document.getElementById('desktop').removeChild(windowElement);
this.activeWindows.delete(windowElement);
}
}
// Application management
class ApplicationManager {
constructor(windowManager) {
this.windowManager = windowManager;
}
createSearchWindow() {
const window = this.windowManager.createWindow({
title: 'zewpol Search',
content: `
<div class="search-container">
<input type="text" id="search-input" placeholder="Search with zewpol...">
<button class="search-button" id="search-execute">Search</button>
</div>
<div class="search-results" id="search-results">
<div style="color: #aaa; text-align: center; margin-top: 50px;">
Enter a search term to begin
</div>
</div>
`,
width: 700,
height: 500
});
window.querySelector('#search-execute').addEventListener('click', () => this.performSearch(window));
window.querySelector('#search-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') this.performSearch(window);
});
}
performSearch(windowElement) {
const query = windowElement.querySelector('#search-input').value;
const results = windowElement.querySelector('#search-results');
if (!query.trim()) {
results.innerHTML = '<div style="color: #aaa; text-align: center;">Please enter a search term</div>';
return;
}
// Simulate search results
results.innerHTML = `
<div class="search-result">
<div class="search-result-title">${query} - zewpol Search Results</div>
<div class="search-result-url">https://www.zewpol.com/search?q=${encodeURIComponent(query)}</div>
<div class="search-result-desc">See the full results for "${query}" on zewpol search engine. The zewpol search engine provides comprehensive results from across the web.</div>
</div>
<div class="search-result">
<div class="search-result-title">About ${query}</div>
<div class="search-result-url">https://www.zewpol.com/wiki/${encodeURIComponent(query)}</div>
<div class="search-result-desc">Learn more about ${query} in the zewpol knowledge base. Our knowledge base contains detailed information on millions of topics.</div>
</div>
<div class="search-result">
<div class="search-result-title">${query} Images</div>
<div class="search-result-url">https://www.zewpol.com/images?q=${encodeURIComponent(query)}</div>
<div class="search-result-desc">View images related to ${query} on zewpol. Browse through thousands of high-quality images.</div>
</div>
<div class="search-result">
<div class="search-result-title">${query} Videos</div>
<div class="search-result-url">https://www.zewpol.com/videos?q=${encodeURIComponent(query)}</div>
<div class="search-result-desc">Watch videos about ${query} from across the web. Our video search indexes content from all major platforms.</div>
</div>
`;
}
createExplorerWindow() {
const window = this.windowManager.createWindow({
title: 'File Explorer',
content: `
<div class="file-list">
<div class="file-item">
<div class="file-icon">📁</div>
<div class="file-name">Documents</div>
</div>
<div class="file-item">
<div class="file-icon">📁</div>
<div class="file-name">Pictures</div>
</div>
<div class="file-item">
<div class="file-icon">📁</div>
<div class="file-name">Downloads</div>
</div>
<div class="file-item">
<div class="file-icon">📄</div>
<div class="file-name">notes.txt</div>
</div>
<div class="file-item">
<div class="file-icon">📄</div>
<div class="file-name">config.cfg</div>
</div>
<div class="file-item">
<div class="file-icon">📁</div>
<div class="file-name">Projects</div>
</div>
<div class="file-item">
<div class="file-icon">📁</div>
<div class="file-name">Music</div>
</div>
<div class="file-item">
<div class="file-icon">📁</div>
<div class="file-name">Videos</div>
</div>
</div>
`,
width: 600,
height: 400
});
}
createAboutWindow() {
this.windowManager.createWindow({
title: 'About zewpolOS',
content: `
<div style="text-align: center; margin-bottom: 20px;">
<h2>zewpolOS</h2>
<p>Version 2.0</p>
</div>
<p>zewpolOS is the operating system developed by zewpol search engine to provide a seamless integration between web services and local computing.</p>
<p>© 2023 zewpol Technologies. All rights reserved.</p>
<div style="margin-top: 20px; font-size: 12px; color: #aaa;">
<p>This is a simulation of zewpolOS running in your browser.</p>
</div>
`,
width: 400,
height: 300
});
}
createWelcomeWindow() {
this.windowManager.createWindow({
title: 'Welcome to zewpolOS',
content: `
<div style="text-align: center; padding: 20px;">
<h2>Welcome to zewpolOS</h2>
<p style="margin: 15px 0;">Your integrated search and computing environment</p>
<button id="quick-search" style="padding: 8px 16px; background: #4d9be6; border: none; border-radius: 4px; color: white; cursor: pointer;">Start Searching</button>
<p style="margin-top: 20px; font-size: 12px; color: #aaa;">Click the Z button in the taskbar to explore more features</p>
</div>
`,
width: 400,
height: 250
}).querySelector('#quick-search').addEventListener('click', () => {
this.createSearchWindow();
});
}
}
// Main OS initialization
document.addEventListener('DOMContentLoaded', () => {
const windowManager = new WindowManager();
const appManager = new ApplicationManager(windowManager);
// Update clock
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}`;
}
setInterval(updateClock, 1000);
updateClock();
// Start menu toggle
document.getElementById('start-button').addEventListener('click', (e) => {
const menu = document.getElementById('start-menu');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
e.stopPropagation(); // Prevent immediate close
});
// Close menu when clicking elsewhere
document.addEventListener('click', () => {
document.getElementById('start-menu').style.display = 'none';
});
// Start menu items
document.getElementById('start-search').addEventListener('click', () => {
appManager.createSearchWindow();
});
document.getElementById('start-explorer').addEventListener('click', () => {
appManager.createExplorerWindow();
});
document.getElementById('start-about').addEventListener('click', () => {
appManager.createAboutWindow();
});
// Taskbar buttons
document.getElementById('search-button').addEventListener('click', () => {
appManager.createSearchWindow();
});
document.getElementById('explorer-button').addEventListener('click', () => {
appManager.createExplorerWindow();
});
// Create welcome window on startup
appManager.createWelcomeWindow();
});
</script>
</body>
</html>
Save the HTML file in a .txtFile
Apps included
The apps included include:
- File explorer
- About
- Zewpol search
- Settings
To get it here is the link: https://zewpolos.playcode.io
Type Z to see what happens
Thank you for watching!
Top comments (1)
NEW! version 2.1 released and it looks very different from the old version, so if you are running ZewpolOS, you might see a change. This version has different code, so if you want version 2.1, then do not copy the code
Some comments may only be visible to logged-in visitors. Sign in to view all comments.