<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Mystic Cookies — Wealth</title>
<script src="https://sdk.minepi.com/pi-sdk.js"></script> 
<style>
  :root{
    --bg:#f0fff4;            /* mint-50 */
    --panel:#e6fffa;         /* teal-50 */
    --text:#0f3b2e;          /* deep teal */
    --muted:#256e5b;
    --brand:#3bb273;         /* wealth accent */
    --line:#cde9e2;
    --coin1:#ffd86b;         /* coin gradient light */
    --coin2:#f0b132;         /* coin gradient dark */
    --rim:#c68b17;           /* coin rim */
    --paper:#ffffff;
    --shadow:0 10px 24px rgba(32,180,120,.25);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:
      radial-gradient(900px 420px at 110% -10%, #dcfff5 0%, transparent 65%),
      radial-gradient(700px 360px at -10% 110%, #d4fff0 0%, transparent 65%),
      linear-gradient(180deg, var(--panel), var(--bg));
  }

  header{
    text-align:center; padding:18px 12px 8px;
    position:sticky; top:0; z-index:5;
    background:linear-gradient(180deg,rgba(230,255,250,.95),rgba(240,255,244,.9));
    border-bottom:1px solid var(--line);
    backdrop-filter:saturate(140%) blur(6px);
  }
  h1{margin:0;font-size:22px}
  .subtitle{margin:.35rem 0 0;color:var(--muted);font-size:13px}

  button {
    padding: 12px 24px;
    margin: 15px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
  }
  #loginBtn { background: #4caf50; color: white; }
  #cookieBtn { 
    border:1px solid #b4efd9; background:linear-gradient(180deg,#23d39e,#14b87d);
    color:#fff; font-weight:800; padding:12px 16px; border-radius:14px; box-shadow:0 6px 14px rgba(20,184,125,.25);
    text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-width:160px; }
  #fortuneBox { margin-top: 30px; font-size: 18px; font-weight: bold; color: #333; min-height: 50px; }

  main{min-height:calc(49dvh - 120px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:0px 12px;}

  /* COIN COOKIE (gold coin halves) */
  .cookie-wrap{
    position:relative; width:280px; height:260px; cursor:pointer;
    display:grid; place-items:center;
  }

  .coin-half{
    position:absolute; width:200px; height:200px; top:30px;
    background:radial-gradient(65% 65% at 35% 30%, var(--coin1), var(--coin2) 70%);
    border:6px solid var(--rim);
    box-shadow: inset -10px -14px 24px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.12);
    border-radius:50%;
    transition:transform 900ms cubic-bezier(.25,1.3,.35,1), filter .3s;
  }
  .coin-left{ left:40px; transform-origin:80% 50% }
  .coin-right{ right:40px; transform-origin:20% 50% }

  /* inner rim */
  .coin-half:before{
    content:""; position:absolute; inset:10px;
    border-radius:50%; border:3px solid rgba(255,255,255,.5);
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.06);
  }

  /* subtle seam */
  .seam{position:absolute; top:60px; bottom:40px; width:4px; left:50%; transform:translateX(-50%); background:rgba(198,139,23,.45); border-radius:2px}

  /* fortune paper */
  .paper{
    position:absolute; top:128px; left:50%; transform:translate(-50%, 16px) rotate(-1.5deg);
    background:var(--paper); color:#0a4a38; border:2px solid #b8f2de; border-radius:8px;
    padding:10px 16px; font-weight:800; box-shadow:var(--shadow);
    opacity:0; transition:transform 800ms cubic-bezier(.2,1,.3,1), opacity 500ms ease;
    max-width:88%;
  } 

  /* cracked state */
  .cookie-wrap.cracked .coin-left{ transform:translate(-42px, -6px) rotate(-16deg) }
  .cookie-wrap.cracked .coin-right{ transform:translate(42px, -6px) rotate(16deg) }
  .cookie-wrap.cracked .paper{ opacity:1; transform:translate(-50%,-42px) rotate(0deg) }

  /* coin sparkles */
  .sparkle{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s }
  .cookie-wrap.cracked .sparkle{ opacity:1 }
  .sparkle i{
    position:absolute; width:12px; height:12px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, #fff6bd, #ffd86b 55%, #f0b132 90%);
    box-shadow: inset -2px -3px 5px rgba(0,0,0,.15), 0 0 8px rgba(255,216,107,.5);
    transform:scale(0);
    animation:coin-pop 900ms ease forwards;
  }
  .sparkle i:after{
    content:""; position:absolute; inset:-6px;
    background: radial-gradient(6px 6px at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
    border-radius:50%;
  }
  @keyframes coin-pop{
    0%{transform:translate(var(--x,0),var(--y,0)) scale(0); opacity:0}
    60%{transform:translate(calc(var(--x)*1.1),calc(var(--y)*1.1)) scale(1); opacity:1}
    100%{transform:translate(calc(var(--x)*1.3),calc(var(--y)*1.3)) scale(.9); opacity:0}
  }

  /* Bottom navigation bar */
  .bottom-nav {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 60px;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  background-color: #fff8e7;
	  border-top: 1px solid #e7d8b6;
	  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
	  z-index: 100;
  }
  .nav-item {
	  flex: 1;
	  text-align: center;
	  font-size: 0.75rem;
	  color: #995e19;
	  text-decoration: none;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
  }
  .nav-item span.icon {
	  font-size: 1.4rem;
	  margin-bottom: 2px;
  }
  .nav-item.active {
	  color: #d97706;
	  font-weight: 600;
  }
  #google_translate_element { text-align:center;margin-bottom: 20px; }
</style>
<?php if($_SERVER['HTTP_HOST']=="cookie.lollinail.com"){ ?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7990821357761241"
 crossorigin="anonymous"></script>
<?php } ?>
</head>
<body>
  <header>
    <h1>💰 Wealth Cookie</h1>
    <p class="subtitle">Tap the golden coin cookie to reveal a wealth fortune.</p>
  </header>

  <div style="text-align: center;padding: 20px 40px 5px;">
    <p>First cookie of the day is FREE! After that, each cookie costs 0.1π.</p>
  </div>
 
  <div style="text-align: center;padding: 0px 40px 10px;">
    <button id="loginBtn">🔑 Login with Pi</button>
    <button id="cookieBtn" disabled>🪙 Crack Cookie</button>
  </div>

  <main>
    <div class="cookie-wrap" id="cookie">
      <div class="coin-half coin-left"></div>
      <div class="coin-half coin-right"></div>
      <div class="seam"></div>
      <div class="paper" id="paper">“Prosperity favors the prepared.”</div>
      <div class="sparkle" id="sparkle"></div>
    </div>
  </main>

  <div style="text-align: center;padding: 10px 40px 20px;">
	<div id="fortuneBox"></div>
  </div>

  <nav class="bottom-nav">
    <a href="./index.php" class="nav-item active">
      <span class="icon">🥠</span>
      <span class="label">General</span>
    </a>
    <a href="./love.php" class="nav-item">
      <span class="icon">❤️</span>
      <span class="label">Love</span>
    </a>
    <a href="./wealth.php" class="nav-item">
      <span class="icon">💰</span>
      <span class="label">Wealth</span>
    </a>
    <a href="./history.php" class="nav-item">
      <span class="icon">📜</span>
      <span class="label">History</span>
    </a>
  </nav>

  <script> 
	Pi.init({version:"2.0",sandbox:false});
	const LS_KEY = 'mysticHistory';

	const MysticHistory = {
	  get(){
		try{ return JSON.parse(localStorage.getItem(LS_KEY) || '[]'); }
		catch(e){ return []; }
	  },
	  set(arr){ localStorage.setItem(LS_KEY, JSON.stringify(arr)); },
	  save(category, text){
		const arr = MysticHistory.get();
		arr.push({ text, category, ts: Date.now() });
		MysticHistory.set(arr);
	  }
	};
	// Make helper available to other pages if needed
	window.MysticHistory = MysticHistory;
    const loginBtn = document.getElementById("loginBtn");
    const cookieBtn = document.getElementById("cookieBtn");
    const container = document.getElementById("cookie");
    const fortuneBox = document.getElementById("fortuneBox");
	const fortuneText = document.getElementById("paper");
	const spark  = document.getElementById('sparkle');

    let currentUser = null;
	let pendingCrack = false; // 결제 완료 대기 상태
    function log(msg) { fortuneBox.innerHTML = `<p>${msg}</p>`; }

    // incomplete payments handler
    function onIncompletePaymentFound(payment) {
      return new Promise((resolve, reject) => {
        fetch("approve_payment.php", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ paymentId: payment.identifier })
        })
        .then(() => fetch("complete_payment.php", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ paymentId: payment.identifier, txid: payment.transaction.txid })
        }))
        .then(() => resolve(true))
        .catch(err => reject(err));
      });
    }

    // login
    function login() {
      Pi.authenticate(['username','payments'], onIncompletePaymentFound)
        .then(auth => {
          if (auth && auth.user && auth.user.username) {
            currentUser = auth.user.username;
            localStorage.setItem("piUser", currentUser);
            log("✅ Welcome, " + currentUser);
			//log(auth.user.uid)
            cookieBtn.disabled = false;
			loginBtn.style.display = "none";
          }
        })
        .catch(err => log("❌ Login failed: " + err));
    }

    // 오늘이 첫 쿠키인지 확인
    function isFirstCookieToday() {
      const today = new Date().toISOString().slice(0,10);
      const stored = localStorage.getItem("lastCookieDayWealth");
      return stored !== today;
    }

    function markCookieUsed() {
      const today = new Date().toISOString().slice(0,10);
      localStorage.setItem("lastCookieDayWealth", today);
    }

    // 서버에서 Fortune 받아오기
    function fetchFortune() { 
      fetch("get_fortune3.php", {
		  method: "POST", headers: { "Content-Type": "application/json" },
		  body: JSON.stringify({ username: localStorage.getItem("piUser") })
		 })
        .then(res => res.json())
        .then(data => { 
		  showFortune(data.fortune);
		  MysticHistory.save('wealth', data.fortune);
          //fortuneBox.innerHTML = `<div class="fortune-paper">"${data.fortune}"</div>`;
        });
    }

	function makeCoinSparkles(){
	  spark.innerHTML = '';
	  const N = 16;
	  for(let i=0;i<N;i++){
		const el = document.createElement('i');
		const angle = (Math.PI*2)*(i/N);
		const r = 62 + Math.random()*42;
		el.style.setProperty('--x', `${Math.cos(angle)*r}px`);
		el.style.setProperty('--y', `${Math.sin(angle)*r - 6}px`);
		el.style.left = '50%'; el.style.top = '50%';
		spark.appendChild(el);
	  }
	}
 
    // fortune animation
    function showFortune(fortune) {  
	  // close → reopen for repeat taps 
	  if (container.classList.contains("cracked")) {
		  // reset 먼저
		  container.classList.remove("cracked");
		  fortuneText.style.opacity = 0;
	  }

	  setTimeout(()=>{
		fortuneText.textContent = fortune;
		makeCoinSparkles();
		container.classList.add('cracked');
		fortuneText.style.opacity = 1;
	  }, 260);
    }

	container.addEventListener("click", () => {
		if (!container.classList.contains("cracked")) {
		  fortuneText.textContent = fortunes[Math.floor(Math.random() * fortunes.length)];
		  container.classList.add("cracked");
		}
	}); 

    // open cookie logic
    function openCookie() {  
      if (!currentUser) {
        log("⚠️ Please login first to crack a cookie.");
        return;
      }

      if (isFirstCookieToday()) {
        log("🎉 First cookie today is FREE!");
        markCookieUsed();
        fetchFortune();
      } else {
        Pi.createPayment({
          amount: 0.1,
          memo: "Wealth Cookie Fortune",
          metadata: { orderId:"<?=time();?>",type: "cookie" }
        }, {
          onReadyForServerApproval: (paymentId) => {
            fetch("approve_payment.php", {
              method: "POST", headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ paymentId })
            });
			  
		    if (container.classList.contains("cracked")) {
			  // reset 먼저
			  container.classList.remove("cracked");
			  fortuneText.style.opacity = 0;
		    }
            cookieBtn.disabled = true;
          },
          onReadyForServerCompletion: (paymentId, txid) => {
            fetch("complete_payment.php", {
              method: "POST", headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ paymentId, txid })
            }).then(() => {
              // ✅ 결제 완료 후 서버에서 Fortune 가져오기
			  // ✅ 여기서는 crackCookie() 실행 안함
			  // 브라우저 포커스 돌아올 때 실행되도록 플래그만 켬
			  pendingCrack = true;
			  log("🎉 Payment Successful");
            });
          }, 
          onCancel: () => log("❌ Payment cancelled"),
          onError: (err) => log("🚨 Payment error: " + err)
        });
      }
    }

    loginBtn.addEventListener("click", login);
    cookieBtn.addEventListener("click", openCookie);
	
	// 브라우저가 다시 포커스 될 때 체크
	window.addEventListener("focus", () => {
	  if (pendingCrack) { 
		 fetch("get_fortune3.php", {
		  method: "POST", headers: { "Content-Type": "application/json" },
		  body: JSON.stringify({ username: localStorage.getItem("piUser") })
		 })
		.then(res => res.json())
		.then(data => { 
		  if (container.classList.contains("cracked")) { 
			  // 약간의 지연 후 다시 깨짐
			  setTimeout(() => {
				fortuneText.style.opacity = 1;
				fortuneText.textContent = data.fortune;
				container.classList.add("cracked");
			  }, 300);
		  } else {
			  fortuneText.style.opacity = 1;
			  fortuneText.textContent = data.fortune;
			  container.classList.add("cracked");
		  }
		  MysticHistory.save('wealth', data.fortune);
          cookieBtn.disabled = false;
		  //fortuneBox.innerHTML = `<div class="fortune-paper">"${data.fortune}"</div>`;
		});
		pendingCrack = false;
		log("🍪 Do you like your fortune?");
	  }
	});

    // 자동 로그인
    window.addEventListener("load", () => {
      const savedUser = localStorage.getItem("piUser");
      if (savedUser) { 
		Pi.authenticate(['username','payments'], onIncompletePaymentFound)
			.then(auth => {
			  if (auth && auth.user && auth.user.username) {
				currentUser = auth.user.username;
				localStorage.setItem("piUser", currentUser);
				log("✅ Welcome, " + currentUser);
				cookieBtn.disabled = false;
				loginBtn.style.display = "none";
			  }
			})
			.catch(err => log("❌ Login failed: " + err));
      } else {
        log("ℹ️ Please log in to use Mystic Cookies.");
      }
    });
  </script>  
  
  <div id="google_translate_element"></div>

  <script>
  // ① 페이지 기본 언어 (원문 언어)
  const pageLang = 'en'; // 필요시 'ko' 등으로 변경 가능

  // ② 브라우저(또는 스마트폰) 기본 언어 감지
  const rawLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
  const baseLang = rawLang.split('-')[0];

  // ③ Google 번역 코드용 언어 매핑
  function mapToGoogleLang(lang) {
    const special = {
      'zh': 'zh-CN',
      'zh-cn': 'zh-CN',
      'zh-tw': 'zh-TW',
      'pt-br': 'pt',
    };
    return special[lang] || special[lang.toLowerCase()] || lang;
  }

  const supported = new Set([
    'ar','de','en','es','fr','hi','id','it','ja','ko','pt','ru','th','vi','zh-CN','zh-TW'
  ]);
  const targetLang = mapToGoogleLang(rawLang);
  const targetOk = supported.has(targetLang) ? targetLang : baseLang;
 
  // ④ 브라우저 언어가 영어일 경우 바로 종료
  if (targetOk === 'en') {
    console.log('Browser language is English → Skip auto-translate.');
  } else {
    // ⑤ 번역 쿠키 설정
    function setCookie(name, value, days, domain, path) {
      const d = new Date();
      d.setTime(d.getTime() + (days*24*60*60*1000));
      const expires = "expires="+ d.toUTCString();
      document.cookie = name + "=" + value + ";" + expires + ";" +
        "path=" + (path || "/") + ";" +
        (domain ? ("domain=" + domain + ";") : "");
    }
    function setGoogleTransCookie(src, dst) {
      const v = `/${src}/${dst}`;
      setCookie('googtrans', v, 365, null, '/');
      const hostParts = location.hostname.split('.');
      if (hostParts.length > 2) {
        const rootDomain = '.' + hostParts.slice(-2).join('.');
        setCookie('googtrans', v, 365, rootDomain, '/');
      }
    }

    // ⑥ Google 번역 초기화
    window.googleTranslateElementInit = function() {
      new google.translate.TranslateElement({
        pageLanguage: pageLang,
        autoDisplay: false
      }, 'google_translate_element');
    };

    // ⑦ 자동 실행
    (function autoTranslateOnLoad() {
      if (targetOk && targetOk !== pageLang) {
        setGoogleTransCookie(pageLang, targetOk);
        var s = document.createElement('script');
        s.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
        document.head.appendChild(s);
      }
    })();
  }
  </script>
  
  <div id="google_translate_element"></div>

  <script>
  // ① 페이지 기본 언어 (원문 언어)
  const pageLang = 'en'; // 필요시 'ko' 등으로 변경 가능

  // ② 브라우저(또는 스마트폰) 기본 언어 감지
  const rawLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
  const baseLang = rawLang.split('-')[0];

  // ③ Google 번역 코드용 언어 매핑
  function mapToGoogleLang(lang) {
    const special = {
      'zh': 'zh-CN',
      'zh-cn': 'zh-CN',
      'zh-tw': 'zh-TW',
      'pt-br': 'pt',
    };
    return special[lang] || special[lang.toLowerCase()] || lang;
  }

  const supported = new Set([
    'ar','de','en','es','fr','hi','id','it','ja','ko','pt','ru','th','vi','zh-CN','zh-TW'
  ]);
  const targetLang = mapToGoogleLang(rawLang);
  const targetOk = supported.has(targetLang) ? targetLang : baseLang;
 
  // ④ 브라우저 언어가 영어일 경우 바로 종료
  if (targetOk === 'en') {
    console.log('Browser language is English → Skip auto-translate.');
  } else {
    // ⑤ 번역 쿠키 설정
    function setCookie(name, value, days, domain, path) {
      const d = new Date();
      d.setTime(d.getTime() + (days*24*60*60*1000));
      const expires = "expires="+ d.toUTCString();
      document.cookie = name + "=" + value + ";" + expires + ";" +
        "path=" + (path || "/") + ";" +
        (domain ? ("domain=" + domain + ";") : "");
    }
    function setGoogleTransCookie(src, dst) {
      const v = `/${src}/${dst}`;
      setCookie('googtrans', v, 365, null, '/');
      const hostParts = location.hostname.split('.');
      if (hostParts.length > 2) {
        const rootDomain = '.' + hostParts.slice(-2).join('.');
        setCookie('googtrans', v, 365, rootDomain, '/');
      }
    }

    // ⑥ Google 번역 초기화
    window.googleTranslateElementInit = function() {
      new google.translate.TranslateElement({
        pageLanguage: pageLang,
        autoDisplay: false
      }, 'google_translate_element');
    };

    // ⑦ 자동 실행
    (function autoTranslateOnLoad() {
      if (targetOk && targetOk !== pageLang) {
        setGoogleTransCookie(pageLang, targetOk);
        var s = document.createElement('script');
        s.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
        document.head.appendChild(s);
      }
    })();
  }
  </script>

  
  <?php if($_SERVER['HTTP_HOST']=="11cookie.lollinail.com"){ ?>
  <!-- 쿠키 롤리2 -->
  <div style="text-align: center;padding: 0px 40px 5px;">
  <ins class="adsbygoogle"
	 style="display:block"
	 data-ad-client="ca-pub-7990821357761241"
	 data-ad-slot="7851577031"
	 data-ad-format="auto"
	 data-full-width-responsive="true"></ins>
  </div>
  <script>
	 (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
  <?php } ?>
</body>
</html>