62 lines
3.8 KiB
HTML
62 lines
3.8 KiB
HTML
{{ 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 }}
|