Hide native title bar, add custom frameless window controls

- Remove WS_CAPTION via SetWindowLong to hide native Windows title bar
- Keep WS_THICKFRAME for window resizing from edges
- Add custom Win11-style window control buttons (minimize, maximize, close)
- Close button turns red on hover (#c42b1c) matching Windows 11
- Title bar is draggable via -webkit-app-region: drag
- Bind windowMinimize/windowMaximize/windowClose Go functions to JS
- Center system status indicator in title bar

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
taqin
2026-04-12 21:20:43 +07:00
parent 70c46277c4
commit 8bf4c2ffdb
3 changed files with 110 additions and 13 deletions

View File

@@ -8,8 +8,8 @@
</head>
<body>
<div class="app">
<!-- Title Bar -->
<div class="titlebar">
<!-- Custom Title Bar (frameless window) -->
<div class="titlebar" id="titlebar">
<div class="titlebar-left">
<img src="icon-app.png" class="app-logo-img" alt="">
<div class="app-title">
@@ -17,12 +17,23 @@
<span class="app-edition">PRO</span>
</div>
</div>
<div class="titlebar-right">
<div class="titlebar-center">
<div class="sys-status">
<div class="status-led"></div>
<span>System Protected</span>
</div>
</div>
<div class="titlebar-controls">
<button class="win-btn win-minimize" onclick="windowMinimize()" title="Minimize">
<svg width="10" height="1" viewBox="0 0 10 1"><rect width="10" height="1" fill="currentColor"/></svg>
</button>
<button class="win-btn win-maximize" onclick="windowMaximize()" title="Maximize">
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" stroke-width="1"/></svg>
</button>
<button class="win-btn win-close" onclick="windowClose()" title="Close">
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.2"/><line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.2"/></svg>
</button>
</div>
</div>
<!-- Toolbar Tabs -->