add initial website structure

2026-08-03 17:39:42 +02:00 · 2026-03-23 21:36:21 +01:00
parent d4b7067484
commit 5fe3502bd6
10 changed files with 591 additions and 0 deletions
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="main.css"/>
+    <title>SoftwareManager - About</title>
+    <!-- <link rel="icon" type="image/x-icon" href="/assets/icons/favicon.ico"> -->
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
+</head>
+
+
+
+<body>
+    <header>
+        <div class="logo">logo<img src=""></div>
+        <nav>
+            <a href="/" class="btn">Home</a>
+            <a href="/api" class="btn">API</a>
+            <a href="/about" class="btn active">About</a>
+        </nav>
+    </header>
+
+    <main>
+        <h1 class="title"><span style="color: #db65d5">About us</span></h1>
+        <br>
+        <p>Simplify searching & downloading</p>
+    </main>
+
+    <footer>
+        <small>KeksPirates - SoftwareManager</small>
+    </footer>
+
+
+
+</body>
+</html>
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="main.css"/>
+    <title>SoftwareManager - API Documentation</title>
+    <!-- <link rel="icon" type="image/x-icon" href="/assets/icons/favicon.ico"> -->
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
+</head>
+
+
+
+<body>
+    <header>
+        <div class="logo">logo<img src=""></div>
+        <nav>
+            <a href="/" class="btn">Home</a>
+            <a href="/api" class="btn active">API</a>
+            <a href="/about" class="btn">About</a>
+        </nav>
+    </header>
+
+    <main>
+        <h1 class="title"><span class="json-string">API Documentation</span> </h1>
+        <p>This API allows you to search for posts on rutracker.</p>
+
+        <div class="base-information-frame">
+            <h3>API URL</h3>
+            <p class="api-url">https://api.michijackson.xyz/</p>
+            <br>
+            <h3>Endpoint</h3>
+            <p class="endpoint-url"><span class="request-type">GET</span><span class="endpoint-type-container">/search?q=<span class="endpoint-parameter">{query}</span></span></p>
+            
+            <div class="endpoint-parameters-container">
+                <div class="endpoint-parameters-header">
+                    <p>Parameter</p>
+                    <p>Type</p>
+                    <p>Required</p>
+                    <p>Description</p>
+                </div>
+                <div class="endpoint-parameters-content">
+                    <p class="endpoint-parameter">q</p>
+                    <p class="endpoint-type">String</p>
+                    <p class="endpoint-required">True</p>
+                    <p class="endpoint-description">Search query</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="request-frame">
+            <h2>Example Request</h2>
+            <div class="request-type-container">
+                <p><span class="request-type">GET</span> <span class="request-type-subcontainer">api.michijackson.xyz/search?q=keks</span></p>
+            </div>
+        </div>
+        
+
+        <div class="api-response-frame">
+            <h3>Response</h3>
+        
+        <pre class="api-response"><span class="json-punctuation">{</span>
+  "cached"<span class="json-punctuation">:</span> <span class="json-boolean">false</span><span class="json-punctuation">,</span>
+  "count"<span class="json-punctuation">:</span> <span class="json-integer">1</span><span class="json-punctuation">,</span>
+  "data"<span class="json-punctuation">:</span> <span class="json-punctuation">[</span>
+    <span class="json-punctuation">{</span>
+      "author"<span class="json-punctuation">:</span> <span class="json-string">"Viterrson"</span><span class="json-punctuation">,</span>
+      "id"<span class="json-punctuation">:</span> <span class="json-integer">1</span><span class="json-punctuation">,</span>
+      "leechers"<span class="json-punctuation">:</span> <span class="json-integer">0</span><span class="json-punctuation">,</span>
+      "seeders"<span class="json-punctuation">:</span> <span class="json-integer">3</span><span class="json-punctuation">,</span>
+      "title"<span class="json-punctuation">:</span> <span class="json-string">"(Hard - Rock) Keks - Keks - 1983, MP3, 320 kbps"</span><span class="json-punctuation">,</span>
+      "url"<span class="json-punctuation">:</span> <span class="json-string">"https://rutracker.org/forum/viewtopic.php?t=3835559"</span>
+    <span class="json-punctuation">}</span>
+  <span class="json-punctuation">],</span>
+  "query"<span class="json-punctuation">:</span> <span class="json-string">"keks"</span><span class="json-punctuation">,</span>
+  "success"<span class="json-punctuation">:</span> <span class="json-boolean">true</span>
+<span class="json-punctuation">}</span></pre>
+        </div>
+
+    </main>
+
+    <footer>
+        <small>KeksPirates - SoftwareManager</small>
+    </footer>
+
+
+
+</body>
+</html>
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="main.css"/>
+    <title>SoftwareManager - Main</title>
+    <!-- <link rel="icon" type="image/x-icon" href="/assets/icons/favicon.ico"> -->
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
+</head>
+
+
+
+<body>
+    <header>
+        <div class="logo">logo<img src=""></div>
+        <nav>
+            <a href="/" class="btn active">Home</a>
+            <a href="/api" class="btn">API</a>
+            <a href="/about" class="btn">About</a>
+        </nav>
+    </header>
+
+    <main>
+        <div class="introduction-frame">
+            <div class="introduction-text inline-block">
+                <h1 class="hometitle"><br><span style="color: #db65d5">SoftwareManager</span></h1>
+                <p class="title_subtext">Simply search and download software from various sources</p>
+
+                <a href="https://github.com/KeksPirates/SoftwareManager" class="btn_big github"><img class="github-button" src="assets/icons/GitHub_Invertocat_White.png">GitHub</a>
+                <a href="https://github.com/KeksPirates/SoftwareManager/releases/latest" class="btn_big download"><img class="download-button" src="assets/icons/download_icon_black.png">Download</a>
+            </div>
+            <div class="introduction-image inline-block">
+                <div class="softwaremanager-scene">
+                    <img class="softwaremanager-image" src="assets/softwaremanager/search_tab_rounded.png">
+                </div>
+
+                <img class="softwaremanager-image-2" src="assets/softwaremanager/search_tab_rounded.png">
+            </div>
+        </div>
+
+    </main>
+
+    <footer>
+        <small>KeksPirates - SoftwareManager</small>
+    </footer>
+
+
+
+</body>
+</html>
@@ -0,0 +1,414 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+    --main-font: "Manrope", sans-serif;
+}
+
+
+body {
+    font-family: system-ui, sans-serif;
+    line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: #0f1011;
+}
+
+header {
+    height: 65px;
+    background: #1a1c1d;
+    color: #fff;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+}
+
+nav a.btn {
+    display: inline-block;
+    padding: 0.4rem 0.8rem;
+    margin-left: 0.5rem;
+    text-decoration: none;
+    color: #fafafa;
+    border-radius: 8px;
+    box-shadow: 0 0 6px 1px #dd06cb00;
+    font-family: var(--main-font);
+    transition: background 0.5s, color 0.5s;
+}
+
+nav a.btn:hover {
+    background: #db65d517;
+    color: #ffd1fd;
+}
+
+nav a.btn.active {
+    background: #db65d55d;
+    color: #fdd2fc;
+}
+
+.logo img {
+    height: 55px;
+    width: auto;
+    padding: 0.20rem 0;
+    margin-top: 1rem;
+    margin-left: -1rem;
+}
+
+main {
+    font-family: var(--main-font);
+    color: #fafafa;
+    padding: 3rem;
+}
+
+main h1.hometitle {
+    font-size: 4.0rem;
+    line-height: 4rem;
+    margin-top: 1.8rem;
+}
+
+main p.title_subtext {
+    margin-top: 0.5rem;
+    font-size: 1.2rem;
+}
+
+.softwaremanager-scene {
+    perspective: 700px;
+    width: fit-content;
+}
+
+main img.softwaremanager-image {
+    margin-top: 0rem;
+    user-select: none;
+    transform: rotateX(8deg) rotateY(-12deg) rotateZ(2deg) scale(0.85) translateX(-1rem);
+    box-shadow: 15px 20px 15px #0f0f0f;
+
+    /* transition: transform 0.4s ease-out; */
+}
+
+/* main img.softwaremanager-image:hover {
+    transform: rotateX(8deg) rotateY(-13deg) rotateZ(2deg) scale(0.86) translateX(-1rem);
+} */
+
+/* transform: rotateX(8443deg) rotateY(-14234233deg) rotateZ(2deg) scale(4.863) translateX(-133rem); lmao */
+
+main .introduction-text {
+    position: relative;
+    text-align: right;
+    margin-right: -3rem;
+    margin-top: 3rem;
+    z-index: 2;
+    user-select: none;
+}
+
+.introduction-image {
+    position: relative;
+    z-index: 1;
+}
+
+.inline-block {
+    display: inline-block;
+    vertical-align: top;
+}
+
+main .introduction-frame {
+    text-align: center;
+    position: relative;
+    font-size: 0
+}
+
+main .introduction-frame > * {
+    font-size: 1rem;
+}
+
+
+main .btn_big {
+    font-family: var(--main-font);
+    background: #1a1c1d;
+    padding: 0.7rem 1.4rem;  
+    margin-top: 1.5rem;
+    border: none;
+    border-radius: 10px;
+    align-items: center;
+    display: inline-flex;
+    color: #fafafa;
+    text-decoration: none;
+    font-weight: bold;
+    user-select: none;
+}
+
+main .btn_big img {
+    height: 20px;
+    width: auto;
+    margin-right: 0.5rem;
+}
+
+main .btn_big.github {
+    margin-right: 1rem;
+    transition: background 0.5s;
+}
+
+main .btn_big.github:hover {
+    background: #18191a;
+}
+
+main .btn_big.download {
+    background: #ca62c5;
+    color: #0f1011;
+    transition: background 0.5s;
+}
+
+main .btn_big.download:hover {
+    background: #b551b0;
+}
+
+main .introduction-text h1,
+main .introduction-text p {
+    user-select: text;
+}
+
+
+.softwaremanager-image-2 {
+    display: none;
+}
+
+footer {
+    color: #585858;
+    font-family: var(--main-font);
+    align-self: center;
+    padding: 1rem;
+    position: fixed;
+    bottom: 0;
+    user-select: none;
+}
+
+::selection {
+    background: #db65d528;
+}
+
+.base-information-frame {
+        background: #1a1c1d;
+        padding: 1rem;
+        border-radius: 10px;
+        margin-top: 1rem;
+}
+.program-preview {
+    box-sizing: inherit;
+    background: #1a1c1d;
+    width: auto;
+    height: 20rem;
+    border-radius: 10px;
+}
+
+pre.api-response {
+    font-family: monospace;
+    background: #151718;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+}
+
+.api-response-frame {
+        background: #1a1c1d;
+        padding: 1rem;
+        border-radius: 10px;
+        margin-top: 1rem;
+}
+
+.request-type {
+    color: #fdd2fc;
+    padding: 1px 6px;
+    background: #db65d55d;
+    border-radius: 6px;
+}
+
+.request-type-container {
+    background: #1a1c1d;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+}
+
+.endpoint-type-container {
+    background: #151718;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+}
+
+.request-type-subcontainer {
+    background: #1a1c1d;
+    padding: 0.5rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+}
+
+
+.api-url {
+    background: #151718;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+}
+
+.endpoint-url {
+    background: #151718;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+    color: #8f8d8d
+}
+
+.endpoint-parameters-container {
+    background: #151718;
+    padding: 1rem;
+    border-radius: 10px;
+    margin-top: 1rem;
+    color: #8f8d8d;
+}
+
+.endpoint-parameters-header {
+    margin-top: -0.3rem;
+    margin-bottom: 0.9rem;
+    font-size: 0.9rem;
+    grid-template-columns: 9rem 9rem 9rem 9rem;
+    display: grid;
+}
+
+.endpoint-parameters-content {
+    font-size: 1rem;
+    grid-template-columns: 9rem 9rem 9rem 9rem;
+    display: grid;
+}
+
+.request-frame {
+    margin-top: 1rem;
+}
+
+.endpoint-parameter { color: #ffab4a; }
+.endpoint-type { color: #db65d5 }
+.endpoint-required { color: #66ff80}
+.endpoint-description { color: #b1b0b0 }
+
+.json-punctuation { color: #5c5c5c; }
+.json-string { color: #db65d5; }
+.json-boolean { color: #ffab4a; }
+.json-integer { color: #66ff80; }
+
+@media(max-width: 560px) {
+
+    header {
+        padding: 1rem;
+    }
+
+    main {
+        margin: 0rem;
+        padding: 1rem;
+        
+    }
+
+    main .introduction {
+        display: block;
+        margin-top: -1rem;
+        padding: 1rem;
+    }
+
+    main .introduction-text {
+        position: relative;
+        text-align: center;
+        margin-top: 0rem;
+        z-index: 2;
+        user-select: none;
+        margin-right: 0rem;
+        padding-bottom: 2rem;
+    }
+
+    main h1.hometitle {
+        font-size: 2rem;
+        line-height: 2.2rem;
+        text-align: left;
+    }
+
+    main p.title_subtext {
+        text-align: left;
+    }
+
+    .introduction-image {
+        display: none;
+    }
+
+    main .btn_big {
+        display: block;
+        margin: 1rem auto;
+    }
+
+    main .btn_big.github{
+        margin-right: 0rem;
+    }
+}
+
+@media (min-width: 561px) and (max-width: 1393px) {
+
+    header {
+        padding: 1rem;
+    }
+
+    main {
+        margin: 0rem;
+        padding: 1rem;
+        
+    }
+
+    main .introduction {
+        display: flex;
+        margin-top: -1rem;
+        padding: 1rem;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    main .introduction-text {
+        position: relative;
+        text-align: center;
+        margin-top: 0rem;
+        z-index: 2;
+        user-select: none;
+        margin-left: 2rem;
+        margin-right: 2rem;
+        padding-bottom: 2rem;
+    }
+
+    main h1.hometitle {
+        font-size: 2rem;
+        line-height: 2.2rem;
+        text-align: center;
+    }
+
+    main p.title_subtext {
+        text-align: center;
+    }
+
+    .softwaremanager-image {
+        display: none;
+    }
+
+    .softwaremanager-image-2 {
+        display: block;
+        width: 100%;
+        height: auto;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .introduction-image {
+        width: 100%;
+        max-width: 50rem;
+        user-select: none;
+    }
+
+    main .introduction .inline-block {
+    display: block;
+    }
+
+    
+}