eubaram/index.html at main · Jonas-Augustinus-Linus/eubaram · GitHub

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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="theme-color" content="#003399" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>EU연합 통합시스템</title>
  <meta name="description" content="바람의나라 클래식 EU연합 공성 점수 인증 및 통계 대시보드">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="icon" type="image/svg+xml" href="icon.svg">
  <link rel="apple-touch-icon" href="icon.svg">
  <link rel="preconnect" href="https://script.google.com" crossorigin>
  <link rel="stylesheet" href="styles.css?v=41" />
  <link rel="stylesheet" href="landing.css?v=41" />
</head>
<body class="landing-body">
  <header class="landing-hero">
    <div class="eu-flag-bar large" aria-label="EU 연합 깃발">
      <svg class="eu-flag-svg large" viewBox="0 0 90 60" aria-hidden="true">
        <rect width="90" height="60" fill="#003399"/>
        <g fill="#FFCC00">
          <g transform="translate(45,30) rotate(0) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(30) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(60) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(90) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(120) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(150) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(180) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(210) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(240) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(270) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(300) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
          <g transform="translate(45,30) rotate(330) translate(0,-15)"><polygon points="0,-3.5 0.82,-1.08 3.33,-1.08 1.31,0.41 2.06,2.83 0,1.35 -2.06,2.83 -1.31,0.41 -3.33,-1.08 -0.82,-1.08"/></g>
        </g>
      </svg>
    </div>
    <h1 class="hero-title">EU 연합 통합시스템</h1>
    <p class="hero-sub">바람의나라 클래식 · 공성 점수 인증 · 통계 대시보드</p>
    <div class="today-banner" id="todayBanner">
      <span id="todayLabel">오늘은 ...</span>
      <span class="castle-tag" id="castleTag">...</span>
    </div>
    <div class="siege-countdown" id="siegeCountdown" aria-live="off">
      <span class="cd-label">로딩…</span><span class="cd-time">--:--:--</span>
    </div>
  </header>

  <main class="landing-main">
    <section class="card participating-card" id="participatingCard">
      <h2>⚔️ 이번주 참전 문파</h2>
      <div class="participating-list" id="participatingList">
        <span class="hint">로딩 중…</span>
      </div>
    </section>

    <section class="card castle-lords-card">
      <h2>👑 현재 성주 현황</h2>
      <div class="castle-lord-grid" id="castleLordGrid">
        <div class="castle-lord-cell" data-castle="주작성"><div class="cl-castle">🔴 주작성</div><div class="cl-lord" id="lord-주작성">-</div></div>
        <div class="castle-lord-cell" data-castle="현무성"><div class="cl-castle">🔵 현무성</div><div class="cl-lord" id="lord-현무성">-</div></div>
        <div class="castle-lord-cell" data-castle="청룡성"><div class="cl-castle">🟢 청룡성</div><div class="cl-lord" id="lord-청룡성">-</div></div>
        <div class="castle-lord-cell" data-castle="백호성"><div class="cl-castle">⚪ 백호성</div><div class="cl-lord" id="lord-백호성">-</div></div>
      </div>
      <details class="castle-history" id="castleHistoryWrap">
        <summary>🏰 최근 성주 변동 이력 보기</summary>
        <div class="castle-history-body" id="castleHistoryBody">
          <div class="hint">로딩 중…</div>
        </div>
      </details>
    </section>

    <section class="card hof-card" id="hofCard">
      <div class="hof-header">
        <h2>🏆 명예의 전당</h2>
        <div class="hof-hint">가중치: 정예 ⭕ +30% · 최대한 ⏳ +15% · 연속 출석 보너스</div>
      </div>
      <div class="hof-tabs" role="tablist" aria-label="스코프">
        <button type="button" class="hof-tab active" data-scope="personal" role="tab">개인</button>
        <button type="button" class="hof-tab" data-scope="guild" role="tab">문파</button>
        <button type="button" class="hof-tab" data-scope="family" role="tab">계</button>
      </div>
      <div class="hof-period-tabs" role="tablist" aria-label="기간">
        <button type="button" class="hof-period-tab active" data-period="week" role="tab">이번 주</button>
        <button type="button" class="hof-period-tab" data-period="month" role="tab">최근 28일</button>
        <button type="button" class="hof-period-tab" data-period="season" role="tab">현재 시즌</button>
        <button type="button" class="hof-period-tab" data-period="archive" role="tab">📜 과거 시즌</button>
      </div>
      <div class="hof-archive-select" id="hofArchiveSelect" hidden>
        <label for="hofSeasonPick" class="hof-arch-label">시즌 선택:</label>
        <select id="hofSeasonPick" aria-label="박제 시즌"></select>
      </div>
      <div class="hof-range" id="hofRange"></div>
      <div class="hof-body" id="hofBody">
        <div class="hint">로딩 중…</div>
      </div>
    </section>

    <details class="card trade-market-card" id="tradeMarketCard">
      <summary>🏪 거래소 활발 거래 TOP <span id="tmCount">10</span></summary>
      <div class="tm-body">
        <div class="tm-meta" id="tmMeta"></div>
        <div class="tm-body-inner" id="tmBody">
          <div class="hint">로딩 중…</div>
        </div>
        <div class="tm-footer">
          <a href="https://classicbaram.gg/trade" target="_blank" rel="noopener">전체 거래 보기 (클바지지) ↗</a>
        </div>
      </div>
    </details>

    <details class="card guidelines-card" id="guidelinesCard">
      <summary>📜 연합 지침사항 열람</summary>
      <div class="guidelines-content" id="guidelinesContent">
        <p class="hint">지침이 아직 등록되지 않았습니다. 관리자가 등록할 때까지 기다려 주세요.</p>
      </div>
    </details>

    <section class="select-prompt">
      <h2>문파를 선택해 주세요</h2>
      <p class="hint">계를 누르면 소속 문파가 표시됩니다.</p>
    </section>

    <div class="family-grid" id="familyGrid"></div>
  </main>

  <dialog id="guildInfoDialog" class="dialog guild-info-dialog">
    <div class="gid-header">
      <h3 id="gidTitle">문파명</h3>
      <button type="button" class="gid-close" aria-label="닫기" id="gidClose">✕</button>
    </div>
    <div class="gid-body">
      <div class="gid-status" id="gidStatus"></div>
      <div class="gid-section" id="gidDescSec" hidden>
        <div class="gid-label">📜 문파 소개</div>
        <div class="gid-content" id="gidDesc"></div>
      </div>
      <div class="gid-section" id="gidReqSec" hidden>
        <div class="gid-label">✅ 가입 조건</div>
        <div class="gid-content" id="gidReq"></div>
      </div>
      <div class="gid-section" id="gidContactSec" hidden>
        <div class="gid-label">📞 연락처</div>
        <div class="gid-content" id="gidContact"></div>
      </div>
      <div class="gid-section" id="gidDiscordSec" hidden>
        <a class="gid-discord-btn" id="gidDiscord" target="_blank" rel="noopener">💬 디스코드 입장</a>
      </div>
      <div class="gid-empty" id="gidEmpty" hidden>
        <p>아직 등록된 문파 정보가 없습니다.</p>
        <p class="hint">관리자가 등록하면 모집 정보가 여기에 표시됩니다.</p>
      </div>
      <div class="gid-actions">
        <a class="primary" id="gidSiegeLink" href="#">⚔️ 공성 신청 페이지로</a>
      </div>
      <div class="gid-updated" id="gidUpdated"></div>
    </div>
  </dialog>

  <footer class="site-footer">
    <div class="footer-line">신청 가능: 월~목 00:00 ~ 23:30 (KST)</div>
    <div class="footer-line">
      <a href="guide.html">📜 공성 가이드</a>
    </div>
    <div class="footer-line footer-powered">
      <span class="eu-stars-mini" aria-hidden="true">★ ★ ★</span>
      Powered by <strong>주술사연합회</strong>
      <span class="eu-stars-mini" aria-hidden="true">★ ★ ★</span>
    </div>
    <div class="footer-line footer-admin">
      <a href="admin.html">⚙️ 관리자</a>
    </div>
  </footer>

  <script src="shared.js?v=41" defer></script>
  <script src="landing.js?v=41" defer></script>
</body>
</html>