brandon/NotPlexApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update design and color theming, still WIP

Browse Source
This commit is contained in:
Brandon Brunson
2025-05-30 15:38:13 -07:00
parent f8f04c19cf
commit 429a575d98
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -3,50 +3,50 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>NotPlexApp</title> <title>NotPlexApp</title>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script> <!-- <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script> -->
<style> <style>
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: rgb(46, 46, 46); /* Dark grey background */
color: #eee; /* Light text for contrast */
} }
/* Tabs style */ /* Tabs style */
#tabs { #tabs {
display: flex; display: flex;
background: #333; background: #444; /* Darker grey for tab background */
} }
#tabs button { #tabs button {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
color: #fff; color: #fff;
background: #444; background: #555; /* Dark grey button color */
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
} }
#tabs button.active { #tabs button.active {
background: #222; background: #333; /* Even darker for active state */
} }
/* Content lists (item grids inside each section) */ /* Content lists (item grids inside each section) */
.content-list { .content-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px; gap: 0px;
overflow-x: visible; /* ensure no horizontal scrolling */ overflow-x: visible;
/* Optional: force items to wrap into multiple rows */
grid-auto-rows: auto; grid-auto-rows: auto;
} }
/* Section‐container: stack each <section> as a row */ /* Section‐container: stack each <section> as a row */
.section-list { .section-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px; /* space between sections */ gap: 40px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
height: calc(100% - 48px); /* adjust for tab height */ height: calc(100% - 48px);
overflow-y: auto; overflow-y: auto;
background-color: #f1f1f1;
} }
.movie-item { .movie-item {
cursor: pointer; cursor: pointer;
@@ -54,14 +54,15 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
background: #fff; background: transparent; /* removed white background */
padding: 10px; padding: 0; /* removed padding */
box-shadow: 0px 2px 5px rgba(0,0,0,0.1); box-shadow: none; /* removed box-shadow */
} }
.movie-item img { .movie-item img {
width: 200px; width: 180px; /* reduced width */
height: auto; height: auto;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 5px; /* added rounded corners */
} }
/* Overlay for details/stream */ /* Overlay for details/stream */
#overlay { #overlay {

28
renderer.js
View File

@@ -383,6 +383,8 @@ window.addEventListener('DOMContentLoaded', () => {
}); });
sectionAlpha.appendChild(gridAlpha); sectionAlpha.appendChild(gridAlpha);
moviesListEl.appendChild(sectionAlpha); moviesListEl.appendChild(sectionAlpha);
// Update background gradient based on the movies list
updateAppBackground();
}); });
} }
@@ -550,6 +552,8 @@ window.addEventListener('DOMContentLoaded', () => {
}); });
sectionAlpha.appendChild(gridAlpha); sectionAlpha.appendChild(gridAlpha);
showsListEl.appendChild(sectionAlpha); showsListEl.appendChild(sectionAlpha);
// Update background gradient based on TV shows count
updateAppBackground();
} }
// Updated function to stream the episode without calling getEpisodeDetails // Updated function to stream the episode without calling getEpisodeDetails
@@ -846,4 +850,28 @@ window.addEventListener('DOMContentLoaded', () => {
const mediaId = videoElement.dataset.mediaId; // Retrieve mediaId from the video element const mediaId = videoElement.dataset.mediaId; // Retrieve mediaId from the video element
connectToSyncSession(sessionId, mediaId, "movie", videoElement); connectToSyncSession(sessionId, mediaId, "movie", videoElement);
}); });
// Updated: Use multiple radial gradients so that three corners are fixed grey and the top right is variable red.
function updateAppBackground() {
// Count movie and TV show items.
const movieCount = document.querySelectorAll('#movies-list .movie-item').length;
const showCount = document.querySelectorAll('#shows-list .movie-item').length;
const totalItems = movieCount + showCount;
// Calculate red and purple saturation values (spread out scale)
const redSaturation = Math.min(10 + totalItems / 80, 100);
// const purpleSaturation = Math.min(10 + totalItems / 1000, 100);
// console.log(redSaturation);
// i want it to have different stages. like 1-1000 items red gradient top right. 1000-2500 blue gradient bottom
// left. 2500+ green gradient bottom right.
const gradient =
'radial-gradient(circle farthest-side at 0% 100%, rgb(28, 28, 28) 0%, rgba(28, 28, 28, 0) 100%),' +
'radial-gradient(circle farthest-side at 100% 100%, rgb(38, 38, 38) 0%, rgba(38, 38, 38, 0) 100%),' +
`radial-gradient(circle farthest-side at 100% 0%, hsl(0, ${redSaturation}%, 30%) 0%, rgba(255, 0, 0, 0) 100%),` +
'radial-gradient(circle farthest-side at 0% 0%, rgb(51, 51, 51) 0%, rgba(51, 51, 51, 0) 100%)';
document.body.style.background = gradient;
}
}); });