Update style.css

style.css

@@ -1,28 +1,378 @@
+/* --- GLOBAL VARIABLES & RESET --- */
+:root {
+    --phone-bg: #1a1a1a;
+    --screen-bg: #000;
+    --accent: #007AFF;
+    --text: #fff;
+    --app-header-bg: rgba(20, 20, 20, 0.95);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background-color: #222;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 100%);
+}
+
+/* --- THE PHONE CHASSIS --- */
+.phone {
+    width: 320px;
+    height: 650px;
+    background: var(--phone-bg);
+    border-radius: 40px;
+    border: 8px solid #333;
+    box-shadow: 
+        0 0 60px rgba(0,0,0,0.6), 
+        inset 0 0 10px rgba(255,255,255,0.1);
+    position: relative;
+    overflow: hidden;
+    color: var(--text);
+}
+
+/* Notch */
+.notch {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 25px;
+    background: #333;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+    z-index: 100;
+}
+
+/* --- SCREEN --- */
+.screen {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    position: relative;
+    padding-top: 40px;
+    transition: filter 0.3s;
+    background-size: cover;
+    background-position: center;
+}
+
+/* Status Bar */
+.status-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 25px;
+    font-size: 12px;
+    font-weight: 600;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
+    z-index: 20;
+    position: relative;
+}
+
+/* --- APP GRID (Home Screen) --- */
+.app-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+    padding: 20px;
+    margin-top: 20px;
+}
+
+.app-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.app-icon:active {
+    transform: scale(0.9);
+    opacity: 0.8;
+}
+
+.icon-box {
+    width: 55px;
+    height: 55px;
+    border-radius: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    color: white;
+    margin-bottom: 5px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(5px);
+}
+
+/* Icon Gradients */
+.icon-browser { background: linear-gradient(135deg, #2980b9, #6dd5fa); }
+.icon-gallery { background: linear-gradient(135deg, #ff7e5f, #feb47b); }
+.icon-files { background: linear-gradient(135deg, #43cea2, #185a9d); }
+.icon-settings { background: linear-gradient(135deg, #304352, #d7d2cc); }
+.icon-code { background: linear-gradient(135deg, #111, #444); border: 1px solid #555; }
+
+.app-name {
+    font-size: 11px;
+    text-shadow: 0 1px 3px rgba(0,0,0,1);
+    font-weight: 500;
+    letter-spacing: 0.3px;
+}
+
+/* --- APP WINDOW (The Modals) --- */
+.app-window {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #111;
+    transition: top 0.4s cubic-bezier(0.86, 0, 0.07, 1);
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+}
+
+.app-window.open {
+    top: 0;
+    border-radius: 0 0 40px 40px;
+}
+
+/* App Header with Back Button */
+.app-header {
+    padding: 45px 15px 15px;
+    background: var(--app-header-bg);
+    border-bottom: 1px solid #333;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    gap: 15px; 
+    backdrop-filter: blur(10px);
+}
+
+.back-btn {
+    font-size: 18px;
+    color: var(--accent);
+    cursor: pointer;
+    padding: 5px;
+    transition: opacity 0.2s;
+}
+
+.back-btn:active {
+    opacity: 0.5;
+}
+
+.app-title {
+    flex: 1;
+    font-size: 16px;
+}
+
+.app-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 15px;
+}
+
+/* Custom Scrollbar for apps */
+.app-content::-webkit-scrollbar {
+    width: 4px;
+}
+.app-content::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 2px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* --- IMAGE VIEWER MODAL --- */
+.image-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.image-modal.active {
+    opacity: 1;
+    pointer-events: all;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.image-modal img {
+    max-width: 100%;
+    max-height: 80%;
+    object-fit: contain;
+    box-shadow: 0 0 20px rgba(0,0,0,0.8);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.close-modal {
+    position: absolute;
+    top: 50px;
+    right: 20px;
+    color: #fff;
+    font-size: 24px;
+    cursor: pointer;
+    background: rgba(50,50,50,0.5);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(4px);
 }
+
+/* --- GALLERY GRID STYLES --- */
+.gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+}
+
+.gallery-item {
+    width: 100%;
+    height: 120px;
+    border-radius: 8px;
+    background-size: cover;
+    background-position: center;
+    background-color: #333;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.1s;
+}
+
+.gallery-item:active {
+    transform: scale(0.98);
+}
+
+/* --- FILES & SETTINGS LIST STYLES --- */
+.file-item, .setting-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid #222;
+    color: #ccc;
+    transition: background 0.2s;
+}
+
+.file-item:active, .setting-row:active {
+    background: #222;
+}
+
+.file-left {
+    display: flex;
+    align-items: center;
+}
+
+.file-item i {
+    margin-right: 15px;
+    font-size: 24px;
+    width: 30px;
+    text-align: center;
+}
+
+.file-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.file-name {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 2px;
+}
+
+.file-size {
+    font-size: 11px;
+    color: #666;
+}
+
+/* Toggle Switch Style */
+.toggle {
+    width: 44px;
+    height: 24px;
+    background: #333;
+    border-radius: 20px;
+    position: relative;
+    transition: background 0.3s;
+}
+
+.toggle::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background: #777;
+    border-radius: 50%;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.toggle.active {
+    background: #34c759;
+}
+
+.toggle.active::after {
+    left: 22px;
+    background: #fff;
+}
+
+/* --- TERMINAL (C++) STYLES --- */
+.terminal-window {
+    background-color: #0d0d0d !important;
+}
+
+.terminal-text {
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+    line-height: 1.4;
+    color: #00ff00;
+    white-space: pre-wrap;
+    padding: 10px;
+}
+
+/* --- HOME BAR (Bottom) --- */
+.home-bar {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 5px;
+    background: #fff;
+    border-radius: 10px;
+    z-index: 200;
+    cursor: pointer;
+    opacity: 0.8;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
+    transition: width 0.2s, opacity 0.2s;
+}
+
+.home-bar:active {
+    opacity: 0.5;
+    width: 100px;
+}
+
+
+