Hugging Face's logo

Spaces:
cryman38
/
mytest_app
Sleeping

App Files Community
mytest_app / portfolio.html
cryman38's picture
cryman38
Upload 4 files
5fea6c7 verified
raw
history blame contribute delete
8.14 kB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Rebalancing</title>
<style>
:root {
--background-color-light: #ffffff;
--background-color-dark: #121212;
--text-color-light: #333333;
--text-color-dark: #ffffff;
--highlight-color-light: #f7f7f7;
--highlight-color-dark: #1e1e1e;
--header-color-light: #000000;
--header-color-dark: #ffffff;
--buy-color: #4caf50;
--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-yellow-bg-color-light: #ffeb3b;
--highlight-yellow-bg-color-dark: #ffca28;
--highlight-yellow-text-color-light: #000000;
--highlight-yellow-text-color-dark: #000000;
--highlight-sky-bg-color-light: #ddf5fd;
--highlight-sky-bg-color-dark: #89c9e6;
--highlight-sky-text-color-light: #000000;
--highlight-sky-text-color-dark: #000000;
--highlight-black-light: #000000;
--highlight-black-dark: #ffffff;
--total-value-color-light: #000000;
--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;
font-weight: bold;
display: inline-block;
margin: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.buy {
background-color: var(--buy-color);
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;
padding: 5px 10px;
font-weight: bold;
border-radius: 5px;
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;
padding: 5px 10px;
font-weight: bold;
border-radius: 5px;
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.highlight-yellow {
background-color: var(--highlight-yellow-bg-color-light);
color: var(--highlight-yellow-text-color-light) !important;
padding: 5px 10px;
font-weight: bold;
border-radius: 5px;
display: inline-block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.highlight-sky {
background-color: var(--highlight-sky-bg-color-light);
color: var(--highlight-sky-text-color-light) !important;
padding: 5px 10px;
font-weight: bold;
border-radius: 5px;
display: inline-block;
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);
}
.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;
max-height: max-content; /* ν‘œμ˜ μ΅œλŒ€ 높이 μ„€μ • */
overflow-y: hidden; /* 슀크둀 μˆ¨κΉ€ */
}
.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 {
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);
color: var(--highlight-yellow-text-color-dark) !important;
}
.highlight-black {
background-color: var(--highlight-black-dark);
color: var(--text-color-light) !important;
}
.highlight-sky {
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);
}
}
</style>
</head>
</html>