mirror of
https://github.com/KeksPirates/SoftwareManager.git
synced 2026-08-03 17:39:42 +02:00
Convert docs to single-page tabs and update styles
Merge API and About pages into a single SPA-style index: removed docs/about.html and docs/api.html and moved their content into docs/index.html as tabbed sections (start, api, docs, notfound). Add client-side routing and history handling via a new script to support deep links and pushState, plus a Netlify-style docs/_redirects rule to serve index for all routes. Update styles in docs/main.css to target the new tab UI (.tab, .tablinks, .logo-text) and add styles for the 404 view. Minor markup and layout tweaks (images, buttons, response examples) to match the consolidated page.
This commit is contained in:
Vxrtrauter
@@ -0,0 +1 @@
|
|||||||
|
/* /index.html 200
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
<!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>
|
|
||||||
+150
-16
@@ -13,29 +13,111 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="logo">logo<img src=""></div>
|
<div class="logo-text">
|
||||||
<nav>
|
<h1>KeksPirates</h1>
|
||||||
<a href="/" class="btn active">Home</a>
|
</div>
|
||||||
<a href="/api" class="btn">API</a>
|
<nav class="tab">
|
||||||
<a href="/about" class="btn">About</a>
|
<a class="tablinks" onclick="openTab(event, 'start')" id="defaultOpen">Home</a>
|
||||||
|
<a class="tablinks" onclick="openTab(event, 'api')">API</a>
|
||||||
|
<a class="tablinks" onclick="openTab(event, 'docs')">Docs</a>
|
||||||
|
<!-- <a class="tablinks" onclick="openTab(event, 'notfound')">404</a> -->
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<main>
|
<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>
|
<div id="start" class="tabcontent">
|
||||||
<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 class="introduction-frame">
|
||||||
</div>
|
<div class="introduction-text inline-block">
|
||||||
<div class="introduction-image inline-block">
|
<h1 class="hometitle"><br><span style="color: #db65d5">SoftwareManager</span></h1>
|
||||||
<div class="softwaremanager-scene">
|
<p class="title_subtext">Simply search and download software from various sources</p>
|
||||||
<img class="softwaremanager-image" src="assets/softwaremanager/search_tab_rounded.png">
|
|
||||||
|
<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>
|
||||||
|
<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">
|
<img class="softwaremanager-image-2" src="assets/softwaremanager/search_tab_rounded.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="api" class="tabcontent">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="docs" class="tabcontent">
|
||||||
|
<h1 class="title"><span style="color: #db65d5">Docs</span></h1>
|
||||||
|
<br>
|
||||||
|
<p>Simplify searching & downloading</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="notfound" class="tabcontent">
|
||||||
|
<div class="notfound-frame">
|
||||||
|
<h1 class="notfound-title">404</h1>
|
||||||
|
<br>
|
||||||
|
<h1 class="notfound-subtext">(╯°□°)╯︵ ┻━┻</h1>
|
||||||
|
<a class="btn_big download" onclick="openTab(event, 'start')" style="cursor: pointer;">Go Home</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -45,6 +127,58 @@
|
|||||||
<small>KeksPirates - SoftwareManager</small>
|
<small>KeksPirates - SoftwareManager</small>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openTab(evt, tabName, pushToHistory = true) {
|
||||||
|
var i, tabcontent, tablinks;
|
||||||
|
|
||||||
|
tabcontent = document.getElementsByClassName("tabcontent");
|
||||||
|
for (i = 0; i < tabcontent.length; i++) {
|
||||||
|
tabcontent[i].style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
tablinks = document.getElementsByClassName("tablinks");
|
||||||
|
for (i = 0; i < tablinks.length; i++) {
|
||||||
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById(tabName).style.display = "block";
|
||||||
|
|
||||||
|
let activeButton = document.querySelector(`.tablinks[onclick*="${tabName}"]`);
|
||||||
|
if (activeButton) {
|
||||||
|
activeButton.className += " active";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pushToHistory) {
|
||||||
|
let path = "/";
|
||||||
|
if (tabName === 'api') path = "/api";
|
||||||
|
if (tabName === 'docs') path = "/docs";
|
||||||
|
|
||||||
|
history.pushState({ tab: tabName }, "", path);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('popstate', function(event) {
|
||||||
|
if (event.state && event.state.tab) {
|
||||||
|
openTab(null, event.state.tab, false);
|
||||||
|
} else {
|
||||||
|
openTab(null, 'start', false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
let currentPath = window.location.pathname;
|
||||||
|
|
||||||
|
if (currentPath === '/api') {
|
||||||
|
openTab(null, 'api', false);
|
||||||
|
} else if (currentPath === '/docs') {
|
||||||
|
openTab(null, 'docs', false);
|
||||||
|
} else {
|
||||||
|
history.replaceState({ tab: 'start' }, "", "/");
|
||||||
|
openTab(null, 'start', false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+39
-9
@@ -25,7 +25,7 @@ header {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a.btn {
|
.tab a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.4rem 0.8rem;
|
padding: 0.4rem 0.8rem;
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
@@ -35,24 +35,28 @@ nav a.btn {
|
|||||||
box-shadow: 0 0 6px 1px #dd06cb00;
|
box-shadow: 0 0 6px 1px #dd06cb00;
|
||||||
font-family: var(--main-font);
|
font-family: var(--main-font);
|
||||||
transition: background 0.5s, color 0.5s;
|
transition: background 0.5s, color 0.5s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a.btn:hover {
|
nav a:hover {
|
||||||
background: #db65d517;
|
background: #db65d517;
|
||||||
color: #ffd1fd;
|
color: #ffd1fd;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a.btn.active {
|
nav a.active {
|
||||||
background: #db65d55d;
|
background: #db65d55d;
|
||||||
color: #fdd2fc;
|
color: #fdd2fc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo img {
|
.logo-text h1 {
|
||||||
height: 55px;
|
font-family: var(--main-font);
|
||||||
width: auto;
|
font-size: 1.2rem;
|
||||||
padding: 0.20rem 0;
|
font-weight: 700;
|
||||||
margin-top: 1rem;
|
letter-spacing: -0.02em;
|
||||||
margin-left: -1rem;
|
background-image: linear-gradient(147deg, #da84d5, #db65d5);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@@ -295,6 +299,32 @@ pre.api-response {
|
|||||||
.json-boolean { color: #ffab4a; }
|
.json-boolean { color: #ffab4a; }
|
||||||
.json-integer { color: #66ff80; }
|
.json-integer { color: #66ff80; }
|
||||||
|
|
||||||
|
.notfound-frame {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 75vh;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notfound-title {
|
||||||
|
font-size: 4.0rem;
|
||||||
|
line-height: 4rem;
|
||||||
|
margin-top: 1.8rem;
|
||||||
|
background-image: linear-gradient(135deg, #c574c1, #b851b2);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notfound-subtext {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@media(max-width: 560px) {
|
@media(max-width: 560px) {
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|||||||
Reference in New Issue
Block a user