Suyash091/urmi-ai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Whatsapp

Browse source
This commit is contained in:
debu-2 2026-10-12 23:19:09 +05:30
parent 8726c931fa
commit 8c46d091ff
49 changed files with 1607 additions and 712 deletions
Download patch file Download diff file Expand all files Collapse all files

95
frontend/src/index.css
View file

@ -19,7 +19,7 @@ button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
position: fixed; inset: 0 auto 0 0; z-index: 30; width: 248px; color: #aebcd0;
position: fixed; inset: 0 auto 0 0; z-index: 30; width: 264px; color: #aebcd0;
background: linear-gradient(180deg, #061b39 0%, #07172e 100%); display: flex; flex-direction: column;
border-right: 1px solid rgba(255,255,255,.05);
}
@ -37,26 +37,26 @@ button { cursor: pointer; }
.sidebar-close { display: none !important; margin-left: auto; color: white !important; }
.sidebar nav { padding: 12px 10px 24px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.nav-group { margin-bottom: 15px; }
.nav-group p { margin: 0 10px 6px; color: #647793; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.nav-group a { color: #aab8ca; text-decoration: none; height: 34px; padding: 0 10px; border-radius: 7px; display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 2px; transition: .18s ease; }
.nav-group p { margin: 0 10px 6px; color: #8ea0b8; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-group a { color: #d5deea; text-decoration: none; height: 36px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; margin-bottom: 2px; transition: .18s ease; }
.nav-group a:hover { color: white; background: rgba(255,255,255,.055); }
.nav-group a.active { color: white; background: linear-gradient(90deg, #0877f9, #0b6de3); box-shadow: 0 7px 20px rgba(0,104,239,.23); }
.sidebar-plan { margin: 12px; padding: 13px; border-radius: 10px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); }
.sidebar-plan div { display: flex; align-items: center; gap: 7px; color: #c1ccda; font-size: 11px; }
.sidebar-plan strong { display: block; color: white; font-size: 16px; margin-top: 10px; }
.sidebar-plan small { color: #7487a3; font-size: 9px; }
.sidebar-plan button { width: 100%; border: 0; color: white; background: #0877f9; border-radius: 6px; padding: 7px; font-size: 10px; margin-top: 10px; }
.sidebar-plan button { width: 100%; border: 0; color: white; background: #0877f9; border-radius: 6px; padding: 8px; font-size: 12px; margin-top: 10px; }
.workspace { min-width: 0; width: calc(100% - 248px); margin-left: 248px; }
.workspace { min-width: 0; width: calc(100% - 264px); margin-left: 264px; }
.topbar { height: 72px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 9px; padding: 0 25px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.icon-button { border: 0; background: transparent; color: #627087; width: 34px; height: 34px; border-radius: 8px; display: inline-grid; place-items: center; }
.icon-button:hover { background: #f1f5fa; }
.menu-button { display: none; }
.selector { display: flex; align-items: center; gap: 8px; color: #35435a; background: white; border: 1px solid var(--border); padding: 8px 10px; border-radius: 7px; font-size: 11px; white-space: nowrap; }
.environment, .system-status { display: flex; align-items: center; gap: 6px; color: #64728a; font-size: 10px; white-space: nowrap; }
.selector { display: flex; align-items: center; gap: 8px; color: #35435a; background: white; border: 1px solid var(--border); padding: 8px 10px; border-radius: 7px; font-size: 13px; white-space: nowrap; }
.environment, .system-status { display: flex; align-items: center; gap: 6px; color: #64728a; font-size: 12px; white-space: nowrap; }
.environment i, .system-status i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #15b87a; box-shadow: 0 0 0 3px #e4f8f0; }
.global-search { margin-left: auto; width: min(340px, 34vw); height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #f6f8fb; border: 1px solid #edf0f4; border-radius: 8px; color: #8b97a9; }
.global-search input { width: 100%; outline: none; border: 0; background: transparent; color: #26364f; font-size: 11px; }
.global-search input { width: 100%; outline: none; border: 0; background: transparent; color: #26364f; font-size: 13px; }
.global-search kbd { color: #8e9aad; background: white; border: 1px solid #e4e8ef; border-radius: 4px; padding: 2px 5px; font-size: 9px; white-space: nowrap; }
.system-status { color: #279270; }
.notification-button { position: relative; }
@ -74,18 +74,18 @@ button { cursor: pointer; }
main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.dashboard { max-width: 1500px; margin: 0 auto; }
.eyebrow { color: #8a96a7; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 700; }
.eyebrow { color: #6d7c90; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; }
.welcome-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.welcome-row h1, .placeholder h1 { color: #10203b; font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.04em; margin: 6px 0 5px; }
.welcome-row h1 span { font-size: .8em; }
.welcome-row p, .placeholder p { color: var(--muted); font-size: 12px; margin: 0; }
.welcome-row p, .placeholder p { color: #5c6b80; font-size: 15px; line-height: 1.55; margin: 0; max-width: 62ch; }
.welcome-actions { display: flex; gap: 9px; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border-radius: 8px; padding: 9px 13px; font-size: 11px; font-weight: 600; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.primary-button { color: white; border: 1px solid #1475ff; background: #1475ff; box-shadow: 0 5px 12px rgba(20,117,255,.18); }
.secondary-button { color: #4b5a70; border: 1px solid var(--border); background: white; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)) 1.25fr; gap: 12px; margin: 25px 0 18px; }
.stat-card, .balance-card, .panel { background: white; border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 3px 12px rgba(28,45,76,.025); }
.stat-card, .balance-card, .panel { background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(28,45,76,.04); }
.stat-card { position: relative; min-height: 137px; padding: 16px; }
.stat-icon { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; }
.stat-icon.blue, .activity-icon.blue { color: #1475ff; background: #edf5ff; }
@ -105,8 +105,8 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, .85fr); gap: 18px; }
.panel { padding: 19px; min-width: 0; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h2 { font-size: 13px; color: #17253e; margin: 0 0 4px; }
.panel-heading p { font-size: 9px; color: #8b96a7; margin: 0; }
.panel-heading h2 { font-size: 16px; color: #17253e; margin: 0 0 4px; letter-spacing: -.02em; }
.panel-heading p { font-size: 13px; color: #66758a; margin: 0; line-height: 1.45; }
.legend { display: flex; gap: 13px; color: #7c899d; font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; }
@ -168,12 +168,14 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.hero-proof span { display: flex; align-items: center; gap: 5px; }
.hero-proof svg { color: #37c9b6; }
.agent-demo { position: relative; max-width: 610px; width: 100%; justify-self: center; }
.demo-window { position: relative; z-index: 2; overflow: hidden; background: rgba(9,28,55,.92); border: 1px solid rgba(116,169,229,.2); border-radius: 16px; box-shadow: 0 35px 90px rgba(0,0,0,.38); backdrop-filter: blur(15px); }
.demo-top { height: 48px; display: flex; align-items: center; gap: 15px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); color: #7d91ac; }
.demo-top > span { display: flex; gap: 5px; }
.demo-top i { width: 7px; height: 7px; background: #31445e; border-radius: 50%; }
.demo-top small { font-family: ui-monospace, monospace; font-size: 10px; }
.demo-top b { margin-left: auto; color: #49cdae; background: rgba(73,205,174,.08); padding: 4px 7px; border-radius: 12px; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.demo-window { position: relative; z-index: 2; overflow: hidden; background: #f7f9fc; border: 0; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.32); color: #13213a; }
.demo-top { height: 56px; display: flex; align-items: center; gap: 15px; padding: 0 18px; border-bottom: 1px solid #e6ebf2; color: #13213a; }
.demo-top > span, .thread-brand { font-size: 14px; font-weight: 700; color: #13213a; }
.demo-top b { margin-left: auto; color: #128660; background: #e7f8f1; padding: 5px 9px; border-radius: 12px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.thread-list { display: grid; gap: 10px; padding: 16px; }
.thread-list article { background: white; border: 1px solid #e6ebf2; border-radius: 12px; padding: 14px 16px; }
.thread-list small { color: #718096; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.thread-list p { margin: 6px 0 0; color: #1c2b44; font-size: 15px; line-height: 1.5; }
.demo-window pre { margin: 0; padding: 34px 28px 42px; color: #c3d1e4; font: 12px/2 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; }
.code-purple { color: #b89cff; }.code-green { color: #72d6b9; }
.demo-event { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; margin: 0 15px 15px; padding: 13px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; }
@ -190,18 +192,19 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.trust-strip b { font-size: 13px; font-weight: 600; }
.feature-section { padding: 100px max(7vw, 28px) 120px; }
.section-heading { max-width: 650px; margin: 0 auto 50px; text-align: center; }
.section-heading > span, .developer-band > div > span { color: #1475ff; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.section-heading h2, .developer-band h2 { margin: 12px 0; color: #10203b; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.section-heading p, .developer-band p { color: #7b8799; font-size: 13px; line-height: 1.7; }
.section-heading > span, .developer-band > div > span, .closing-band > div > span { color: #1475ff; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.section-heading h2, .developer-band h2, .closing-band h2 { margin: 12px 0; color: #10203b; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.section-heading p, .developer-band p, .closing-band p { color: #7b8799; font-size: 15px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1160px; margin: auto; }
.feature-grid article { padding: 28px; background: white; border: 1px solid #e7ebf1; border-radius: 13px; box-shadow: 0 8px 30px rgba(26,42,70,.035); }
.feature-grid article > span { width: 42px; height: 42px; display: grid; place-items: center; color: #1475ff; background: #edf5ff; border-radius: 10px; }
.feature-grid article svg { width: 19px; }
.feature-grid h3 { margin: 23px 0 9px; color: #152440; font-size: 15px; }
.feature-grid p { color: #7f8a9b; font-size: 11px; line-height: 1.7; margin: 0; }
.developer-band { margin: 0 max(5vw, 20px) 70px; padding: 55px max(5vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: 30px; color: white; background: #081a35; border-radius: 18px; }
.developer-band h2 { color: white; margin-bottom: 7px; }.developer-band p { margin: 0; color: #8fa0b6; }
.developer-band > a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: white; background: #1475ff; border-radius: 8px; padding: 12px 16px; text-decoration: none; font-size: 11px; font-weight: 700; }
.feature-grid p { color: #5c6b80; font-size: 14px; line-height: 1.65; margin: 0; }
.developer-band, .closing-band { margin: 0 max(5vw, 20px) 70px; padding: 55px max(5vw, 30px); display: flex; align-items: center; justify-content: space-between; gap: 30px; color: white; background: #081a35; border-radius: 18px; }
.developer-band h2, .closing-band h2 { color: white; margin-bottom: 7px; }
.developer-band p, .closing-band p { margin: 0; color: #c5d0e0; }
.developer-band > a, .closing-band > a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: white; background: #1475ff; border-radius: 8px; padding: 12px 16px; text-decoration: none; font-size: 13px; font-weight: 700; }
.landing-footer { min-height: 100px; display: flex; align-items: center; gap: 22px; padding: 20px max(5vw, 24px); color: #788ba5; background: #07172f; }
.landing-footer img { width: 90px; height: 48px; object-fit: contain; }
.landing-footer span { font-size: 10px; }
@ -274,7 +277,7 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.auth-tabs button.active { color: #13213a; background: white; box-shadow: 0 2px 8px rgba(20,34,58,.08); }
.auth-heading { margin: 29px 0 24px; text-align: center; }
.auth-heading h2 { margin: 0 0 8px; color: #14233d; font-size: 25px; letter-spacing: -.035em; }
.auth-heading p { margin: 0; color: #7f8b9d; font-size: 11px; }
.auth-heading p { margin: 0; color: #5c6b80; font-size: 14px; line-height: 1.5; }
.google-button { height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #344157; background: white; border: 1px solid #dfe5ed; border-radius: 8px; text-decoration: none; font-size: 11px; font-weight: 600; }
.google-button:hover { border-color: #c7d0dc; background: #fafbfd; }.google-button svg { width: 17px; }
.auth-divider { display: flex; align-items: center; gap: 13px; margin: 22px 0; color: #a0a9b5; font-size: 9px; }
@ -293,7 +296,7 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.auth-terms { max-width: 300px; margin: 19px auto 0; color: #9aa4b2; text-align: center; font-size: 8px; line-height: 1.6; }
/* Account security */
.account-heading { margin-bottom: 24px; }.account-heading h1 { margin: 6px 0; font-size: 28px; letter-spacing: -.04em; }.account-heading p { margin: 0; color: #7c899b; font-size: 11px; }
.account-heading { margin-bottom: 24px; }.account-heading h1 { margin: 8px 0; font-size: 32px; letter-spacing: -.04em; }.account-heading p { margin: 0; color: #5c6b80; font-size: 15px; line-height: 1.55; max-width: 68ch; }
.account-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(380px, 1.3fr); gap: 18px; }
.account-profile { display: flex; align-items: center; gap: 15px; align-self: start; }
.account-avatar { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; overflow: hidden; color: #1475ff; background: #e7f1ff; border-radius: 50%; font-size: 13px; font-weight: 700; }
@ -1642,7 +1645,7 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.demo-window pre { padding: 25px 17px 30px; font-size: 10px; }
.orbit-one { right: 16px; }
.orbit-two { left: -8px; }
.developer-band { align-items: flex-start; flex-direction: column; }
.developer-band, .closing-band { align-items: flex-start; flex-direction: column; }
.landing-footer { flex-wrap: wrap; }
.landing-footer small { margin-left: 0; width: 100%; }
.auth-main { padding: 78px 20px 40px; }
@ -1829,6 +1832,13 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.wa-biz { max-width: 1080px; }
.wa-biz-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.wa-biz-heading-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wa-token-toggle { margin-top: 14px; font-size: 14px; }
.wa-token-card { margin-bottom: 16px; }
.wa-token-embed { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6ebf2; }
.wa-token-embed h2 { margin-top: 0; }
.wa-token-form { display: grid; gap: 12px; margin-top: 16px; }
.wa-token-form .primary-button { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.wa-biz-heading h1 { margin: 6px 0; }
.wa-biz-heading p { max-width: 640px; }
.wa-biz-notice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #d7e6ff; border-radius: 12px; background: #f4f8ff; color: #1d4f91; font-size: 13px; }
@ -1963,6 +1973,31 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
.meta-dialog h2 { margin: 0; color: #17253e; font-size: 16px; }
.meta-dialog p { margin: 0; color: #5d6b80; font-size: 12px; line-height: 1.45; }
.meta-debug { border-style: dashed; }
.meta-oauth-setup .panel-heading p { max-width: 560px; }
.meta-oauth-steps { margin: 0 0 12px; padding-left: 18px; color: #526176; font-size: 12px; line-height: 1.55; }
.meta-oauth-steps li + li { margin-top: 6px; }
.meta-oauth-steps code { font-size: 11px; }
.meta-oauth-uri { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #dbe2eb; border-radius: 8px; background: #f8fafc; }
.meta-oauth-uri code { flex: 1; min-width: 240px; word-break: break-all; color: #17253e; font-size: 12px; }
.meta-token-setup { display: grid; gap: 14px; margin-bottom: 16px; }
.meta-token-setup .panel-heading { margin: 0; }
.meta-token-actions { display: flex; align-items: center; gap: 12px; }
.meta-token-actions span { color: #12805c; font-size: 13px; }
.meta-tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.meta-tabs button { border: 1px solid var(--border); background: white; color: #526176; border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 700; }
.meta-tabs button.is-active { border-color: #1475ff; color: #1475ff; background: #edf5ff; }
@media (max-width: 900px) {
.meta-split, .meta-posts li { grid-template-columns: 1fr; }
}
.stat-card > span, .balance-card > span { font-size: 13px; }
.stat-card p { font-size: 12px; }
.insight strong, .activity-item strong, .compliance-row { font-size: 13px; }
.insight p, .activity-item p, .activity-item time, .legend { font-size: 12px; }
.auth-card label > span, .account-password label > span { font-size: 13px; }
.auth-card input, .kyc-form input, .account-password input { font-size: 14px; }
.google-button, .auth-submit, .auth-tabs button { font-size: 14px; }
.auth-message > div { font-size: 14px; }
.meta-activity strong, .meta-list strong, .meta-kv strong, .meta-state strong { font-size: 14px; }
.meta-activity span, .meta-activity em, .meta-muted, .meta-list span, .meta-kv span, .meta-state p { font-size: 13px; }
.meta-tabs button { font-size: 13px; }