Spaces:
Running
Running
| import gradio as gr | |
| from gradio.themes.utils import colors, fonts, sizes | |
| saffron = colors.Color( | |
| name="saffron", | |
| c50="#fff7ed", | |
| c100="#ffedd5", | |
| c200="#fed7aa", | |
| c300="#fdba74", | |
| c400="#fb923c", | |
| c500="#f97316", | |
| c600="#ea580c", | |
| c700="#c2410c", | |
| c800="#9a3412", | |
| c900="#7c2d12", | |
| c950="#431407", | |
| ) | |
| indiagreen = colors.Color( | |
| name="indiagreen", | |
| c50="#f0fdf4", | |
| c100="#dcfce7", | |
| c200="#bbf7d0", | |
| c300="#86efac", | |
| c400="#4ade80", | |
| c500="#22c55e", | |
| c600="#16a34a", | |
| c700="#15803d", | |
| c800="#166534", | |
| c900="#14532d", | |
| c950="#052e16", | |
| ) | |
| class SariMadiTheme(gr.themes.Base): | |
| def __init__(self): | |
| super().__init__( | |
| primary_hue=saffron, | |
| secondary_hue=indiagreen, | |
| neutral_hue=colors.stone, | |
| spacing_size=sizes.spacing_lg, | |
| radius_size=sizes.radius_lg, | |
| font=( | |
| fonts.GoogleFont("Plus Jakarta Sans"), | |
| "ui-sans-serif", | |
| "system-ui", | |
| "sans-serif", | |
| ), | |
| font_mono=( | |
| fonts.GoogleFont("JetBrains Mono"), | |
| "ui-monospace", | |
| "monospace", | |
| ), | |
| ) | |
| self.set( | |
| body_background_fill="#fbfaf7", | |
| body_background_fill_dark="#1a1714", | |
| block_background_fill="#ffffff", | |
| block_background_fill_dark="#252019", | |
| block_border_width="1px", | |
| block_border_color="#ece7dd", | |
| block_border_color_dark="#3a3228", | |
| block_radius="16px", | |
| block_shadow="0 1px 2px rgba(124, 45, 18, 0.04)", | |
| block_title_text_weight="600", | |
| block_label_text_weight="500", | |
| button_large_radius="12px", | |
| button_small_radius="10px", | |
| button_primary_background_fill="*primary_500", | |
| button_primary_background_fill_hover="*primary_600", | |
| button_primary_text_color="#ffffff", | |
| button_primary_background_fill_dark="*primary_600", | |
| button_secondary_background_fill="*secondary_50", | |
| button_secondary_background_fill_hover="*secondary_100", | |
| button_secondary_text_color="*secondary_700", | |
| button_secondary_border_color="*secondary_200", | |
| input_background_fill="#ffffff", | |
| input_background_fill_dark="#2d2820", | |
| input_border_color="#e7e1d6", | |
| input_border_color_focus="*primary_400", | |
| input_radius="12px", | |
| slider_color="*primary_500", | |
| ) | |
| CUSTOM_CSS = """ | |
| .gradio-container { | |
| max-width: 760px !important; | |
| margin: 0 auto !important; | |
| padding: 0 14px !important; | |
| } | |
| #sari-header { | |
| text-align: center; | |
| padding: 22px 0 14px; | |
| width: 100%; | |
| max-width: 480px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| #sari-header .kicker { | |
| font-size: 12px; font-weight: 600; letter-spacing: 0.14em; | |
| text-transform: uppercase; color: var(--primary-500); margin: 0 0 6px; | |
| width: 100%; text-align: center; | |
| } | |
| #sari-header h1 { | |
| font-size: 38px; font-weight: 700; letter-spacing: -0.025em; margin: 0; | |
| background: linear-gradient(90deg, #f97316, #22c55e); | |
| -webkit-background-clip: text; background-clip: text; | |
| -webkit-text-fill-color: transparent; line-height: 1.1; | |
| width: 100%; text-align: center; | |
| } | |
| #sari-header p { | |
| color: var(--body-text-color-subdued); | |
| font-size: 15px; margin: 10px auto 0; max-width: 430px; line-height: 1.55; | |
| width: 100%; text-align: center; | |
| } | |
| .step-card { | |
| border: 1px solid var(--border-color-primary) !important; | |
| border-radius: 20px !important; | |
| padding: 22px !important; | |
| background: var(--block-background-fill) !important; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; | |
| transition: border-color 0.2s ease !important; | |
| } | |
| .step-card:hover { border-color: var(--primary-300) !important; } | |
| .step-head { | |
| display: flex; align-items: center; gap: 11px; | |
| font-size: 15px; font-weight: 600; | |
| color: var(--body-text-color); margin-bottom: 16px; | |
| } | |
| .step-num { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| width: 27px; height: 27px; border-radius: 50%; | |
| background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; | |
| font-size: 13px; font-weight: 700; flex-shrink: 0; | |
| } | |
| .locate-btn { | |
| width: 100% !important; font-weight: 600 !important; | |
| border-radius: 13px !important; padding: 13px !important; | |
| transition: transform 0.1s ease !important; | |
| } | |
| .locate-btn:active { transform: scale(0.99) !important; } | |
| .loc-status { | |
| font-size: 13px; margin-top: 10px; min-height: 18px; | |
| color: var(--body-text-color-subdued); | |
| } | |
| .loc-status.loc-ok { color: var(--secondary-500); font-weight: 500; } | |
| .loc-status.loc-err { color: #ef4444; } | |
| .loc-status.loc-pending { color: var(--primary-500); } | |
| .generate-btn { | |
| width: 100% !important; font-size: 16px !important; font-weight: 600 !important; | |
| padding: 16px !important; border-radius: 15px !important; margin-top: 8px !important; | |
| transition: transform 0.1s ease, box-shadow 0.2s ease !important; | |
| box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25) !important; | |
| } | |
| .generate-btn:hover { box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35) !important; } | |
| .generate-btn:active { transform: scale(0.99) !important; } | |
| .result-empty { | |
| text-align: center; padding: 40px 20px; | |
| border: 1.5px dashed var(--border-color-primary); | |
| border-radius: 20px; margin-top: 8px; | |
| } | |
| .result-empty .re-icon { | |
| width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px; | |
| background: linear-gradient(135deg, #fff7ed, #f0fdf4); | |
| display: flex; align-items: center; justify-content: center; font-size: 24px; | |
| } | |
| .result-empty .re-title { font-size: 15px; font-weight: 600; color: var(--body-text-color); margin: 0; } | |
| .result-empty .re-sub { font-size: 13px; color: var(--body-text-color-subdued); margin: 4px 0 0; } | |
| .officer-card { | |
| border-radius: 20px; padding: 24px; | |
| background: var(--block-background-fill); | |
| border: 1px solid var(--primary-300); | |
| margin-top: 8px; | |
| } | |
| .oc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } | |
| .oc-issue { font-size: 20px; font-weight: 700; color: var(--body-text-color); } | |
| .oc-sev { | |
| font-size: 12px; font-weight: 600; color: #fff; | |
| padding: 3px 12px; border-radius: 999px; text-transform: capitalize; | |
| } | |
| .oc-desc { margin: 0; font-size: 14px; color: var(--body-text-color); line-height: 1.6; } | |
| .seen-text { margin: 8px 0 0; font-size: 13px; color: var(--body-text-color-subdued); font-style: italic; } | |
| .oc-divider { height: 1px; background: var(--border-color-primary); margin: 18px 0; } | |
| .oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } | |
| .oc-grid > div { display: flex; flex-direction: column; gap: 3px; } | |
| .oc-label { font-size: 12px; color: var(--body-text-color-subdued); text-transform: uppercase; letter-spacing: 0.04em; } | |
| .oc-value { font-size: 15px; font-weight: 600; color: var(--body-text-color); } | |
| .oc-phone { | |
| color: #fff; text-decoration: none; font-weight: 600; | |
| background: var(--secondary-500); padding: 6px 14px; border-radius: 10px; | |
| display: inline-block; font-size: 14px; | |
| } | |
| .error-banner { | |
| background: var(--block-background-fill); | |
| border: 1px solid #ef4444; | |
| color: #ef4444; | |
| padding: 15px 18px; border-radius: 14px; font-size: 14px; line-height: 1.5; | |
| } | |
| @media (max-width: 640px) { | |
| #sari-header h1 { font-size: 30px; } | |
| #sari-header p { font-size: 14px; } | |
| .step-card { padding: 18px !important; border-radius: 16px !important; } | |
| .officer-card { padding: 18px; border-radius: 16px; } | |
| .oc-grid { grid-template-columns: 1fr; gap: 14px; } | |
| .oc-issue { font-size: 18px; } | |
| } | |
| footer { display: none !important; } | |
| """ |