diff --git "a/index.html" "b/index.html" --- "a/index.html" +++ "b/index.html" @@ -1,508 +1,1099 @@ - - -Arjun 2.O - Advanced AI - - - - - - - - - - - - - - + /* --- 2. BACKGROUND & AMBIENT EFFECTS --- */ + .ambient-bg { + position: fixed; + inset: 0; + z-index: 0; + overflow: hidden; + pointer-events: none; + background: linear-gradient(135deg, var(--brand-saffron-light) 0%, rgba(255,255,255,1) 50%, var(--brand-green-light) 100%); + } + .orb { + position: absolute; + border-radius: 50%; + filter: blur(120px); + opacity: 0.4; + animation: floatOrb 30s ease-in-out infinite alternate; + } + .orb-saffron { + width: 600px; height: 600px; + background: radial-gradient(circle, rgba(255,153,51,0.25), transparent 70%); + top: -150px; left: -100px; + } + .orb-green { + width: 500px; height: 500px; + background: radial-gradient(circle, rgba(19,136,8,0.2), transparent 70%); + bottom: -100px; right: -50px; + animation-delay: -15s; + } + @keyframes floatOrb { + 0% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(40px, 60px) scale(1.1); } + 66% { transform: translate(-30px, 40px) scale(0.95); } + 100% { transform: translate(50px, -20px) scale(1.05); } + } + + /* --- 3. LAYOUT ARCHITECTURE --- */ + .app-container { + position: relative; + z-index: 1; + display: flex; + height: 100dvh; + width: 100vw; + overflow: hidden; + background: rgba(255, 255, 255, 0.4); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + } + + /* --- 4. SIDEBAR STYLES --- */ + .sidebar { + width: 300px; + display: flex; + flex-direction: column; + background: rgba(248, 249, 250, 0.85); + border-right: 1px solid var(--border-light); + flex-shrink: 0; + z-index: 100; + transition: transform var(--trans-smooth); + backdrop-filter: blur(10px); + } + .sidebar-header { + padding: 24px 20px; + border-bottom: 1px solid var(--border-light); + display: flex; + justify-content: space-between; + align-items: center; + } + .brand-logo { + display: flex; + align-items: center; + gap: 12px; + text-decoration: none; + } + .brand-logo img { + width: 48px; + height: 48px; + border-radius: var(--radius-md); + object-fit: cover; + box-shadow: var(--shadow-sm); + border: 2px solid var(--bg-main); + transition: transform var(--trans-spring); + } + .brand-logo:hover img { + transform: scale(1.05) rotate(-2deg); + } + .brand-text { display: flex; flex-direction: column; } + .brand-title { + font-family: var(--font-sans); + font-weight: 800; + font-size: 18px; + color: var(--text-primary); + letter-spacing: -0.5px; + line-height: 1.1; + } + .brand-subtitle { + font-size: 11px; + font-weight: 700; + letter-spacing: 1.5px; + text-transform: uppercase; + background: linear-gradient(90deg, var(--brand-saffron), var(--brand-green)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-top: 2px; + } + + .sidebar-content { + flex: 1; + overflow-y: auto; + padding: 20px; + display: flex; + flex-direction: column; + gap: 24px; + } + .sidebar-content::-webkit-scrollbar { width: 4px; } + .sidebar-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; } + + /* Auth UI */ + .auth-section { + background: var(--bg-main); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + padding: 16px; + box-shadow: var(--shadow-sm); + } + .btn-secure-login { + width: 100%; + padding: 12px; + background: var(--text-primary); + color: var(--brand-white); + border: none; + border-radius: var(--radius-md); + font-size: 14px; + font-weight: 600; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: var(--trans-fast); + } + .btn-secure-login:hover { + background: #000; + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + .user-profile-card { + display: none; + align-items: center; + gap: 12px; + } + .user-avatar-circle { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); + color: var(--brand-white); + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 16px; + box-shadow: var(--shadow-sm); + } + .user-info-text { flex: 1; overflow: hidden; } + .user-email-text { + font-size: 13px; + font-weight: 600; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .user-status-text { font-size: 11px; color: var(--brand-green); font-weight: 500; } + .btn-logout { + background: rgba(239, 68, 68, 0.1); + color: #ef4444; + border: none; + width: 32px; + height: 32px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--trans-fast); + } + .btn-logout:hover { background: #ef4444; color: #fff; } + + /* Settings & Info */ + .brand-info-box { + background: var(--bg-main); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + padding: 24px 16px; + text-align: center; + box-shadow: var(--shadow-sm); + margin-top: auto; + position: relative; + overflow: hidden; + } + .brand-info-box::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; height: 3px; + background: linear-gradient(90deg, var(--brand-saffron), var(--brand-white), var(--brand-green)); + } + .brand-info-box img { + width: 64px; height: 64px; + border-radius: var(--radius-lg); + object-fit: cover; + margin-bottom: 12px; + box-shadow: var(--shadow-md); + border: 1px solid var(--border-light); + } + .brand-info-box h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } + .brand-info-box p { font-size: 10px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.5px; } + + .btn-clear-chat { + width: 100%; + padding: 14px; + border-radius: var(--radius-md); + background: var(--bg-main); + border: 1px solid var(--border-light); + color: var(--text-secondary); + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: var(--trans-fast); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + } + .btn-clear-chat:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; } + + /* --- 5. MAIN CHAT INTERFACE --- */ + .chat-container { + flex: 1; + display: flex; + flex-direction: column; + position: relative; + min-width: 300px; + transition: width var(--trans-smooth); + } + + .chat-header { + padding: 16px 24px; + border-bottom: 1px solid var(--border-light); + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + display: flex; + align-items: center; + justify-content: space-between; + z-index: 10; + } + .header-left { display: flex; align-items: center; gap: 12px; } + .mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text-primary); padding: 4px; } + + .ai-status-badge { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: var(--text-primary); + padding: 6px 14px; + background: var(--bg-secondary); + border-radius: var(--radius-full); + border: 1px solid var(--border-light); + } + .status-indicator { + width: 8px; height: 8px; + border-radius: 50%; + background: var(--brand-green); + box-shadow: 0 0 0 3px rgba(19, 136, 8, 0.2); + animation: pulseStatus 2s infinite; + } + @keyframes pulseStatus { 0% { box-shadow: 0 0 0 0 rgba(19,136,8,0.4); } 70% { box-shadow: 0 0 0 6px rgba(19,136,8,0); } 100% { box-shadow: 0 0 0 0 rgba(19,136,8,0); } } + + /* LIVE BUTTON */ + .btn-live-mode { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + color: white; + border: none; + padding: 8px 16px; + border-radius: var(--radius-full); + font-size: 13px; + font-weight: 700; + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); + transition: var(--trans-spring); + } + .btn-live-mode:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4); } + .btn-live-mode svg { width: 16px; height: 16px; animation: blinkSVG 1.5s infinite; } + @keyframes blinkSVG { 50% { opacity: 0.5; } } + + /* Messages Area */ + .messages-area { + flex: 1; + overflow-y: auto; + padding: 40px 10%; + display: flex; + flex-direction: column; + gap: 32px; + scroll-behavior: smooth; + } + .messages-area::-webkit-scrollbar { width: 6px; } + .messages-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; } + + /* Welcome Screen */ + .welcome-hero { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 60px 20px; + margin: auto; + animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; + max-width: 700px; + } + @keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } + + .hero-icon-wrap { position: relative; margin-bottom: 32px; } + .hero-icon-wrap img { width: 96px; height: 96px; border-radius: 28px; object-fit: cover; box-shadow: var(--shadow-lg); border: 2px solid var(--bg-main); position: relative; z-index: 2; } + .hero-icon-glow { position: absolute; inset: -10px; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); filter: blur(20px); opacity: 0.3; border-radius: 35px; z-index: 1; } + + .hero-title { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 16px; color: var(--text-primary); } + .hero-subtitle { font-size: 16px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 32px; } + + .suggestion-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; } + .suggestion-card { + background: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(10px); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + padding: 20px; + cursor: pointer; + text-align: left; + transition: var(--trans-smooth); + box-shadow: var(--shadow-sm); + } + .suggestion-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-md); + border-color: var(--brand-saffron); + background: rgba(255, 255, 255, 0.9); + } + .sugg-icon { font-size: 24px; margin-bottom: 12px; display: inline-block; } + .sugg-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } + .sugg-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; } + + /* Chat Bubbles */ + .message-row { display: flex; gap: 16px; max-width: 85%; animation: msgPopIn 0.4s var(--trans-spring) both; } + @keyframes msgPopIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: none; } } + + .message-row.user-msg { flex-direction: row-reverse; align-self: flex-end; } + .message-row.bot-msg { align-self: flex-start; } + + .avatar-box { + width: 38px; height: 38px; + border-radius: var(--radius-sm); + flex-shrink: 0; + display: flex; align-items: center; justify-content: center; + font-size: 14px; font-weight: 700; + box-shadow: var(--shadow-sm); + } + .user-msg .avatar-box { background: var(--text-primary); color: var(--brand-white); } + .bot-msg .avatar-box { background: var(--bg-main); border: 1px solid var(--border-light); padding: 2px; } + .bot-msg .avatar-box img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; } + + .msg-content-wrapper { display: flex; flex-direction: column; gap: 6px; max-width: 100%; } + .user-msg .msg-content-wrapper { align-items: flex-end; } + + .file-badge { + font-size: 11px; font-weight: 600; + color: var(--brand-saffron); + background: var(--brand-saffron-light); + padding: 4px 10px; + border-radius: var(--radius-full); + margin-bottom: 4px; + display: inline-flex; align-items: center; gap: 4px; + } + + .bubble { + padding: 16px 22px; + font-size: 15px; + line-height: 1.6; + position: relative; + word-wrap: break-word; + } + .user-msg .bubble { + background: var(--bg-tertiary); + color: var(--text-primary); + border-radius: 20px 20px 4px 20px; + border: 1px solid var(--border-light); + } + .bot-msg .bubble { + background: var(--bg-main); + border: 1px solid var(--border-light); + border-radius: 4px 20px 20px 20px; + box-shadow: var(--shadow-sm); + width: 100%; + } + + /* Bot Actions (TTS & Copy) */ + .msg-actions-bar { + display: flex; gap: 8px; margin-top: 6px; padding-left: 12px; + opacity: 0; transition: opacity var(--trans-smooth); + flex-wrap: wrap; + } + .bot-msg:hover .msg-actions-bar { opacity: 1; } + + .action-chip { + background: var(--bg-secondary); + border: 1px solid var(--border-light); + color: var(--text-secondary); + font-size: 12px; font-weight: 600; + cursor: pointer; + display: flex; align-items: center; gap: 6px; + padding: 6px 14px; + border-radius: var(--radius-full); + transition: var(--trans-fast); + } + .action-chip:hover { background: var(--bg-tertiary); color: var(--text-primary); transform: translateY(-1px); } + .action-chip.btn-tts { color: var(--brand-green); border-color: rgba(19, 136, 8, 0.2); background: var(--brand-green-light); } + .action-chip.btn-tts:hover { background: rgba(19, 136, 8, 0.15); } + + /* Markdown Styling inside Bubble */ + .bubble p { margin-bottom: 14px; } + .bubble p:last-child { margin-bottom: 0; } + .bubble strong { font-weight: 700; color: var(--text-primary); } + .bubble code { + font-family: var(--font-mono); + background: var(--bg-tertiary); + padding: 3px 6px; + border-radius: 6px; + font-size: 0.85em; + color: #d946ef; + } + .bubble img { + max-width: 100%; + border-radius: 12px; + margin: 12px 0; + box-shadow: var(--shadow-md); + border: 1px solid var(--border-light); + display: block; + } + .bubble pre { + background: #282c34; + color: #abb2bf; + padding: 16px; + border-radius: 12px; + overflow-x: auto; + margin: 16px 0; + font-family: var(--font-mono); + font-size: 13.5px; + line-height: 1.5; + } + .bubble pre code { background: transparent; color: inherit; padding: 0; } + + /* Generating Code UI */ + .gen-code-box { + background: #1e1e2e; + border-radius: 12px; + border: 1px solid #313244; + overflow: hidden; + margin: 16px 0; + box-shadow: var(--shadow-md); + } + .gen-code-hdr { + background: #11111b; + padding: 10px 16px; + font-size: 12px; font-weight: 600; color: #a6adc8; + display: flex; align-items: center; gap: 10px; + border-bottom: 1px solid #313244; + font-family: var(--font-mono); + text-transform: uppercase; letter-spacing: 1px; + } + .spinner-mini { + width: 14px; height: 14px; + border: 2px solid rgba(255,255,255,0.1); + border-top-color: var(--brand-saffron); + border-radius: 50%; + animation: spin 1s linear infinite; + } + @keyframes spin { to { transform: rotate(360deg); } } + .gen-code-box pre { margin: 0; background: transparent; } + + /* Workspace Trigger Card */ + .workspace-card { + background: var(--bg-secondary); + border: 1px solid var(--border-light); + border-radius: 12px; + padding: 16px; + margin: 16px 0; + display: flex; align-items: center; justify-content: space-between; + box-shadow: var(--shadow-sm); + } + .ws-card-info { display: flex; align-items: center; gap: 14px; } + .ws-card-icon { + width: 48px; height: 48px; + border-radius: 10px; + background: var(--bg-main); + display: flex; align-items: center; justify-content: center; + font-size: 24px; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-light); + color: var(--text-primary); + } + .ws-card-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; } + .ws-card-text p { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; } + .btn-view-ws { + padding: 10px 20px; + background: var(--text-primary); + color: var(--brand-white); + border: none; + border-radius: var(--radius-sm); + font-size: 13px; font-weight: 600; + cursor: pointer; + transition: var(--trans-spring); + } + .btn-view-ws:hover { transform: scale(1.05); background: var(--brand-saffron); box-shadow: 0 4px 12px rgba(255,153,51,0.3); } + + /* Scroll Bottom Button */ + .btn-scroll-down { + position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%) translateY(20px); + width: 44px; height: 44px; border-radius: 50%; + background: var(--glass-bg); backdrop-filter: blur(10px); + border: 1px solid var(--border-light); box-shadow: var(--shadow-md); + display: flex; align-items: center; justify-content: center; + cursor: pointer; color: var(--text-secondary); + opacity: 0; pointer-events: none; transition: var(--trans-smooth); z-index: 20; + } + .btn-scroll-down.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } + .btn-scroll-down:hover { background: var(--bg-main); color: var(--text-primary); transform: translateX(-50%) translateY(-5px); box-shadow: var(--shadow-lg); } + + /* --- 6. INPUT AREA & ATTACHMENTS --- */ + .input-region { + flex-shrink: 0; + padding: 0 40px 30px; + background: transparent; + position: relative; + z-index: 20; + } + .input-box-wrapper { + display: flex; flex-direction: column; + background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); + border: 1px solid var(--border-light); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-float); + transition: var(--trans-smooth); + } + .input-box-wrapper:focus-within { + border-color: var(--brand-saffron); + box-shadow: 0 15px 35px -5px rgba(255,153,51,0.15), 0 0 0 3px var(--brand-saffron-light); + } + + /* Attachment Preview */ + .file-preview-strip { + display: none; padding: 16px 24px 0; align-items: center; gap: 12px; + } + .file-preview-strip.active { display: flex; animation: fadeIn 0.3s ease; } + .preview-thumb { + width: 44px; height: 44px; object-fit: cover; + border-radius: var(--radius-sm); border: 1px solid var(--border-light); + display: flex; justify-content: center; align-items: center; + background: var(--bg-secondary); font-size: 20px; + } + .preview-details { flex: 1; } + .preview-name { font-size: 13px; font-weight: 600; color: var(--text-primary); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .btn-remove-file { + background: rgba(239, 68, 68, 0.1); border: none; + width: 28px; height: 28px; border-radius: 50%; + cursor: pointer; display: flex; align-items: center; justify-content: center; + color: #ef4444; transition: var(--trans-fast); + } + .btn-remove-file:hover { background: #ef4444; color: #fff; } + + .input-controls-row { + display: flex; align-items: flex-end; gap: 12px; + padding: 12px 16px 12px 20px; + } + + .chat-textarea { + flex: 1; border: none; outline: none; background: transparent; + font-family: var(--font-sans); font-size: 15px; color: var(--text-primary); + line-height: 1.5; resize: none; max-height: 180px; min-height: 24px; + padding: 10px 0; + } + .chat-textarea::placeholder { color: var(--text-tertiary); } + + /* Attachment Menu (Gemini Style) */ + .attach-menu-container { position: relative; } + .btn-icon { + width: 40px; height: 40px; border-radius: var(--radius-md); + background: transparent; border: none; + display: flex; align-items: center; justify-content: center; + cursor: pointer; color: var(--text-secondary); + transition: var(--trans-fast); position: relative; + } + .btn-icon:hover { background: var(--bg-secondary); color: var(--text-primary); } + .btn-icon svg { width: 22px; height: 22px; } + + .attach-popup { + position: absolute; bottom: 55px; left: 0; + background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); + border: 1px solid var(--border-light); border-radius: var(--radius-lg); + padding: 8px; box-shadow: var(--shadow-float); + display: none; flex-direction: column; gap: 4px; + z-index: 100; min-width: 180px; + transform: translateY(10px) scale(0.95); opacity: 0; + transition: all var(--trans-fast); + transform-origin: bottom left; + } + .attach-popup.show { display: flex; transform: translateY(0) scale(1); opacity: 1; } + .attach-option { + display: flex; align-items: center; gap: 12px; + padding: 12px 16px; border-radius: var(--radius-sm); + cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-primary); + transition: var(--trans-fast); + } + .attach-option:hover { background: var(--bg-secondary); color: var(--brand-saffron); } + .attach-option span.ico { font-size: 18px; } + .hidden-file-input { display: none; } + + /* Voice Mic */ + .btn-mic.is-listening { + color: #ef4444; background: rgba(239, 68, 68, 0.1); + animation: pulseMic 1.5s infinite; + } + @keyframes pulseMic { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } + + /* Send Button */ + .btn-send { + width: 44px; height: 44px; border-radius: 14px; border: none; + background: linear-gradient(135deg, var(--brand-saffron) 0%, var(--brand-green) 100%); + display: flex; align-items: center; justify-content: center; + cursor: pointer; transition: var(--trans-spring); + box-shadow: 0 4px 15px rgba(19, 136, 8, 0.2); + } + .btn-send svg { width: 18px; height: 18px; fill: white; transition: transform 0.2s; } + .btn-send:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 153, 51, 0.3); } + .btn-send:hover svg { transform: translate(2px, -2px); } + .btn-send:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(100%); transform: none; box-shadow: none; } + + .footer-branding { text-align: center; font-size: 11px; color: var(--text-tertiary); margin-top: 14px; font-weight: 500; letter-spacing: 0.5px; } + + /* --- 7. WORKSPACE (CODE EDITOR PANEL) --- */ + .workspace-panel { + width: 0; background: var(--bg-main); + border-left: 1px solid var(--border-light); + display: flex; flex-direction: column; + transition: width var(--trans-smooth); overflow: hidden; + box-shadow: -10px 0 30px rgba(0,0,0,0.03); z-index: 25; + } + .workspace-panel.active { width: 50%; } + + .ws-header { + padding: 16px 24px; border-bottom: 1px solid var(--border-light); + background: var(--bg-main); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; + } + .ws-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text-primary); } + .ws-actions-group { display: flex; gap: 10px; } + .btn-ws-action { + padding: 8px 16px; border-radius: var(--radius-sm); + background: var(--bg-secondary); border: 1px solid var(--border-light); + cursor: pointer; display: flex; align-items: center; gap: 8px; + color: var(--text-primary); transition: var(--trans-fast); + font-size: 13px; font-weight: 600; + } + .btn-ws-action:hover { background: var(--bg-tertiary); } + .btn-ws-close { padding: 8px; } + .btn-ws-close:hover { color: #ef4444; background: #fee2e2; border-color: #fca5a5; } + + .ws-editor-area { flex: 1; overflow-y: auto; background: var(--bg-secondary); padding: 24px; } + .ws-editor-area pre { + margin: 0; padding: 24px; background: #282c34; + border: 1px solid var(--border-light); border-radius: var(--radius-lg); + font-family: var(--font-mono); font-size: 14px; line-height: 1.6; + overflow-x: auto; box-shadow: var(--shadow-md); color: #abb2bf; + } + + /* --- 8. LIVE MODE OVERLAY (नया फीचर) --- */ + .live-overlay { + position: fixed; inset: 0; + background: rgba(255, 255, 255, 0.98); + z-index: 9000; + display: flex; flex-direction: column; align-items: center; justify-content: center; + opacity: 0; pointer-events: none; + transition: opacity var(--trans-smooth); + } + .live-overlay.active { opacity: 1; pointer-events: auto; } + .live-close-btn { position: absolute; top: 30px; right: 30px; background: rgba(0,0,0,0.05); border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; cursor: pointer; transition: 0.2s; } + .live-close-btn:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; transform: rotate(90deg); } + + .live-orb-container { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; } + .live-orb-core { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-saffron), var(--brand-green)); box-shadow: 0 0 40px rgba(19, 136, 8, 0.4); position: relative; z-index: 2; transition: transform 0.1s; } + .live-orb-ring { position: absolute; inset: 0; border: 2px solid var(--brand-saffron); border-radius: 50%; opacity: 0; animation: ripple 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } + .live-orb-ring:nth-child(2) { animation-delay: 0.6s; border-color: var(--brand-green); } + .live-orb-ring:nth-child(3) { animation-delay: 1.2s; border-color: var(--text-primary); } + @keyframes ripple { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } + + .live-status-text { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; font-family: var(--font-sans); } + .live-transcript { font-size: 16px; color: var(--text-secondary); max-width: 600px; text-align: center; line-height: 1.5; min-height: 48px; } + + .live-controls { display: flex; gap: 20px; margin-top: 40px; } + .btn-live-action { width: 64px; height: 64px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: var(--trans-spring); } + .btn-live-action.mic { background: var(--bg-main); border: 2px solid var(--border-light); color: var(--text-primary); } + .btn-live-action.mic:hover { transform: translateY(-5px); border-color: var(--brand-saffron); color: var(--brand-saffron); } + .btn-live-action.mic.recording { background: #ef4444; color: white; border-color: #ef4444; animation: pulseMic 1s infinite; } + .btn-live-action svg { width: 28px; height: 28px; } + + /* --- 9. AUTHENTICATION MODAL --- */ + .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 5000; display: none; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; } + .modal-box { background: var(--bg-main); padding: 40px; border-radius: var(--radius-xl); width: 90%; max-width: 440px; box-shadow: var(--shadow-float); position: relative; border: 1px solid rgba(255,255,255,0.2); } + .modal-close { position: absolute; top: 20px; right: 20px; background: var(--bg-secondary); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; color: var(--text-secondary); cursor: pointer; transition: 0.2s; } + .modal-close:hover { background: #fee2e2; color: #ef4444; } + .modal-header-title { text-align: center; margin-bottom: 30px; font-family: var(--font-sans); font-size: 26px; font-weight: 800; color: var(--text-primary); } + .tab-group { display: flex; background: var(--bg-secondary); padding: 6px; border-radius: var(--radius-lg); margin-bottom: 24px; } + .tab-btn { flex: 1; padding: 12px; text-align: center; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: var(--trans-fast); } + .tab-btn.active { background: var(--bg-main); color: var(--text-primary); box-shadow: var(--shadow-sm); } + .auth-form-step { display: none; flex-direction: column; animation: slideIn 0.3s ease; } + .auth-form-step.active { display: flex; } + .input-field { width: 100%; padding: 16px; border: 1.5px solid var(--border-light); border-radius: var(--radius-md); font-size: 15px; outline: none; background: var(--bg-secondary); transition: var(--trans-fast); font-family: var(--font-sans); margin-bottom: 16px; } + .input-field:focus { border-color: var(--brand-saffron); background: var(--bg-main); box-shadow: 0 0 0 4px var(--brand-saffron-light); } + .btn-submit-auth { width: 100%; padding: 16px; background: var(--text-primary); color: var(--brand-white); border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--trans-fast); margin-top: 8px; } + .btn-submit-auth:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow-md); } + .btn-text-back { width: 100%; padding: 12px; background: transparent; color: var(--text-tertiary); border: none; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; transition: 0.2s; } + .btn-text-back:hover { color: var(--text-primary); } + + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } + + /* --- 10. RESPONSIVE DESIGN (MOBILE ADAPTATION) --- */ + @media (max-width: 900px) { + .sidebar { position: absolute; left: -300px; z-index: 1000; height: 100%; box-shadow: var(--shadow-float); } + .sidebar.show { left: 0; } + .mobile-toggle { display: block; } + .workspace-panel.active { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; } + .messages-area { padding: 20px 15px; } + .input-region { padding: 10px 15px 15px; } + .message-row { max-width: 95%; } + .btn-scroll-down { bottom: 120px; } + .hero-title { font-size: 28px; } + .suggestion-grid { grid-template-columns: 1fr; } + } + - +
- +
Arjun Logo

Welcome to Arjun 2.O

-

Developed by Abhay Kumar. Experience advanced reasoning, secure workspace coding, and high-quality image generation in one place.

- +

Professional Edition. Featuring Live Voice Mode, Workspace Coding, and high-fidelity Image Generation.

+
- -
- -
- - - - -
-
-
- -
-
- Arjun Intelligence -
-
-
- -
- -
- -
Welcome, User!
-
I am Arjun 2.O, developed by Abhay Kumar. I am equipped with advanced intelligence, workspace coding, and image generation.
-
Guest Mode: 0/3 Queries Used.
-
-
-
💻 Code Generation
-
Generate secure, workspace-ready code
-
-
-
🎨 Generate Images
-
Stunning visuals using Pollinations AI
-
-
+ +
+ + +
+ + +
- - - - -
-
-
- - -
-
file.txt
+ +
+ +
+ +
- -
-
- - -
- - -
-
🖼️ Image
-
🎥 Video
-
🎵 Audio
-
📄 Document / Code
-
- - - - - - - + +
+ Arjun Identity +

Arjun Intelligence

+

ENGINEERED BY ABHAY KUMAR

- - +
+ - + +
+ +
+
+ +
+
+ Arjun Core Online +
+
- -
+ + + +
+ +
+
+
+ Arjun Logo +
+

How can I assist you today?

+

Experience next-generation reasoning, multi-file processing, and workspace code generation crafted by Abhay Kumar.

+ + + +
+
+ 💻 +
Generate Production Code
+
Create secure, workspace-ready scripts instantly.
+
+
+ 🎨 +
Render Stunning Visions
+
Utilize advanced AI to paint your imagination.
+
+
+
+
+ + + + +
+
+ + +
+ + +
+
document.pdf
+
+ +
+ +
+ +
+ + +
+
🖼️ High-Res Image
+
🎥 Video Media
+
🎵 Audio Track
+
📄 Code / Document
+
+ + + + + + +
+ + + + + + + + + +
+
+
Advanced Artificial Intelligence • Developed by Abhay Kumar
-
Arjun 2.O is engineered for extreme performance. Developed by Abhay Kumar.
-
- - -
- -