@import url(‘
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap’);
@import url(‘
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css’);
.stock-options-app {
–bg-primary: #0a0e17;
–bg-secondary: #121927;
–glass-bg: rgba(18, 25, 39, 0.45);
–glass-border: rgba(255, 255, 255, 0.08);
–glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
–text-primary: #f8fafc;
–text-secondary: #94a3b8;
–accent-blue: #3b82f6;
–accent-glow: rgba(59, 130, 246, 0.5);
–success-green: #10b981;
–danger-red: #ef4444;
–shape-pink: #d946ef;
–shape-blue: #06b6d4;
–font-family: ‘Inter’, sans-serif;
background-color: var(–bg-primary);
color: var(–text-primary);
font-family: var(–font-family);
min-height: 800px;
overflow-x: hidden;
position: relative;
-webkit-font-smoothing: antialiased;
width: 100%;
}
.stock-options-app * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(–font-family);
}
/* ————– Animated Background Shapes ————– */
.stock-options-app .bg-shape {
position: absolute;
border-radius: 50%;
filter: blur(120px);
z-index: 0;
animation: wpFloat 20s infinite ease-in-out alternate;
}
.stock-options-app .shape-1 {
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 70%);
top: -10%;
left: -10%;
}
.stock-options-app .shape-2 {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(217, 70, 239, 0.1) 0%, rgba(217, 70, 239, 0) 70%);
bottom: -10%;
right: -10%;
animation-delay: -5s;
}
.stock-options-app .shape-3 {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0) 70%);
top: 30%;
right: 30%;
animation-delay: -10s;
}
@keyframes wpFloat {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, -50px) scale(1.1); }
}
/* ————– Utility Classes ————– */
.stock-options-app .glass-panel {
background: var(–glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(–glass-border);
box-shadow: var(–glass-shadow);
border-radius: 20px;
position: relative;
z-index: 10;
}
/* ————– Layout ————– */
.stock-options-app .app-container {
display: flex;
height: 800px;
padding: 24px;
gap: 24px;
max-width: 1600px;
margin: 0 auto;
position: relative;
z-index: 10;
}
/* ————– Sidebar ————– */
.stock-options-app .sidebar {
width: 260px;
padding: 32px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stock-options-app .brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 48px;
}
.stock-options-app .brand .logo-icon {
font-size: 1.5rem;
color: var(–accent-blue);
filter: drop-shadow(0 0 10px var(–accent-glow));
}
.stock-options-app .brand h2 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.5px;
color: var(–text-primary);
}
.stock-options-app .brand span {
color: var(–accent-blue);
}
.stock-options-app .nav-links {
list-style: none;
flex: 1;
}
.stock-options-app .nav-links li {
margin-bottom: 8px;
}
.stock-options-app .nav-links a {
color: var(–text-secondary);
text-decoration: none;
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
border-radius: 12px;
font-weight: 500;
transition: all 0.3s ease;
}
.stock-options-app .nav-links li.active a, .stock-options-app .nav-links a:hover {
color: var(–text-primary);
background: rgba(255, 255, 255, 0.05);
}
.stock-options-app .nav-links li.active a i {
color: var(–accent-blue);
}
.stock-options-app .market-status {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(16, 185, 129, 0.05);
border-radius: 12px;
border: 1px solid rgba(16, 185, 129, 0.1);
}
.stock-options-app .status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(–success-green);
box-shadow: 0 0 12px var(–success-green);
animation: wpPulse 2s infinite;
}
@keyframes wpPulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* ————– Main Content ————– */
.stock-options-app .main-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
overflow: hidden;
}
.stock-options-app .top-header {
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
}
.stock-options-app .search-bar {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(–glass-border);
padding: 12px 20px;
border-radius: 30px;
width: 400px;
transition: all 0.3s ease;
}
.stock-options-app .search-bar input {
background: none;
border: none;
color: var(–text-primary);
font-family: inherit;
font-size: 0.95rem;
outline: none;
width: 100%;
}
.stock-options-app .user-profile {
display: flex;
align-items: center;
gap: 24px;
}
.stock-options-app .alert-badge {
position: relative;
font-size: 1.25rem;
color: var(–text-secondary);
}
.stock-options-app .badge {
position: absolute;
top: -6px;
right: -8px;
background: var(–danger-red);
color: white;
font-size: 0.65rem;
font-weight: 700;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.stock-options-app .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.1);
object-fit: cover;
}
/* ————– Dashboard Layout ————– */
.stock-options-app .dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
flex: 1;
overflow: hidden;
}
.stock-options-app .options-section {
display: flex;
flex-direction: column;
overflow: hidden;
}
.stock-options-app .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.stock-options-app .section-header h3 {
font-size: 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
color: var(–text-primary);
}
.stock-options-app .filters {
display: flex;
gap: 8px;
}
.stock-options-app .filters button {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(–glass-border);
color: var(–text-secondary);
padding: 8px 16px;
border-radius: 20px;
font-family: inherit;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.stock-options-app .filters button.active {
background: var(–accent-blue);
color: white;
border-color: var(–accent-blue);
box-shadow: 0 4px 12px var(–accent-glow);
}
.stock-options-app .cards-container {
flex: 1;
overflow-y: auto;
padding-right: 12px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* ————– Stock Card ————– */
.stock-options-app .stock-card {
background: var(–glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(–glass-border);
border-radius: 16px;
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
transition: transform 0.3s, border-color 0.3s;
position: relative;
overflow: hidden;
}
.stock-options-app .stock-card::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(–success-green);
box-shadow: 0 0 10px var(–success-green);
}
.stock-options-app .ticker-info {
display: flex;
gap: 20px;
align-items: center;
width: 25%;
}
.stock-options-app .ticker {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.5px;
color: var(–text-primary);
}
.stock-options-app .company {
font-size: 0.85rem;
color: var(–text-secondary);
margin-top: 4px;
}
.stock-options-app .stock-price {
font-size: 1.1rem;
font-weight: 600;
color: var(–text-primary);
}
.stock-options-app .opt-details {
display: flex;
flex-direction: column;
gap: 4px;
width: 25%;
}
.stock-options-app .opt-type {
font-size: 0.85rem;
color: var(–text-secondary);
text-transform: uppercase;
font-weight: 600;
}
.stock-options-app .opt-strike {
font-size: 1.1rem;
font-weight: 700;
color: var(–text-primary);
}
.stock-options-app .opt-expiry {
font-size: 0.8rem;
color: var(–accent-blue);
background: rgba(59, 130, 246, 0.1);
padding: 4px 8px;
border-radius: 6px;
display: inline-block;
margin-top: 4px;
}
.stock-options-app .confidence-score {
text-align: center;
width: 20%;
}
.stock-options-app .score-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid var(–accent-blue);
color: var(–text-primary);
font-weight: 800;
font-size: 1.1rem;
}
.stock-options-app .score-label {
font-size: 0.75rem;
color: var(–text-secondary);
margin-top: 8px;
display: block;
text-transform: uppercase;
}
.stock-options-app .potential-return {
text-align: right;
width: 20%;
}
.stock-options-app .return-val {
font-size: 1.6rem;
font-weight: 800;
color: var(–success-green);
text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
.stock-options-app .return-label {
font-size: 0.8rem;
color: var(–text-secondary);
}
/* ————– Right Panel (Intelligence) ————– */
.stock-options-app .intelligence-section {
padding: 28px;
display: flex;
flex-direction: column;
}
.stock-options-app .intelligence-section h3 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
color: var(–text-primary);
}
.stock-options-app .market-sentiment {
background: rgba(0, 0, 0, 0.2);
border-radius: 12px;
padding: 16px;
margin-bottom: 32px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.stock-options-app .sentiment-meter {
height: 8px;
width: 100%;
background: linear-gradient(90deg, var(–danger-red) 0%, #fbbf24 50%, var(–success-green) 100%);
border-radius: 4px;
position: relative;
margin: 12px 0;
}
.stock-options-app .meter-indicator {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.stock-options-app .sentiment-labels {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(–text-secondary);
font-weight: 600;
}
.stock-options-app .bullish-text {
color: var(–success-green);
}
.stock-options-app .news-feed {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
padding-right: 8px;
}
.stock-options-app .news-item {
position: relative;
padding-left: 20px;
}
.stock-options-app .news-item::before {
content: ”;
position: absolute;
left: 0;
top: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(–accent-blue);
box-shadow: 0 0 8px var(–accent-glow);
}
.stock-options-app .news-time {
font-size: 0.75rem;
color: var(–accent-blue);
font-weight: 600;
margin-bottom: 6px;
display: block;
}
.stock-options-app .news-title {
font-size: 0.95rem;
font-weight: 500;
line-height: 1.4;
margin-bottom: 8px;
color: var(–text-primary);
}
.stock-options-app .news-tags {
display: flex;
gap: 8px;
}
.stock-options-app .tag {
font-size: 0.7rem;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
color: var(–text-secondary);
font-weight: 600;
}
.stock-options-app .tag.bullish {
background: rgba(16, 185, 129, 0.1);
color: var(–success-green);
}
.stock-options-app .animate-fade-in {
animation: wpFadeIn 0.6s ease-out forwards;
}
@keyframes wpFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.stock-options-app .app-container {
flex-direction: column;
padding: 12px;
height: auto;
}
.stock-options-app .sidebar {
width: 100%;
height: auto;
flex-direction: row;
padding: 16px;
}
.stock-options-app .nav-links {
display: none;
}
.stock-options-app .top-header {
padding: 0;
height: auto;
margin-bottom: 16px;
}
.stock-options-app .search-bar {
width: 100%;
}
.stock-options-app .stock-card {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.stock-options-app .ticker-info, .stock-options-app .opt-details, .stock-options-app .confidence-score, .stock-options-app .potential-return {
width: 100%;
text-align: left;
}
.stock-options-app .dashboard-grid {
grid-template-columns: 1fr;
}
}
OptionSight.AI
AI Market Intelligence
Bearish
72% Bullish
Bullish
document.addEventListener(‘DOMContentLoaded’, () => {
// Wait for Gutenberg to finish rendering
setTimeout(initStockApp, 500);
});
function initStockApp() {
const optionsData = [
{ ticker: ‘NVDA’, company: ‘NVIDIA Corp.’, price: ‘$874.15’, type: ‘Call’, strike: ‘$900.00’, expiry: ‘Apr 19, 2026’, confidence: 94, returnPct: ‘+142%’, trend: ‘up’ },
{ ticker: ‘TSLA’, company: ‘Tesla Inc.’, price: ‘$175.22’, type: ‘Call’, strike: ‘$190.00’, expiry: ‘May 03, 2026’, confidence: 88, returnPct: ‘+215%’, trend: ‘up’ },
{ ticker: ‘AMD’, company: ‘Advanced Micro Devices’, price: ‘$164.20’, type: ‘Call’, strike: ‘$175.00’, expiry: ‘Apr 26, 2026’, confidence: 81, returnPct: ‘+95%’, trend: ‘up’ },
{ ticker: ‘PLTR’, company: ‘Palantir Technologies’, price: ‘$23.40’, type: ‘Call’, strike: ‘$25.00’, expiry: ‘Apr 19, 2026’, confidence: 76, returnPct: ‘+310%’, trend: ‘up’ },
{ ticker: ‘ARM’, company: ‘ARM Holdings plc’, price: ‘$126.88’, type: ‘Call’, strike: ‘$140.00’, expiry: ‘May 17, 2026’, confidence: 91, returnPct: ‘+175%’, trend: ‘up’ }
];
const newsData = [
{ time: ’10:42 AM’, title: ‘NVIDIA Blackwell chips hitting production sooner than expected, analysts upgrade targets.’, tags: [‘NVDA’, ‘Upgrade’, ‘AI’] },
{ time: ’10:15 AM’, title: ‘Unusual options activity detected in TSLA ahead of Robotaxi unveil event.’, tags: [‘TSLA’, ‘Volume Spike’] },
{ time: ’09:55 AM’, title: ‘Macro: Tech sector leads market rally as inflation cools.’, tags: [‘Macro’, ‘Bullish’] },
{ time: ’09:30 AM’, title: ‘Palantir secures new $480M DoD contract for AI logistics.’, tags: [‘PLTR’, ‘Contract’] },
{ time: ’08:45 AM’, title: ‘ARM structural positioning indicates heavy call sweeping across multiple expirations.’, tags: [‘ARM’, ‘Options Flow’] }
];
function getScoreColor(score) {
if (score >= 90) return ‘#10b981’;
if (score >= 80) return ‘#3b82f6’;
if (score >= 70) return ‘#fbbf24’;
return ‘#ef4444’;
}
function renderOptions() {
const container = document.getElementById(‘wp-options-container’);
if (!container) return;
container.innerHTML = ”;
optionsData.forEach((opt, index) => {
const card = document.createElement(‘div’);
card.className = ‘stock-card animate-fade-in’;
card.style.animationDelay = (index * 0.1) + ‘s’;
const color = getScoreColor(opt.confidence);
card.innerHTML = `
${opt.ticker}
${opt.company}
${opt.price}
${opt.type} Option
Strike ${opt.strike}
Exp: ${opt.expiry}
${opt.confidence}%
AI Confidence
${opt.returnPct}
Projected Yield
`;
container.appendChild(card);
});
}
function renderNews() {
const container = document.getElementById(‘wp-news-container’);
if (!container) return;
container.innerHTML = ”;
newsData.forEach((news, index) => {
const item = document.createElement(‘div’);
item.className = ‘news-item animate-fade-in’;
item.style.animationDelay = ((index * 0.1) + 0.5) + ‘s’;
const tagsHTML = news.tags.map(tag => {
const isBullish = [‘Upgrade’, ‘Bullish’, ‘Contract’, ‘NVDA’].includes(tag);
return ‘
‘ + tag + ‘‘;
}).join(”);
item.innerHTML = ‘
‘ + news.time + ‘‘ + news.title + ‘
‘ + tagsHTML + ‘
‘;
container.appendChild(item);
});
}
renderOptions();
renderNews();
}
// Ensure execution immediately just in case DOM is already loaded in WP editor preview
initStockApp();
Auto DJ Mixer 