<!doctype html>
<html lang="zh-HK">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>30 &amp; 孖5 - 我的捷角守宮</title>
  <link href="https://cdn.tailwindcss.com/3.4.17" rel="stylesheet">
  <script src="/_sdk/element_sdk.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');
    
    * {
      font-family: 'Fredoka', 'Arial', sans-serif;
    }

    html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background: linear-gradient(135deg, #FFE5CC 0%, #FFF0E6 50%, #E8F4F8 100%);
    }

    .gecko-container {
      position: relative;
      width: 100%;
      max-width: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      border-radius: 20px;
      overflow: visible;
    }

    .video-container {
      width: 100%;
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      background: rgba(255, 255, 255, 0.9);
    }

    .camera-label {
      font-size: 13px;
      color: #888;
      font-weight: 500;
      text-align: center;
    }

    .video-frame {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      object-fit: cover;
    }

    .info-box {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 30px;
      padding: 40px 30px;
      text-align: center;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
    }

    .name-title {
      font-size: 48px;
      font-weight: 700;
      background: linear-gradient(135deg, #FF8C42, #FFB84D);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 15px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .desc-text {
      font-size: 16px;
      color: #666;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .heart-icon {
      display: inline-block;
      animation: heart-beat 1.5s ease-in-out infinite;
      margin: 0 5px;
    }

    @keyframes heart-beat {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }

    .app-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
    }

    .left-panel, .right-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      gap: 30px;
      overflow-y: auto;
    }

    .left-panel {
      background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 50%, #7DD3FC 100%);
      border-right: 3px dashed rgba(59, 130, 246, 0.2);
    }

    .right-panel {
      background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 50%, #F9A8D4 100%);
    }

    .header {
      text-align: center;
      margin-bottom: 20px;
    }

    .header h1 {
      font-size: 32px;
      font-weight: 700;
      background: linear-gradient(135deg, #FF6B9D, #C06C84);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 5px;
    }

    .header p {
      font-size: 14px;
      color: #888;
    }

    @media (max-width: 768px) {
      .app-wrapper {
        flex-direction: column;
      }

      .left-panel {
        border-right: none;
        border-bottom: 3px dashed rgba(255, 140, 66, 0.2);
        padding: 20px 15px;
        gap: 15px;
        min-height: auto;
      }

      .right-panel {
        padding: 20px 15px;
        gap: 15px;
        min-height: auto;
      }

      .header {
        margin-bottom: 10px;
        padding-top: 0;
      }

      .header h1 {
        font-size: 22px;
        margin-bottom: 5px;
        word-break: break-word;
        white-space: normal;
        line-height: 1.3;
      }

      .header p {
        font-size: 12px;
      }

      .video-container {
        margin-top: 15px;
        width: 100%;
        max-width: 100%;
      }

      .gecko-container {
        width: 100%;
        max-width: 100%;
        gap: 5px;
      }

      .camera-label {
        font-size: 11px;
        margin-top: 5px;
      }

      .gecko {
        width: 150px;
        height: 150px;
      }

      .gecko-body {
        width: 90px;
        height: 60px;
      }

      .gecko-head {
        width: 45px;
        height: 45px;
        top: -20px;
        left: 22px;
      }

      .gecko-tail {
        width: 75px;
        height: 25px;
        right: -60px;
      }

      .name-title {
        font-size: 32px;
      }

      .info-box {
        padding: 20px 15px;
      }

      .desc-text {
        font-size: 14px;
        line-height: 1.6;
      }
    }
  </style>
  <style>body { box-sizing: border-box; }</style>
  <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js" type="text/javascript"></script>
  <script src="https://cdn.tailwindcss.com/3.4.17" type="text/javascript"></script>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full">
  <div class="app-wrapper"><!-- 左邊 - 30 -->
   <div class="left-panel">
    <div class="header">
     <h1>🦎 我是 30</h1>
     <p>白啡條紋小可愛</p>
    </div>
    <div class="gecko-container">
     <div class="video-container"><iframe class="video-frame" src="http://203.198.164.116:1984/stream.html?src=camera2" allowfullscreen allow="autoplay"></iframe>
     </div>
     <p class="camera-label">📹 IP Cam 實時畫面</p>
    </div>
    <div class="info-box">
     <div class="name-title">
      30
     </div>
     <p class="desc-text" id="gecko-30-desc">我係個怕羞的細膽仔 <span class="heart-icon">💛</span><br>
       白天最鍾意埋個頭訓覺，<br>
       夜晚先敢嬌羞咁出嚟～</p>
     <p class="desc-text" style="font-size: 14px; color: #999;">✨ 特徵：白啡條紋 | 怕羞細膽 | 夜行動物</p>
    </div>
   </div><!-- 右邊 - 孖5 -->
   <div class="right-panel">
    <div class="header">
     <h1>🦎 我是 孖5</h1>
     <p>白啡條紋小天使</p>
    </div>
    <div class="gecko-container">
     <div class="video-container"><iframe class="video-frame" src="http://203.198.164.116:1984/stream.html?src=camera1" allowfullscreen allow="autoplay"></iframe>
     </div>
     <p class="camera-label">📹 IP Cam 實時畫面</p>
    </div>
    <div class="info-box">
     <div class="name-title">
      孖5
     </div>
     <p class="desc-text" id="gecko-5-desc">我係個好奇寶寶 <span class="heart-icon">💛</span><br>
       鍾意探索新事物，最愛食野！<br>
       每日都開心咁出嚟冒險～</p>
     <p class="desc-text" style="font-size: 14px; color: #999;">✨ 特徵：白啡條紋 | 好奇心強 | 貪食小寶</p>
    </div>
   </div>
  </div>
  <script>
    if (window.elementSdk) {
      window.elementSdk.init({
        defaultConfig: {
          gecko_30_desc: '我係個怕羞的細膽仔 💛\n白天最鍾意埋個頭訓覺，\n夜晚先敢嬌羞咁出嚟～',
          gecko_5_desc: '我係個溫柔安靜的小寶寶 🧡\n喜歡慢慢爬，享受靜靜嘅時刻，\n偶爾會做個美夢～'
        },
        onConfigChange: async (config) => {
          const desc30El = document.getElementById('gecko-30-desc');
          if (desc30El && config.gecko_30_desc) {
            desc30El.innerHTML = config.gecko_30_desc + ' <span class="heart-icon">💛</span>';
          }
          
          const desc5El = document.getElementById('gecko-5-desc');
          if (desc5El && config.gecko_5_desc) {
            desc5El.innerHTML = config.gecko_5_desc + ' <span class="heart-icon">💛</span>';
          }
        },
        mapToCapabilities: (config) => ({
          recolorables: [],
          borderables: [],
          fontEditable: undefined,
          fontSizeable: undefined
        }),
        mapToEditPanelValues: (config) => new Map([
          ['gecko_30_desc', config.gecko_30_desc.replace(/<br>/g, '\n')],
          ['gecko_5_desc', config.gecko_5_desc.replace(/<br>/g, '\n')]
        ])
      });
    }
  </script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a03205156e7add9f',t:'MTc4MDAyMTIyNQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>