hayato5246/stocksearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
hayato5246
2026-03-31 19:32:59 +09:00
commit d10b794c9f
78 changed files with 1671595 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
templates/pages/kospi200.html Normal file
View File

@@ -0,0 +1,61 @@
{{ template "base.html" . }}
{{ define "sidebar" }}{{ end }}
{{ define "content" }}
<div class="space-y-4">
<!-- 헤더 + 필터 바 -->
<div class="flex flex-wrap items-center gap-3">
<h1 class="text-xl font-bold text-gray-800 flex items-center gap-2">
<span class="text-blue-600">🔵</span> 코스피200
<span id="lastUpdated" class="text-xs font-normal text-gray-400"></span>
</h1>
<!-- 정렬 -->
<div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
<button data-sort="fluRt" class="sort-tab px-3 py-1.5 bg-blue-500 text-white">등락률</button>
<button data-sort="volume" class="sort-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">거래량</button>
<button data-sort="curPrc" class="sort-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">현재가</button>
</div>
<!-- 상승/하락/전체 필터 -->
<div class="flex rounded-lg border border-gray-200 overflow-hidden text-xs font-medium">
<button data-dir="all" class="dir-tab px-3 py-1.5 bg-blue-500 text-white">전체</button>
<button data-dir="up" class="dir-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">상승</button>
<button data-dir="down" class="dir-tab px-3 py-1.5 bg-white text-gray-600 hover:bg-gray-50 border-l border-gray-200">하락</button>
</div>
<!-- 종목 검색 -->
<input id="k200Search" type="text" placeholder="종목명 검색..."
class="text-xs px-3 py-1.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-400 w-36">
<span id="k200Count" class="text-xs text-gray-400 ml-auto"></span>
</div>
<!-- 종목 테이블 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<!-- 테이블 헤더 -->
<div class="grid grid-cols-[2.5rem_1fr_1fr_90px_90px_100px_90px_90px_90px] text-xs font-semibold text-gray-500 bg-gray-50 border-b border-gray-100 px-4 py-2.5 gap-2">
<span class="text-center">#</span>
<span>종목명</span>
<span data-col="curPrc" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">현재가 <span class="sort-arrow"></span></span>
<span data-col="predPre" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">전일대비 <span class="sort-arrow"></span></span>
<span data-col="fluRt" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">등락률 <span class="sort-arrow text-blue-400">▼</span></span>
<span data-col="volume" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">거래량 <span class="sort-arrow"></span></span>
<span data-col="open" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">시가 <span class="sort-arrow"></span></span>
<span data-col="high" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">고가 <span class="sort-arrow"></span></span>
<span data-col="low" class="col-sort text-right cursor-pointer select-none hover:text-blue-500 transition-colors">저가 <span class="sort-arrow"></span></span>
</div>
<!-- 종목 목록 -->
<div id="k200List" class="divide-y divide-gray-50">
<div class="px-4 py-12 text-center text-sm text-gray-400 animate-pulse">데이터를 불러오는 중...</div>
</div>
</div>
</div>
{{ end }}
{{ define "scripts" }}
<script src="/static/js/kospi200.js"></script>
{{ end }}