// ==UserScript==
// @name Cineby.app X-Ray Feature
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Adds a Prime Video-like X-Ray panel to cineby.app with mock data.
// @author Gemini
// @match *://*.cineby.app/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// --- Helper function to add CSS styles ---
function addGlobalStyle(css) {
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
}
// --- Inject CSS for the X-Ray panel and button ---
addGlobalStyle(`
/* Inter font for a modern look */
body {
font-family: 'Inter', sans-serif;
}
/* X-Ray Button Styling */
#xray-toggle-button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #0A84FF; /* A vibrant blue */
color: white;
border: none;
border-radius: 8px; /* Slightly rounded */
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow */
z-index: 10000; /* Ensure it's on top */
transition: background-color 0.3s ease, transform 0.2s ease;
}
#xray-toggle-button:hover {
background-color: #0070e0; /* Darker blue on hover */
transform: translateY(-2px); /* Slight lift effect */
}
#xray-toggle-button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* X-Ray Panel Styling */
#xray-panel {
position: fixed;
top: 0;
right: 0;
width: 350px; /* Fixed width */
height: 100%;
background-color: rgba(26, 26, 26, 0.95); /* Dark, slightly transparent background */
color: white;
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3); /* Shadow on the left edge */
z-index: 9999;
transform: translateX(100%); /* Initially off-screen */
transition: transform 0.4s ease-out; /* Smooth slide-in/out */
padding: 20px;
box-sizing: border-box; /* Include padding in width */
overflow-y: auto; /* Scroll for long content */
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
#xray-panel.open {
transform: translateX(0); /* Slide into view */
}
#xray-panel h2 {
font-size: 24px;
margin-bottom: 20px;
color: #E0E0E0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
#xray-panel h3 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
color: #CCCCCC;
}
#xray-panel p, #xray-panel ul {
font-size: 15px;
line-height: 1.6;
color: #B0B0B0;
margin-bottom: 15px;
}
#xray-panel ul {
list-style: none;
padding: 0;
}
#xray-panel li {
margin-bottom: 5px;
}
/* Close button styling for the panel */
#xray-close-button {
position: absolute;
top: 15px;
left: 15px;
background: none;
border: none;
font-size: 28px;
color: #CCCCCC;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: background-color 0.2s ease;
}
#xray-close-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
`);
// --- Create X-Ray Toggle Button ---
const toggleButton = document.createElement('button');
toggleButton.id = 'xray-toggle-button';
toggleButton.innerText = 'X-Ray';
document.body.appendChild(toggleButton);
// --- Create X-Ray Panel ---
const xrayPanel = document.createElement('div');
xrayPanel.id = 'xray-panel';
xrayPanel.innerHTML = `
×
X-Ray Information
Title:
Mock Movie Title
Director:
Jane Doe
Cast:
- John Smith
- Alice Johnson
- Bob Williams
Synopsis:
This is a placeholder synopsis for a mock movie. In a real scenario, this information would be dynamically fetched from a movie database API based on the currently playing content. For example, if you were watching "The Matrix", this section would describe "The Matrix".
Year:
2023
Genre:
Action, Sci-Fi
`;
document.body.appendChild(xrayPanel);
const closeButton = xrayPanel.querySelector('#xray-close-button');
// --- Event Listeners ---
toggleButton.addEventListener('click', () => {
xrayPanel.classList.toggle('open');
});
closeButton.addEventListener('click', () => {
xrayPanel.classList.remove('open');
});
// --- Optional: Close panel when clicking outside (on desktop) ---
// This is more complex to implement reliably in a UserScript without interfering
// with the original page's interactions, so it's omitted for simplicity.
// However, the close button provides a clear way to dismiss the panel.
})();
