Hugging Face's logo

Spaces:
roncc13
/
CMD_BERT_FINAL
Sleeping

App Files Community
roncc13 commited on
Commit
b0fac1b
·
verified ·
1 Parent(s): 359c12a

Create theme.py

Browse files
Files changed (1) hide show
  1. theme.py +120 -0
theme.py ADDED
@@ -0,0 +1,120 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+
3
+ # Put ALL your custom CSS here
4
+ custom_css = """
5
+ body {
6
+ background: linear-gradient(135deg, #020617 0%, #1e0b45 50%, #020617 100%);
7
+ }
8
+ .gradio-container {
9
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
10
+ "Segoe UI", sans-serif;
11
+ max-width: 1200px !important;
12
+ margin: 0 auto !important;
13
+ padding: 32px 32px 40px 32px !important;
14
+ color: #f9fafb;
15
+ }
16
+ .gradio-container .block {
17
+ background: transparent !important;
18
+ border: none !important;
19
+ box-shadow: none !important;
20
+ }
21
+ .glass-card {
22
+ background: rgba(15, 23, 42, 0.96);
23
+ border-radius: 24px;
24
+ border: 1px solid rgba(148, 163, 184, 0.30);
25
+ box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
26
+ padding: 18px 20px;
27
+ }
28
+ .hero-title {
29
+ font-size: 34px;
30
+ font-weight: 700;
31
+ letter-spacing: 0.02em;
32
+ line-height: 1.2;
33
+ color: #e5e7eb;
34
+ margin-bottom: 8px;
35
+ }
36
+ .hero-subtitle {
37
+ font-size: 14px;
38
+ max-width: 640px;
39
+ opacity: 0.9;
40
+ color: #cbd5f5;
41
+ }
42
+ .conf-bar-bg {
43
+ margin-top: 14px;
44
+ width: 100%;
45
+ height: 8px;
46
+ border-radius: 999px;
47
+ background: rgba(148, 163, 184, 0.35);
48
+ }
49
+ .conf-bar-fill {
50
+ height: 100%;
51
+ border-radius: inherit;
52
+ background: linear-gradient(90deg, #f97316, #fb923c);
53
+ }
54
+ .badge-pill {
55
+ display: inline-flex;
56
+ align-items: center;
57
+ padding: 4px 14px;
58
+ border-radius: 999px;
59
+ font-size: 11px;
60
+ font-weight: 600;
61
+ }
62
+ .badge-fake {
63
+ background: #f97316;
64
+ color: #111827;
65
+ }
66
+ .badge-real {
67
+ background: #22c55e;
68
+ color: #022c22;
69
+ }
70
+ textarea {
71
+ background: #020617 !important;
72
+ border-radius: 18px !important;
73
+ border: 1px solid rgba(148, 163, 184, 0.35) !important;
74
+ color: #f9fafb !important;
75
+ font-size: 13px !important;
76
+ }
77
+ @media (max-width: 900px) {
78
+ .two-col {
79
+ flex-direction: column !important;
80
+ }
81
+ }
82
+ """
83
+
84
+ def header():
85
+ return gr.HTML(
86
+ """
87
+ <div style="max-width:1120px;margin:0 auto;">
88
+ <header style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
89
+ <div style="display:flex;align-items:center;gap:10px;">
90
+ <div style="width:32px;height:32px;border-radius:999px;
91
+ background:radial-gradient(circle at 30% 30%, #a5b4fc, #6366f1);
92
+ display:flex;align-items:center;justify-content:center;
93
+ color:#020617;font-weight:700;font-size:16px;">
94
+ C
95
+ </div>
96
+ <div>
97
+ <div style="font-weight:600;font-size:14px;letter-spacing:0.08em;
98
+ text-transform:uppercase;color:#e5e7eb;">
99
+ CMD‑BERT
100
+ </div>
101
+ <div style="font-size:11px;color:#9ca3af;">
102
+ Cebuano Misinformation Detector
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div style="display:flex;align-items:center;gap:8px;font-size:13px;color:#e5e7eb;opacity:0.9;">
107
+ <span>About CMD‑BERT</span>
108
+ <div style="width:24px;height:24px;border-radius:999px;
109
+ background:rgba(148,163,184,0.35);"></div>
110
+ </div>
111
+ </header>
112
+ </div>
113
+ """
114
+ )
115
+
116
+ def card_start():
117
+ return gr.HTML("<div style='padding:16px 18px;'>")
118
+
119
+ def card_end():
120
+ return gr.HTML("</div>")