Hugging Face's logo

Spaces:
Antonio0616
/
FormingStar
Sleeping

App Files Community
FormingStar
File size: 11,622 Bytes 
672ba7b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
 
# dashboard_theme/theme.py
# 다중 팔레트 지원 (기본: Navy×Amber / 대안: Obsidian×Cyan / Graphite×Warm Orange)
import streamlit as st

PALETTES = {
    # 1) 기존 네이비 × 앰버
    "navy_amber": {
        "bg": "#0B1220",
        "panel": "#0F1B2D",
        "panel2": "#0B1627",
        "border": "rgba(255,255,255,.06)",
        "shadow": "0 12px 28px rgba(0,0,0,.40)",
        "text": "#FFFFFF",
        "muted": "#9FB1C5",
        "accent": "#F59E0B",
        "accent_soft": "rgba(245,158,11,.12)",
        "disabled_bg": "#2A2F3A",
        "disabled_fg": "#E0E6ED",
        "placeholder": "rgba(255,255,255,.9)",
        "sidebar_bg": "#0C1828",
        "radio_bg": "#0E1A2B",
        "radio_hover": "#112642",
    },
    # 2) 오브시디언 × 시안
    "obsidian_cyan": {
        "bg": "#0B0F14",
        "panel": "#0F1720",
        "panel2": "#0B131C",
        "border": "rgba(255,255,255,.08)",
        "shadow": "0 16px 32px rgba(0,0,0,.55)",
        "text": "#F8FAFC",
        "muted": "#A7C4D6",
        "accent": "#22D3EE",
        "accent_soft": "rgba(34,211,238,.14)",
        "disabled_bg": "#26313A",
        "disabled_fg": "#E6F6FA",
        "placeholder": "rgba(240,249,255,.92)",
        "sidebar_bg": "#0F141A",
        "radio_bg": "#0F1720",
        "radio_hover": "#13202B",
    },
    # 3) Graphite × Warm Orange (Simulation 페이지 톤과 일치)
    "graphite_gold": {
        "bg": "#2F3136",          # 전체 배경(짙은 그레이)
        "panel": "#3B3E44",       # 카드/패널
        "panel2": "#2B2D31",      # 표/보조
        "border": "rgba(255,255,255,.10)",
        "shadow": "0 16px 40px rgba(0,0,0,.45)",
        "text": "#F6F7F9",
        "muted": "#C9CDD2",
        "accent": "#F59E0B",      # 따뜻한 주황(눈부심 적음)
        "accent_soft": "rgba(245,158,11,.18)",
        "disabled_bg": "#4A4E55",
        "disabled_fg": "#F1F3F6",
        "placeholder": "rgba(250,250,252,.85)",
        "sidebar_bg": "#3A3D42",
        "radio_bg": "#3B3E44",
        "radio_hover": "#454950",
    },
}

def setup_page():
    st.set_page_config(page_title="시뮬레이션", layout="wide", initial_sidebar_state="expanded")

def _css_template(c):
    return f"""

<style>

@font-face {{

  font-family:'Pretendard';

  src:url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.woff2') format('woff2');

  font-weight:100 900; font-style:normal; font-display:swap;

}}

html, body, [class*="css"] {{

  font-family:Pretendard, Inter, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, sans-serif;

}}



:root{{

  --bg:{c['bg']};

  --panel:{c['panel']};

  --panel-2:{c['panel2']};

  --border:{c['border']};

  --shadow:{c['shadow']};

  --text:{c['text']};

  --muted:{c['muted']};

  --accent:{c['accent']};

  --accent-soft:{c['accent_soft']};

}}



html, body, .stApp, .stAppViewContainer, [data-testid="stAppViewContainer"]{{ background:var(--bg)!important; color:var(--text)!important; }}

[data-testid="stHeader"]{{ background:transparent!important; }}

section.main{{ background:transparent!important; }}



/* 사이드바 */

section[data-testid="stSidebar"]{{ background:{c['sidebar_bg']}!important; border-right:1px solid var(--border)!important; }}

section[data-testid="stSidebar"] *{{ color:var(--text)!important; }}

section[data-testid="stSidebar"] .stMarkdown{{ color:var(--muted)!important; }}



/* 라디오/토글형 */

div[role="radiogroup"] > label{{

  border:1px solid var(--border)!important; border-radius:12px!important;

  padding:10px 14px!important; margin-right:8px!important; background:{c['radio_bg']}!important;

  cursor:pointer; font-weight:800; color:var(--text)!important;

  transition:transform .08s ease, background .2s ease, box-shadow .2s ease, filter .2s ease;

}}

div[role="radiogroup"] input{{ display:none!important; }}

div[role="radiogroup"] > label:hover{{ background:{c['radio_hover']}!important; transform:translateY(-1px); }}

div[role="radiogroup"] > label[data-checked="true"]{{

  color:#1b1b1b!important; background:var(--accent)!important; border-color:var(--accent)!important;

  box-shadow:0 8px 22px rgba(0,0,0,.18), 0 6px 18px color-mix(in oklab, var(--accent) 30%, transparent)!important;

}}



/* Expander */

div[data-testid="stExpander"] > details{{ padding:0; border:none; background:transparent; }}

div[data-testid="stExpander"] > details > summary{{

  list-style:none; height:44px; line-height:44px;

  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%)!important;

  border:1px solid var(--border)!important; border-radius:12px!important; padding:0 14px!important;

  display:flex; align-items:center; color:var(--text)!important; font-weight:900;

}}

div[data-testid="stExpander"] > details > div{{

  margin-top:10px; padding:14px; border:1px solid var(--border)!important;

  border-radius:12px; background:var(--panel-2); box-shadow:var(--shadow);

}}



/* 입력 컴포넌트 */

div[data-baseweb="select"] > div{{ border:1.6px solid var(--border)!important; border-radius:12px!important; background:var(--panel-2)!important; color:var(--text)!important; }}

div[data-testid="stNumberInput"] > div{{ border:1.6px solid var(--border)!important; border-radius:12px!important; background:var(--panel-2)!important; }}

div[data-testid="stNumberInput"] input{{ background:var(--panel-2)!important; color:var(--text)!important; border:none!important; }}

div[data-testid="stTextInput"] input, div[data-testid="stTextArea"] textarea{{

  background:var(--panel-2)!important; color:var(--text)!important; border:1.6px solid var(--border)!important; border-radius:12px!important;

}}

:where(input,textarea,select):focus{{

  outline:2px solid color-mix(in oklab, var(--accent) 48%, transparent)!important;

  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)!important;

}}



/* 버튼 - 기본(강조) */

.stButton > button{{

  background:var(--accent)!important; border:1px solid var(--accent)!important;

  color:#1b1b1b!important; font-weight:1000!important; border-radius:14px!important; padding:10px 16px!important;

  box-shadow:0 8px 18px rgba(0,0,0,.22), 0 8px 18px color-mix(in oklab, var(--accent) 28%, transparent)!important;

  transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;

}}

.stButton > button:hover{{ filter:brightness(1.03)!important; transform:translateY(-1px)!important; }}



/* 버튼 - 비활성/Secondary */

.stButton > button:disabled, .stButton > button[disabled]{{

  background:{c['disabled_bg']}!important; color:{c['disabled_fg']}!important;

  border:1px solid var(--border)!important; font-weight:600!important; opacity:1!important;

}}



/* 패널 */

.panel{{

  border:1px solid var(--border)!important; border-radius:18px!important;

  padding:18px 18px 14px!important;

  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%)!important;

  box-shadow:var(--shadow)!important; margin:10px 0 22px!important; backdrop-filter:blur(6px);

}}

.panel-title{{ font-weight:1000!important; color:var(--text)!important; margin:0 0 10px 2px!important; font-size:18px!important; }}



/* Metric 카드 */

.metric{{

  border:1px solid var(--border)!important; border-radius:18px!important;

  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%)!important;

  box-shadow:var(--shadow)!important; padding:22px!important; min-height:164px!important;

  display:flex; flex-direction:column; justify-content:center;

}}

.metric .label{{ font-weight:900; color:var(--muted); font-size:14px; }}

.metric .value{{ font-size:46px; font-weight:1000; color:var(--accent); margin:6px 0 8px; }}

.metric .chip{{

  display:inline-block; padding:5px 12px; border-radius:999px; font-weight:1000; font-size:12px;

  background:var(--accent-soft); color:var(--accent);

  border:1px solid color-mix(in oklab, var(--accent) 26%, transparent);

}}

.metric.ok .chip{{ background:rgba(34,197,94,.16); color:#A9F0BF; }}

.metric.bad .chip{{ background:rgba(239,68,68,.16); color:#F7B4B4; }}

.metric .range{{ color:#E8EEF8; font-size:15px; font-weight:800; }}



/* DataFrame */

[data-testid="stDataFrame"] thead th{{ background:var(--panel)!important; color:var(--text)!important; border-bottom:1px solid var(--border)!important; }}

[data-testid="stDataFrame"] tbody td{{ background:var(--panel-2)!important; color:var(--text)!important; }}

[data-testid="stDataFrame"] tbody tr:nth-child(even) td{{ background:color-mix(in oklab, var(--panel-2) 90%, black)!important; }}



/* 구분선/캡션/배지 */

hr, .stDivider{{ border-color:var(--border)!important; }}

small, .stCaption{{ color:var(--muted)!important; }}

.badge{{

  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:900;

  border:1px solid var(--border); background:var(--panel); color:var(--text); margin-right:8px; margin-bottom:6px;

}}

.badge.em{{ background:var(--accent-soft); color:var(--accent); border-color:color-mix(in oklab, var(--accent) 28%, transparent); }}

.badge.ok{{ background:rgba(34,197,94,.16); color:#A9F0BF; }}

.badge.ng{{ background:rgba(239,68,68,.16); color:#F7B4B4; }}



/* 라벨/텍스트 고정 패치 */

[data-testid="stWidgetLabel"], [data-testid="stWidgetLabel"] *, label[data-testid="stWidgetLabel"], label[data-testid="stWidgetLabel"] *{{ color:var(--text)!important; opacity:1!important; }}

.stRadio label, .stRadio label *, div[role="radiogroup"] > label, div[role="radiogroup"] > label *{{ color:var(--text)!important; opacity:1!important; }}

.stCheckbox label, .stCheckbox label *, [data-testid="stCheckbox"] label, [data-testid="stCheckbox"] label *{{ color:var(--text)!important; opacity:1!important; }}

[data-baseweb="checkbox"] label, [data-baseweb="checkbox"] label *, [data-baseweb="radio"] label, [data-baseweb="radio"] label *{{ color:var(--text)!important; opacity:1!important; }}

[data-testid="stMarkdownContainer"], [data-testid="stMarkdownContainer"] *{{ color:var(--text)!important; opacity:1!important; }}



/* Tabs */

div[role="tablist"]{{ border-bottom:1px solid var(--border)!important; }}

div[role="tablist"] button{{ background:transparent!important; border:none!important; cursor:pointer!important; }}

div[role="tablist"] button[aria-selected="true"], div[role="tablist"] button[aria-selected="true"] span, div[role="tablist"] button[aria-selected="true"] p{{ color:var(--text)!important; }}

div[role="tablist"] button[aria-selected="false"], div[role="tablist"] button[aria-selected="false"] span, div[role="tablist"] button[aria-selected="false"] p{{ color:var(--muted)!important; }}

div[role="tablist"] button[aria-selected="true"]::after{{ content:""; display:block; margin-top:6px; border-bottom:2px solid var(--accent)!important; }}

div[role="tablist"] button:hover{{ filter:brightness(1.08)!important; }}



/* placeholder */

::placeholder{{ color:{c['placeholder']}!important; opacity:1!important; }}



/* 정렬 보정: 캡션 & 익스팬더 */

.tight-block .stCaption, .tight-block small {{

  margin-top: 0 !important;

  display: block;

}}

.tight-block [data-testid="stExpander"] > details {{

  margin-top: 6px !important;

}}

</style>

"""

def inject_css(palette: str = "navy_amber"):
    c = PALETTES.get(palette, PALETTES["navy_amber"])
    st.markdown(_css_template(c), unsafe_allow_html=True)

def inject(palette: str = "navy_amber"):
    """예) inject('graphite_gold')"""
    setup_page()
    inject_css(palette)