initial commit

2026-04-17 05:26:04 +02:00 · 2026-01-14 22:33:55 +01:00
commit ccb10886b7
14 changed files with 1951 additions and 0 deletions
--- a/renderer/assets/Cursor.png
+++ b/renderer/assets/Cursor.png
--- a/renderer/assets/background.mp4
+++ b/renderer/assets/background.mp4
--- a/renderer/assets/hornetUITop.png
+++ b/renderer/assets/hornetUITop.png
--- a/renderer/assets/logo.png
+++ b/renderer/assets/logo.png
--- a/renderer/assets/needleUIBottom.png
+++ b/renderer/assets/needleUIBottom.png
--- a/renderer/assets/silkUITop.png
+++ b/renderer/assets/silkUITop.png
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -0,0 +1,64 @@
+<!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>
+          <button onclick="launch('modded')">
+            <img src="modded_launch_icon.png" class="button_icon"/>
+            Run Modded
+          </button>
+        </div>
+        <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>
+          <button onclick="navigate('mods-online')">
+            <img src="online_mods_icon.png" class="button_icon"/>
+            Online
+        </div>
+      </nav>
+    </aside>
+
+    <!-- Main content -->
+    <main class="content">
+      <h1 id="title">Home</h1>
+      <img src="assets/hornetUITop.png" class="separator_image"/>
+      <div id="view" class="view">
+        <p>Welcome to the Silk Fly Launcher.</p>
+      </div>
+      <img src="assets/needleUIBottom.png" class="separator_image"/>
+    </main>
+
+  </div>
+
+  <script src="renderer.js"></script>
+</body>
+</html>
--- a/renderer/renderer.js
+++ b/renderer/renderer.js
@@ -0,0 +1,31 @@
+const title = document.getElementById("title");
+const view = document.getElementById("view");
+
+function navigate(page) {
+  switch (page) {
+    case "home":
+      title.innerText = "Home";
+      view.innerHTML = `
+        <p>Welcome to the Silk Fly Launcher.</p>
+      `;
+      break;
+
+    case "mods-installed":
+      title.innerText = "Installed Mods";
+      view.innerHTML = `
+        <p>List of installed mods.</p>
+      `;
+      break;
+
+    case "mods-online":
+      title.innerText = "Online mods";
+      view.innerHTML = `
+        <p>Browse Nexus mods.</p>
+      `;
+      break;
+  }
+}
+
+function launch(mode) {
+  alert(`Launching the game in ${mode} mode.`);
+}
--- a/renderer/style.css
+++ b/renderer/style.css
@@ -0,0 +1,128 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", sans-serif;
+  cursor: url("assets/cursor.png") 0 0, auto !important;
+}
+
+body {
+  background: black;
+  color: #eee;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app {
+  display: flex;
+  height: 100vh;
+}
+
+.background_video {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  filter: brightness(0.8);
+}
+
+.sidebar {
+  width: 280px;
+  background: rgba(0, 0, 0, 0.8);
+  border-right: 1px solid rgba(255, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+}
+
+.logo {
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 72, 0, 0.2);
+  transition: background 0.2s;
+}
+
+.logo:hover {
+  background: rgba(255, 0, 0, 0.08);
+}
+
+.logo_img {
+  height: 50px;
+  width: auto;
+}
+
+.nav {
+  padding: 20px;
+}
+
+.nav-section {
+  margin-bottom: 30px;
+}
+
+.nav-title {
+  display: inline-block;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #fff;
+  margin-bottom: 10px;
+
+  padding: 0 4px 4px;
+  border-bottom: 1px solid #ff6b6b;  
+}
+
+.nav button {
+  width: 100%;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  background: transparent;
+  border: 1px solid black;
+  border-radius: 4px;
+  color: #eee;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s ease;
+}
+
+.nav button:hover {
+  background: rgba(255, 72, 0, 0.2);
+  border-color: rgba(255, 25, 0, 0.3);
+}
+
+.content {
+  flex: 1;
+  padding: 40px;
+}
+
+.content h1 {
+  font-size: 28px;
+  margin-bottom: 20px;
+  color: #ffffff;
+}
+
+.view {
+  background: rgba(0, 0, 0, 0.4);
+  border: 0px;
+  border-radius: 8px;
+  padding: 40px;
+  min-height: 450px;
+
+  margin-top: -5.5%;
+  margin-bottom: -6.5%;
+  z-index: -1; 
+  position: relative;
+
+  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
+}
+
+.separator_image {
+  width: 50%;
+  margin: 20px auto;
+  display: block;
+}