Upload 14 files

interface/about_interface.py

@@ -13,7 +13,7 @@ def render():
 
         # Portfolio Rebalancing Tool Section
         create_tool_section(
-            "🔥 Portfolio",
+            "🍇 Portfolio",
             """
             # 포트폴리오 리밸런싱 도구
 
@@ -216,7 +216,7 @@ def render():
 
         # Retirement Planning Tool Section
         create_tool_section(
-            "🧓 Retirement Planning",
+            "🌅 Retirement Planning",
             """
             # 은퇴 계획 도구
 

interface/portfolio_rebalancing_interface.py

@@ -15,9 +15,9 @@ examples = [
 
 portfolio_inputs = [
     gr.Dropdown(label="💱 Main Currency", choices=currency_codes, value="KRW", info="Assets converted to main currency."),    
-    gr.Textbox(label="🔥 Holdings", lines=2, info="Format: ticker currency quantity weight, ... ", placeholder="e.g., SCHD USD 500 8, QQQ USD 200 2", value="SCHD USD 500 8,\nQQQ USD 200 2,\n458730 krw 1000 8,\n368590 krw 1000 2"),
-    gr.Number(label="🪵 Cash", value=10000000),
-    gr.Slider(label="⚖️ Cash Ratio (%)", value=15, minimum=0, maximum=100, step=1)
+    gr.Textbox(label="🍇 Holdings", lines=2, info="Format: ticker currency quantity weight, ... ", placeholder="e.g., SCHD USD 500 8, QQQ USD 200 2", value="SCHD USD 500 8,\nQQQ USD 200 2,\n458730 krw 1000 8,\n368590 krw 1000 2"),
+    gr.Number(label="💧 Cash", value=10000000),
+    gr.Slider(label="🪣 Cash Ratio (%)", value=15, minimum=0, maximum=100, step=1)
 ]
 
 output = gr.HTML()

modules/portfolio_rebalancing.py

@@ -90,8 +90,9 @@ def get_portfolio_rebalancing_info(portfolio, target_weights, main_currency_cash
             <div>
                 <div style="margin-bottom: 1.5rem;">
                     <!-- 전체 평가금액 표시 -->
-                    <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">As of {current_time}, Market Value </div>
-                        <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{currency_symbol}{total_value:,.0f}</span> 
+                    <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Market Value</div>
+                        <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{currency_symbol}{total_value:,.0f}</span>
+                        As of {current_time} 
                     <hr style="margin: 1.5rem 0;">
                 </div>
             </div>

modules/retirement_planning.py

@@ -84,7 +84,7 @@ def retirement_planning(current_age=None, retirement_age=None, current_investmen
     </div>
     <h3>Dividend Income After Retirement</h3>
     <div class='table-container'>
-        <table style='border-collapse: collapse; width: 100%;'>
+        <table>
             <thead>
                 <tr>
                     <th>Age</th>

style.css

@@ -9,9 +9,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;700&display=swap');
 
-/* Comic Sans MS */
-
-
 #col-container {
     margin: 0 auto;
     max-width: 100%;
@@ -23,9 +20,9 @@
 }
 
 .wrap-text {
-    word-wrap: break-word; /* 오래된 브라우저를 위해 */
-    overflow-wrap: break-word; /* 긴 단어도 적절히 끊어서 줄바꿈 */
-    white-space: normal; /* 텍스트 공간에 맞게 줄바꿈 */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
 }
 
 :root {
@@ -41,8 +38,8 @@
     --sell-color: #f44336;
     --highlight-edit-bg-color-light: #fff2cc;
     --highlight-edit-text-color-light: #0000ff;
-    --highlight-edit-bg-color-dark: hsl(45, 100%, 70%); /* 어두운 배경 */
-    --highlight-edit-text-color-dark: hsl(240, 100%, 50%); /* 밝은 텍스트 */
+    --highlight-edit-bg-color-dark: hsl(45, 100%, 70%);
+    --highlight-edit-text-color-dark: hsl(240, 100%, 50%);
     --highlight-yellow-bg-color-light: #ffeb3b;
     --highlight-yellow-bg-color-dark: #ffca28;
     --highlight-yellow-text-color-light: #000000;
@@ -116,27 +113,10 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* .container {
-    font-size: 1.2rem;
-    margin-bottom: 15px;
-    padding: 20px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    background-color: var(--highlight-color-light);
-} */
-
-
-/* 다크모드 스타일 */
 @media (prefers-color-scheme: dark) {
-    /* .container {
-        background-color: var(--highlight-color-dark);
-    }
-    */
-
     .highlight-yellow {
         background-color: var(--highlight-yellow-bg-color-dark);
-        color: var (--highlight-yellow-text-color-dark) !important;
+        color: var(--highlight-yellow-text-color-dark) !important;
     }
 
     .highlight-black {
@@ -157,61 +137,63 @@
     .buy-sell, .highlight-black, .highlight-yellow, .highlight-sky, .highlight-edit {
         box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
     }
-
 }
-/* 기본 테이블 스타일 */
+
 .table-container {
-    max-width: 100%;
-    overflow-x: auto;
-    border: 1px solid #ddd;
+    width: 100%;
+    overflow: auto;
+    margin-bottom: 20px;
+    position: relative;
+    max-height: 600px;
+    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
 }
-  
+
 .table-container table {
     width: 100%;
     border-collapse: collapse;
-    table-layout: auto;
-}
-  
-.table-container th,
-.table-container td {
-    padding: 8px 16px;
-    border: 1px solid #ddd;
-    background: #fff;
-    /* white-space: nowrap; */
+}
+
+.table-container th, .table-container td {
+    border: 1px hidden #ddd;
+    padding: 8px;
     text-align: left;
-    text-transform: uppercase;
+    background-color: var(--background-color-light);
 }
-  
-.table-container thead {
-    background: #f9f9f9;
+
+.table-container tr:hover td {
+    background: #e7f9ef;
 }
-  
-.table-container th:first-child,
-.table-container td:first-child {
+
+.table-container th {
+    background-color: var(--highlight-color-light);
     position: sticky;
-    left: 0;
-    background: #f9f9f9;
+    top: 0;
     z-index: 2;
 }
-  
-/* 마우스 오버 효과 */
-.table-container tr:hover td {
-    background: #f1f1f1;
+
+.table-container td:first-child, .table-container th:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: var(--highlight-color-light);
+}
+
+.table-container th:first-child {
+    z-index: 3;
 }
-  
-/* 다크 모드 */
+
 @media (prefers-color-scheme: dark) {
     .table-container {
-        border: 1px solid #444;
+        border: 1px hidden #444;
     }
-  
+
     .table-container th,
     .table-container td {
-        border: 1px solid #444;
+        border: 1px hidden #444;
         background: #333;
         color: #ccc;
     }
-  
+
     .table-container thead {
         background: #444;
     }
@@ -221,8 +203,7 @@
         background: #444;
     }
 
-    /* 다크 모드 마우스 오버 효과 */
     .table-container tr:hover td {
-        background: #555;
+        background: #e7f9ef;
     }
 }