feat: add (opus-generated) mobile layout (will all be replaced, temp change)

Add meta description and Android favicon
Add a meta description tag to improve SEO and provide a brief site summary, and add a 192x192 Android favicon link to support Android/home screen icons. This clarifies site metadata and improves mobile presentation.
2026-08-03 17:39:42 +02:00 · 2026-04-13 09:50:25 +02:00 · 2026-04-11 10:09:33 +02:00
2 changed files with 250 additions and 28 deletions
@@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Simply search and download software and games from various sources. Developed with ❤︎⁠ by KeksPirates.">
    <meta name="darkreader-lock">
    <link rel="stylesheet" href="main.css"/>
    <title>SoftwareManager - Simply search and download software from various sources</title>
@@ -10,6 +11,7 @@
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
@@ -42,7 +44,18 @@
            <a class="tablinks" onclick="openTab(event, 'docs')">Docs</a>
            <!-- <a class="tablinks" onclick="openTab(event, 'notfound')">404</a> -->
        </nav>
        <button class="hamburger" onclick="toggleMobileMenu()" aria-label="Toggle menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </header>
    <div class="mobile-nav-overlay" onclick="closeMobileMenu()"></div>
    <nav class="mobile-nav">
        <a class="mobile-tablinks" onclick="openTab(event, 'start'); closeMobileMenu();">Home</a>
        <a class="mobile-tablinks" onclick="openTab(event, 'api'); closeMobileMenu();">API</a>
        <a class="mobile-tablinks" onclick="openTab(event, 'docs'); closeMobileMenu();">Docs</a>
    </nav>
@@ -201,6 +214,30 @@
    </footer>
    <script>
    function toggleMobileMenu() {
        document.querySelector('.hamburger').classList.toggle('active');
        document.querySelector('.mobile-nav').classList.toggle('active');
        document.querySelector('.mobile-nav-overlay').classList.toggle('active');
        document.body.classList.toggle('menu-open');
    }
    function closeMobileMenu() {
        document.querySelector('.hamburger').classList.remove('active');
        document.querySelector('.mobile-nav').classList.remove('active');
        document.querySelector('.mobile-nav-overlay').classList.remove('active');
        document.body.classList.remove('menu-open');
    }
    function syncMobileActiveTab(tabName) {
        document.querySelectorAll('.mobile-tablinks').forEach(function(link) {
            link.classList.remove('active');
            if (link.textContent.trim().toLowerCase() === tabName ||
                (tabName === 'start' && link.textContent.trim().toLowerCase() === 'home')) {
                link.classList.add('active');
            }
        });
    }
    function openTab(evt, tabName, pushToHistory = true) {
        var i, tabcontent, tablinks;
@@ -15,6 +15,10 @@ body {
    opacity: 1 !important;
 }
 body.menu-open {
    overflow: hidden;
 }
 header {
    height: 65px;
    background: #1a1c1d;
@@ -198,6 +202,93 @@ main .introduction-text p {
    display: none;
 }
 /* Hamburger button - hidden on desktop */
 .hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
    flex-direction: column;
    gap: 5px;
 }
 .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fafafa;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
 }
 .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
 }
 .hamburger.active span:nth-child(2) {
    opacity: 0;
 }
 .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
 }
 /* Mobile nav overlay */
 .mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s;
 }
 .mobile-nav-overlay.active {
    display: block;
    opacity: 1;
 }
 /* Mobile slide-in nav */
 .mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: #1a1c1d;
    z-index: 1000;
    flex-direction: column;
    padding: 5rem 1.5rem 2rem;
    transition: right 0.3s ease;
    overflow-y: auto;
 }
 .mobile-nav.active {
    right: 0;
 }
 .mobile-nav a {
    display: block;
    padding: 1rem 1rem;
    color: #fafafa;
    text-decoration: none;
    font-family: var(--main-font);
    font-size: 1.1rem;
    border-radius: 10px;
    transition: background 0.3s;
    cursor: pointer;
 }
 .mobile-nav a:hover,
 .mobile-nav a.active {
    background: #db65d51a;
    color: #fdd2fc;
 }
 footer {
    color: #585858;
    font-family: var(--main-font);
@@ -379,42 +470,60 @@ pre.api-response {
 }
-@media(max-width: 560px) {
+@media(max-width: 768px) {
    /* Show hamburger, hide desktop nav */
    .hamburger {
        display: flex;
    }
    .mobile-nav {
        display: flex;
    }
    .tab {
        display: none;
    }
    header {
        padding: 1rem;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    main {
-        margin: 0rem;
+        margin: 0;
        padding: 1rem;
    }
-    main .introduction {
+    main .introduction-frame {
-        display: block;
+        text-align: center;
        margin-top: -1rem;
        padding: 1rem;
    }
    main .introduction-text {
        position: relative;
        text-align: center;
-        margin-top: 0rem;
+        margin-top: 0;
        margin-right: 0;
        z-index: 2;
        user-select: none;
-        margin-right: 0rem;
+        padding-bottom: 1.5rem;
        padding-bottom: 2rem;
    }
    main h1.hometitle {
-        font-size: 2rem;
+        font-size: 2.2rem;
-        line-height: 2.2rem;
+        line-height: 2.4rem;
-        text-align: left;
+        text-align: center;
    }
    main h1.hometitle br {
        display: none;
    }
    main p.title_subtext {
-        text-align: left;
+        text-align: center;
        font-size: 1rem;
    }
    .introduction-image {
@@ -422,25 +531,103 @@ pre.api-response {
    }
    main .btn_big {
-        display: block;
+        display: inline-flex;
-        margin: 1rem auto;
+        margin-top: 1rem;
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.4rem;
    }
-    main .btn_big.github{
+    main .btn_big.github {
-        margin-right: 0rem;
+        margin-right: 0;
    }
    /* Responsive tables / grids */
    .endpoint-parameters-header {
        display: none;
    }
    .endpoint-parameters-content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem 0;
        border-top: 1px solid #ffffff0a;
    }
    .endpoint-parameters-content p {
        font-size: 0.95rem;
    }
    .endpoint-parameters-content p::before {
        font-size: 0.75rem;
        color: #8f8d8d;
        display: block;
        margin-bottom: 0.1rem;
    }
    .docs-grid .endpoint-parameters-content {
        grid-template-columns: 1fr;
    }
    .docs-grid .endpoint-parameters-content p:nth-child(1)::before { content: "Source"; }
    .docs-grid .endpoint-parameters-content p:nth-child(2)::before { content: "Category"; }
    .docs-grid .endpoint-parameters-content p:nth-child(3)::before { content: "Notes"; }
    /* API page: stack param fields with labels */
    #api .endpoint-parameters-content p:nth-child(1)::before { content: "Parameter"; }
    #api .endpoint-parameters-content p:nth-child(2)::before { content: "Type"; }
    #api .endpoint-parameters-content p:nth-child(3)::before { content: "Required"; }
    #api .endpoint-parameters-content p:nth-child(4)::before { content: "Description"; }
    .endpoint-type-container {
        word-break: break-all;
    }
    pre.api-response {
        font-size: 0.8rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .api-url,
    .endpoint-url,
    .request-type-subcontainer {
        word-break: break-all;
    }
    .title {
        font-size: 1.5rem;
    }
    .base-information-frame {
        padding: 0.75rem;
    }
    footer {
        position: relative;
        padding: 1rem;
    }
    .notfound-title {
        font-size: 3rem;
        line-height: 3rem;
    }
    .notfound-subtext {
        font-size: 1.4rem;
    }
 }
-@media (min-width: 561px) and (max-width: 1393px) {
+@media (min-width: 769px) and (max-width: 1393px) {
    header {
        padding: 1rem;
    }
    main {
-        margin: 0rem;
+        margin: 0;
-        padding: 1rem;
+        padding: 1.5rem;
    }
    main .introduction {
@@ -454,7 +641,7 @@ pre.api-response {
    main .introduction-text {
        position: relative;
        text-align: center;
-        margin-top: 0rem;
+        margin-top: 0;
        z-index: 2;
        user-select: none;
        margin-left: 2rem;
@@ -463,8 +650,8 @@ pre.api-response {
    }
    main h1.hometitle {
-        font-size: 2rem;
+        font-size: 2.5rem;
-        line-height: 2.2rem;
+        line-height: 2.7rem;
        text-align: center;
    }
@@ -491,8 +678,6 @@ pre.api-response {
    }
    main .introduction .inline-block {
-    display: block;
+        display: block;
    }
 }
Author	SHA1	Message	Date
Vxrtrauter	2d8a1d76bc	feat: add (opus-generated) mobile layout (will all be replaced, temp change)	2026-04-13 09:50:25 +02:00
Vxrtrauter	b2bc97a6af	Add meta description and Android favicon Add a meta description tag to improve SEO and provide a brief site summary, and add a 192x192 Android favicon link to support Android/home screen icons. This clarifies site metadata and improves mobile presentation.	2026-04-11 10:09:33 +02:00