부 아카이브 블로그 등록 가이드 미니 게임(?)완성.

브금용

「엘프 연구소 단말기 등록 퀘스트」- 블로그 바로가기 가이드 (완성형)

대충 이런 느낌으로 만듬.

모바일 페이지 야랄나서 은근 속썩엿다 ㅋㅋㄲ

 

모션 스프레드랑 브금같이 올려서

쓸수도 있긴한대 너무 손이 많아가니 이정두만 할예정.

 

[ 코드 ]

<!-- 
  [FANTASY RPG SYSTEM - ANDROID CLIPPING FIX FULL CODE] 
  - FIX: Floating layout with side margins to prevent cutoff on Android Chrome
  - LAYOUT: Optimized dynamic height (100dvh) & Viewport-level rendering
  - FLOW: Clean manual walkthrough without broken PWA APIs
-->

<div id="elf-terminal-system-root">
  <!-- (1) ARTWORK LAYER -->
  <div class="terminal-artwork-container">
    <img src="https://blogger.googleusercontent.com/img/a/AVvXsEhVZ5N4eSX49_aE7heLkF2iFIqQiwBLsphEgzuBjYBDfKIf5X5fw0ovyk1U14NIgx7rHd3SAHWjDNe1VeNJlQWTUEAhATIw2oyc-xD7SiDJ8rtGimfqERYvWOoEhbBtatVACPlvz4yZfZlYQz-6Dp2XB_zvmOj42vPahOq-RtpUSVZx2okRWjm_AJC6i7s" 
         class="bg-render" alt="Terminal" oncontextmenu="return false;" draggable="false"> 
  </div>

  <!-- (2) INTERACTION LAYER -->
  <div class="interaction-overlay">
    <div class="pixel-hitbox windows" onclick="startQuestChain('WINDOWS')" role="button"></div>
    <div class="pixel-hitbox ios" onclick="startQuestChain('iOS')" role="button"></div>
    <div class="pixel-hitbox android" onclick="startQuestChain('ANDROID')" role="button"></div>
  </div>

  <!-- (3) QUEST UI (Viewport Level & Clipping Defeated) -->
  <div id="quest-popup-overlay" class="quest-overlay hidden">
    <div class="cinema-dimmer"></div>
    <div class="quest-frame">
      <div class="quest-header">
        <span id="q-title" class="q-title">SYSTEM INITIALIZING...</span>
        <span id="q-step" class="q-badge">STEP 1/2</span>
      </div>
      <div class="quest-body">
        <div id="q-text" class="q-dialogue"></div>
      </div>
      <div class="quest-footer">
        <div id="q-prompt" class="q-arrow">▼ 터치하여 계속</div>
        <div id="q-actions" class="action-row hidden">
          <button class="rpg-btn alt" onclick="prevStep()">이전 단계</button>
          <button id="q-main-btn" class="rpg-btn" onclick="nextStep()">시스템 승인</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* --- [CSS: CORE] --- */
#elf-terminal-system-root { position: relative; width: 100%; max-width: 800px; margin: 10px auto; background: #000; overflow: hidden; -webkit-tap-highlight-color: transparent; font-family: 'Courier New', Courier, monospace; }
.bg-render { width: 100%; display: block; pointer-events: none; }
.interaction-overlay { position: absolute; inset: 0; z-index: 10; }
.pixel-hitbox { position: absolute; right: 4.5%; width: 44.5%; height: 20%; cursor: pointer; z-index: 15; }
.pixel-hitbox.windows { top: 16%; }
.pixel-hitbox.ios { top: 40%; }
.pixel-hitbox.android { top: 64.5%; }

/* --- [CSS: VIEWPORT OVERLAY REFACTOR] --- */
.quest-overlay {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 999999;
  display: flex; flex-direction: column; 
  justify-content: flex-end; /* 하단 배치 지향 */
  align-items: center; /* 가로 폭 중앙 정렬 */
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 100%);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease;
}
.quest-overlay:not(.hidden) { opacity: 1; visibility: visible; pointer-events: auto; }
.cinema-dimmer { flex-grow: 1; }

/* 안드로이드 잘림 해결을 위한 핵심 수정 구조 */
.quest-frame {
  /* 꽉 채우지 않고 좌우 여백을 의도적으로 부여 */
  width: calc(100% - 32px); 
  max-width: 500px; 
  
  /* 내비게이션 바와의 간섭을 줄이기 위해 바닥에서 살짝 띄움 */
  margin: 0 auto calc(16px + env(safe-area-inset-bottom)) auto; 
  
  background: #1c1612; 
  border: 3px solid #b5835a; 
  border-radius: 16px; /* 이질감 없는 라운딩 처리 */
  color: #f4f1de; 
  box-sizing: border-box;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
  
  /* 내부 텍스트 유동적 높이 및 최대 브라우저 영역 제한 */
  max-height: calc(100dvh - 60px); 
  display: flex;
  flex-direction: column;
  padding: 20px;
  
  animation: vn-float-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vn-float-up { 
  from { transform: translateY(20px); opacity: 0; } 
  to { transform: translateY(0); opacity: 1; } 
}

/* 초소형 스마트폰 대응 가독성 트윅 */
@media (max-width: 480px) {
  .quest-frame {
    width: calc(100% - 24px);
    margin-bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 16px;
  }
  .q-dialogue { font-size: 15px; line-height: 1.6; }
  .rpg-btn { min-height: 48px; } /* 높이를 살짝 줄여 공간 확보 */
}

/* 데스크톱 환경 마진 최적화 */
@media (min-width: 769px) {
  .quest-overlay { justify-content: center; align-items: center; }
  .quest-frame { width: 440px; margin: 0; max-height: 80vh; animation: zoom-in 0.3s; }
}
@keyframes zoom-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- [CSS: UI ELEMENTS] --- */
.quest-header { display: flex; justify-content: space-between; border-bottom: 2px dashed #b5835a; padding-bottom: 12px; margin-bottom: 15px; }
.q-title { color: #f4a261; font-weight: bold; font-size: 13px; letter-spacing: 1px; }
.q-badge { font-size: 10px; background: #4a3525; padding: 2px 10px; color: #e9c46a; border: 1px solid #b5835a; }
.q-dialogue { font-size: 16px; line-height: 1.7; word-break: keep-all; }
.quest-footer { display: flex; flex-direction: column; align-items: center; margin-top: 15px; }
.q-arrow { font-size: 11px; color: #e9c46a; animation: q-bounce 0.8s infinite alternate; margin-bottom: 15px; }
@keyframes q-bounce { from { transform: translateY(0); } to { transform: translateY(5px); } }

.action-row { display: flex; gap: 12px; width: 100%; }
.rpg-btn { flex: 1; min-height: 52px; background: #9a331c; border: 2px solid #f4a261; color: #fff; font-weight: bold; cursor: pointer; transition: all 0.1s; box-shadow: 0 4px 0 #5c1a0b; display: flex; align-items: center; justify-content: center; }
.rpg-btn:active { transform: translateY(3px); box-shadow: none; }
.rpg-btn.alt { background: #4a3f38; border-color: #8b7e74; box-shadow: 0 4px 0 #2b2521; }
.hl-m { color: #52b788; font-weight: bold; }
.hl-s { color: #e76f51; font-weight: bold; }
.hidden { display: none; }
</style>

<script>
/* --- [JS: ENGINE] --- */
let currentPlatform = "";
let currentStep = 0;

document.addEventListener("DOMContentLoaded", () => {
  const overlay = document.getElementById('quest-popup-overlay');
  if (overlay) document.body.appendChild(overlay);
});

const questTree = {
  WINDOWS: [
    { t: "WINDOWS TERMINAL", d: "▶ [SYSTEM]: <span class='hl-m'>Windows 환경</span>이 감지되었습니다.\n전용 단말기를 바탕화면에 생성하시겠습니까?", b: "동기화 개시" },
    { t: "DESKTOP SHORTCUT", d: "▶ [ELF]: \"주소창 왼쪽의 <span class='hl-s'>[자물쇠 아이콘]</span>을 바탕화면으로 드래그해 보세요!\n가장 빠르고 안정적인 접속 경로가 생성됩니다.\"", b: "동기화 완료" }
  ],
  iOS: [
    { t: "iOS CRYSTAL", d: "▶ [SYSTEM]: <span class='hl-m'>Apple iOS</span> 코어가 발견되었습니다.\n터미널 각인을 위한 영창이 필요합니다.", b: "영창 확인" },
    { t: "HOME BINDING", d: "▶ [ELF]: \"Safari 브라우저 하단의 <span class='hl-s'>[공유 버튼]</span>을 누른 뒤, <span class='hl-m'>[홈 화면에 추가]</span>를 선택해 주세요!\"", b: "영창 완료" }
  ],
  ANDROID: [
    { t: "ANDROID CORE", d: "▶ [SYSTEM]: <span class='hl-m'>Android</span> 시스템 연동을 시작합니다.\n홈 화면에 터미널을 직접 배치하시겠습니까?", b: "시스템 동기화" },
    { t: "MANUAL SYNC", d: "▶ [ELF]: \"브라우저 우측 상단의 <span class='hl-s'>[⋮ 메뉴]</span>를 누른 뒤 <span class='hl-m'>[홈 화면에 추가]</span>를 선택해 주세요.\n연구소 단말기가 즉시 등록됩니다!\"", b: "동기화 완료" }
  ]
};

function startQuestChain(p) {
  currentPlatform = p;
  currentStep = 0;
  document.documentElement.style.overflow = "hidden";
  document.body.style.overflow = "hidden";
  document.getElementById('quest-popup-overlay').classList.remove('hidden');
  renderStep();
}

function renderStep() {
  const stepData = questTree[currentPlatform][currentStep];
  document.getElementById('q-title').innerText = stepData.t;
  document.getElementById('q-step').innerText = `STEP ${currentStep + 1}/${questTree[currentPlatform].length}`;
  
  const actions = document.getElementById('q-actions');
  const prompt = document.getElementById('q-prompt');
  const diag = document.getElementById('q-text');

  actions.classList.add('hidden');
  prompt.style.display = "block";
  diag.innerHTML = stepData.d;

  setTimeout(() => {
    prompt.style.display = "none";
    actions.classList.remove('hidden');
    document.getElementById('q-main-btn').innerText = stepData.b;
  }, 350);
}

function nextStep() {
  if (currentStep < questTree[currentPlatform].length - 1) {
    currentStep++;
    renderStep();
  } else {
    closeQuest();
  }
}

function prevStep() { if (currentStep > 0) { currentStep--; renderStep(); } }

function closeQuest() {
  document.documentElement.style.overflow = "";
  document.body.style.overflow = "";
  document.getElementById('quest-popup-overlay').classList.add('hidden');
}
</script>