
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CC.CC — One name for your link and email.</title>

<meta name="description" content="Claim your link and email with just one name.">
<meta name="keywords" content="cc.cc, claim your name, custom link, short link, email alias, email forwarding, digital identity, one link bio, vanity url, branded url, personal brand, link in bio, create your link, professional email, own your link">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<meta name="google" content="notranslate">

<meta name="robots" content="index, follow">

<meta property="og:url" content="https://cc.cc" />
<meta property="og:type" content="article" />
<meta property="og:title" content="CC.CC : One name for your link and email." />
<meta property="og:image" content="https://short-img1.cc.cc/img/favicon-256.png" />
<meta property="og:image:type" content="image/">
<meta property="og:description" content="Claim your link and email with just one name." />
<meta property="og:image:secure_url" content="" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:title" content="CC.CC : One name for your link and email." />
<meta name="twitter:description" content="Claim your link and email with just one name." />
<meta name="twitter:image" content="https://short-img1.cc.cc/img/favicon-256.png" />
<meta name="twitter:image:alt" content="CC.CC : One name for your link and email." />
<meta name="twitter:url" content="https://cc.cc" />

<link rel="shortcut icon" href="https://short-img1.cc.cc/img/favicon-256.png">

<link href="https://short-img1.cc.cc/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>:root {
	--ink: #212529;
	/* bs-dark */
	--muted: #6c757d;
	/* bs text-muted */
	--line: #e2e2f0;
	/* 라벤더 톤 보더 */
	--bg: #f1f0fe;
	/* cc.cc 라벤더 배경 */
	--card: #ffffff;
	--accent: #766DF4;
	/* Jobcy 퍼플 (구 bs primary 블루) */
	--accent-press: #5d52e0;
	/* 퍼플 hover */
	--ok: #198754;
	/* bs success */
	--taken: #dc3545;
	/* bs danger */
	--focus: #766DF4;
	--brand: #766DF4;
	/* Jobcy 테마 퍼플 — 로고/슬로건/커서 */
}

* {
	box-sizing: border-box
}

html,
body {
background-color: #f1f0fe;
	margin: 0
}

body {
	background-color: #f1f0fe;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

/* ---------- top bar ---------- */
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	max-width: 1080px;
	margin: 0 auto;
}

.logo {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 800;
	letter-spacing: -.02em;
	font-size: 19px;
	color: var(--ink);
	text-decoration: none
}

.logo .dot {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	vertical-align: middle
}

.top-actions {
	display: flex;
	align-items: center;
	gap: 10px
}

/* 햄버거 메뉴 버튼 (원형 뱃지 — cc.cc 프로필 페이지 패턴) */
.menu-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.menu-btn:hover {
	background: #faf9ff;
	border-color: #cfcef0
}

.menu-btn svg {
	width: 22px;
	height: 22px
}

/* 언어 선택 버튼 (footer) */
.lang-btn {
	padding: 7px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: background .15s, border-color .15s, color .15s;
}

.lang-btn:hover {
	background: #faf9ff;
	border-color: #cfcef0;
	color: var(--ink)
}

/* ---------- 슬라이드 패널 ---------- */
.panel-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 27, 46, .42);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility .25s;
	z-index: 40;
}

.panel-overlay.open {
	opacity: 1;
	visibility: visible
}

.side-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 320px;
	max-width: 86vw;
	background: #fff;
	z-index: 50;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	box-shadow: -12px 0 40px -18px rgba(28, 27, 46, .4);
	display: flex;
	flex-direction: column;
	padding: 18px 18px 22px;
}

.side-panel.open {
	transform: translateX(0)
}

.panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px
}

.panel-close {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: #f3f2fb;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s;
}

.panel-close:hover {
	background: #e9e7fb
}

.panel-close svg {
	width: 20px;
	height: 20px
}

.panel-cta {
	width: 100%;
	border: none;
	cursor: pointer;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 13px;
	border-radius: 12px;
	margin-bottom: 18px;
	transition: background .15s;
}

.panel-cta:hover {
	background: var(--accent-press)
}

.panel-nav {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column
}

.panel-group {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #a9a8bf;
	margin: 14px 8px 6px;
}

.my-panel-group {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #a9a8bf;
	margin: 14px 8px 6px;
}

.panel-group:first-child {
	margin-top: 0
}

.my-panel-group:first-child {
	margin-top: 0
}

.panel-nav a {
	display: block;
	text-decoration: none;
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	padding: 11px 12px;
	border-radius: 10px;
	transition: background .12s;
}

.panel-nav a:hover {
	background: #f3f2fb;
	color: var(--accent)
}

/* ---------- hero ---------- */
.hero {
	max-width: 680px;
	margin: 0 auto;
	padding: 48px 22px 40px;
	text-align: center;
}

h1 {
	font-size: clamp(32px, 6vw, 52px);
	line-height: 1.05;
	letter-spacing: -.03em;
	margin: 0 0 14px;
	font-weight: 800;
}

h1 .you {
	color: var(--brand)
}

.sub {
	font-size: clamp(16px, 2.4vw, 19px);
	color: var(--muted);
	margin: 0 auto 34px;
	max-width: 460px
}

/* ---------- claim box: ONE input + ONE button ---------- */
.claim {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 10px;
	max-width: 520px;
	margin: 0 auto;
	box-shadow: 0 10px 34px -22px rgba(0, 0, 0, .35);
}

.field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 2px solid transparent;
	border-radius: 13px;
	padding: 4px 6px 4px 16px;
	transition: border-color .15s;
}

/* 입력 위치 안내: input 위에 겹치는 오버레이(커서+안내문) */
.input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	font-size: clamp(17px, 3.4vw, 20px);
	line-height: 1.2;
}

.input-ghost {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	pointer-events: none;
	display: flex;
	align-items: center;
	/* input과 동일한 폰트·패딩으로 글자 위치가 정확히 일치 */
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	padding: 14px 0;
	color: #b7b2a6;
	white-space: nowrap;
}

.input-ghost.hide {
	display: none
}

.ghost-caret {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-right: 1px;
	background: var(--brand);
	border-radius: 1px;
	animation: caretBlink 1.1s steps(1) infinite;
}

.ghost-text {
	font-weight: 600
}

.field.focus .ghost-caret {
	display: none
}

/* 포커스 시 진짜 커서와 겹치지 않게 */
@keyframes caretBlink {

	0%,
	49% {
		opacity: 1
	}

	50%,
	100% {
		opacity: 0
	}
}

.field.focus {
	border-color: var(--focus);
	box-shadow: 0 0 0 .25rem rgba(118, 109, 244, .2)
}

.field input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: inherit;
	font-weight: 600;
	color: var(--ink);
	padding: 14px 0;
	position: relative;
	z-index: 2;
	line-height: inherit;
}

.field input::placeholder {
	color: transparent
}

.suffix {
	font-size: clamp(15px, 3vw, 18px);
	color: var(--muted);
	font-weight: 600;
	white-space: nowrap
}

.go {
	flex: none;
	border: none;
	cursor: pointer;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 14px 20px;
	border-radius: 11px;
	transition: background .15s, transform .05s;
}

.go:hover {
	background: var(--accent-press)
}

.go:active {
	transform: scale(.98)
}

.go:disabled {
	background: #cdc8bc;
	cursor: not-allowed
}

.status {
	min-height: 24px;
	margin: 12px 4px 4px;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center
}

.status.ok {
	color: var(--ok)
}

.status.taken {
	color: var(--taken)
}

.status.idle {
	color: var(--muted)
}

.claim-note {
	margin: 2px 0 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--brand);
	text-align: center;
}

.micro {
	margin-top: 22px;
	font-size: 13.5px;
	color: var(--muted)
}

.micro b {
	color: var(--ink)
}

/* ---------- proof row ---------- */
.proof {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
	font-size: 14px;
	color: var(--muted);
}

.avatars {
    display: flex;
}

.avatars span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    margin-left: -8px;
    display: inline-block;
    overflow: hidden;
    background: #eee;
}

.avatars span:first-child {
    margin-left: 0;
}

.avatars img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ---------- footer ---------- */
footer {
	max-width: 1080px;
	margin: 56px auto 0;
	padding: 24px 22px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

footer nav {
	display: flex;
	gap: 18px;
	flex-wrap: wrap
}

footer a {
	color: var(--muted);
	text-decoration: none;
	font-size: 13.5px
}

footer a:hover {
	color: var(--ink)
}

.copyright {
	font-size: 13px;
	color: var(--muted)
}

.footer-right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap
}

/* ---------- 언어 선택 모달 ---------- */
.lang-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 27, 46, .42);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
	z-index: 60;
}

.lang-modal-overlay.open {
	opacity: 1;
	visibility: visible
}

.lang-modal {
	background: #fff;
	border-radius: 18px;
	width: 100%;
	max-width: 360px;
	box-shadow: 0 24px 60px -20px rgba(28, 27, 46, .5);
	transform: translateY(8px) scale(.98);
	transition: transform .2s;
	display: flex;
	flex-direction: column;
	max-height: 80vh;
	overflow: hidden;
}

.lang-modal-overlay.open .lang-modal {
	transform: translateY(0) scale(1)
}

.lang-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
}

.lang-modal-head h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em
}

.lang-modal-close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: #f3f2fb;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s;
}

.lang-modal-close:hover {
	background: #e9e7fb
}

.lang-modal-close svg {
	width: 19px;
	height: 19px
}

.lang-list {
	list-style: none;
	margin: 0;
	padding: 8px;
	overflow-y: auto
}

.lang-list button {
	width: 100%;
	text-align: left;
	border: none;
	background: none;
	cursor: pointer;
	padding: 13px 14px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 10px;
	transition: background .12s;
}

.lang-list button:hover {
	background: #f3f2fb
}

.lang-list button.active {
	background: #e7efff;
	color: var(--accent);
	font-weight: 700
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px
}

@media (prefers-reduced-motion:reduce) {
	* {
		transition: none !important
	}
}

@media (max-width:560px) {
	.field {
		flex-wrap: wrap;
		padding: 8px
	}

	.input-wrap {
		width: 100%
	}

	.field input {
		width: 100%;
		padding: 12px 8px
	}

	/* 모바일: input과 동일 패딩으로 오버레이 정렬 유지 */
	.input-ghost {
		padding: 12px 8px
	}

	.suffix {
		padding-left: 8px
	}

	.go {
		width: 100%;
		margin-top: 4px
	}
}

.email-text {
        display: flex;
        align-items: center;
        width: 240px;          
        max-width: 100%;       
        box-sizing: border-box;
       
        /* 이미지와 이메일 텍스트 사이의 간격만 딱 6px만큼 띄웁니다 */
        gap: 6px; 
}

.email-address {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        flex: 1;               
        min-width: 0;          
}


</style>


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-17432333679"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-17432333679');
</script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

</head>
	<body>
		<header>
			<a class="logo" href="/"><span class="dot">CC</span> CC.CC</a>
			<div class="top-actions">
				<button class="menu-btn" id="menuBtn" aria-label="Open menu" aria-expanded="false">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
						<line x1="4" y1="7" x2="20" y2="7"></line>
						<line x1="4" y1="12" x2="20" y2="12"></line>
						<line x1="4" y1="17" x2="20" y2="17"></line>
					</svg>
				</button>
			</div>
		</header>
		<!-- 슬라이드 패널 + 딤 오버레이 -->
		<div class="panel-overlay" id="panelOverlay"></div>
		<aside class="side-panel" id="sidePanel" aria-hidden="true" role="dialog" aria-label="Menu">
			<div class="panel-head">
				<a class="logo" href="/"><span class="dot">CC</span> CC.CC</a>
				<button class="panel-close" id="panelClose" aria-label="Close menu">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
						<line x1="6" y1="6" x2="18" y2="18"></line>
						<line x1="18" y1="6" x2="6" y2="18"></line>
					</svg>
				</button>
			</div>
			<button class="panel-cta" id="panelSignin">Sign In</button>

			<nav class="panel-nav">
				<div class="panel-group">
                                MY CC.CC</div>
				<a href="javascript:void(0)" onclick="sign_in()">My Links</a>
				<a href="javascript:void(0)" onclick="sign_in()">My Favorites</a>
				<a href="/transfer/transfer.php">Transfer Ownership</a>
				<a href="javascript:void(0)" onClick="go_analyze('')">Click Analytics</a>


				<div class="panel-group">Information</div>
				<a href="/how_it_work/how_it_work.php">How it works</a>
				<a href="/about_us/about_us.php">About Us</a>
				<a href="/referral_program/referral_program.php">Referral Program</a>
				<a href="/contact/contact.php">Contact us</a>
				<a href="/terms/terms.php">Terms of Use</a>
				<a href="/privacy_policy/privacy_policy.php">Privacy Policy</a>
                                <a href="/cookie_policy/cookie_policy.php">Cookie Policy</a>
                                

			</nav>
		</aside>
		<main class="hero">
			<h1>Get <span class="you">yourname</span>.cc.cc</h1>
			<p class="sub">One name for your link and your email. Free, in about 4 seconds.</p>
			<div class="claim">
				<div class="field" id="field">
					<span class="input-wrap">
					<input id="name" type="text" inputmode="text" autocomplete="off"
						autocapitalize="off" spellcheck="false"
						aria-label="Choose your name" maxlength="32">
					<span class="input-ghost" id="inputGhost" aria-hidden="true"><span class="ghost-caret"></span><span class="ghost-text">yourname</span></span>
					</span>
					<span class="suffix">.cc.cc</span>
					<button class="go" id="go" disabled>Get it free</button>
				</div>
				<div class="status idle" id="status" aria-live="polite"></div>
				<p class="claim-note">4-letter names are still available</p>
			</div>
			<p class="micro">
                                You get <b>yourname.cc.cc</b> and <b>yourname@cc.cc</b> — both with one name.                        </p>
                        <div class="proof">
                                <span class="avatars" id="avatars"></span>
                                <span onClick='openExplorePopup()'>Join 130,000+ who already claimed their name</span>
                        </div>
		</main>
		<footer>
			<nav>
				<a href="/how_it_work/how_it_work.php">How it works</a>
				<a href="/terms/terms.php">Terms</a>
				<a href="/privacy_policy/privacy_policy.php">Privacy</a>
                                <a href="/cookie_policy/cookie_policy.php">Cookie Policy</a>
                                <a href="/referral_program/referral_program.php">Referral Program</a>
			</nav>
			<div class="footer-right">
				<span class="copyright">© 2025 Cobra Inc.</span>
				<button class="lang-btn" id="langBtn" aria-label="Select language">🌐 English</button>
			</div>
		</footer>
		<!-- 언어 선택 모달 -->
		<div class="lang-modal-overlay" id="langOverlay" role="dialog" aria-modal="true" aria-label="Select language">
			<div class="lang-modal" id="langModal">
				<div class="lang-modal-head">
					<h2>Select language</h2>
					<button class="lang-modal-close" id="langClose" aria-label="Close">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
							<line x1="6" y1="6" x2="18" y2="18"></line>
							<line x1="18" y1="6" x2="6" y2="18"></line>
						</svg>
					</button>
				</div>
				<ul class="lang-list" id="langList">
					<li><button data-lang="en" data-label="English">English</button></li>
					<li><button data-lang="af" data-label="Afrikaans">Afrikaans</button></li>
					<li><button data-lang="id" data-label="Bahasa Indonesia">Bahasa Indonesia</button></li>
					<li><button data-lang="ms" data-label="Bahasa Melayu">Bahasa Melayu</button></li>
					<li><button data-lang="cs" data-label="Čeština">Čeština</button></li>
					<li><button data-lang="da" data-label="Dansk">Dansk</button></li>
					<li><button data-lang="de" data-label="Deutsch">Deutsch</button></li>
					<li><button data-lang="en" data-label="English">English</button></li>
					<li><button data-lang="en-gb" data-label="English (UK)">English (UK)</button></li>
					<li><button data-lang="es-la" data-label="Español">Español</button></li>
					<li><button data-lang="es" data-label="Español (España)">Español (España)</button></li>
					<li><button data-lang="tl" data-label="Filipino">Filipino</button></li>
					<li><button data-lang="fr" data-label="Français">Français</button></li>
					<li><button data-lang="fr-ca" data-label="Français (Canada)">Français (Canada)</button></li>
					<li><button data-lang="hr" data-label="Hrvatski">Hrvatski</button></li>
					<li><button data-lang="it" data-label="Italiano">Italiano</button></li>
					<li><button data-lang="hu" data-label="Magyar">Magyar</button></li>
					<li><button data-lang="nl" data-label="Nederlands">Nederlands</button></li>
					<li><button data-lang="nb" data-label="Norsk">Norsk</button></li>
					<li><button data-lang="pl" data-label="Polski">Polski</button></li>
					<li><button data-lang="pt-br" data-label="Português (Brasil)">Português (Brasil)</button></li>
					<li><button data-lang="pt" data-label="Português (Portugal)">Português (Portugal)</button></li>
					<li><button data-lang="ro" data-label="Română">Română</button></li>
					<li><button data-lang="sk" data-label="Slovenčina">Slovenčina</button></li>
					<li><button data-lang="fi" data-label="Suomi">Suomi</button></li>
					<li><button data-lang="sv" data-label="Svenska">Svenska</button></li>
					<li><button data-lang="vi" data-label="Tiếng Việt">Tiếng Việt</button></li>
					<li><button data-lang="tr" data-label="Türkçe">Türkçe</button></li>
					<li><button data-lang="el" data-label="Ελληνικά">Ελληνικά</button></li>
					<li><button data-lang="bg" data-label="Български">Български</button></li>
					<li><button data-lang="ru" data-label="Русский">Русский</button></li>
					<li><button data-lang="sr" data-label="Српски">Српски</button></li>
					<li><button data-lang="uk" data-label="Українська">Українська</button></li>
					<li><button data-lang="ar" data-label="العربية">العربية</button></li>
					<li><button data-lang="fa" data-label="فارسی">فارسی</button></li>
					<li><button data-lang="ne" data-label="नेपाली">नेपाली</button></li>
					<li><button data-lang="mr" data-label="मराठी">मराठी</button></li>
					<li><button data-lang="hi" data-label="हिन्दी">हिन्दी</button></li>
					<li><button data-lang="bn" data-label="বাংলা">বাংলা</button></li>
					<li><button data-lang="pa" data-label="ਪੰਜਾਬੀ">ਪੰਜਾਬੀ</button></li>
					<li><button data-lang="gu" data-label="ગુજરાતી">ગુજરાતી</button></li>
					<li><button data-lang="ta" data-label="தமிழ்">தமிழ்</button></li>
					<li><button data-lang="te" data-label="తెలుగు">తెలుగు</button></li>
					<li><button data-lang="kn" data-label="ಕನ್ನಡ">ಕನ್ನಡ</button></li>
					<li><button data-lang="ml" data-label="മലയാളം">മലയാളം</button></li>
					<li><button data-lang="si" data-label="සිංහල">සිංහල</button></li>
					<li><button data-lang="th" data-label="ภาษาไทย">ภาษาไทย</button></li>
					<li><button data-lang="zh-tw" data-label="中文(台灣)">中文(台灣)</button></li>
					<li><button data-lang="zh-cn" data-label="中文(简体)">中文(简体)</button></li>
					<li><button data-lang="zh-hk" data-label="中文(香港)">中文(香港)</button></li>
					<li><button data-lang="ja" data-label="日本語">日本語</button></li>
					<li><button data-lang="ko" data-label="한국어">한국어</button></li>
				</ul>
			</div>
		</div>



<!-- Forgot password MODAL -->
<div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-hidden="true" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                        <div class="modal-body p-5">
                                <div class="position-absolute end-0 top-0 p-3">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="auth-content">
                                        <div class="w-100">
                                                <div class="text-center mb-4">
                                                        <h5>Create New Password</h5>
                                                </div>
                                                <form id='forgot_password_form' class="auth-form">
                                                        <div class="mb-3">
                                                                <label class="form-label">Email<span class="text-danger">*</span></label>
                                                                <input type="email" class="form-control" id="forgot_email" name="email" value='' placeholder="Enter your email" required onFocus="$('#forgot_password_error').hide();" autocomplete="off">
                                                        </div>
                                                        <div class="text-start">
                                                                <button class="btn btn-dark rounded-pill w-auto d-inline-block" type="submit" id='forgot_password_submit'>Submit</button>
                                                                <div class="spinner-border text-primary m-1" role="status" id='forgot_password_loading' style='display:none'></div>
                                                                <div class="text-success m-1" id='forgot_password_result' style='display:none'></div>
                                                                <div class="text-danger m-1" id='forgot_password_error' style='display:none'></div>

                                                                <div id='btn-google-login' style='display:none'>
                                                                        <button class="google-btn btn-block" id='google-login2'>
                                                                                <img src="https://img.icons8.com/color/48/000000/google-logo.png" alt="Google Logo">
                                                                                <span>Sign in with Google</span>
                                                                        </button>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                </div>
                        </div>
                        <!--end modal-body-->
                </div>
                <!--end modal-content-->
        </div>
        <!--end modal-dialog-->
</div>

<style>
.google-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: #ffffff;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        color: #333333;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease;
        width:100%;
}

.google-btn img {
        width: 30px;
        margin-right: 10px;
}

.google-btn:hover {
        background-color: #f1f1f1;
}


.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #ffffff;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  color: #333333;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
}

.apple-btn img {
  width: 30px;
  margin-right: 10px;
}

.apple-btn:hover {
  background-color: #f1f1f1;
}




.divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 20px 0;
    text-align: center;
    color: #aaa;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
    margin: 0 10px;
}

.divider span {
    font-size: 14px;
    color: #888;
}

</style>

<script src="https://short-img1.cc.cc/js/jwt-decode.min.js"></script>

<!-- START SIGN IN MODAL -->
<div class="modal fade" id="signInModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                        <div class="modal-body p-5">

                                <!-- 왼쪽 상단 SVG 아이콘 -->
                                <div class="position-absolute start-0 top-0 p-3">
                                </div>

                                <!-- 오른쪽 상단 닫기 버튼 -->
                                <div class="position-absolute end-0 top-0 p-3">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>

                                <div class="auth-content">
                                        <div class="w-100">
                                                <div id='signin_google_login_layer'>
                                                        <div class="text-center mb-2">
                                                                <button class="google-btn btn-block" id='google-login'>
                                                                        <img src="https://img.icons8.com/color/48/000000/google-logo.png" alt="Google Logo">
                                                                        <span>Sign in with Google</span>
                                                                </button>
                                                        </div>

                                                        <!-- Divider Line -->
                                                        <div class="divider">
                                                                <span class='fw-bold' style='font-size:12pt'>or</span>
                                                        </div>
                                                </div>

                                                <form id='sign_in_form' class="auth-form">
                                                <input type='hidden' name='loc' id='sign_in_loc' value=''>
                                                        <div class="mb-3">
                                                                <input type="email" class="form-control" id="email" name="email" value='' placeholder="Email" required autocomplete="off">
                                                        </div>
                                                        <div class="mb-3">
                                                                <input type="password" class="form-control" id="pw" name="pw" maxlength=20 placeholder="Password" required autocomplete="off">
                                                        </div>
                                                        <div class="mb-2 text-end">
                                                                <a href="javascript:void(0)" onClick='open_forgot_password()'><b>Forgot Password?</b></a>
                                                        </div>

                                                        <div class="text-start">
                                                                <button class="btn btn-dark rounded-pill w-auto d-inline-block" type="submit">Sign In</button>
                                                        </div>
                                                </form>
                                                <div class="mt-4 text-center" id='btn_sign_up_modal'>

                                                        <div id="sign_in_notice_cookie_policy" class="mt-2 mb-2 text-secondary fw-light small">
                                                                By clicking “Sign in with Google” or “Sign in with Apple” you consent to the use of cookies as described in our Cookie Policy.
                                                        </div>

                                                        <p class="mb-0 fw-bold">Don't have an account ? 

                                                        <a  href='javascript:void(0)' onClick="$('#signInModal').modal('hide');" class="fw-medium text-decoration-underline"> 
                                                        <b>Claim your name</b></a></p>



                                                </div>
                                        </div>
                                </div>
                        </div>
                        <!--end modal-body-->
                </div>
                <!--end modal-content-->
        </div>
        <!--end modal-dialog-->
</div>



<!-- START SIGN UP MODAL -->

<div class="modal fade" id="signUpModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content shadow">
                        <div class="modal-header border-0 pb-0">
                                <h5 class="modal-title w-100 text-center">
                                        Easy Sign Up                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body pt-3 px-5 pb-5">
                                <div class="mt-2 auth-content">
                                        <div class="w-100">

                                                <form id='sign_up_form' class="auth-form" autocomplete="off">
                                                <input type='hidden' name='loc' id='sign_up_loc' value=''>

                                                <div class="mb-3">
                                                        <input class="form-control" type='email' name='email' id="signup_email" placeholder="Email" onFocus="$('#sign_up_error').hide()" required autocomplete="on">
                                                </div>

                                                <div class="mb-3">
                                                        <input class="form-control" type='text' name='name' id="signup_name" placeholder="Display Name (or your name)" onFocus="$('#sign_up_error').hide()">
                                                </div>

                                                <div class="mb-3">
                                                        <input class="form-control" type='password' name='pw' id="sign_up_password" maxlength=20 placeholder="Password" onFocus="$('#sign_up_error').hide()" required>
                                                </div>

                                                <div class="text-start">
                                                        <button class="btn btn-dark rounded-pill w-100" type="submit" id='sign_up_submit'>
                                                                Complete Sign Up                                                        </button>
                                                        <div class="spinner-border text-primary m-1" role="status" id='sign_up_loading' style='display:none'></div>
                                                        <div class="text-success m-1" id='sign_up_result' style='display:none'></div>
                                                        <div class="text-danger m-1" id='sign_up_error' style='display:none'></div>
                                                </div>
                                                </form>


                                                <div class="mt-3 text-center">
                                                        <p class="mb-0">
                                                                <a href="/terms/terms.php" class='text-dark' target='_blank'>
                                                                By signing up, you accept our terms.</a>
                                                                &#x2022;
                                                                <a href='javascript:void(0)' onClick='sign_in()' class="fw-medium text-decoration-underline"> 
                                                                        Sign In                                                                </a>
                                                        </p>
                                                </div>

                                                <!-- Divider Line -->
                                                <div class="divider" id='easy_sign_up_divider'>
                                                        <span class='fw-bold' style='font-size:12pt'>or</span>
                                                </div>

                                                <div class='mt-4' id='signup_google_login_layer'>
                                                        <div class="text-center  mb-2">
                                                                <button class="btn btn-outline-dark rounded-pill w-100" id='google-login-signup' onClick="$('#signInMo1dal').modal('hide');">
                                                                        <img src="https://img.icons8.com/color/24/000000/google-logo.png" alt="Google Logo">
                                                                        <span>Sign in with Google</span>
                                                             </button>
                                                        </div>

                                                        <div id="sign_up_notice_cookie_policy" class="mt-2 text-secondary fw-light small">
                                                                By clicking “Sign in with Google” or “Sign in with Apple” you consent to the use of cookies as described in our Cookie Policy.
                                                        </div>

                                                </div>
                                        </div>
                                </div>
                        </div>
                        <!--end modal-body-->
                </div>
                <!--end modal-content-->
        </div>
        <!--end modal-dialog-->
</div>



<style>

/* 딤처리 오버레이 */
.popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 15;
	display: none;
}

/* 팝업 레이어 */
.offcanvas-static {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 600px;
	background: #fff;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
	z-index: 16;
	display: none;
}

.popup-header-line {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 0.5rem 1rem 0.25rem;
	background-color: #f8f9fa;
	/* 상단 배경색 */
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.popup-address {
	font-size: 1.1rem;
	font-weight: 600;
	color: #4a4a4a;
}

.popup-close {
	position: absolute;
	right: 12px;
	top: 6px;
	transform: scale(0.8);
}

.popup-body {
	text-align: center;
	padding: 0.25rem 1rem 1rem;
}

.popup-desc {
	font-size: 0.875rem;
	color: #6c757d;
	margin-bottom: 0.75rem;
}

.popup-btn-sm {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-size: 0.875rem;
        width: 100%;
}


.explore-slider{
    position:relative;
}

/* 가로 슬라이더 */
.explore-image-list{
    display:grid;
    grid-auto-flow:column;          /* 가로 방향으로 쌓기 */
    grid-template-rows:repeat(2, auto); /* 2줄 */
    gap:15px 22px;                 /* 세로 / 가로 간격 */
    overflow-x:auto;
    padding:20px 15px 35px;
}

.explore-image-list::-webkit-scrollbar{
    display:none;
}

.explore-item{
    width:100px;
    text-align:center;
}

/* 카드 */

.explore-item{
    flex:0 0 auto;
    width:100px;
    text-align:center;
    scroll-snap-align:start;
}

/* 원형 이미지 */

.explore-thumb-wrap{
    display:block;
    width:100px;
    height:100px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto;
}

.explore-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* 텍스트 */

.explore-title,
.explore-user{
    width:100%;
}

.explore-title a,
.explore-user a{
    font-size:10pt;
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.explore-title a
{
    font-size:10pt;
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-weight:bold;
}

.explore-user a{
    font-size:11px;
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* 화살표 */

.explore-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.explore-left{
    left:0;
}

.explore-right{
    right:0;
}

.popup-header-explore{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
</style>

<div class="popup-overlay" id="exploreOverlay" onclick="closeExplorePopup()"></div>
<!-- 하단 고정 팝업 -->
<div class="offcanvas-static" id="explorePopup">
        <div class="popup-header-explore">
                <span class='mt-3 ms-3 fw-bold'>Explore other profiles</span>
                <button type="button" class="btn-close popup-close" onclick="closeExplorePopup()" aria-label="Close"></button>
        </div>

	<div class="popup-body">


                <div class="explore-slider">

                        <!-- 좌 화살표 -->
                        <button class="explore-arrow explore-left d-none d-md-flex"
                            onclick="scrollExplore(-1)">
                        ‹
                        </button>

                        <!-- 이미지 리스트 -->
                        <div id="exploreImageList" class="explore-image-list">
                        <!-- AJAX 이미지 들어오는 영역 -->
                        </div>

                        <!-- 우 화살표 -->
                        <button class="explore-arrow explore-right d-none d-md-flex"
                            onclick="scrollExplore(1)">
                        ›
                        </button>

                </div>


	</div>
</div>


	</body>
</html>


<!-- JAVASCRIPT -->
<script src="https://short-img1.cc.cc/js/bootstrap.bundle.min.js"></script>
<script src="https://short-img1.cc.cc/js/bundle.js"></script>

<!-- Swiper Js -->
<script src="https://short-img1.cc.cc/js/swiper-bundle.min.js"></script>

<script src="https://short-img1.cc.cc/js/index.init.js"></script>
<script src="https://short-img1.cc.cc/js/heic2any.js"></script>
<script src="https://short-img1.cc.cc/js/call_cc_cc.js"></script>


<!-- Facebook Pixel Code -->
<script>!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '903495488722670'); fbq('track', 'PageView');</script><noscript> <img height="1" width="1" src="https://www.facebook.com/tr?id=903495488722670&ev=PageView&noscript=1"/></noscript>
<!-- End Facebook Pixel Code -->



<script>
var google_state='';
var apple_state='';

var cookieConsentRes = null;   // 전역변수, 쿠키 비동의 후 google , apple 클릭시 refer 상태 알기


async function get_sign_in() {
    var url = '/account/get_sign_in_ajax.php';
    var params = Math.random();

//    console.log('get_sign_in 시작');

    // Promise로 $.ajax 래핑
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'GET',
            url: url,
            data: { params: params }, // 객체 형태로 수정
            contentType: "charset=utf-8",
            success: function(res) {
//                console.log('AJAX 성공:', res);
                try {
                    var res_json = $.parseJSON(res);
//                    console.log('res_json:', res_json);
                    resolve(res_json.email); // 성공 시 Promise resolve
                } catch (e) {
//                    console.error('JSON 파싱 오류:', e);
                    reject(e);
                }
            },
            error: function(error) {
//                console.log('AJAX 오류:', error);
                reject(error); // 실패 시 Promise reject
            }
        });
    });
}


async function sign_up_proc(event) {
    event.preventDefault(); // 폼의 기본 제출 동작을 방지

        var sign_up_password = $.trim($('#sign_up_password').val());

        if (sign_up_password.length < 4)
        {
                $('#sign_up_error').html('Password is too short. It should be at least 4 characters long.');
                $('#sign_up_error').show();
                return false;
        }


    try {
            /*
        let sign_in_email = await get_sign_in();
//        console.log('sign_in_email:', sign_in_email);

        if (sign_in_email) {
                document.location.reload();
                return false;
        }
        */

        var formData = $('#sign_up_form').serialize();
        var url = '/account/sign_up_proc_ajax.php';

        $('#sign_up_submit').hide();
        $('#sign_up_loading').show();
        $('#sign_up_result').hide();
        $('#sign_up_error').hide();

//        console.log('formData:', formData);

        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            success: function(res) {
//                console.log('회원가입 성공:', res);
                var res_json = $.parseJSON(res);

                if (res_json.proc == '1') {
                        if (res_json.loc !== undefined && res_json.loc)
                        {
                                if (res_json.loc == 'create')
                                {
                                        close_sign_modal();
                                        launch_your_link();
                                }
                                else
                                {
                                        if (parseInt(res_json.short_code_count)>0)
                                        {
                                                // console.log('res_json.short_code_count');

                                                if (res_json.loc.indexOf("https://") !== -1)
                                                {
                                                        location = res_json.loc;
                                                }
                                                else
                                                {
                                                        setup_link_proc();
                                                }
                                        }
                                        else
                                        {
                                                // 내소유 short code count가 없으면
                                                // console.log('location');
                                                location = 'https://cc.cc';
                                        }
                                }
                        }
                        else
                        {
                                if (parseInt(res_json.short_code_count)>0)
                                {
                                        location.reload();
                                }
                                else
                                {
                                        // 내소유 short code count가 없으면
                                        //        console.log('location2');
                                        location = 'https://cc.cc';
                                }
                        }
                }
                else
                {
                        $('#sign_up_submit').show();
                        $('#sign_up_loading').hide();
                        $('#sign_up_error').html(res_json.mssg);
                        $('#sign_up_error').show();
                }
            },
            error: function(error) {
//                console.log('회원가입 오류:', error);
            }
        });
    } catch (error) {
//        console.error('get_sign_in 오류:', error);
    }
    return false;
}

async function forgot_password_proc(event) {
    event.preventDefault(); // 폼의 기본 제출 동작을 방지
    
    try {
        let sign_in_email = await get_sign_in();

        if (sign_in_email) {

                document.location.reload();
                return false;
        }

        var formData = $('#forgot_password_form').serialize();
        var url = '/account/forgot_password_proc_ajax.php';

        $('#forgot_password_submit').hide();
        $('#forgot_password_loading').show();
        $('#forgot_password_result').hide();
        $('#forgot_password_error').hide();


        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            success: function(res) {
//                console.log(res);

                var res_json = $.parseJSON(res);

                $('#forgot_password_loading').hide();

                if (res_json.proc == '1') {
                        $('#forgot_password_result').html(res_json.mssg);
                        $('#forgot_password_result').show();
                }
                else
                if (res_json.proc == '2') {
                        $('#btn-google-login').show();
                }
                else {
                        $('#forgot_password_submit').show();
                        $('#forgot_password_error').html(res_json.mssg);
                        $('#forgot_password_error').show();
                }
            },
            error: function(error) {
            }
        });
    } catch (error) {
//        console.error('get_sign_in 오류:', error);
    }
    return false;
}

async function sign_in_proc(event) {
    event.preventDefault(); // 폼의 기본 제출 동작을 방지

//    console.log('sign_in_proc 시작');
    
    try {
        let sign_in_email = await get_sign_in();
//        console.log('sign_in_email:', sign_in_email);

        if (sign_in_email) {
                document.location.reload();
                return false;
        }

        var formData = $('#sign_in_form').serialize();
        var url = '/account/sign_in_proc_ajax.php';

//        console.log('formData:', formData);

        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            success: function(res) {
//                console.log('로그인 성공:', res);

                var res_json = $.parseJSON(res);

                if (res_json.proc == '1')
                {
                        if (res_json.loc !== undefined && res_json.loc)
                        {
                                if (res_json.loc == 'create')
                                {
                                        launch_your_link();
                                }
                                else
                                {
                                        if (parseInt(res_json.short_code_count)>0)
                                        {
//                                                console.log('res_json.short_code_count');

                                                if (res_json.loc.indexOf("https://") !== -1)
                                                {
                                                        location = res_json.loc;
                                                }
                                                else
                                                {
                                                        setup_link_proc();
                                                }
                                        }
                                        else
                                        {
                                                // 내소유 short code count가 없으면
//                                                console.log('location');
                                                location = 'https://cc.cc/?auth=verified';
                                        }
                                }
                        }
                        else
                        {
                                if (parseInt(res_json.short_code_count)>0)
                                {
                                        location.reload();
                                }
                                else
                                {
                                        // 내소유 short code count가 없으면
//                                                console.log('location2');
                                        location = 'https://cc.cc/?auth=verified';
                                }

                        }
                }
                else
                if (res_json.proc == '2')
                {
                        $('#google-login').trigger('click');
                }
                else {
                    alert(res_json.mssg);
                }
            },
            error: function(error) {
//                console.log('로그인 오류:', error);
            }
        });
    } catch (error) {
//        console.error('get_sign_in 오류:', error);
    }
    return false;
}

function close_sign_modal()
{
        $('#signInModal').modal('hide');
        $('#signUpModal').modal('hide');
}

async function sign_up()
{
        let sign_in_email = await get_sign_in();
        if (sign_in_email)
        {
                document.location.reload();
                return false;
        }

        $('#signInModal').modal('hide');
        $('#signUpModal').modal('show');
}

async function sign_in()
{
        $('.divider').show();
        $('#sign_in_form').show();
        $('#btn_sign_up_modal').show();
        $('#signUpModal').modal('hide');
        $('#signInModal').modal('show');
}

function open_forgot_password()
{
        $('#signInModal').modal('hide');

        $('#forgot_email').val('');
        $('#forgot_password_submit').show();

        $('#forgot_password_loading').hide();
        $('#forgot_password_result').hide();
        $('#forgot_password_error').hide();

        $('#btn-google-login').hide();

        $('#forgotPasswordModal').modal('show');
}

function get_twitter()
{
        var ua = navigator.userAgent.toLowerCase();
        var isTwitter = ua.includes('twitter') && (ua.includes('iphone') || ua.includes('android'));
//        return isTwitter || 0;
        return isTwitter;
}


function openGoogleLoginPopup() {
        const clientId = '325463998746-2enue4cl5ci2llpjphtull2rvsedv94p.apps.googleusercontent.com';  // 여기에 실제 클라이언트 ID를 입력하세요.
        const width = 600;
        const height = 700;
        const left = (screen.width / 2) - (width / 2);
        const top = (screen.height / 2) - (height / 2);

        const url = `https://accounts.google.com/o/oauth2/v2/auth?` +
                                        `client_id=${clientId}&` +
                                        `response_type=token&` +
                                        `redirect_uri=${encodeURIComponent('https://cc.cc/open_id/google_login_refer.php')}&` +
                                        `scope=${encodeURIComponent('email profile')}&` +
                                        `include_granted_scopes=true&` +
                                        `state=${encodeURIComponent(google_state)}`;

        window.open(url, 'Google Login', `width=${width},height=${height},top=${top},left=${left}`);
}

function setConsentSign(val) {
        const cookieVal = encodeURIComponent(JSON.stringify(val));
        const maxAge = 60 * 60 * 24 * 180; // 180일
        // .cc.cc 및 서브도메인용 쿠키
        document.cookie = `cc_consent=${cookieVal}; path=/; max-age=${maxAge}; domain=.cc.cc`;
}


['google-login', 'google-login2', 'google-login-signup'].forEach(id => {

    const el = document.getElementById(id);
    if (el) {
        el.addEventListener('click', function (e) {
            if (get_twitter())
            {
                        e.preventDefault();

                        const $el = $(this);
                        const offset = $el.offset();

                        const message = "Since you’re in the Twitter app, Google login won’t work. Try another login method or open this page in a browser.";

                        // 기존 툴팁 제거 (중복 방지)
                        $('.tooltip-custom-click').remove();

                        // 툴팁 요소 생성
                        const $tooltip = $('<div class="tooltip-custom-click tooltip-show">' + message + '</div>');

                        $('body').append($tooltip);

                        // 먼저 스타일 적용해서 너비 제한 및 줄바꿈 허용
                        $tooltip.css({
                            position: 'absolute',
                            backgroundColor: '#1da1f2',
                            color: '#ffffff',
                            padding: '8px 12px',
                            borderRadius: '4px',
                            fontSize: '14px',
                            whiteSpace: 'normal',        // 자동 줄바꿈 허용
                            maxWidth: '300px',           // 최대 너비 300px
                            zIndex: 9999,
                            boxShadow: '0 2px 8px rgba(0,0,0,0.2)'
                        });

                        // 툴팁 실제 너비 구함
                        const tooltipWidth = $tooltip.outerWidth();

                        // 위치 재계산 (버튼 아래 중앙 정렬)
                        const left = offset.left + ($el.outerWidth() / 2) - (tooltipWidth / 2);
                        const top = offset.top + $el.outerHeight() + 8;

                        $tooltip.css({ left: `${left}px`, top: `${top}px` });

                        // 3초 후 툴팁 자동 제거
                        setTimeout(function () {
                            $tooltip.fadeOut(300, function () {
                                $(this).remove();
                            });
                        }, 3000);
                }
                else
                {
                        // 트위터 브라우저가 아닌 경우 정상 로그인 팝업 실행
//                        console.log('google-login Click');

                        if (typeof window.cookieConsentRes !== 'undefined' && window.cookieConsentRes)
                        {
//                                console.log('cookieConsentRes.refer_stat',window.cookieConsentRes.refer_stat);

                                if (window.cookieConsentRes && window.cookieConsentRes.refer_stat === 1)
                                {
                                        if (window.cookieConsentRes.functional !== 1)
                                        {
                                                // refer 상태 good이고 쿠키동의 하지 않은 상태에서 구글버튼 클릭하면 강제 동의 처리한다
//                                                $('#cc-accept').trigger('click');

                                                        setConsentSign({
                                                                essential: 1,
                                                                functional: 1,
                                                                marketing: 1,
                                                                ts: Date.now()
                                                        });
                                        }

                                        // 쿠키 동의 하지 않은 상태에 구글 관련 script가 생성되어 있지 않다.
                                        // 이 문장은 functional true일때 자동으로 cookie_consent.js에서 처리한다.
                                        if (!document.getElementById('google-gsi'))
                                        {
                                                const gScript = document.createElement('script');
                                                gScript.id = 'google-gsi';
                                                gScript.src = 'https://accounts.google.com/gsi/client';
                                                gScript.async = true;

                                                gScript.onload = function () {
                                                        openGoogleLoginPopup(e);
                                                };

                                                document.head.appendChild(gScript);
                                        }
                                }
                        }

                        // 여기 까지왔다는 것은 refer good 상태 또는 functional = 1 상태
                        // 이미 로드된 경우
                        openGoogleLoginPopup(e);
                }

        });
    }
});





function openAppleLoginPopup() {
        const width = 600;
        const height = 700;
        const left = (screen.width / 2) - (width / 2);
        const top = (screen.height / 2) - (height / 2);

        if (typeof window.cookieConsentRes !== 'undefined' && window.cookieConsentRes)
        {
//                console.log('cookieConsentRes.refer_stat',window.cookieConsentRes.refer_stat);

                if (window.cookieConsentRes && window.cookieConsentRes.refer_stat === 1)
                {
                        if (window.cookieConsentRes.functional !== 1)
                        {
                                // refer 상태 good이고 쿠키동의 하지 않은 상태에서 구글버튼 클릭하면 강제 동의 처리한다
//                                                $('#cc-accept').trigger('click');

                                        setConsentSign({
                                                essential: 1,
                                                functional: 1,
                                                marketing: 1,
                                                ts: Date.now()
                                        });
                        }
                }
        }

        const url = 'https://cc.cc/open_id/signin_with_apple.php?state='+apple_state;
        window.open(url, 'Apple Login', `width=${width},height=${height},top=${top},left=${left}`);
}

['apple-login', 'apple-login-signup'].forEach(id => {
    const el = document.getElementById(id);
    if (el) {
        el.addEventListener('click', openAppleLoginPopup);
    }
});


$(document).ready(function() {
        $('#easy_sign_up_layer').hide();
        if (get_twitter()) {
                // 트위터 브라우저 인가?
                $('#signup_google_login_layer').hide();
                $('#signin_google_login_layer').hide();
        }

        $('#sign_up_password').on('input', function() {
                var value = $(this).val();
                // Remove spaces from the input
                $(this).val(value.replace(/\s/g, ''));
        });

        $('#sign_up_password').on('keypress', function(e) {
                // Prevent space key from being pressed
                if (e.which === 32) {
                        return false;
                }
        });

        $('#sign_up_form').on('submit', sign_up_proc);
        $('#sign_in_form').on('submit', sign_in_proc);
        $('#forgot_password_form').on('submit', forgot_password_proc);

})


</script>


<script>
// --- single-field claim logic ---------------------------------
var field = document.getElementById('field');
var input = document.getElementById('name');
var go     = document.getElementById('go');
var status = document.getElementById('status');

var taken = {'admin':1,'test':1,'mail':1,'john':1,'info':1};
var debounce;
var inputGhost = document.getElementById('inputGhost');

// 최초 상태 저장
var claimNote = $('.claim-note');

var defaultClaimNoteText  = claimNote.text();
var defaultClaimNoteColor = claimNote.css('color');


function updateCaret(){
        // 입력값이 있으면 오버레이(안내문+커서) 숨김
        if (input.value.length === 0){
                inputGhost.classList.remove('hide');
        } else {
                inputGhost.classList.add('hide');
        }
}
updateCaret();

function getLengthCJK2(str) {
        let len = 0;

        for (const ch of str) {
                // 한글, 한자, 일본어 히라가나/가타카나
                if (/[\u1100-\u11FF\u3130-\u318F\uAC00-\uD7AF\u3040-\u30FF\u3400-\u9FFF]/u.test(ch)) {
                        len += 2;
                } else {
                        len += 1;
                }
        }

        return len;
}


function setStatus(cls, text){
        status.className = 'status ' + cls;
        status.textContent = text;
}

setStatus('idle', '');  // 초기: 뱃지 표시

input.addEventListener('focus', function(){ field.classList.add('focus'); updateCaret(); });
input.addEventListener('blur',  function(){ field.classList.remove('focus'); updateCaret(); });

input.addEventListener('input', function(){
        updateCaret();

        // 입력은 외국어·공백까지 자유롭게 허용 (정제하지 않음)
        var raw = input.value;

        // 서브도메인 미리보기용 slug: 소문자화 + 공백→하이픈 + 허용문자만
        // (라틴 문자는 소문자화, 한글 등 유니코드 문자는 그대로 유지)
        var slug = raw
                .toLowerCase()
                .replace(/\s+([a-z])/g, (_, c) => c.toUpperCase())
                .replace(/\s+/g, '');

        clearTimeout(debounce);

        if (claimNote.text() !== defaultClaimNoteText) {
                claimNote
                        .text(defaultClaimNoteText)
                        .css('color', defaultClaimNoteColor);
        }

        // 입력 전 / 너무 짧을 때 — 안내 문구 없이 비워둠 (B 방식)
        if (slug.length === 0){
                go.disabled = true;
                setStatus('idle', '');
                return;
        }
        if (getLengthCJK2(slug) < 4){
                go.disabled = true;
                setStatus('idle', '');
                return;
        }


        go.disabled = true;
        setStatus('idle', 'Checking…');


        debounce = setTimeout(function(){
                if (taken[slug]){
                        setStatus('taken', slug + '.cc.cc is taken — try another');
                        go.disabled = true;
                } else {
                        setStatus('ok', slug + '.cc.cc is available');
                        go.disabled = false;
                }
        }, 350);
});

input.addEventListener('keydown', function(e){
        if (e.key === 'Enter' && !go.disabled) go.click();
});

go.addEventListener('click', function(){
        if (go.disabled) return;
        // window.location = '/claim?name=' + encodeURIComponent(input.value);
        //alert('Claiming ' + input.value + '.cc.cc — wire this to your sign-up flow.');
        var raw = input.value;

        var slug = raw
                .toLowerCase()
                .replace(/\s+([a-z])/g, (_, c) => c.toUpperCase())
                .replace(/\s+/g, '');


        go.disabled = false;
        setStatus('idle', 'Checking...');

        $.ajax({
                url: '/short_code/search_short_url_proc_ajax.php',
                type: 'POST',
                dataType: 'json',
                data: {
                        short_code: slug
                },
                success: function (res) {
                        console.log(res);
                        go.disabled = false;

                        if (parseInt(res.proc, 10) === 1) {
                                if (claimNote.text() !== defaultClaimNoteText) {
                                        claimNote
                                                .text(defaultClaimNoteText)
                                                .css('color', defaultClaimNoteColor);
                                }
                                get_this_name_proc(res.short_code);
                        } else {
                                $('.claim-note')
                                        .text(res.mssg)
                                        .css('color', 'var(--taken)');
                        }
                },
                error: function (xhr, status, error) {
                }
        });
});

// --- 슬라이드 패널 ---------------------------------------------
var menuBtn   = document.getElementById('menuBtn');
var sidePanel = document.getElementById('sidePanel');
var overlay   = document.getElementById('panelOverlay');
var panelClose= document.getElementById('panelClose');

function openPanel(){
        sidePanel.classList.add('open');
        overlay.classList.add('open');
        menuBtn.setAttribute('aria-expanded','true');
        sidePanel.setAttribute('aria-hidden','false');
        document.body.style.overflow='hidden';
}
function closePanel(){
        sidePanel.classList.remove('open');
        overlay.classList.remove('open');
        menuBtn.setAttribute('aria-expanded','false');
        sidePanel.setAttribute('aria-hidden','true');
        document.body.style.overflow='';
}
menuBtn.addEventListener('click', openPanel);
panelClose.addEventListener('click', closePanel);
overlay.addEventListener('click', closePanel);
document.addEventListener('keydown', function(e){
        if (e.key === 'Escape'){ closePanel(); closeLangModal(); }
});

document.getElementById('panelSignin').addEventListener('click', function(){
        closePanel();
        sign_in();
});
document.getElementById('langBtn').addEventListener('click', openLangModal);

// --- 언어 선택 모달 -------------------------------------------
var langBtn     = document.getElementById('langBtn');
var langOverlay = document.getElementById('langOverlay');
var langClose   = document.getElementById('langClose');
var langList    = document.getElementById('langList');
var currentLang = 'en';

function openLangModal(){
        langOverlay.classList.add('open');
        document.body.style.overflow='hidden';
        // 현재 선택 표시
        var btns = langList.querySelectorAll('button');
        for (var i=0;i<btns.length;i++){
                btns[i].classList.toggle('active', btns[i].getAttribute('data-lang')==='en');
        }
}
function closeLangModal(){
        langOverlay.classList.remove('open');
        document.body.style.overflow='';
}
langClose.addEventListener('click', closeLangModal);
langOverlay.addEventListener('click', function(e){
        if (e.target === langOverlay) closeLangModal();
});

langList.addEventListener('click', function(e) {
        var btn = e.target.closest('button');
        if (!btn) return;

        currentLang = btn.getAttribute('data-lang');
        langBtn.textContent = btn.getAttribute('data-label');

        closeLangModal();

        var url = new URL(window.location.href);
        url.searchParams.set('lang', currentLang);

        location.replace(url.toString());
});




function scrollExplore(dir){
        var el = document.getElementById("exploreImageList");

        el.scrollBy({
                left: dir * 300,
                behavior: "smooth"
        });
}

function loadExploreImages(){
        $.ajax({
                url:"/short_code/explore_short_code_list.php?t=" + new Date().getTime(),
                success:function(res){
                        $("#exploreImageList").html(res);
                        $("#exploreImageList").scrollLeft(0);
                }
        });
}

function openExplorePopup() {
        // Offcanvas 닫기
        let offcanvas = bootstrap.Offcanvas.getInstance('#offcanvasRight');
        if (offcanvas) {
                offcanvas.hide();
        }

        loadExploreImages();
        $("#exploreOverlay").show();
        $("#explorePopup").show();
}

function closeExplorePopup() {
        $("#exploreOverlay").hide();
        $("#explorePopup").hide();
}


const rawData = [{"photo_url":"https:\/\/short-img1.cc.cc\/2026\/202601\/20260111\/b50541c6.png"},{"photo_url":"https:\/\/short-img1.cc.cc\/2026\/202603\/20260309\/dfc2fa3e.png"},{"photo_url":"https:\/\/short-img1.cc.cc\/2025\/202510\/20251007\/f553871c.jpg"},{"photo_url":"https:\/\/short-img1.cc.cc\/2026\/202601\/20260110\/123d7c2a.png"},{"photo_url":"https:\/\/short-img1.cc.cc\/2025\/202504\/20250425\/d091e2c1.jpg"},{"photo_url":"https:\/\/short-img1.cc.cc\/2026\/202603\/20260306\/f1fbf432.png"}];

// 배열 셔플
function shuffle(array) {
        const arr = array.slice();

        for (let i = arr.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [arr[i], arr[j]] = [arr[j], arr[i]];
        }

        return arr;
}

// 무작위 6개 선택
//const shuffled = shuffle(rawData).slice(0, 6);

// 그냥 6개 선택 가져오기
const shuffled = rawData.slice(0, 6);

let modalOpened = false;
let html = '';

rawData.forEach(item => {
        html += `
                <span
                        onclick="openExplorePopup()"
                        style="
                                cursor:pointer;
                                background-image:url('${item.photo_url}');
                                background-size:cover;
                                background-position:center;
                        ">
                </span>
        `;
});

$('#avatars').html(html);


function getCookie(name) {
        const match = document.cookie.match(
                new RegExp('(^| )' + name + '=([^;]+)')
        );
        return match ? match[2] : null;
}

function go_analyze(short_code)
{
        $('#sign_in_loc').val('/analyze/analyze.php?short_code=' + short_code);
        sign_in();
}

function launch_your_link()
{
        var url = '/create/create_launch_your_link_proc_ajax.php';
        var params = Math.random();

        $.ajax({
                type:'GET',
                url:url,
                data:params,
                contentType: "charset=utf-8",
                success: function(res) {
                        var res_json = $.parseJSON(res);

                        if (res_json.proc == '1') {
                                location = res_json.loc;
                                // 성공하면 아래 처리하지 않고 ready에서 처리함
                                //$('#landing_page_loading').hide();
                                //$('#create_page').show();
                        }
                        else
                        {
                                alert(res_json.mssg);
                                document.location.reload();
                        }
                }
        });

        return false;
}

function get_this_name_proc(short_code)
{
        var url = '/create/create_short_code_save_proc_ajax.php';

        $.ajax({
                type: 'POST',
                url: url,
                data: {
                        short_code: short_code
                },
                success: function(res) {
                        if (getCookie("_sgn_"))
                        {
                                launch_your_link();
                        }
                        else
                        {
                                google_state = 'create';
                                apple_state = 'create';

                                $('#sign_in_loc').val('create');
                                $('#sign_up_loc').val('create');

                                modalOpened = true;

                                sign_up();
                        }
                },
                error: function(error) {
                        document.location.reload();
                }
        });
}

$('#signInModal, #signUpModal').on('hidden.bs.modal', function () {
        if (!modalOpened) return;

        const isAnyOpen = $('#signInModal').hasClass('show') ||
                          $('#signUpModal').hasClass('show');

        if (!isAnyOpen) {
                modalOpened = false;
        }
});


$(document).ready(function () {
        const sgn = getCookie('_sgn_');
        const url = new URL(window.location.href);
        const params = url.searchParams;

        if (sgn && !params.has('auth')) {
                params.set('auth', 'verified');
                window.location.href = 'https://cc.cc/?' + params.toString(); // 테스트 후 풀것
        }
});
</script>

<script src="https://short-img1.cc.cc/js/cookie_consent.js?cpop=1&gbtn=1&xad=1"></script>

<script>
//타임:2026-06-23 09:47:11</script>
