jsahn
4e943700fc
- Introduced common.js for shared functions including API calls, error reporting, and UI helpers. - Implemented feedback.js for the feedback reporting page, including form handling and displaying feedback status. - Added layout.js for managing galaxy and section layouts in the visualization. - Created login.js for user authentication with session management. - Developed search.js for term searching based on user input and synonyms. - Implemented signup.js for user registration with validation and immediate login.
98 lines
4.8 KiB
HTML
98 lines
4.8 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>지역사회간호학 개념 우주</title>
|
||
<meta name="description" content="지역사회간호학 교과서 색인을 주제·용어·관계로 탐색하는 개념 지도">
|
||
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="/static/css/base.css">
|
||
<link rel="stylesheet" href="/static/css/atlas.css">
|
||
<script type="module" src="/static/js/atlas.js"></script>
|
||
</head>
|
||
<body>
|
||
<a class="skip-link" href="#detail">설명 영역으로 건너뛰기</a>
|
||
<header class="topbar">
|
||
<a class="brand" href="/#/">
|
||
<span class="brand-logo" aria-hidden="true"></span>
|
||
<span><span class="brand-title">지역사회간호학 개념 우주</span><br><span class="brand-sub">교과서 색인으로 만든 개념 지도</span></span>
|
||
</a>
|
||
<nav class="topnav" aria-label="주요 메뉴">
|
||
<a href="/#/" aria-current="page">개념 우주</a>
|
||
<a href="/#/path">경로 찾기</a>
|
||
<a href="/#/compare">비교하기</a>
|
||
<a href="/#/quiz">문제 풀기</a>
|
||
<a href="/feedback" data-feedback-link>오류 신고</a>
|
||
<a href="/login" data-account>로그인</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<div class="search-zone">
|
||
<div class="search-area">
|
||
<form class="search-form" role="search" autocomplete="off">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||
<label class="sr-only" for="q">용어, 동의어, 설명 속 단어, 초성으로 찾기</label>
|
||
<input id="q" type="search" placeholder="용어·동의어·설명 속 단어로 찾기 (초성 ㄱㄱㅈㅈ도 가능)" role="combobox" aria-expanded="false" aria-controls="results" aria-autocomplete="list">
|
||
<button type="submit" class="search-submit">찾기</button>
|
||
</form>
|
||
<div class="results" id="results" role="listbox" hidden></div>
|
||
</div>
|
||
<p class="search-note">단어가 떠오르지 않으면<br>아래 은하에서 주제를 골라 보세요.</p>
|
||
</div>
|
||
|
||
<main class="atlas">
|
||
<section class="map-wrap" aria-label="개념 우주 지도">
|
||
<div class="map-bar">
|
||
<nav class="crumbs" aria-label="현재 위치"></nav>
|
||
<div class="map-tools">
|
||
<div class="seg" role="group" aria-label="보기 방식">
|
||
<button type="button" data-mode="map" aria-pressed="true">지도</button>
|
||
<button type="button" data-mode="list" aria-pressed="false">목록</button>
|
||
</div>
|
||
<span class="zoom-tools">
|
||
<button type="button" class="icon-btn" data-zoom="in" aria-label="확대">+</button>
|
||
<button type="button" class="icon-btn" data-zoom="out" aria-label="축소">−</button>
|
||
<button type="button" class="icon-btn" data-zoom="fit" aria-label="화면에 맞추기">⤢</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="map" tabindex="-1">
|
||
<div class="starfield" aria-hidden="true"></div>
|
||
<svg class="links" aria-hidden="true">
|
||
<defs>
|
||
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="context-stroke"/></marker>
|
||
<marker id="arrow-hi" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="#d9c9ff"/></marker>
|
||
</defs>
|
||
<g class="links-g"></g>
|
||
</svg>
|
||
<div class="objects"></div>
|
||
<div class="map-loading">우주를 불러오는 중…</div>
|
||
</div>
|
||
<div class="listview" hidden></div>
|
||
<div class="map-bottom">
|
||
<div class="legend">
|
||
<span><i class="lg-planet"></i>은하 · 단원</span>
|
||
<span><i class="lg-cluster"></i>별자리 · 절</span>
|
||
<span><i class="lg-dot"></i>별 · 용어</span>
|
||
<span><i class="lg-line"></i>선 · 개념 관계</span>
|
||
<span><i class="lg-arrow"></i>순서·방향</span>
|
||
<span><i class="lg-dash"></i>구분할 개념</span>
|
||
<span><i class="lg-cross"></i>다른 은하·절로 이어짐</span>
|
||
</div>
|
||
<span class="map-hint"></span>
|
||
</div>
|
||
<div class="trail" aria-label="최근 살펴본 용어"></div>
|
||
</section>
|
||
<aside class="detail" id="detail" tabindex="-1" aria-label="설명"></aside>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<span class="footer-data"></span>
|
||
<span>화면의 거리는 배치상의 거리일 뿐 개념의 유사도를 뜻하지 않습니다. 관계는 이름이 붙은 선으로만 나타냅니다.</span>
|
||
</footer>
|
||
<div class="sr-only" aria-live="polite" id="announce"></div>
|
||
|
||
<dialog class="compare-dialog" aria-label="개념 비교"></dialog>
|
||
</body>
|
||
</html>
|