dev: testing github pages
dev: updated gitignore
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1 +1,2 @@
|
||||
/tmp.txt
|
||||
/commits.csv
|
194
docs/index.html
Normal file
194
docs/index.html
Normal 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><details></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><details></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>
|
Reference in New Issue
Block a user