Upload 14 files

modules/compare_stock_prices.py

@@ -66,17 +66,17 @@ def compare_stock_prices(stock_codes, days):
     plt.close()  # 리소스 정리
 
     # 주식 가격 데이터를 HTML 테이블로 변환
-    html_table = "<h3>Stock Prices Data</h3><div class='table-container'><table style='border-collapse: collapse; width: 100%;'>"
-    html_table += "<thead><tr><th style='border: 1px solid #ddd; padding: 0.5rem;'>Date</th>"
+    html_table = "<h3>Stock Prices Data</h3><div class='table-container'><table>"
+    html_table += "<thead><tr><th>Date</th>"
     for stock_code in stock_prices.keys():
-        html_table += f"<th style='border: 1px solid #ddd; padding: 0.5rem;'>{stock_code.upper()}</th>"
+        html_table += f"<th>{stock_code.upper()}</th>"
     html_table += "</tr></thead><tbody>"
 
     dates = stock_prices[list(stock_prices.keys())[0]].index
     for date in dates:
-        html_table += f"<tr><td style='border: 1px solid #ddd; padding: 0.5rem;'>{date.strftime('%Y-%m-%d')}</td>"
+        html_table += f"<tr><td>{date.strftime('%Y-%m-%d')}</td>"
         for stock_code in stock_prices.keys():
-            html_table += f"<td style='border: 1px solid #ddd; padding: 0.5rem;'>{stock_prices[stock_code][date]:,.2f}</td>"
+            html_table += f"<td>{stock_prices[stock_code][date]:,.2f}</td>"
         html_table += "</tr>"
 
     html_table += "</tbody></table></div>"

modules/portfolio_rebalancing.py

@@ -110,14 +110,14 @@ def get_portfolio_rebalancing_info(portfolio, target_weights, main_currency_cash
     sorted_stocks = sorted(current_weights.items(), key=lambda x: x[1], reverse=True)
 
     # 현재 보유량 및 가치 섹션 표시
-    current_info_html = "<h3>Your Portfolio Holdings</h3><div class='table-container'><table style='border-collapse: collapse;'>"
-    current_info_html += "<thead><tr><th style='border: 1px solid #ddd; text-align: center;'>Stock Code</th><th style='border: 1px solid #ddd; text-align: center;'>Current Weight (%)</th><th style='border: 1px solid #ddd; text-align: center;'>Current Value</th></tr></thead><tbody>"
+    current_info_html = "<h3>Your Portfolio Holdings</h3><div class='table-container'><table>"
+    current_info_html += "<thead><tr><th>Stock Code</th><th>Current Weight (%)</th><th>Current Value</th></tr></thead><tbody>"
     for stock_code, weight in sorted_stocks:
         current_info_html += (
             f"<tr>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{stock_code.upper()}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{weight:.1f}%</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{currency_symbol}{current_values[stock_code]:,.0f}</td>"
+            f"<td>{stock_code.upper()}</td>"
+            f"<td>{weight:.1f}%</td>"
+            f"<td>{currency_symbol}{current_values[stock_code]:,.0f}</td>"
             f"</tr>"
         )
     current_info_html += "</tbody></table></div><br>"
@@ -165,23 +165,23 @@ def get_portfolio_rebalancing_info(portfolio, target_weights, main_currency_cash
     sorted_currencies = sorted(currency_totals.items(), key=lambda x: x[1]['weight'], reverse=True)
 
     # 통화별 요약 테이블 생성
-    currency_table = "<h3>Your Portfolio by Currency</h3><div class='table-container wrap-text'><table style='border-collapse: collapse;'>"
-    currency_table += "<thead><tr><th style='border: 1px solid #ddd; text-align: center;'>Currency</th><th style='border: 1px solid #ddd; text-align: center;'>Total Weight (%)</th><th style='border: 1px solid #ddd; text-align: center;'>Total Value</th></tr></thead><tbody>"
+    currency_table = "<h3>Your Portfolio by Currency</h3><div class='table-container wrap-text'><table>"
+    currency_table += "<thead><tr><th>Currency</th><th>Total Weight (%)</th><th>Total Value</th></tr></thead><tbody>"
 
     for currency, data in sorted_currencies:
         currency_table += (
             f"<tr>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{currency.upper()}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{data['weight'] * 100:.1f}%</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{currency_symbol}{data['amount']:,}</td>"            
+            f"<td>{currency.upper()}</td>"
+            f"<td>{data['weight'] * 100:.1f}%</td>"
+            f"<td>{currency_symbol}{data['amount']:,}</td>"            
             f"</tr>"
         )
 
     currency_table += "</tbody></table></div><br>"
 
     # 재조정 분석 테이블 생성
-    result_message = portfolio_info + current_info_html + currency_table + "<h3>Re-Balancing Analysis</h3><div class='table-container wrap-text'><table style='border-collapse: collapse;'>"
-    result_message += "<thead><tr><th style='border: 1px solid #ddd; text-align: center;'>Stock Code</th><th style='border: 1px solid #ddd; text-align: center;'>Current Weight (%)</th><th style='border: 1px solid #ddd; text-align: center;'>Target Weight</th><th style='border: 1px solid #ddd; text-align: center;'>Target Ratio (%)</th><th style='border: 1px solid #ddd; text-align: center;'>Buy or Sell?</th><th style='border: 1px solid #ddd; text-align: center;'>Trade Amount</th><th style='border: 1px solid #ddd; text-align: center;'>Current Price per Share</th><th style='border: 1px solid #ddd; text-align: center;'>Estimated # of<br> Shares to Buy or Sell</th><th style='border: 1px solid #ddd; text-align: center;'>Quantity of Units</th><th style='border: 1px solid #ddd; text-align: center;'>Market Value</th><th style='border: 1px solid #ddd; text-align: center;'>% Asset Allocation</th></tr></thead><tbody>"
+    result_message = portfolio_info + current_info_html + currency_table + "<h3>Re-Balancing Analysis</h3><div class='table-container wrap-text'><table>"
+    result_message += "<thead><tr><th>Stock Code</th><th>Current Weight (%)</th><th>Target Weight</th><th>Target Ratio (%)</th><th>Buy or Sell?</th><th>Trade Amount</th><th>Current Price per Share</th><th>Estimated # of<br> Shares to Buy or Sell</th><th>Quantity of Units</th><th>Market Value</th><th>% Asset Allocation</th></tr></thead><tbody>"
 
     for adj in adjustments:
         difference, current_value, target_value, current_value_pct, trade_quantity, stock_code, price, new_value, trade_value, old_quantity, new_quantity, target_ratio, new_value_pct, target_weight, currency = adj
@@ -208,17 +208,17 @@ def get_portfolio_rebalancing_info(portfolio, target_weights, main_currency_cash
 
         result_message += (
             f"<tr>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{stock_code.upper()}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{current_value_pct_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{target_weight_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{target_ratio_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{Buy_or_Sell}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{trade_value_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{price_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{trade_quantity_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{old_quantity_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{new_value_str}</td>"
-            f"<td style='border: 1px solid #ddd; text-align: center;'>{new_value_pct_str}</td>"
+            f"<td>{stock_code.upper()}</td>"
+            f"<td>{current_value_pct_str}</td>"
+            f"<td>{target_weight_str}</td>"
+            f"<td>{target_ratio_str}</td>"
+            f"<td>{Buy_or_Sell}</td>"
+            f"<td>{trade_value_str}</td>"
+            f"<td>{price_str}</td>"
+            f"<td>{trade_quantity_str}</td>"
+            f"<td>{old_quantity_str}</td>"
+            f"<td>{new_value_str}</td>"
+            f"<td>{new_value_pct_str}</td>"
             f"</tr>"
         )
 

modules/retirement_planning.py

@@ -62,7 +62,7 @@ def retirement_planning(current_age=None, retirement_age=None, current_investmen
         <div>
             <div style="margin-bottom: 1.5rem;">
                 <!-- 은퇴 시점의 총 투자액 표시 -->
-                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Total investment at retirement</div>
+                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Total value at retirement</div>
                 <div style="font-size: 1.5rem; font-weight: bold; color: #1c75bc;">
                     <span style='color: #1678fb'>{investment_at_retirement:,.0f}</span>
                 </div>
@@ -87,10 +87,10 @@ def retirement_planning(current_age=None, retirement_age=None, current_investmen
         <table style='border-collapse: collapse; width: 100%;'>
             <thead>
                 <tr>
-                    <th style='border: 1px solid #ddd; padding: 0.5rem;'>Age</th>
-                    <th style='border: 1px solid #ddd; padding: 0.5rem;'>Total</th>
-                    <th style='border: 1px solid #ddd; padding: 0.5rem;'>Annual</th>
-                    <th style='border: 1px solid #ddd; padding: 0.5rem;'>Monthly</th>
+                    <th>Age</th>
+                    <th>Total</th>
+                    <th>Annual</th>
+                    <th>Monthly</th>
                 </tr>
             </thead>
             <tbody>
@@ -100,10 +100,10 @@ def retirement_planning(current_age=None, retirement_age=None, current_investmen
     for age, investment, annual_dividend_income, monthly_dividend_income in post_retirement_investments:
         result_html += f"""
                 <tr>
-                    <td style='border: 1px solid #ddd; padding: 0.5rem;'>{age}</td>
-                    <td style='border: 1px solid #ddd; padding: 0.5rem;'>{investment:,.0f}</td>
-                    <td style='border: 1px solid #ddd; padding: 0.5rem;'>{annual_dividend_income:,.0f}</td>
-                    <td style='border: 1px solid #ddd; padding: 0.5rem;'>{monthly_dividend_income:,.0f}</td>
+                    <td>{age}</td>
+                    <td>{investment:,.0f}</td>
+                    <td>{annual_dividend_income:,.0f}</td>
+                    <td>{monthly_dividend_income:,.0f}</td>
                 </tr>
         """
 

style.css

@@ -1,10 +1,21 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
+@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%;
-    font-family: 'Montserrat', 'ui-sans-serif', 'system-ui', 'sans-serif';
+    font-family: 'Patrick Hand', 'ui-sans-serif', 'system-ui', 'sans-serif';
 }
 
 .code {
@@ -12,10 +23,11 @@
 }
 
 .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 {
     --background-color-light: #ffffff;
     --background-color-dark: #121212;
@@ -45,14 +57,6 @@ white-space: normal; /* 텍스트 공간에 맞게 줄바꿈 */
     --total-value-color-dark: #ffeb3b;
 }
 
-body {
-    font-family: 'Roboto', sans-serif;
-    line-height: 1.6;
-    color: var(--text-color-light);
-    background-color: var(--background-color-light);
-    padding: 20px;
-}
-
 .buy-sell {
     padding: 5px 10px;
     border-radius: 5px;
@@ -67,21 +71,11 @@ body {
     color: white !important;
 }
 
-.dashboard {
-    /* background-color: #f6fcfe; */
-    /* border: 1px solid #89c9e6; */
-    text-align: left;
-    padding: 10px;
-    font-size: 1rem;
-    border-radius: 18px;
-    box-shadow: 2px 4px 12px #00000014;
-    transition: all .3s cubic-bezier(0,0,.5,1);
-}
-
 .sell {
     background-color: var(--sell-color);
     color: white !important;
 }
+
 .highlight-edit {
     background-color: var(--highlight-edit-bg-color-light);
     color: var(--highlight-edit-text-color-light) !important;
@@ -91,6 +85,7 @@ body {
     display: inline-block;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
+
 .highlight-black {
     background-color: var(--highlight-black-light);
     color: var(--text-color-dark) !important;
@@ -121,7 +116,7 @@ body {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.container {
+/* .container {
     font-size: 1.2rem;
     margin-bottom: 15px;
     padding: 20px;
@@ -129,89 +124,15 @@ body {
     border-radius: 5px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     background-color: var(--highlight-color-light);
-}
-
-.header {
-    font-size: 1.2rem;
-    font-weight: bold;
-    color: var(--header-color-light);
-    margin-top: 10px;
-    text-align: center;
-}
-
-.total-value {
-    color: var(--total-value-color-light);
-    font-size: 3rem;
-}
-
-.summary {
-    font-size: 1.2rem;
-    color: var(--text-color-light);
-    margin-top: 10px;
-    text-align: center;
-}
-
-.table-container {
-    width: 100%;
-    overflow: auto;
-    margin-bottom: 20px;
-    position: relative;
-    max-height: 600px;
-    border: 1px hidden #ddd;
-    overflow-y: auto; /* 변경된 부분: 세로 스크롤 허용 */
-}
-
-.table-container table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.table-container th, .table-container td {
-    border: 1px hidden #ddd;
-    padding: 8px;
-    text-align: left;
-    background-color: var(--background-color-light);
-}
-
-.table-container th {
-    background-color: var(--highlight-color-light);
-    position: sticky;
-    top: 0;
-    z-index: 2;
-}
+} */
 
-.table-container td:first-child, .table-container th:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-}
-
-.table-container th:first-child {
-    z-index: 3;
-}
 
+/* 다크모드 스타일 */
 @media (prefers-color-scheme: dark) {
-    body {
-        color: var(--text-color-dark);
-        background-color: var(--background-color-dark);
-    }
-
-    .container {
+    /* .container {
         background-color: var(--highlight-color-dark);
     }
-
-    .header {
-        color: var(--header-color-dark);
-    }
-
-    .total-value {
-        color: var(--total-value-color-dark);
-    }
-
-    .table-container th, .table-container td {
-        background-color: var(--background-color-dark);
-        color: var(--text-color-dark);
-    }
+    */
 
     .highlight-yellow {
         background-color: var(--highlight-yellow-bg-color-dark);
@@ -227,27 +148,74 @@ body {
         background-color: var(--highlight-sky-bg-color-dark);
         color: var(--highlight-sky-text-color-dark) !important;
     }
+
     .highlight-edit {
         background-color: var(--highlight-edit-bg-color-dark);
         color: var(--highlight-edit-text-color-dark) !important;
     }
 
-    .table-container th {
-        background-color: var(--highlight-color-dark);
-    }
-
     .buy-sell, .highlight-black, .highlight-yellow, .highlight-sky, .highlight-edit {
         box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
     }
-    .dashboard {
-        background-color: #2b2b2b; /* 어두운 배경색 */
-        border: 1px solid #555555; /* 어두운 테두리 색상 */
-        color: #e0e0e0; /* 밝은 글자 색상 */
-        text-align: left;
-        padding: 10px;
-        font-size: 1rem;
-        border-radius: 18px;
-        box-shadow: 2px 4px 12px #00000050; /* 다크모드에 어울리는 그림자 색상 */
-        transition: all .3s cubic-bezier(0,0,.5,1);
-    }
+
 }
+
+/* 기본 테이블 스타일 */
+.table-container {
+    max-width: 100%;
+    overflow-x: auto;
+    border: 1px solid #ddd;
+  }
+  
+  .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; */
+    text-align: left;
+    text-transform: uppercase;
+  }
+  
+  .table-container thead {
+    background: #f9f9f9;
+  }
+  
+  
+  .table-container th:first-child,
+  .table-container td:first-child {
+    position: sticky;
+    left: 0;
+    background: #f9f9f9;
+    z-index: 2;
+  }
+  
+  /* 다크 모드 */
+  @media (prefers-color-scheme: dark) {
+    .table-container {
+      border: 1px solid #444;
+    }
+  
+    .table-container th,
+    .table-container td {
+      border: 1px solid #444;
+      background: #333;
+      color: #ccc;
+    }
+  
+    .table-container thead {
+      background: #444;
+    }
+
+    .table-container th:first-child,
+    .table-container td:first-child {
+      background: #444;
+    }
+  }
+