Frameless New UI Style

AlbertShown · AlbertShown · commit 34932859321e · 2025-10-29T18:35:22.000-04:00
diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@
 
 ![Screenshot](https://raw.githubusercontent.com/webui-dev/webui-logo/main/screenshot.png)
 
+![Screenshot](/examples/C/frameless/webui_frameless.png)
+
 </div>
 
 <div align="center">
diff --git a/examples/C/frameless/main.c b/examples/C/frameless/main.c
@@ -10,62 +10,86 @@ const char* html =
 "    <style>"
 "      * { margin: 0; padding: 0; box-sizing: border-box; }"
 "      html, body { height: 100%; width: 100%; overflow: hidden; background: transparent; }"
+"      #ui-container {"
+"        height: 100%;"
+"        width: 100%;"
+"        background: rgba(30, 30, 30, 0.95);"
+"        color: #f5f5f5;"
+"        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;"
+"        display: flex;"
+"        flex-direction: column;"
+"        border-radius: 10px;"
+"        backdrop-filter: blur(24px);"
+"        -webkit-backdrop-filter: blur(24px);"
+"        border: 1px solid rgba(255, 255, 255, 0.12);"
+"        overflow: hidden;"
+"      }"
 "      #titlebar {"
-"        height: 40px;"
-"        background: linear-gradient(to right, #2c3e50, #34495e);"
-"        color: white;"
+"        height: 48px;"
+"        background: rgba(0, 0, 0, 0.25);"
+"        -webkit-app-region: drag;"
+"        --webui-app-region: drag;"
 "        display: flex;"
 "        align-items: center;"
 "        justify-content: space-between;"
-"        padding: 0 15px;"
-"        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);"
-"        -webkit-app-region: drag;"
-"        --webui-app-region: drag;"
-"        font-family: Arial, sans-serif;"
+"        padding: 0 18px;"
+"        flex-shrink: 0;"
 "      }"
-"      #title { font-size: 16px; font-weight: bold; }"
-"      #buttons { -webkit-app-region: no-drag; }"
-"      .button {"
-"        display: inline-block;"
-"        width: 24px;"
-"        height: 24px;"
-"        margin-left: 8px;"
+"      #title { font-size: 15px; font-weight: 500; }"
+"      #buttons {"
+"        -webkit-app-region: no-drag;"
+"        display: flex;"
+"        gap: 12px;"
+"      }"
+"      #buttons span {"
+"        width: 14px;"
+"        height: 14px;"
 "        border-radius: 50%;"
-"        text-align: center;"
-"        line-height: 24px;"
 "        cursor: pointer;"
-"        transition: all 0.2s;"
+"        transition: all 0.15s ease-out;"
 "      }"
-"      .minimize { background: #f1c40f; }"
-"      .maximize { background: #2ecc71; }"
-"      .close { background: #e74c3c; }"
-"      .button:hover { filter: brightness(120%); }"
+"      #buttons span:hover { transform: scale(1.1); filter: brightness(1.15); }"
+"      .buttons span:active { transform: scale(0.9); filter: brightness(0.9); }"
+"      .close { background: #ff5f57; }"
+"      .minimize { background: #ffbd2e; }"
+"      /* .maximize { background: #28c940; } REMOVED */"
 "      #content {"
-"        height: calc(100% - 40px);"
-"        background: rgba(0, 0, 0, 0.7);"
+"        flex-grow: 1;"
 "        display: flex;"
+"        flex-direction: column;"
 "        align-items: center;"
 "        justify-content: center;"
+"        padding: 20px;"
+"        text-align: center;"
+"        overflow: auto;"
 "      }"
 "      #message {"
-"        color: white;"
-"        font-size: 32px;"
-"        font-family: Arial, sans-serif;"
-"        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);"
+"        font-size: 38px;"
+"        font-weight: 200;"
+"        letter-spacing: 0.5px;"
+"        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);"
+"      }"
+"      #sub-message {"
+"        font-size: 16px;"
+"        font-weight: 300;"
+"        color: rgba(240, 240, 240, 0.7);"
+"        margin-top: 12px;"
 "      }"
 "    </style>"
 "  </head>"
 "  <body>"
-"    <div id='titlebar'>"
-"      <span id='title'>WebUI Frameless Window</span>"
-"      <div id='buttons'>"
-"        <span class='button minimize' onclick='minimize()'>–</span>"
-// "     <span class='button maximize' onclick='maximize()'>□</span>"
-"        <span class='button close' onclick='close_win()'>✕</span>"
+"    <div id='ui-container'>"
+"      <div id='titlebar'>"
+"        <span id='title'>WebUI Frameless WebView Window</span>"
+"        <div id='buttons'>"
+"          <span class='button minimize' onclick='minimize()'></span>"
+"          <span class='button close' onclick='close_win()'></span>"
+"        </div>"
+"      </div>"
+"      <div id='content'>"
+"        <span id='message'>Welcome to Your WebUI App</span>"
+"        <span id='sub-message'>This is a stylish, frameless WebUI WebView window.</span>"
 "      </div>"
-"    </div>"
-"    <div id='content'>"
-"      <span id='message'>This is a WebUI frameless example</span>"
 "    </div>"
 "  </body>"
 "</html>";
diff --git a/examples/C/frameless/webui_frameless.png b/examples/C/frameless/webui_frameless.png
