Embed

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>RentGuard – Start + Request + Self Report</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />

  
  <style>
    @supports (padding: max(0px)) {
      .safe-bottom {
        padding-bottom: max(env(safe-area-inset-bottom), 1.5rem);
      }
    }
  </style>
</head>
<body class="bg-white min-h-screen flex items-center justify-center">
  
  
  
  <main class="w-full max-w-xs text-center px-4">
    
    <h1 class="text-2xl md:text-3xl font-extrabold leading-snug text-gray-900">
      임대인의 <span class="text-red-600">안심</span>과<br />
      임차인의 <span class="text-blue-500">신뢰</span>를
    </h1>

    
    <div class="mt-5 flex flex-col items-center space-y-3">
      
      <button
        id="openRequest"
        type="button" aria-label="임차인에게 요청보내기"
        class="inline-flex whitespace-nowrap items-center justify-center px-4 py-2.5 text-sm font-semibold
               border border-gray-400 rounded-md hover:bg-gray-50
               focus:outline-none focus:ring-2 focus:ring-blue-400">
        임차인에게 요청보내기
      </button>

      
      <button
        id="openSelf"
        type="button" aria-label="본인의 리포트 받아보기"
        class="inline-flex whitespace-nowrap items-center justify-center px-4 py-2.5 text-sm font-semibold
               border border-gray-400 rounded-md hover:bg-gray-50
               focus:outline-none focus:ring-2 focus:ring-blue-400">
        본인의 리포트 받아보기
      </button>
    </div>

    
    <p class="mt-6 text-gray-800 text-base md:text-xl font-semibold leading-relaxed">
      임대시장의 리스크 AI지수를<br />
      기반으로 리포트를 제공합니다.
    </p>
  </main>

  
  
  
  <div id="requestModal"
     class="fixed inset-0 z-50 hidden overflow-y-auto"
     aria-hidden="true">

    
    <button id="closeByBackdrop"
            class="absolute inset-0 bg-black bg-opacity-40 backdrop-blur-sm"></button>

    
    <section class="relative mx-auto w-full max-w-md md:max-w-lg lg:max-w-xl mt-24 md:mt-28 lg:mt-32 p-0">
      
      <div class="bg-white shadow-xl rounded-2xl border border-gray-200 max-h-[85vh] overflow-y-auto">
        
        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
          <h2 class="text-lg md:text-xl font-bold text-gray-900">임차인 요청 보내기</h2>
          <button id="closeRequest" class="text-gray-500 hover:text-gray-700 focus:outline-none" aria-label="닫기">✕</button>
        </div>

        
        <div class="px-6 pt-4 text-sm text-gray-600">
          임차인의 <b>휴대폰 번호</b>와 <b>월 임대료</b>를 입력하면 카카오톡으로 인증·동의 링크가 전송됩니다.
        </div>

        
        <form id="requestForm" class="px-6 py-5 space-y-4 pb-6 safe-bottom">
          
          <div class="grid grid-cols-2 gap-3">
            <div class="text-left min-w-0">
              <label class="block text-xs font-semibold text-gray-700 mb-1">임차인 휴대폰 번호</label>
              <input type="tel" inputmode="numeric" placeholder="010-0000-0000" required
                     class="w-full rounded-md border border-orange-400 px-3 py-2
                            focus:ring-2 focus:ring-orange-400 focus:border-orange-500 focus:outline-none"/>
            </div>
            <div class="text-left min-w-0">
              <label class="block text-xs font-semibold text-gray-700 mb-1">월 임대료 (만원)</label>
              <input type="number" min="0" step="1" placeholder="80" required
                     class="w-full rounded-md border border-orange-400 px-3 py-2
                            focus:ring-2 focus:ring-orange-400 focus:border-orange-500 focus:outline-none"/>
            </div>
          </div>

          
          <p class="text-base font-semibold">
            <span class="text-red-600">임대인은 금액 확인후</span> 임차인에게 요청 하세요.
          </p>

          
          <div class="grid grid-cols-2 gap-3">
            <div class="text-left min-w-0">
              <label class="block text-xs font-semibold text-gray-700 mb-1">임대인 휴대폰 (선택)</label>
              <input type="tel" inputmode="numeric" placeholder="010-1234-5678"
                     class="w-full rounded-md border border-orange-400 px-3 py-2
                            focus:ring-2 focus:ring-orange-400 focus:border-orange-500 focus:outline-none"/>
            </div>
            <div class="text-left min-w-0">
              <label class="block text-xs font-semibold text-gray-700 mb-1">임대인 이름 (선택)</label>
              <input type="text" placeholder="홍길동"
                     class="w-full rounded-md border border-orange-400 px-3 py-2
                            focus:ring-2 focus:ring-orange-400 focus:border-orange-500 focus:outline-none"/>
            </div>
          </div>

          
          <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 text-xs text-gray-600 leading-5">
            <ul class="list-disc pl-5">
              <li>임차인에게 <b>카카오톡 링크로 인증·전자동의</b> 요청이 발송됩니다.</li>
              <li>세입자가 동의 완료 시, 임대인은 요청 결과(승인/보류/특정)만 확인할 수 있습니다.</li>
              <li>신용평가(점수/등급 산정)는 수행하지 않습니다.</li>
            </ul>
          </div>

          
          <label class="flex items-center gap-2 text-sm text-gray-700">
            <input type="checkbox" required class="h-4 w-4 border-gray-300 rounded" />
            안내 내용을 확인했습니다.
          </label>

          
          <button type="submit"
                  class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-md
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
            카카오톡으로 요청 보내기
          </button>
        </form>
      </div>
    </section>
  </div>

  
  
  
  <div id="selfReportModal"
     class="fixed inset-0 z-50 hidden overflow-y-auto"
     aria-hidden="true">

    
    <button id="selfCloseByBackdrop"
            class="absolute inset-0 bg-black bg-opacity-40 backdrop-blur-sm"></button>

    
    <section class="relative mx-auto w-full max-w-md md:max-w-lg lg:max-w-xl mt-24 md:mt-28 lg:mt-32 p-0">
      
      <div class="bg-white shadow-xl rounded-2xl border border-blue-100 max-h-[85vh] overflow-y-auto">
        
        <div class="px-6 py-4 border-b border-blue-100 flex items-center justify-between">
          <h2 class="text-lg md:text-xl font-bold text-blue-700">본인의 리포트 받아보기</h2>
          <button id="selfClose" class="text-blue-500 hover:text-blue-700 focus:outline-none" aria-label="닫기">✕</button>
        </div>

        
        <form id="selfReportForm" class="px-6 py-5 space-y-3 text-blue-700 pb-6 safe-bottom">
          
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block text-sm font-semibold mb-1">이름</label>
              <input type="text" placeholder="홍길동" required
                     class="w-full rounded-md border border-blue-300 px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"/>
            </div>
            <div>
              <label class="block text-sm font-semibold mb-1">휴대폰</label>
              <input type="tel" placeholder="010-1234-5678" required
                     class="w-full rounded-md border border-blue-300 px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"/>
            </div>
          </div>

          
          <div>
            <label class="block text-sm font-semibold mb-1">주민등록번호</label>
            <input type="text" placeholder="앞6자리-뒤7자리" required
                   class="w-full rounded-md border border-blue-300 px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"/>
          </div>

          
          <div>
            <label class="block text-sm font-semibold mb-1">예상 월 임대료(만원)</label>
            <input type="number" placeholder="예: 80" required
                   class="w-full rounded-md border border-blue-300 px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"/>
          </div>

          
          <div>
            <label class="block text-sm font-semibold mb-1">은행명</label>
            <input type="text" placeholder="예: NH농협" required
                   class="w-full rounded-md border border-blue-300 px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"/>
          </div>

          
          <div>
            <label class="block text-sm font-semibold mb-1">계좌번호 끝 4자리</label>
            <input type="text" inputmode="numeric" maxlength="4" placeholder="1234" required
                   class="w-full rounded-md border border-blue-300 px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"/>
          </div>

          
          <div class="bg-blue-50 border border-blue-200 text-xs text-blue-700 rounded-md p-3 leading-5">
            <b>전자 동의 고지</b><br/>
            RentGuard는 임대시장 리스크 AI 지수인 <b>RRI</b>(RentGuard Risk Index, 특허 출원 중)을 기반으로
            금융·공공기관 데이터를 적용합니다. 개인 신용등급과는 무관하며, 개인정보는 저장되지 않습니다.
          </div>

          
          <label class="flex items-center text-sm">
            <input type="checkbox" required class="h-4 w-4 border-blue-400 rounded mr-2 focus:ring-blue-400"/>
            전자 동의에 동의합니다.
          </label>

          
          <button type="submit"
                  class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-md
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 mt-1">
            카카오톡으로 리포트 받기
          </button>
        </form>
      </div>
    </section>
  </div>

  
  
  
  <script>
    // ---- 임차인 요청 모달 ----
    const openBtn   = document.getElementById('openRequest');
    const modal     = document.getElementById('requestModal');
    const closeBtn  = document.getElementById('closeRequest');
    const backdrop  = document.getElementById('closeByBackdrop');
    const form      = document.getElementById('requestForm');

    function openModal() {
      modal.classList.remove('hidden');
      modal.setAttribute('aria-hidden', 'false');
    }
    function closeModal() {
      modal.classList.add('hidden');
      modal.setAttribute('aria-hidden', 'true');
    }

    openBtn?.addEventListener('click', openModal);
    closeBtn?.addEventListener('click', closeModal);
    backdrop?.addEventListener('click', closeModal);
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });

    form?.addEventListener('submit', (e) => {
      e.preventDefault();
      const btn = form.querySelector('button[type="submit"]');
      const old = btn.textContent;
      btn.disabled = true;
      btn.textContent = '전송 중...';
      setTimeout(() => {
        btn.disabled = false;
        btn.textContent = old;
        closeModal();
        alert('요청이 접수되었습니다. (데모)');
      }, 800);
    });

    // ---- 본인 리포트 모달 ----
    const openSelf   = document.getElementById('openSelf');
    const selfModal  = document.getElementById('selfReportModal');
    const selfClose  = document.getElementById('selfClose');
    const selfBack   = document.getElementById('selfCloseByBackdrop');
    const selfForm   = document.getElementById('selfReportForm');

    function openSelfModal() {
      selfModal.classList.remove('hidden');
      selfModal.setAttribute('aria-hidden', 'false');
    }
    function closeSelfModal() {
      selfModal.classList.add('hidden');
      selfModal.setAttribute('aria-hidden', 'true');
    }

    openSelf?.addEventListener('click', openSelfModal);
    selfClose?.addEventListener('click', closeSelfModal);
    selfBack?.addEventListener('click', closeSelfModal);
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeSelfModal(); });

    selfForm?.addEventListener('submit', (e) => {
      e.preventDefault();
      const btn = selfForm.querySelector('button[type="submit"]');
      const old = btn.textContent;
      btn.disabled = true;
      btn.textContent = '본인확인 링크 전송 중...';
      setTimeout(() => {
        btn.disabled = false;
        btn.textContent = old;
        closeSelfModal();
        alert('카카오톡으로 본인확인 링크를 보냈습니다. (데모)');
      }, 900);
    });
  </script>
</body>
</html>

Rent Guard

임대인의 안심과 임차인의 신뢰를

임대인의 안심과
임차인의 신뢰를