-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (156 loc) · 5.78 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./CSS/style.css">
<script defer src="./main.js"></script>
<title>Banking APP</title>
</head>
<body>
<div class="container">
<div class="safe_area"></div>
<div class="app_screen">
<!-- main 화면 -->
<main>
<!-- header -->
<header>
<a href="#"><img src="./images/profile.png" alt="profile"></a>
<h1>생활비</h1>
<ul>
<li aria-label="QR"><button><img src="./images/QR.svg" alt="QR icon"></button></li>
<li aria-label="검색"><button><img src="./images/search.svg" alt="search icon"></button></li>
</ul>
</header>
<!-- bank_acct -->
<section class="bank_acct">
<div class="bank_acct_info">
<h3><span>355-673877-78773</span></h3>
<div class="left_money"><span>1,240,000원</span></div>
<div class="transfer_btn"><button>이체</button></div>
<div>
<div class="range_wrap">
<input type="range">
</div>
<button class="chart"><img src="./images/chart.svg" alt="chart icon" /></button>
<div class="left_message"><span>5일 동안 210,000원 남음</span></div>
</div>
</div>
</section>
<!-- 공지 -->
<div class="notice"><span>지금 낮은 이자로 생활대출을 신청하세요! </span><a href="#">Go</a></div>
<!-- 상세내역 -->
<section class="bank_use_history">
<div class="drag_btn"></div>
<!-- 저축 -->
<div class="saving">
<ul>
<li>
<span>여행가자!</span>
<span>842,200원</span>
<div class="orange"></div>
</li>
<li>
<span>냉장고사기</span>
<span>142,200원</span>
<div class="yellow"></div>
</li>
<li>
<a href="#"><img src="./images/plus.svg" alt="plus icon" /><span>저금통 만들기</span></a>
</li>
</ul>
</div>
<!-- 내역 -->
<div class="use_history_detail">
<ul>
<!-- 오늘 사용내역 -->
<li>
<div>
<span class="day">오늘</span>
<span class="total">127,600원 지출</span>
</div>
<ul>
<li>
<span class="list">미스터피자</span>
<span class="out">32,000</span>
</li>
<li>
<span class="list">택시</span>
<span class="out">4,800</span>
</li>
<li>
<span class="list">이마트</span>
<span class="out">86,000</span>
</li>
<li>
<span class="list">스타벅스</span>
<span class="out">4,800</span>
</li>
<li>
<span class="list">전길수</span>
<span class="in">+20,000</span>
</li>
</ul>
</li>
<!-- 어제 사용내역 -->
<li>
<div>
<span class="day">어제</span>
<span class="total">71,600원 지출</span>
</div>
<ul>
<li>
<span class="list">미스터피자</span>
<span class="out">32,000</span>
</li>
</ul>
</li>
</ul>
</div>
</section>
</main>
<!-- 지출관리 설정 page -->
<div style="display: none;">
<h1>지출관리</h1>
<section class="set_budget">
<h3>기준금액설정</h3>
<span>2,100,000원</span>
<div>
<input type="range">
</div>
</section>
<section class="daily_report">
<h3>일간 리포트</h3>
<canvas class="bar_graph"></canvas>
</section>
<section class="monthly_out_pattern">
<h3>6월 지출패턴</h3>
<div class="donut_graph">
<canvas></canvas>
<div><span>1,736,500</span><span>원</span></div>
</div>
<ul class="out_category">
<li><img /><span class="left">주유비</span><span class="right">50,000원</span></li>
<li><img /><span class="left">건강관리비</span><span class="right">80,000원</span></li>
<li><img /><span class="left">외식비</span><span class="right">233,000원</span></li>
<li><img /><span class="left">장보기</span><span class="right">390,000원</span></li>
<li><img /><span class="left">상점</span><span class="right">46,000원</span></li>
</ul>
</section>
<button>닫기</button>
</div>
</div>
<!-- 하단 메뉴 -->
<nav>
<ul>
<li aria-label="계좌정보"><a href="#"><img src="./images/account.svg" alt="account" /></a></li>
<li aria-label="설정"><a href="#"><img src="./images/settings.svg" alt="settings" /></a></li>
<li aria-label="메시지"><a href="#"><img src="./images/chatting.svg" alt="chatting" /></a></li>
<li aria-label="더보기"><a href="#"><img src="./images/etc.svg" alt="etc"></a></li>
</ul>
</nav>
</div>
</body>
</html>