mirror of
https://github.com/Gabi-Zar/Silk-Fly-Launcher.git
synced 2026-04-17 05:26:04 +02:00
341 lines
19 KiB
HTML
341 lines
19 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Silk Fly Launcher</title>
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' https://*.nexusmods.com https://*.thunderstore.io" />
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<video autoplay muted loop class="background-video" id="background-video" src="assets/background/Silksong.mp4" type="video/mp4"></video>
|
||
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="logo" onclick="navigate('home')">
|
||
<img src="assets/logo.png" alt="Silk Fly Launcher Logo" class="logo-img" />
|
||
<h5 class="logo-title">Silk Fly Launcher</h5>
|
||
</div>
|
||
|
||
<div class="sidebar-content">
|
||
<nav class="nav">
|
||
<div class="nav-section">
|
||
<span class="nav-title">Execute Silksong</span>
|
||
<button class="horizontal-div" onclick="launch('vanilla')">
|
||
<img src="assets/icons/start-vanilla.svg" class="icons" />
|
||
Run Vanilla
|
||
</button>
|
||
<button class="horizontal-div" onclick="launch('modded')">
|
||
<img src="assets/icons/start-modded.svg" class="icons" />
|
||
Run Modded
|
||
</button>
|
||
</div>
|
||
|
||
<div class="nav-section">
|
||
<span class="nav-title">Mods</span>
|
||
<button class="horizontal-div" onclick="navigate('mods-installed')">
|
||
<img src="assets/icons/folder.svg" class="icons" />
|
||
Installed
|
||
</button>
|
||
<button class="horizontal-div" onclick="navigate('mods-thunderstore')">
|
||
<img src="assets/icons/thunderstore.svg" class="icons" />
|
||
Thunderstore
|
||
</button>
|
||
<button class="horizontal-div" onclick="navigate('mods-online')">
|
||
<img src="assets/icons/nexus-mods.svg" class="icons" />
|
||
Nexus
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<nav class="nav">
|
||
<button class="horizontal-div" onclick="navigate('general-settings')">
|
||
<img src="assets/icons/settings.svg" class="icons" />
|
||
Settings
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main content -->
|
||
<main class="content">
|
||
<div class="banner-div" id="banner-div">
|
||
<p id="banner-text"></p>
|
||
<button class="default-button square-button" onclick="hideBanner()">X</button>
|
||
</div>
|
||
<h1 id="title">Silk Fly Launcher</h1>
|
||
<div class="view" id="view"></div>
|
||
<div class="toast-div" id="toast-div"></div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Template -->
|
||
<template id="home-template">
|
||
<h2>About</h2>
|
||
<div class="horizontal-div separated-div">
|
||
<div class="horizontal-div">
|
||
<img src="assets/logo.png" alt="Silk Fly Launcher Logo" class="big-logo-img" />
|
||
<div>
|
||
<h3>Silk Fly Launcher</h3>
|
||
<p class="transparent-text" id="version-text"></p>
|
||
</div>
|
||
</div>
|
||
<div class="horizontal-div">
|
||
<img onclick="electronAPI.openExternalLink('https://github.com/Gabi-Zar/Silk-Fly-Launcher')" src="assets/icons/github.svg" alt="Github logo" class="logo-img" />
|
||
</div>
|
||
</div>
|
||
<br />
|
||
<ul>
|
||
<li>Silk Fly Launcher is a launcher and mod manager for Silksong mods from Nexus and Thunderstore, built with Electron.</li>
|
||
<li>This product is licensed under the <a href="" class="link" onclick="electronAPI.openWindow('LICENSE')">GNU General Public License Version 3</a>.</li>
|
||
<li>This product uses third-party modules or assets under <a href="" class="link" onclick="electronAPI.openWindow('THIRD-PARTY-LICENSES')">third-party licenses</a>.</li>
|
||
<li>
|
||
Found a bug or have a feature request? Please
|
||
<a href="" class="link" onclick="electronAPI.openExternalLink('https://github.com/Gabi-Zar/Silk-Fly-Launcher/issues')">create an issue on GitHub</a>.
|
||
</li>
|
||
<li>Made with ♥ by <a href="" class="link" onclick="electronAPI.openExternalLink('https://github.com/Gabi-Zar')">GabiZar</a>.</li>
|
||
</ul>
|
||
<br />
|
||
</template>
|
||
|
||
<template id="installed-mods-template">
|
||
<h2>List Of Installed Mods</h2>
|
||
<div class="horizontal-div">
|
||
<form class="horizontal-div input-form" id="search-form">
|
||
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
|
||
<button class="default-button" onclick="searchInstalledMods()">Search</button>
|
||
</form>
|
||
<div class="list-div">
|
||
<div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
|
||
<div class="list-menu longer-button list-menu-inverted" id="sort-menu">
|
||
<li id="name" onclick="changeSort('name')">by name</li>
|
||
<li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
|
||
<li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
|
||
<li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
|
||
<li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
|
||
<li id="size" onclick="changeSort('size')">by size</li>
|
||
</div>
|
||
</div>
|
||
<button class="default-button square-button" onclick="inverseSort()"><img class="icons" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
|
||
<button class="default-button square-button" onclick="addOfflineMod()"><img class="icons" src="assets/icons/plus.svg" /></button>
|
||
</div>
|
||
<div class="mods-container" id="mods-container"></div>
|
||
<div class="separated-div">
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="changeModsPage('min')">First page</button>
|
||
<button class="default-button" onclick="changeModsPage(-1)">Previous</button>
|
||
</div>
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="changeModsPage(1)">Next</button>
|
||
<button class="default-button" onclick="changeModsPage('max')">Last page</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="nexus-mods-template">
|
||
<h2>List Of Nexus Mods</h2>
|
||
<div class="horizontal-div">
|
||
<form class="horizontal-div input-form" id="search-form">
|
||
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
|
||
<button class="default-button" onclick="searchNexusMods()">Search</button>
|
||
</form>
|
||
<div class="list-div">
|
||
<div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
|
||
<div class="list-menu longer-button list-menu-inverted" id="sort-menu">
|
||
<li id="name" onclick="changeSort('name')">by name</li>
|
||
<li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
|
||
<li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
|
||
<li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
|
||
<li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
|
||
<li id="size" onclick="changeSort('size')">by size</li>
|
||
</div>
|
||
</div>
|
||
<button class="default-button square-button" onclick="inverseSort()"><img class="icons" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
|
||
</div>
|
||
<div class="mods-container" id="mods-container"></div>
|
||
<div class="separated-div">
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="changeModsPage('min')">First page</button>
|
||
<button class="default-button" onclick="changeModsPage(-1)">Previous</button>
|
||
</div>
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="changeModsPage(1)">Next</button>
|
||
<button class="default-button" onclick="changeModsPage('max')">Last page</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="thunderstore-mods-template">
|
||
<h2>List Of Thunderstore Mods</h2>
|
||
<div class="horizontal-div">
|
||
<form class="horizontal-div input-form" id="search-form">
|
||
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
|
||
<button class="default-button" onclick="searchThunderstoreMods()">Search</button>
|
||
</form>
|
||
<div class="list-div">
|
||
<div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
|
||
<div class="list-menu longer-button list-menu-inverted" id="sort-menu">
|
||
<li id="name" onclick="changeSort('name')">by name</li>
|
||
<li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
|
||
<li id="endorsements" onclick="changeSort('endorsements')">by rating count</li>
|
||
<li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
|
||
<li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
|
||
<li id="size" onclick="changeSort('size')">by size</li>
|
||
</div>
|
||
</div>
|
||
<button class="default-button square-button" onclick="inverseSort()"><img class="icons" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
|
||
</div>
|
||
<div class="mods-container" id="mods-container"></div>
|
||
<div class="separated-div">
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="changeModsPage('min')">First page</button>
|
||
<button class="default-button" onclick="changeModsPage(-1)">Previous</button>
|
||
</div>
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="changeModsPage(1)">Next</button>
|
||
<button class="default-button" onclick="changeModsPage('max')">Last page</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="installed-mod-template">
|
||
<div class="mod-container">
|
||
<div class="mod-text">
|
||
<div class="horizontal-div">
|
||
<h3 id="mod-title">Unknown Title</h3>
|
||
<p id="mod-author">Unknown author</p>
|
||
<p id="mod-endorsements-number"></p>
|
||
<p id="mod-downloads-number"></p>
|
||
<p id="mod-source"></p>
|
||
</div>
|
||
<p id="mod-description" class="long-text">No description provided</p>
|
||
<p class="transparent-text" id="mod-version"></p>
|
||
<br />
|
||
<div class="horizontal-div">
|
||
<a href="" class="default-button" id="uninstall-mod-button">Uninstall</a>
|
||
<a href="" class="default-button" id="external-link">Website</a>
|
||
<p>Activated:</p>
|
||
<label class="checkbox-container">
|
||
<input type="checkbox" name="activated-mod" id="activated-mod" />
|
||
<span class="checkmark"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<img class="mod-icon" src="assets/placeholder_icon.png" alt="mod icon" id="mod-icon" />
|
||
</div>
|
||
</template>
|
||
|
||
<template id="mod-template">
|
||
<div class="mod-container">
|
||
<div class="mod-text">
|
||
<div class="horizontal-div">
|
||
<h3 id="mod-title">Unknown Title</h3>
|
||
<p id="mod-author">Unknown author</p>
|
||
<p id="mod-endorsements-number">? likes</p>
|
||
<p id="mod-downloads-number">? download</p>
|
||
</div>
|
||
<p id="mod-description" class="long-text">No description provided</p>
|
||
<p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
|
||
<br />
|
||
<div class="horizontal-div">
|
||
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="download-mod-button">Download</a>
|
||
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
|
||
</div>
|
||
</div>
|
||
|
||
<img class="mod-icon" src="assets/placeholder_icon.png" alt="mod icon" id="mod-icon" />
|
||
</div>
|
||
</template>
|
||
|
||
<template id="settings-template">
|
||
<h2>General settings</h2>
|
||
<div class="horizontal-div">
|
||
<label>Enter Silksong path: </label>
|
||
<input type="text" class="input" id="silksong-path-input" name="silksong-path-input" />
|
||
<button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
|
||
</div>
|
||
<br />
|
||
<div class="horizontal-div">
|
||
<label>Themes: </label>
|
||
<div class="list-div">
|
||
<div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
|
||
<div class="list-menu longer-button" id="themes-menu">
|
||
<li id="Silksong" onclick="changeTheme('Silksong')">Silksong</li>
|
||
<li id="Citadel of song" onclick="changeTheme('Citadel of song')">Citadel of song</li>
|
||
<li id="Cradle" onclick="changeTheme('Cradle')">Cradle</li>
|
||
<li id="Abyss" onclick="changeTheme('Abyss')">Abyss</li>
|
||
<li id="Greyroot" onclick="changeTheme('Greyroot')">Greyroot</li>
|
||
<li id="Surface" onclick="changeTheme('Surface')">Surface</li>
|
||
<li id="Steel" onclick="changeTheme('Steel')">Steel</li>
|
||
</div>
|
||
</div>
|
||
<label class="checkbox-container">
|
||
<input type="checkbox" name="lace-pin" id="lace-pin" />
|
||
<span class="checkmark"></span>
|
||
Lace Pin
|
||
</label>
|
||
</div>
|
||
<br />
|
||
<h2>BepInEx</h2>
|
||
<p class="transparent-text" id="bepinex-version-text"></p>
|
||
<br />
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="installBepinex()">Install</button>
|
||
<button class="important-button" onclick="uninstallBepinex()">Uninstall</button>
|
||
<button class="default-button" onclick="backupBepinex()">Backup</button>
|
||
<button class="important-button" onclick="deleteBepinexBackup()">Delete Backup</button>
|
||
</div>
|
||
<br />
|
||
<h2>Nexus</h2>
|
||
<p class="transparent-text" id="bepinex-version-text"></p>
|
||
<div class="horizontal-div">
|
||
<label>Nexus API key: </label>
|
||
<img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
|
||
<form class="horizontal-div input-form" id="nexus-api-form">
|
||
<input class="input" id="nexus-api-input" type="text" placeholder="Enter your nexus api" />
|
||
<button class="default-button" onclick="setNexusAPI()">Set</button>
|
||
</form>
|
||
<button class="default-button" onclick="resetNexusAPI()">Reset</button>
|
||
</div>
|
||
<br />
|
||
<h2>Import/Export</h2>
|
||
<div class="horizontal-div">
|
||
<button class="default-button" onclick="importData()">Import Data</button>
|
||
<button class="default-button" onclick="exportData()">Export Data</button>
|
||
<button class="important-button" onclick="deleteData()">Delete Data</button>
|
||
</div>
|
||
<br />
|
||
<p class="transparent-text">This data does not include your Nexus API key or the list of your installed mods.</p>
|
||
<br />
|
||
<h2>Debugging</h2>
|
||
<div class="horizontal-div">
|
||
<h3>Versions:</h3>
|
||
<ul id="versions-list">
|
||
<li id="Silk-Fly-Launcher"></li>
|
||
<li id="Electron"></li>
|
||
<li id="Node"></li>
|
||
<li id="Chromium"></li>
|
||
</ul>
|
||
<p id="version-text"></p>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="settings-linux-template">
|
||
<br />
|
||
<h2>Linux Additional Settings</h2>
|
||
<div class="horizontal-div">
|
||
<h3>Do you use Steam ?</h3>
|
||
<label class="checkbox-container">
|
||
<input type="checkbox" name="linux-steam" id="linux-steam" />
|
||
<span class="checkmark"></span>
|
||
</label>
|
||
</div>
|
||
<br />
|
||
<p class="transparent-text">The game will crash if you don’t enable this setting</p>
|
||
</template>
|
||
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
</html>
|