dev: testing github pages

dev: updated gitignore
This commit is contained in:
lscambo13
2025-07-29 15:49:42 +05:30
parent 95c4d536d5
commit eacbfa5ef0
2 changed files with 196 additions and 1 deletions

1
.gitignore vendored
View File

@@ -1 +1,2 @@
/tmp.txt
/commits.csv

194
docs/index.html Normal file
View File

@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ElegantFin Theme</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background: #121212;
color: #fff;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
text-align: center;
padding: 2rem;
background-color: #1f1f1f;
}
header img {
max-width: 100%;
border-radius: 1rem;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
h1, h2, h3, h4 {
color: #00bcd4;
}
section {
padding: 2rem;
max-width: 1000px;
margin: auto;
}
a {
color: #03dac6;
}
hr {
border: 1px solid #333;
margin: 2rem 0;
}
ul {
list-style: disc inside;
}
details {
background: #1e1e1e;
border-radius: 0.5rem;
margin: 1rem 0;
padding: 1rem;
}
details summary {
cursor: pointer;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
td, th {
padding: 1rem;
text-align: center;
}
img.preview {
max-width: 100%;
border-radius: 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.pair {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.pair > div {
flex: 1;
min-width: 300px;
}
code, pre {
background: #272727;
color: #ccc;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
display: block;
margin: 1rem 0;
overflow-x: auto;
}
</style>
</head>
<body>
<header>
<img src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Theme/assets/img/banner.png?raw=true" alt="ElegantFin Theme for Jellyfin - Banner">
</header>
<section>
<h1>⭐ ElegantFin Theme</h1>
<p>This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. It gives Jellyfin a fresh, modern look, and it aims to work on mobile, desktop, and TV, with just one import.</p>
<h4><strong>Author:</strong> <a href="https://github.com/lscambo13">lscambo13</a></h4>
<hr>
<h2>✨ Key Features</h2>
<ul>
<li>Modern layouts and color tones</li>
<li>Same clean design across phone, desktop, and TV</li>
<li>New and improved animations on most elements</li>
<li>Rounded corners and even spacing everywhere</li>
<li>Stylish borders, hover effects and shadows</li>
<li>Neat layout that puts important stuff up front</li>
<li>Reduced unnecessary clutter</li>
<li>Various fixes to the user experience</li>
</ul>
<hr>
<h2>🖼️ Screenshots</h2>
<p>Captured on ElegantFin v25.07.27</p>
<details>
<summary>💻 <i>Desktop and </i>📱 <i>Mobile previews</i></summary>
<!-- Include a few preview images here for demonstration -->
<div class="pair">
<div>
<img class="preview" src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Previews/preview-v25.07.27/optimized/desktop/1.%20Homepage.webp?raw=true" alt="Desktop Homepage">
<p><strong>Desktop - Homepage</strong></p>
</div>
<div>
<img class="preview" src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Previews/preview-v25.07.27/optimized/mobile/1.%20Homepage.webp?raw=true" alt="Mobile Homepage">
<p><strong>Mobile - Homepage</strong></p>
</div>
</div>
<!-- Repeat for more images if needed -->
</details>
<details>
<summary>📺 <i>TV previews</i></summary>
<div class="pair">
<div>
<img class="preview" src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Previews/preview-v25.07.27/optimized/tv/1.%20Homepage.webp?raw=true" alt="TV Homepage">
<p><strong>TV - Homepage</strong></p>
</div>
</div>
</details>
<hr>
<h2>👇 How to Install/Setup</h2>
<p><strong>Paste the following in the Custom CSS code box:</strong></p>
<code>@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");</code>
<details>
<summary><i>Detailed steps for server-side implementation</i></summary>
<ol>
<li>Open Dashboard from Administration tab in Settings.</li>
<li>Select General tab from the side bar.</li>
<li>Scroll down to find Custom CSS code box under Branding section.</li>
<li>Paste the custom CSS in Custom CSS code box.</li>
<li>Click save.</li>
</ol>
</details>
<details>
<summary><i>Detailed steps for client-side implementation</i></summary>
<ol>
<li>Open Display tab in Settings.</li>
<li>Scroll down to find Custom CSS code box.</li>
<li>Paste the custom CSS in Custom CSS code box.</li>
<li>Click save.</li>
</ol>
</details>
<hr>
<h2>🧰 Customisation Options</h2>
<p>Multiple details sections explaining custom background, card overlays, play button positions, hover effects, etc. can be added here. Each as a <code>&lt;details&gt;</code> with its own explanation and code snippets.</p>
<hr>
<h2>👌 Compatibility</h2>
<ul>
<li>Jellyfin Server v10.10.6</li>
<li>Jellyfin Android App v2.6.2</li>
</ul>
<hr>
<h2>🛠️ Troubleshooting</h2>
<p>Use <code>&lt;details&gt;</code> sections for FAQs like cache not clearing, visual bugs in media player, compatibility with AndroidTV/WebOS, etc.</p>
<hr>
<h2>📌 Contributing</h2>
<p>Please read the <a href="./CONTRIBUTING.md">Contributor Guidelines</a> before opening pull requests.</p>
<h2>🙏 Feedback Appreciated</h2>
</section>
</body>
</html>