702 lines
38 KiB
HTML
702 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="ko" data-color-theme="system" data-view-mode="automatic"
|
||
data-start-workspace="stockCut">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>V-Stock 증권정보송출시스템</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body data-color-theme="system" data-view-mode="automatic"
|
||
data-start-workspace="stockCut">
|
||
<svg class="workspace-icon-sprite" aria-hidden="true" focusable="false">
|
||
<symbol id="workspace-icon-menu" viewBox="0 0 24 24">
|
||
<path d="M4 6.5h16M4 12h16M4 17.5h16"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-stock-cut" viewBox="0 0 24 24">
|
||
<rect x="3.5" y="4.5" width="17" height="15" rx="3"></rect>
|
||
<path d="M8 7.5v9M6.5 10h3v4h-3M15.5 7v10M14 9h3v5h-3"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-overseas" viewBox="0 0 24 24">
|
||
<circle cx="12" cy="12" r="8.5"></circle>
|
||
<path d="M3.5 12h17M12 3.5c2.3 2.4 3.5 5.2 3.5 8.5s-1.2 6.1-3.5 8.5c-2.3-2.4-3.5-5.2-3.5-8.5S9.7 5.9 12 3.5Z"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-exchange" viewBox="0 0 24 24">
|
||
<path d="M5 7.5h13M18 7.5l-3-3M18 7.5l-3 3M19 16.5H6M6 16.5l3-3M6 16.5l3 3"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-index" viewBox="0 0 24 24">
|
||
<path d="M4.5 4.5v15h15M7 16l4-4.5 3 2 4.5-6M15.5 7.5h3v3"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-kospi" viewBox="0 0 24 24">
|
||
<path d="M4.5 18V6h4a4 4 0 0 1 0 8h-4M15 6h4M17 6v12M15 18h4"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-kosdaq" viewBox="0 0 24 24">
|
||
<path stroke-width="1.65" d="M2.3 18V6h1.6c2.8 0 4.3 2.2 4.3 6s-1.5 6-4.3 6H2.3M9 18l2.5-12H13l2.5 12M10 14h4.5"></path>
|
||
<ellipse cx="19.2" cy="12" rx="3.1" ry="6" stroke-width="1.65"></ellipse>
|
||
<path stroke-width="1.65" d="m19.5 14.5 3.2 4"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-comparison" viewBox="0 0 24 24">
|
||
<rect x="3.5" y="5" width="7.5" height="14" rx="2"></rect>
|
||
<rect x="13" y="5" width="7.5" height="14" rx="2"></rect>
|
||
<path d="m5.5 15 1.5-2 1.5 1.5M15 10.5l1.5 2 2-3"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-theme" viewBox="0 0 24 24">
|
||
<path d="M4 5h7l9 9-6 6-9-9V5Z"></path>
|
||
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
||
</symbol>
|
||
<symbol id="workspace-icon-overseas-stocks" viewBox="0 0 24 24">
|
||
<circle cx="9" cy="10" r="5.5"></circle>
|
||
<path d="M3.5 10h11M9 4.5c1.5 1.6 2.2 3.4 2.2 5.5S10.5 13.9 9 15.5c-1.5-1.6-2.2-3.4-2.2-5.5S7.5 6.1 9 4.5ZM12.5 19l3-3.5 2 1.5 3.5-4.5M19 12.5h2v2"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-expert" viewBox="0 0 24 24">
|
||
<circle cx="9.5" cy="8" r="3.5"></circle>
|
||
<path d="M3.5 19c.8-3.5 2.8-5.5 6-5.5 1.5 0 2.7.4 3.7 1.2"></path>
|
||
<circle cx="17" cy="16.5" r="3.5"></circle>
|
||
<path d="m15.5 16.5 1 1 2-2.3"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-trading-halt" viewBox="0 0 24 24">
|
||
<path d="M9 3.5h6L20.5 9v6L15 20.5H9L3.5 15V9L9 3.5Z"></path>
|
||
<path d="M9.5 8.5v7M14.5 8.5v7"></path>
|
||
</symbol>
|
||
<symbol id="workspace-icon-settings" viewBox="0 0 24 24">
|
||
<path d="M4 6.5h7M15 6.5h5M4 12h2M10 12h10M4 17.5h9M17 17.5h3"></path>
|
||
<circle cx="13" cy="6.5" r="2"></circle>
|
||
<circle cx="8" cy="12" r="2"></circle>
|
||
<circle cx="15" cy="17.5" r="2"></circle>
|
||
</symbol>
|
||
</svg>
|
||
<main class="operator-shell" aria-label="V-Stock 증권정보송출시스템">
|
||
<section id="workspace-region" class="workspace-region" aria-label="작업 영역">
|
||
<aside id="workspace-navigation" class="workspace-navigation" role="navigation"
|
||
aria-label="작업 메뉴">
|
||
<div class="workspace-nav-header">
|
||
<button id="workspace-nav-toggle" class="workspace-nav-toggle" type="button"
|
||
aria-expanded="true"
|
||
aria-controls="workspace-nav-items workspace-nav-footer" title="메뉴 접기">
|
||
<svg class="workspace-nav-icon" data-icon="menu" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-menu"></use>
|
||
</svg>
|
||
<span class="workspace-nav-toggle-label">메뉴 접기</span>
|
||
</button>
|
||
</div>
|
||
<div id="workspace-nav-items" class="workspace-nav-items" role="group"
|
||
aria-label="작업 화면">
|
||
<button id="workspace-stock-tab" class="workspace-nav-item workspace-current"
|
||
type="button" aria-label="종목·컷" title="종목·컷"
|
||
aria-current="page" aria-controls="stock-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="stock-cut" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-stock-cut"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">종목·컷</span>
|
||
</button>
|
||
<div class="workspace-nav-section-label"><span>기타 그래픽</span></div>
|
||
<div id="market-tabs" class="market-tabs workspace-market-nav" role="group"
|
||
aria-label="기타 그래픽">
|
||
<button class="workspace-nav-item workspace-market-item active" type="button"
|
||
draggable="true" data-tab-id="overseas" aria-label="해외" title="해외"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="overseas" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-overseas"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">해외</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="exchange" aria-label="환율" title="환율"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="exchange" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-exchange"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">환율</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="index" aria-label="지수" title="지수"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="index" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-index"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">지수</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="kospiIndustry" aria-label="코스피" title="코스피"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="kospi" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-kospi"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">코스피</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="kosdaqIndustry" aria-label="코스닥" title="코스닥"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="kosdaq" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-kosdaq"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">코스닥</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="comparison" aria-label="비교" title="비교"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="comparison" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-comparison"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">비교</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="theme" aria-label="테마" title="테마"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="theme" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-theme"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">테마</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="overseasStocks" aria-label="해외시장" title="해외시장"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="overseas-stocks" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-overseas-stocks"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">해외시장</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="expert" aria-label="전문가" title="전문가"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="expert" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-expert"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">전문가</span>
|
||
</button>
|
||
<button class="workspace-nav-item workspace-market-item" type="button"
|
||
draggable="true" data-tab-id="tradingHalt" aria-label="거래정지" title="거래정지"
|
||
aria-current="false" aria-controls="catalog-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="trading-halt" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-trading-halt"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">거래정지</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="workspace-nav-footer" class="workspace-nav-footer">
|
||
<button id="workspace-settings-tab" class="workspace-nav-item" type="button"
|
||
aria-label="설정" title="설정" aria-current="false"
|
||
aria-controls="settings-workspace">
|
||
<svg class="workspace-nav-icon" data-icon="settings" aria-hidden="true"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-settings"></use>
|
||
</svg>
|
||
<span class="workspace-nav-label">설정</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<section class="workspace-surface" aria-labelledby="workspace-title">
|
||
<header class="workspace-header">
|
||
<div class="brand">
|
||
<span class="brand-wordmark-plate">
|
||
<span class="brand-wordmark-fallback">매일경제TV</span>
|
||
<img class="brand-wordmark" src="Brand/logo.png" width="176" height="43"
|
||
alt="매일경제TV" draggable="false">
|
||
</span>
|
||
<span class="brand-divider" aria-hidden="true"></span>
|
||
<span class="brand-product">V-STOCK</span>
|
||
</div>
|
||
<div class="workspace-heading">
|
||
<span class="workspace-heading-icon" aria-hidden="true">
|
||
<svg class="workspace-nav-icon" data-icon="stock-cut"
|
||
viewBox="0 0 24 24" focusable="false">
|
||
<use href="#workspace-icon-stock-cut"></use>
|
||
</svg>
|
||
</span>
|
||
<div class="workspace-heading-copy">
|
||
<h1 id="workspace-title">종목·컷</h1>
|
||
</div>
|
||
</div>
|
||
<div class="playout-connection-summary">
|
||
<div class="connection-state" id="playout-connection-state" role="status"
|
||
aria-label="Tornado2 연결 상태" aria-live="polite"
|
||
aria-atomic="true">미연결</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="workspace-content">
|
||
<section id="stock-workspace" class="left-panel workspace-view"
|
||
aria-label="종목 및 컷 선택">
|
||
<div class="search-line">
|
||
<label for="stock-search">종목</label>
|
||
<input id="stock-search" maxlength="32767" autocomplete="off" spellcheck="false">
|
||
<button id="stock-search-button" type="button">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
|
||
<circle cx="11" cy="11" r="6"></circle>
|
||
<path d="m16 16 4 4"></path>
|
||
</svg>
|
||
검색
|
||
</button>
|
||
<span id="stock-search-meta" class="search-meta" role="status"
|
||
aria-live="polite" aria-atomic="true" hidden></span>
|
||
</div>
|
||
|
||
<div id="stock-results" class="stock-results" role="listbox" aria-label="종목명"></div>
|
||
|
||
<div class="manual-actions" aria-label="수동 입력">
|
||
<button type="button" data-manual-screen="revenue-composition">주요매출 구성</button>
|
||
<button type="button" data-manual-screen="growth-metrics">성장성 지표</button>
|
||
<button type="button" data-manual-screen="sales">매출액</button>
|
||
<button type="button" data-manual-screen="operating-profit">영업이익</button>
|
||
</div>
|
||
<div class="manual-list-actions" aria-label="수동 송출 목록" hidden>
|
||
<button type="button" data-manual-list-screen="individual">개인 순매도</button>
|
||
<button type="button" data-manual-list-screen="foreign">외국인 순매도</button>
|
||
<button type="button" data-manual-list-screen="institution">기관 순매도</button>
|
||
<button type="button" data-manual-list-screen="vi">VI 발동</button>
|
||
</div>
|
||
|
||
<div id="cut-list" class="cut-list" role="listbox" aria-label="종목 컷"
|
||
aria-multiselectable="true"></div>
|
||
<div id="operator-status" class="operator-status" aria-live="polite"></div>
|
||
</section>
|
||
|
||
<section id="catalog-workspace" class="catalog-panel workspace-view"
|
||
aria-label="분류별 그래픽" hidden inert>
|
||
<label class="expand-line"><input id="catalog-expand-all" type="checkbox" checked> 전체 펼치기</label>
|
||
<div id="category-tree" class="category-tree" aria-label="원본 카테고리"></div>
|
||
</section>
|
||
|
||
<section id="settings-workspace" class="settings-panel workspace-view"
|
||
aria-label="설정" hidden inert>
|
||
<div id="operator-settings-message" class="settings-message" role="status"
|
||
aria-live="polite" aria-atomic="true" hidden></div>
|
||
<div id="operator-settings-restart" class="settings-restart-banner" role="status"
|
||
aria-live="polite" aria-atomic="true" hidden>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||
<path d="M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6"></path>
|
||
</svg>
|
||
<div>
|
||
<strong>재시작하면 적용됩니다.</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-grid">
|
||
<article class="settings-card settings-card-wide settings-folder-card">
|
||
<div class="settings-card-heading">
|
||
<h3>폴더</h3>
|
||
</div>
|
||
|
||
<div class="settings-folder-list">
|
||
<section class="settings-folder-row" data-operator-folder="design"
|
||
aria-labelledby="operator-design-folder-title">
|
||
<div class="settings-folder-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" focusable="false">
|
||
<path d="M3.5 6.5h6l2 2h9v10h-17Z"></path>
|
||
<path d="m14.5 12.5 1.5-3 1.5 3 3 .5-2.2 2.1.5 3-2.8-1.5-2.8 1.5.5-3-2.2-2.1Z"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="settings-folder-copy">
|
||
<div class="settings-folder-title-line">
|
||
<h4 id="operator-design-folder-title">디자인 폴더</h4>
|
||
<span class="settings-folder-kind">Cuts</span>
|
||
</div>
|
||
<div class="settings-folder-value">
|
||
<strong id="operator-design-folder-name">앱 기본값</strong>
|
||
<span id="operator-design-folder-status" class="settings-status-badge neutral">확인 중</span>
|
||
<span id="operator-design-folder-source" class="settings-folder-source" hidden>앱 기본값</span>
|
||
</div>
|
||
</div>
|
||
<div class="settings-folder-actions">
|
||
<button id="operator-design-folder-select" class="settings-primary-action"
|
||
type="button">변경</button>
|
||
<button id="operator-design-folder-reset" type="button" disabled>초기화</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="settings-folder-row" data-operator-folder="resource"
|
||
aria-labelledby="operator-resource-folder-title">
|
||
<div class="settings-folder-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" focusable="false">
|
||
<path d="M3.5 6.5h6l2 2h9v10h-17Z"></path>
|
||
<path d="M9 12h7M9 15h5"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="settings-folder-copy">
|
||
<div class="settings-folder-title-line">
|
||
<h4 id="operator-resource-folder-title">설정 폴더</h4>
|
||
<span class="settings-folder-kind">Res</span>
|
||
</div>
|
||
<div class="settings-folder-value">
|
||
<strong id="operator-resource-folder-name">앱 기본값</strong>
|
||
<span id="operator-resource-folder-status" class="settings-status-badge neutral">확인 중</span>
|
||
<span id="operator-resource-folder-source" class="settings-folder-source" hidden>앱 기본값</span>
|
||
</div>
|
||
</div>
|
||
<div class="settings-folder-actions">
|
||
<button id="operator-resource-folder-select" class="settings-primary-action"
|
||
type="button">변경</button>
|
||
<button id="operator-resource-folder-reset" type="button" disabled>초기화</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="settings-folder-row" data-operator-folder="background"
|
||
aria-labelledby="operator-background-folder-title">
|
||
<div class="settings-folder-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" focusable="false">
|
||
<path d="M3.5 6.5h6l2 2h9v10h-17Z"></path>
|
||
<path d="m7.5 16 3-3 2 2 2.5-3 3.5 4"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="settings-folder-copy">
|
||
<div class="settings-folder-title-line">
|
||
<h4 id="operator-background-folder-title">배경 폴더</h4>
|
||
<span class="settings-folder-kind">VRV/JPG/PNG</span>
|
||
</div>
|
||
<div class="settings-folder-value">
|
||
<strong id="operator-background-folder-name">자동</strong>
|
||
<span id="operator-background-folder-status" class="settings-status-badge neutral">확인 중</span>
|
||
<span id="operator-background-folder-source" class="settings-folder-source" hidden>앱 기본값</span>
|
||
</div>
|
||
</div>
|
||
<div class="settings-folder-actions">
|
||
<button id="operator-background-folder-select" class="settings-primary-action"
|
||
type="button">변경</button>
|
||
<button id="operator-background-folder-reset" type="button" disabled>초기화</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="settings-card settings-appearance-card">
|
||
<div class="settings-card-heading">
|
||
<h3>화면</h3>
|
||
</div>
|
||
<div class="settings-choice-list">
|
||
<label class="settings-choice-row" for="operator-color-theme">
|
||
<strong>테마</strong>
|
||
<select id="operator-color-theme">
|
||
<option value="system">자동</option>
|
||
<option value="light">라이트</option>
|
||
<option value="dark">다크</option>
|
||
</select>
|
||
</label>
|
||
<label class="settings-choice-row" for="operator-view-mode">
|
||
<strong>그래픽 목록</strong>
|
||
<select id="operator-view-mode">
|
||
<option value="automatic">자동</option>
|
||
<option value="compact">간결한 목록</option>
|
||
<option value="cards">비주얼 카드</option>
|
||
</select>
|
||
</label>
|
||
<label class="settings-choice-row" for="operator-start-workspace">
|
||
<strong>시작</strong>
|
||
<select id="operator-start-workspace">
|
||
<option value="stockCut">종목·컷</option>
|
||
<option value="lastWorkspace">마지막 화면</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="settings-card">
|
||
<div class="settings-card-heading">
|
||
<h3>메뉴</h3>
|
||
</div>
|
||
<label class="settings-switch-row" for="operator-navigation-expanded">
|
||
<span>
|
||
<strong>메뉴 펼치기</strong>
|
||
</span>
|
||
<input id="operator-navigation-expanded" type="checkbox" checked>
|
||
<span class="settings-switch" aria-hidden="true"></span>
|
||
</label>
|
||
</article>
|
||
|
||
<article class="settings-card settings-diagnostics-card">
|
||
<div class="settings-card-heading">
|
||
<h3>상태</h3>
|
||
</div>
|
||
<dl class="settings-diagnostics">
|
||
<div><dt>앱 버전</dt><dd id="operator-settings-app-version">확인 중</dd></div>
|
||
<div><dt>송출 모드</dt><dd id="operator-settings-playout-mode">확인 중</dd></div>
|
||
<div><dt>송출 연결</dt><dd id="operator-settings-playout-connection">확인 중</dd></div>
|
||
<div><dt>Oracle</dt><dd id="operator-settings-oracle-state">확인 중</dd></div>
|
||
<div><dt>MariaDB</dt><dd id="operator-settings-maria-state">확인 중</dd></div>
|
||
<div><dt>DB 상태 감시</dt><dd id="operator-settings-db-monitor">10초마다</dd></div>
|
||
</dl>
|
||
</article>
|
||
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<div id="workspace-splitter" class="workspace-splitter" role="separator"
|
||
aria-label="작업 영역과 송출 스케줄 너비 조절" aria-orientation="vertical"
|
||
aria-controls="workspace-region" aria-valuemin="34" aria-valuemax="48"
|
||
aria-valuenow="39" tabindex="0"></div>
|
||
|
||
<section class="playlist-panel" aria-label="플레이리스트">
|
||
<header class="playlist-heading">
|
||
<div class="playlist-heading-icon" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" focusable="false">
|
||
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
|
||
<path d="M8 9h8M8 12h8M8 15h5"></path>
|
||
</svg>
|
||
</div>
|
||
<div><h2>송출 스케줄</h2></div>
|
||
<div class="playlist-state-legend" aria-label="스케줄 상태">
|
||
<span class="legend-selected"><i aria-hidden="true"></i>선택</span>
|
||
<span class="legend-next"><i aria-hidden="true"></i>다음</span>
|
||
<span class="legend-on-air"><i aria-hidden="true"></i>ON AIR</span>
|
||
</div>
|
||
<div id="playlist-heading-count" class="playlist-heading-count"
|
||
role="status" aria-live="polite" aria-atomic="true">총 0개 · 송출 0개</div>
|
||
</header>
|
||
<div class="playlist-toolbar">
|
||
<div class="playlist-toolbar-group" aria-label="표시">
|
||
<label><input id="playlist-enable-all" type="checkbox" checked disabled> 전체</label>
|
||
<label><input id="moving-average-5" type="checkbox" checked> 5일</label>
|
||
<label><input id="moving-average-20" type="checkbox" checked> 20일</label>
|
||
</div>
|
||
<div class="playlist-toolbar-group playlist-toolbar-order" aria-label="순서">
|
||
<button id="playlist-move-up" type="button" disabled aria-label="선택 행 위로 이동">↑</button>
|
||
<button id="playlist-move-down" type="button" disabled aria-label="선택 행 아래로 이동">↓</button>
|
||
</div>
|
||
<div class="playlist-toolbar-group playlist-toolbar-background" aria-label="배경">
|
||
<label><input id="playout-background-none" type="checkbox" disabled
|
||
aria-keyshortcuts="F3"> 없음</label>
|
||
<button id="playout-background-file" type="button" disabled
|
||
aria-keyshortcuts="F2">배경 선택</button>
|
||
<input id="playout-background-name" class="background-name" value="배경없음" readonly
|
||
aria-label="선택한 배경">
|
||
</div>
|
||
<label class="fade-control" for="playout-fade-duration" hidden
|
||
aria-hidden="true">DissolveTime</label>
|
||
<select id="playout-fade-duration" disabled hidden aria-hidden="true" tabindex="-1"
|
||
aria-label="DissolveTime">
|
||
<option value="0">1</option><option value="1">2</option>
|
||
<option value="2">3</option><option value="3">4</option>
|
||
<option value="4">5</option><option value="5">6</option>
|
||
<option value="6">7</option><option value="7">8</option>
|
||
<option value="8">9</option><option value="9">10</option>
|
||
<option value="10">11</option><option value="11">12</option>
|
||
<option value="12">13</option><option value="13">14</option>
|
||
<option value="14">15</option><option value="15">16</option>
|
||
<option value="16">17</option><option value="17">18</option>
|
||
<option value="18">19</option><option value="19">20</option>
|
||
</select>
|
||
<div class="playlist-toolbar-group playlist-toolbar-db" aria-label="DB">
|
||
<button id="db-load-button" type="button" disabled>불러오기</button>
|
||
<button id="db-save-button" type="button" disabled>저장</button>
|
||
</div>
|
||
<div class="playlist-toolbar-group playlist-toolbar-danger" aria-label="삭제">
|
||
<button id="playlist-delete-selected" type="button" disabled
|
||
aria-keyshortcuts="Delete">선택 삭제</button>
|
||
<button id="playlist-delete-all" type="button" disabled>전체 삭제</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="playlist-drop-zone" class="playlist-grid">
|
||
<div class="playlist-header playlist-row">
|
||
<div aria-hidden="true"></div><div>송출</div><div>종류</div><div>종목</div><div>컷파일</div><div>세부사항</div><div>Page</div>
|
||
</div>
|
||
<div id="playlist-rows" class="playlist-rows" role="listbox" aria-label="송출 목록" aria-multiselectable="true"></div>
|
||
</div>
|
||
|
||
<div class="playout-actions">
|
||
<button id="playout-prepare" class="prepare" type="button" disabled hidden
|
||
aria-hidden="true">PREPARE</button>
|
||
<button id="playout-take-in" class="take-in" type="button" disabled
|
||
aria-label="TAKE IN" aria-keyshortcuts="F8">● TAKE IN [F8]</button>
|
||
<button id="playout-next" class="next" type="button" disabled
|
||
aria-label="NEXT">▶ NEXT</button>
|
||
<button id="playout-take-out" class="take-out" type="button" disabled
|
||
aria-label="TAKE OUT" aria-keyshortcuts="Escape">✖ TAKE OUT [Esc]</button>
|
||
</div>
|
||
<div id="playout-status" class="playout-status" aria-live="polite">송출 상태를 확인하고 있습니다.</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="named-playlist-modal" class="named-playlist-backdrop" hidden>
|
||
<section class="named-playlist-dialog" role="dialog" aria-modal="true"
|
||
aria-labelledby="named-playlist-title">
|
||
<header>
|
||
<h2 id="named-playlist-title">DB 재생목록</h2>
|
||
<button id="named-playlist-close" type="button" aria-label="닫기">×</button>
|
||
</header>
|
||
<div id="named-playlist-status" class="named-playlist-status" aria-live="polite"></div>
|
||
<div class="named-playlist-body">
|
||
<div id="named-playlist-definitions" class="named-playlist-definitions"
|
||
role="listbox" aria-label="저장된 DB 재생목록"></div>
|
||
<section class="named-playlist-create" aria-labelledby="named-playlist-create-title">
|
||
<h3 id="named-playlist-create-title">새 재생목록</h3>
|
||
<label for="named-playlist-new-title">이름</label>
|
||
<input id="named-playlist-new-title" maxlength="128" autocomplete="off"
|
||
spellcheck="false">
|
||
<button id="named-playlist-create-button" type="button" disabled>새로 만들기</button>
|
||
<p>DB 쓰기는 이 버튼 또는 저장·삭제 버튼을 누른 경우에만 한 번 실행됩니다.</p>
|
||
</section>
|
||
</div>
|
||
<footer>
|
||
<button id="named-playlist-delete-button" type="button" disabled>선택 삭제</button>
|
||
<span class="named-playlist-footer-spacer"></span>
|
||
<button id="named-playlist-cancel-button" type="button">취소</button>
|
||
<button id="named-playlist-confirm-button" type="button" disabled>확인</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="named-playlist-confirmation" class="named-playlist-confirmation-backdrop" hidden>
|
||
<section class="named-playlist-confirmation-dialog" role="alertdialog" aria-modal="true"
|
||
aria-labelledby="named-playlist-confirmation-message">
|
||
<div id="named-playlist-confirmation-message"></div>
|
||
<footer>
|
||
<button id="named-playlist-confirmation-yes" type="button">예</button>
|
||
<button id="named-playlist-confirmation-no" type="button">아니요</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="manual-financial-modal" class="manual-financial-backdrop" hidden>
|
||
<section class="manual-financial-dialog" role="dialog" aria-modal="true"
|
||
aria-labelledby="manual-financial-title">
|
||
<header>
|
||
<h2 id="manual-financial-title">수동 재무 입력</h2>
|
||
<button id="manual-financial-close" type="button" aria-label="닫기">×</button>
|
||
</header>
|
||
<div id="manual-financial-workspace" class="manual-financial-workspace"></div>
|
||
<footer class="manual-dialog-footer">
|
||
<button id="manual-financial-exit" type="button">나가기</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="manual-list-modal" class="manual-list-backdrop" hidden>
|
||
<section class="manual-list-dialog" role="dialog" aria-modal="true"
|
||
aria-labelledby="manual-list-title">
|
||
<header>
|
||
<h2 id="manual-list-title">수동 송출 목록</h2>
|
||
<button id="manual-list-close" type="button" aria-label="닫기">×</button>
|
||
</header>
|
||
<div id="manual-list-workspace" class="manual-list-workspace"></div>
|
||
<footer class="manual-dialog-footer">
|
||
<button id="manual-list-cancel" type="button">취소</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="operator-catalog-modal" class="operator-catalog-backdrop" hidden>
|
||
<section class="operator-catalog-dialog" role="dialog" aria-modal="true"
|
||
aria-labelledby="operator-catalog-title">
|
||
<header>
|
||
<h2 id="operator-catalog-title">ThemeA / EList 관리</h2>
|
||
<button id="operator-catalog-close" type="button" aria-label="닫기">×</button>
|
||
</header>
|
||
<div id="operator-catalog-status" class="operator-catalog-status"
|
||
aria-live="polite"></div>
|
||
<div id="operator-catalog-toolbar" class="operator-catalog-toolbar">
|
||
<button id="operator-catalog-theme-tab" type="button">ThemeA</button>
|
||
<button id="operator-catalog-expert-tab" type="button">EList</button>
|
||
<input id="operator-catalog-query" type="search" maxlength="64"
|
||
autocomplete="off" placeholder="이름 검색">
|
||
<select id="operator-catalog-session" aria-label="NXT 세션">
|
||
<option value="preMarket">NXT 장전</option>
|
||
<option value="afterMarket">NXT 시간외</option>
|
||
</select>
|
||
<button id="operator-catalog-search" type="button">검색</button>
|
||
</div>
|
||
<div id="operator-catalog-body" class="operator-catalog-body">
|
||
<section id="operator-catalog-list-panel" class="operator-catalog-list-panel" aria-labelledby="operator-catalog-list-title">
|
||
<div class="operator-catalog-panel-header">
|
||
<h3 id="operator-catalog-list-title">DB 목록</h3>
|
||
<select id="operator-catalog-new-market" aria-label="새 ThemeA 시장">
|
||
<option value="krx">KRX</option>
|
||
<option value="nxt">NXT</option>
|
||
</select>
|
||
<button id="operator-catalog-new" type="button">새 항목</button>
|
||
</div>
|
||
<div id="operator-catalog-results" class="operator-catalog-results"
|
||
role="listbox" aria-label="ThemeA EList 목록"></div>
|
||
</section>
|
||
<section id="operator-catalog-editor" class="operator-catalog-editor"
|
||
aria-labelledby="operator-catalog-editor-title">
|
||
<div class="operator-catalog-panel-header">
|
||
<h3 id="operator-catalog-editor-title">추가·편집</h3>
|
||
<label id="operator-catalog-editor-market-field"
|
||
class="operator-catalog-editor-market" hidden>
|
||
<span>시장</span>
|
||
<select id="operator-catalog-editor-market" aria-label="새 ThemeA 시장" disabled>
|
||
<option value="krx">KRX</option>
|
||
<option value="nxt">NXT</option>
|
||
</select>
|
||
</label>
|
||
<span id="operator-catalog-code" class="operator-catalog-code"></span>
|
||
</div>
|
||
<div class="operator-catalog-name-field">
|
||
<label id="operator-catalog-name-label" for="operator-catalog-name">이름</label>
|
||
<input id="operator-catalog-name" maxlength="128" autocomplete="off">
|
||
<button id="operator-catalog-name-check" type="button">중복확인</button>
|
||
<small id="operator-catalog-name-status" aria-live="polite"></small>
|
||
</div>
|
||
<div id="operator-catalog-stock-search-line" class="operator-catalog-stock-search">
|
||
<input id="operator-catalog-stock-query" type="search" maxlength="64"
|
||
autocomplete="off" placeholder="종목명 검색">
|
||
<button id="operator-catalog-stock-search" type="button">종목 검색</button>
|
||
</div>
|
||
<div id="operator-catalog-stock-results" class="operator-catalog-stock-results"
|
||
role="listbox" aria-label="stock master 검색 결과"></div>
|
||
<div id="operator-catalog-add-line" class="operator-catalog-add-line">
|
||
<label id="operator-catalog-amount-label" for="operator-catalog-amount">매수가</label>
|
||
<input id="operator-catalog-amount" type="number" min="1" step="1"
|
||
inputmode="numeric">
|
||
<button id="operator-catalog-add-stock" type="button">선택 종목 추가</button>
|
||
</div>
|
||
<div id="operator-catalog-draft-header" class="operator-catalog-draft-header">
|
||
<strong>구성 종목</strong>
|
||
<span>위·아래 버튼으로 송출 순서를 변경합니다.</span>
|
||
</div>
|
||
<div id="operator-catalog-draft-rows" class="operator-catalog-draft-rows"
|
||
aria-label="ThemeA EList 구성 종목"></div>
|
||
<footer class="operator-catalog-editor-actions">
|
||
<button id="operator-catalog-delete-all" type="button">Delete All</button>
|
||
<span></span>
|
||
<button id="operator-catalog-cancel" type="button">취소</button>
|
||
<button id="operator-catalog-save" type="button">확인</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="legacy-dialog" class="dialog-backdrop" hidden>
|
||
<div class="legacy-dialog" role="alertdialog" aria-modal="true"
|
||
aria-labelledby="legacy-dialog-caption" aria-describedby="legacy-dialog-message">
|
||
<strong id="legacy-dialog-caption">MmoneyCoder</strong>
|
||
<div id="legacy-dialog-message"></div>
|
||
<div id="legacy-dialog-actions" class="legacy-dialog-actions">
|
||
<button id="legacy-dialog-ok" type="button">확인</button>
|
||
<button id="legacy-dialog-no" type="button" hidden>아니요</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cut-drag-feedback" class="cut-drag-feedback" aria-hidden="true" hidden>
|
||
<span class="cut-drag-feedback-icon"></span>
|
||
<span>선택 컷 추가</span>
|
||
</div>
|
||
|
||
<script src="legacy-cut-drag.js"></script>
|
||
<script src="legacy-modal-focus.js"></script>
|
||
<script src="legacy-named-playlist-selection.js"></script>
|
||
<script src="workspace-navigation.js"></script>
|
||
<script src="app.js"></script>
|
||
<script src="playout-ui.js"></script>
|
||
</body>
|
||
</html>
|