Skip to content

feat(examples): add advanced window, browser profiles, error handling… #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jinzhongjia merged 9 commits into from
Aug 24, 2025
Merged

feat(examples): add advanced window, browser profiles, error handling… #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
05f7396
feat(examples): add advanced window, browser profiles, error handling…
jinzhongjia Aug 7, 2025
c7380f8
Merge branch 'main' into more_example
jinzhongjia Aug 13, 2025
72d5c81
fix(examples): improve ArrayList compatibility for Zig 0.16+
jinzhongjia Aug 23, 2025
28ee66c
chore(ci): add Zig 0.15.1 to workflow matrix
jinzhongjia Aug 23, 2025
800d575
fix(event_handling): improve Zig version compatibility checks
jinzhongjia Aug 24, 2025
86047f1
fix(examples): improve advanced window controls and icon handling
jinzhongjia Aug 24, 2025
34fc72a
fix(examples): add missing webui.js script to browser_profiles
jinzhongjia Aug 24, 2025
5d8fecd
fix(examples): remove error handling and secure communication demos
jinzhongjia Aug 24, 2025
de7ef74
fix(examples): remove browser profiles demo
jinzhongjia Aug 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
strategy:
matrix:
os: [ubuntu-latest, macos-latest, windows-latest]
version: [0.14.0, ""]
version: [0.14.0, 0.15.1, ""]
fail-fast: false
runs-on: ${{ matrix.os }}
steps:
Expand Down
4 changes: 2 additions & 2 deletions build.zig.zon
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
.minimum_zig_version = "0.14.0",
.dependencies = .{
.webui = .{
.hash = "webui-2.5.0-beta.4-pxqD5UtONwCfX1N9d0zUHHT3igVMHYd6KnI87tg0vyA7",
.url = "https://github.com/webui-dev/webui/archive/897a4406e5e6bdff135a48848343b3b0b983fa75.tar.gz",
.hash = "webui-2.5.0-beta.4-pxqD5ahSNwAE_vnS170oThHZ3blPcHQ85Ut2XHf65f1u",
.url = "https://github.com/webui-dev/webui/archive/dcc776a0f6bdf244d0024042253ebd194271ac9b.tar.gz",
},
},
.paths = .{
Expand Down
271 changes: 271 additions & 0 deletions examples/advanced_window/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="/webui.js"></script>
<title>Advanced Window Controls</title>
<style>
:root {
--primary-color: #5e35b1;
--secondary-color: #7e57c2;
--background: #f5f5f5;
--text-color: #333;
}

@media (prefers-contrast: high) {
:root {
--primary-color: #000;
--secondary-color: #333;
--background: #fff;
--text-color: #000;
}
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background: var(--background);
color: var(--text-color);
}

h1 {
color: var(--primary-color);
text-align: center;
font-size: 2.5em;
margin-bottom: 30px;
}

.control-panel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}

.control-section {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border: 2px solid transparent;
transition: all 0.3s;
}

.control-section:hover {
border-color: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

h2 {
color: var(--secondary-color);
margin-top: 0;
font-size: 1.3em;
}

button {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
margin: 5px;
transition: all 0.3s;
}

button:hover {
background: var(--secondary-color);
transform: scale(1.05);
}

button:active {
transform: scale(0.95);
}

input[type="number"], input[type="text"] {
padding: 8px;
border: 2px solid #ddd;
border-radius: 5px;
margin: 5px;
width: 80px;
transition: border-color 0.3s;
}

input[type="text"] {
width: 200px;
}

input:focus {
outline: none;
border-color: var(--secondary-color);
}

.output {
background: #f0f0f0;
padding: 15px;
border-radius: 5px;
margin-top: 10px;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
min-height: 50px;
border-left: 4px solid var(--primary-color);
}

.danger-zone {
background: #ffebee;
border: 2px solid #ef5350;
}

.danger-zone button {
background: #ef5350;
}

.danger-zone button:hover {
background: #c62828;
}
</style>
</head>
<body>
<h1>🪟 Advanced Window Controls</h1>

<div class="control-panel">
<div class="control-section">
<h2>Window Position</h2>
<button onclick="centerWindow()">Center Window</button>
<br><br>
<input type="number" id="moveX" placeholder="X" value="200">
<input type="number" id="moveY" placeholder="Y" value="200">
<button onclick="moveWindow()">Move Window</button>
</div>

<div class="control-section">
<h2>Window Size</h2>
<input type="number" id="width" placeholder="Width" value="800">
<input type="number" id="height" placeholder="Height" value="600">
<button onclick="resizeWindow()">Resize Window</button>
<p style="font-size: 12px; color: #666;">Min size: 640x480</p>
</div>

<div class="control-section">
<h2>Window Visibility</h2>
<button onclick="toggleHide(true)">Hide Window</button>
<button onclick="toggleHide(false)">Show Window</button>
<p style="font-size: 12px; color: #666;">Note: Hide may not work after window is shown</p>
</div>

<div class="control-section">
<h2>MIME Type Detection</h2>
<input type="text" id="filename" placeholder="Enter filename" value="test.html">
<button onclick="getMimeType()">Get MIME Type</button>
<div id="mimeOutput" class="output">Enter a filename to get its MIME type</div>
</div>

<div class="control-section">
<h2>Port Information</h2>
<button onclick="getPortInfo()">Get Port Info</button>
<div id="portOutput" class="output">Click to get port information</div>
</div>

<div class="control-section">
<h2>Process Information</h2>
<button onclick="getProcessInfo()">Get Process Info</button>
<div id="processOutput" class="output">Click to get process information</div>
</div>

<div class="control-section danger-zone">
<h2>⚠️ Danger Zone</h2>
<button onclick="destroyWindow()">Destroy Window</button>
<p style="font-size: 12px; color: #c62828;">This will close and destroy the window!</p>
</div>
</div>

<script>
async function centerWindow() {
const result = await center_window();
showNotification(result);
}

async function toggleHide(hide) {
const result = await toggle_hide(hide);
showNotification(result);
}

async function resizeWindow() {
const width = parseInt(document.getElementById('width').value);
const height = parseInt(document.getElementById('height').value);
const result = await resize_window(width, height);
showNotification(result);
}

async function moveWindow() {
const x = parseInt(document.getElementById('moveX').value);
const y = parseInt(document.getElementById('moveY').value);
const result = await move_window(x, y);
showNotification(result);
}

async function getMimeType() {
const filename = document.getElementById('filename').value;
const mime = await get_mime(filename);
document.getElementById('mimeOutput').textContent = `MIME type for ${filename}: ${mime}`;
}

async function getPortInfo() {
const info = await get_port();
document.getElementById('portOutput').textContent = info;
}

async function getProcessInfo() {
const info = await get_process();
document.getElementById('processOutput').textContent = info;
}

async function destroyWindow() {
if (confirm('Are you sure you want to destroy this window?')) {
await destroy_window();
}
}

function showNotification(message) {
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: var(--primary-color);
color: white;
padding: 15px 20px;
border-radius: 5px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
animation: slideIn 0.3s ease;
z-index: 1000;
`;
notification.textContent = message;
document.body.appendChild(notification);

setTimeout(() => {
notification.style.animation = 'slideOut 0.3s ease';
setTimeout(() => notification.remove(), 300);
}, 2000);
}

// Add animations
const style = document.createElement('style');
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
Loading
Loading