mirror of
https://github.com/Gabi-Zar/Silk-Fly-Launcher.git
synced 2026-04-17 05:26:04 +02:00
169 lines
7.1 KiB
HTML
169 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Silk Fly Launcher</title>
|
|
<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</h1>
|
|
</div>
|
|
|
|
<nav class="nav">
|
|
<div class="nav-section">
|
|
<span class="nav-title">Execute Silksong</span>
|
|
<button onclick="launch('vanilla')">
|
|
<img src="vanilla_launch_icon.png" class="button-icon"/>
|
|
Run Vanilla
|
|
<button onclick="launch('modded')">
|
|
<img src="modded_launch_icon.png" class="button-icon"/>
|
|
Run Modded
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-title">Mods</span>
|
|
<button onclick="navigate('mods-installed')">
|
|
<img src="installed_mods_icon.png" class="button-icon"/>
|
|
Installed
|
|
<button onclick="navigate('mods-online')">
|
|
<img src="online_mods_icon.png" class="button-icon"/>
|
|
Online
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<span class="nav-title">Settings</span>
|
|
<button onclick="navigate('general-settings')">
|
|
<img src="general_settings_icon.png" class="button-icon"/>
|
|
General
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<main class="content">
|
|
<h1 id="title">Home</h1>
|
|
<div class="view" id="view">
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Template -->
|
|
<template id="home-template">
|
|
<h2>Silk Fly Launcher</h2>
|
|
</template>
|
|
|
|
<template id="installed-mods-template">
|
|
<h2>List Of Installed Mods</h2>
|
|
<form class="horizontal-div" 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="mods-container" id="mods-container">
|
|
</div>
|
|
</template>
|
|
|
|
<template id="online-mods-template">
|
|
<h2>List Of Nexus Mods</h2>
|
|
<form class="horizontal-div" 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="mods-container" id="mods-container">
|
|
</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>
|
|
</div>
|
|
<p id="mod-description">No description provided</p>
|
|
<p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
|
|
|
|
<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 for="silksong-path-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>
|
|
<div class="horizontal-div">
|
|
<label for="silksong-path-label">Themes: </label>
|
|
<div class="themes-div">
|
|
<div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
|
|
<div class="themes-menu longer-button" id="themes-menu">
|
|
<li onclick="changeTheme('Silksong')">Silksong</li>
|
|
<li onclick="changeTheme('Citadel of song')">Citadel of song (WIP)</li>
|
|
<li onclick="changeTheme('Cradle')">Cradle (WIP)</li>
|
|
<li onclick="changeTheme('Abyss')">Abyss (WIP)</li>
|
|
<li onclick="changeTheme('Greyroot')">Greyroot (WIP)</li>
|
|
<li onclick="changeTheme('Surface')">Surface (WIP)</li>
|
|
<li onclick="changeTheme('Steel')">Steel (WIP)</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<h2>BepInEx</h2>
|
|
<p class="transparent-text" id="bepinex-version-text"></p>
|
|
<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 for="nexus-api-label">Enter your nexus api: </label>
|
|
<input type="text" class="input" id="nexus-api-input" name="nexus-api-input">
|
|
<img class="nexus-check-image" id="nexus-check-image" src="assets/cross.svg">
|
|
<button class="default-button" onclick="verifyNexusAPI()">Verify</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 All Data</button>
|
|
</div>
|
|
<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="Chrome"></li>
|
|
</ul>
|
|
<p id="version-text"></p>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="renderer.js"></script>
|
|
|
|
</body>
|
|
</html> |