Shan Recap Interface

padding: 20px; } /* Individual App Panel */ .app-panel { flex: 1; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; position: relative; } .app-panel:hover { border-color: rgba(255, 255, 255, 0.3); } .app-header { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .app-title { display: flex; align-items: center; gap: 15px; } .app-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .animal-icon { background: linear-gradient(135deg, var(--animal-primary), var(--animal-secondary)); } .shangpt-icon { background: linear-gradient(135deg, var(--shangpt-primary), var(--shangpt-secondary)); } .app-info h2 { font-size: 1.5rem; margin-bottom: 5px; } .app-info p { font-size: 0.9rem; opacity: 0.7; } .app-status { display: flex; align-items: center; gap: 10px; } .status-indicator { width: 12px; height: 12px; border-radius: 50%; background: #00FF88; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .status-text { font-size: 0.9rem; color: #00FF88; } /* App Frame */ .app-frame-container { flex: 1; position: relative; overflow: hidden; } .app-frame { width: 100%; height: 100%; border: none; background: white; } /* Resize Handle */ .resize-handle { width: 10px; background: rgba(255, 255, 255, 0.1); cursor: col-resize; display: flex; align-items: center; justify-content: center; position: relative; } .resize-dots { display: flex; flex-direction: column; gap: 5px; } .resize-dots span { width: 4px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; } /* Stats Bar */ .stats-bar { display: flex; padding: 15px 30px; gap: 30px; background: rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(255, 255, 255, 0.1); } .stat-item { display: flex; align-items: center; gap: 10px; } .stat-value { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: bold; } .animal-stat { color: var(--animal-primary); } .shangpt-stat { color: var(--shangpt-primary); } /* Layout Variations */ .vertical-split { flex-direction: column; } .vertical-split .split-container { flex-direction: column; } .vertical-split .app-panel { flex-direction: row; } .vertical-split .app-header { width: 250px; border-right: 1px solid rgba(255, 255, 255, 0.1); border-bottom: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; } .vertical-split .app-frame-container { flex: 1; } /* Fullscreen Mode */ .fullscreen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; background: var(--dark); padding: 20px; } /* Responsive */ @media (max-width: 1200px) { .split-container { flex-direction: column; height: auto; } .app-panel { height: 50vh; } .resize-handle { width: 100%; height: 10px; cursor: row-resize; } .resize-dots { flex-direction: row; } }

DUAL AI DASHBOARD

AI Processing

Animal Video Editor

Cultural AI

Shan Region Assistant

Dual Processing

Both Apps Running

.app-card:nth-child(2) .app-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .app-title { font-size: 1.8rem; color: white; margin-bottom: 15px; font-weight: 600; } .app-description { color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.6; margin-bottom: 25px; flex-grow: 1; } .launch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.4); color: white; padding: 14px 28px; border-radius: 50px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; backdrop-filter: blur(5px); width: fit-content; margin-top: auto; } .launch-btn:hover { background: rgba(255, 255, 255, 0.35); transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* Frame Container */ .frame-container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border-radius: 24px; padding: 30px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 30px; display: none; } .frame-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .frame-title { color: white; font-size: 1.8rem; font-weight: 600; } .back-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 12px 24px; border-radius: 50px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .back-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateX(-5px); } .app-frame { width: 100%; height: 75vh; border-radius: 16px; border: none; background: white; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1); } /* Footer */ .footer { text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; padding: 20px; margin-top: 20px; } /* Responsive */ @media (max-width: 768px) { .header h1 { font-size: 2.5rem; } .app-card { max-width: 100%; padding: 25px; } .frame-container { padding: 20px; } .app-frame { height: 60vh; } } /* Floating elements for aesthetics */ .floating-element { position: fixed; border-radius: 50%; background: rgba(255, 255, 255, 0.1); z-index: -1; } .floating-element:nth-child(1) { width: 200px; height: 200px; top: 10%; left: 5%; animation: float 20s infinite linear; } .floating-element:nth-child(2) { width: 150px; height: 150px; bottom: 10%; right: 5%; animation: float 25s infinite linear reverse; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-20px) rotate(360deg); } }

Recap Shan

An interactive application for exploring and analyzing Shan region data. Features include cultural insights, demographic visualizations, and regional analytics presented in an engaging user interface.

Launch Application

Animal Recap

Discover fascinating information about animals from around the world. This application provides detailed profiles, conservation status, and interactive features to learn about wildlife in an engaging way.

Launch Application

DUAL AI DASHBOARD

Animal Viral Pro

ShanGPT Assistant

✨ My AI Portfolio

Recap Shan

Animal Recap

Application