<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>카카오링크 커스텀 전송기</title>
  <meta property="og:image" content="https://i.ibb.co/jMVt5N0/levelKR.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 폰트 -->
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&amp;display=swap" rel="stylesheet">

  <style>
    :root {
      --bg-primary: #ffffff;
      --text-primary: #1d1d1f;
      --accent-color: #8A2BE2;
      --accent-glow: rgba(138, 43, 226, 0.2);
      --accent-secondary: #FF69B4;
      --accent-tertiary: #00CED1;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-primary: #000000;
        --text-primary: #f5f5f7;
        --accent-color: #9370DB;
        --accent-glow: rgba(147, 112, 219, 0.2);
      }
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    html, body {
      overflow: hidden;
      height: 100%;
      width: 100%;
      position: fixed;
    }
    body {
      font-family: 'Noto Sans KR', sans-serif;
      background-color: var(--bg-primary);
      color: var(--text-primary);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .nav {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }

    .about-button {
      display: inline-block;
      padding: 12px 24px;
      background: linear-gradient(45deg, var(--accent-color), var(--accent-secondary));
      color: white;
      text-decoration: none;
      border-radius: 30px;
      font-size: 1.1rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      opacity: 0;
      animation: fadeIn 0.5s ease forwards;
      animation-delay: 1s;
    }
    .about-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px var(--accent-glow);
    }

    .container {
      text-align: center;
      position: relative;
      z-index: 1;
    }

    h1 {
      font-size: 4rem;
      font-weight: 700;
      margin-bottom: 2rem;
      background: linear-gradient(45deg, var(--accent-color), var(--accent-secondary), var(--accent-tertiary));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradient 15s ease infinite;
      background-size: 300% 300%;
    }
    @keyframes gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes fadeIn {
      to { opacity: 1; }
    }

    .glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, var(--accent-glow) 0%, rgba(255,255,255,0) 70%);
      opacity: 0.5;
      filter: blur(40px);
      animation: heartbeat 1.5s ease-in-out infinite;
    }
    @keyframes heartbeat {
      0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
      14% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
      28% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
      42% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
      70% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
      100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    }

    .level-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 700px;
      pointer-events: none;
    }
    .circle {
      position: absolute;
      border: 2px solid var(--accent-color);
      border-radius: 50%;
      animation: rotate 20s linear infinite;
    }
    .circle:nth-child(1) {
      width: 100%;
      height: 100%;
      border-color: var(--accent-color);
      opacity: 0.1;
    }
    .circle:nth-child(2) {
      width: 80%;
      height: 80%;
      border-color: var(--accent-secondary);
      animation-direction: reverse;
      opacity: 0.15;
    }
    .circle:nth-child(3) {
      width: 60%;
      height: 60%;
      border-color: var(--accent-tertiary);
      opacity: 0.2;
    }
    @keyframes rotate {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .kakao-form {
      width: 320px;
      margin: 0 auto;
      text-align: left;
      background-color: rgba(255, 255, 255, 0.2);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      backdrop-filter: blur(10px);
    }
    .kakao-form label {
      display: block;
      margin-top: 15px;
      font-weight: 700;
      margin-bottom: 5px;
    }
    .kakao-form input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
    }
    .submit-btn {
      margin-top: 20px;
      width: 100%;
      padding: 14px;
      background: linear-gradient(45deg, var(--accent-color), var(--accent-secondary));
      color: #fff;
      border: none;
      border-radius: 30px;
      font-size: 1.1rem;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px var(--accent-glow);
    }
  </style>
</head>
<body>

  <nav class="nav">
    <a href="/" class="about-button">Home</a>
  </nav>


  <div class="glow"></div>


  <div class="level-icon">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>


  <div class="container">
    <h1>카카오링크 전송기</h1>

    <form class="kakao-form" onsubmit="createKakaoLink(event)">
      <label for="titleInput">제목 <span style="color:red;">*</span></label>
      <!-- 제목만 필수 -->
      <input type="text" id="titleInput" placeholder="예) 오늘의 소식" required>

      <label for="desInput">설명</label>
      <input type="text" id="desInput" placeholder="예) 재미있는 내용이 가득합니다.">

      <label for="btnInput">버튼 텍스트</label>
      <input type="text" id="btnInput" placeholder="예) 바로가기">

      <label for="linkInput">이동할 링크(URL)</label>
      <input type="url" id="linkInput" placeholder="예) https://lvl.kr">

      <label for="imgInput">이미지 링크(URL)</label>
      <input type="url" id="imgInput" placeholder="예) https://example.com/image.jpg">

      <button type="submit" class="submit-btn">전송</button>
    </form>
  </div>

  <script>
    function createKakaoLink(event) {
      // 폼 기본 제출 동작 방지
      event.preventDefault();

      // 각 입력 필드 값 가져오기
      const title = document.getElementById("titleInput").value.trim();
      const des   = document.getElementById("desInput").value.trim();
      const btn   = document.getElementById("btnInput").value.trim();
      const link  = document.getElementById("linkInput").value.trim();
      const img   = document.getElementById("imgInput").value.trim();

      // 링크, 이미지가 비어있지 않은 경우에만 검사
      // http:// 혹은 https:// 로 시작하지 않으면 알림 후 중단
      if (link && !/^https?:\/\//i.test(link)) {
        alert("이동할 링크는 http:// 또는 https:// 로 시작해야 합니다.");
        return;
      }
      if (img && !/^https?:\/\//i.test(img)) {
        alert("이미지 링크는 http:// 또는 https:// 로 시작해야 합니다.");
        return;
      }

      // URL 인코딩 (특수문자/공백 등 처리)
      const baseUrl = "http://asj.dothome.co.kr/kaling/";
      const params =
        "?title=" + encodeURIComponent(title) +
        // 선택 항목은 값이 있으면만 추가하도록 처리
        (des  ? "&des="  + encodeURIComponent(des)  : "") +
        (btn  ? "&btn="  + encodeURIComponent(btn)  : "") +
        (link ? "&link=" + encodeURIComponent(link) : "") +
        (img  ? "&img="  + encodeURIComponent(img)  : "");

      // 최종 이동할 주소
      const finalUrl = baseUrl + params;

      // 해당 주소로 이동
      window.location.href = finalUrl;
    }
  </script>
</body>
</html>