Files
Silk-Fly-Launcher/renderer/index.html
2026-01-21 22:12:50 +01:00

124 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<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 id="menu_wallpaper" class="background_video">
<source src="assets/background.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>
</div>
<!-- Template -->
<template id="home-template">
<h2>Silk Fly Launcher</h2>
<h3> Debugging data</h3>
<p id="version-text"></p>
</template>
<template id="installed-mods-template">
<p>List of installed mods.</p>
</template>
<template id="online-mods-template">
<h2>List Of Mods</h2>
<div class="search-container">
<input type="text" placeholder="Search For Mods...">
<button class="search-button">🔍</button>
</div>
<div class="mods-container" id="mods-container">
</div>
</template>
<template id="mod-template">
<div class="mod-container">
<div class="mod-text">
<h3 id="mod-title">Mod Title</h3>
<p id="mod-description">description</p>
<p class="transparent-text">V1.0.0 last update on 01/01/2026</p>
<div class="mod-actions">
<button class="default-button" onclick="downloadMod()">Download</button>
<a href="https://google.com" class="default-button" id="external-link">Website</a>
</div>
</div>
<img class="mod-icon" src="assets/placeholder_icon.png" alt="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="silksong-path-input" id="silksong-path-input" name="silksong-path-input">
<button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
</div>
<br>
<h2>BepInEx</h2>
<p class="transparent-text">BepInEx V1.0.0 is installed</p>
<div class="horizontal-div">
<button class="default-button" onclick="installBepinex()">Install</button>
<button class="important-button" onclick="uninstallBepinex()">Uninstall</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>
</template>
<script src="renderer.js"></script>
</body>
</html>