Hugging Face's logo

Spaces:
nkjoy
/
bookmark
Running

App Files Community
bookmark / index.html
nkjoy's picture
nkjoy
๋งํฌ ๋ถ๋งˆํฌ ๋งŒ๋“ค์ž. ๋ฐ˜ํˆฌ๋ช… ์œ ๋ฆฌ๋ฒ„ํŠผ+๋ฐ˜์ง์ž„ ํšจ๊ณผ.๋ฆฌ์ŠคํŠธ ํ˜•์œผ๋กœ ํ•ด์ฃผ๊ณ  ์ปฌ๋Ÿฌ์ด๋ชจํ‹ฐ์ฝ˜์œผ๋กœ ํ•ด์ค˜ - Initial Deployment
334bfb6 verified
Raw
History Blame Contribute Delete
7.87 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>๋ถ๋งˆํฌ ๋งํฌ ๋ชจ์Œ</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
 <style>
 @keyframes shimmer {
 0% { background-position: -200% 0; }
 100% { background-position: 200% 0; }
 }
 .glass-button {
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.2);
 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
 }
 .glass-button:hover {
 background: rgba(255, 255, 255, 0.2);
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }
 .shimmer-effect {
 position: relative;
 overflow: hidden;
 }
 .shimmer-effect::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 animation: shimmer 2s infinite;
 }
 </style>
</head>
<body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 min-h-screen p-4 md:p-8">
 <div class="max-w-4xl mx-auto">
 <!-- Header -->
 <header class="text-center py-12" data-aos="fade-down">
 <h1 class="text-4xl md:text-5xl font-bold text-white mb-4 flex items-center justify-center gap-3">
 <span>๐Ÿ”—</span> ๋ถ๋งˆํฌ ๋งํฌ ๋ชจ์Œ
 </h1>
 <p class="text-purple-200 text-lg">์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ํ•œ๊ณณ์— ๋ชจ์•„๋ณด์„ธ์š”</p>
 </header>
<!-- Bookmark List -->
 <div class="space-y-6">
 <!-- Bookmark Item 1 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="100">
 <div class="text-3xl">๐Ÿ“˜</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">๋„ค์ด๋ฒ„</h3>
 <p class="text-purple-200">ํ•œ๊ตญ ๋Œ€ํ‘œ ํฌํ„ธ ์‚ฌ์ดํŠธ</p>
 </div>
 <a href="https://www.naver.com" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
<!-- Bookmark Item 2 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="200">
 <div class="text-3xl">๐Ÿ”</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">๊ตฌ๊ธ€</h3>
 <p class="text-purple-200">์„ธ๊ณ„ ์ตœ๋Œ€ ๊ฒ€์ƒ‰ ์—”์ง„</p>
 </div>
 <a href="https://www.google.com" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
<!-- Bookmark Item 3 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="300">
 <div class="text-3xl">๐ŸŽฌ</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">์œ ํŠœ๋ธŒ</h3>
 <p class="text-purple-200">์„ธ๊ณ„ ์ตœ๋Œ€ ๋™์˜์ƒ ํ”Œ๋žซํผ</p>
 </div>
 <a href="https://www.youtube.com" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
<!-- Bookmark Item 4 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="400">
 <div class="text-3xl">๐Ÿ›๏ธ</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">์ฟ ํŒก</h3>
 <p class="text-purple-200">ํ•œ๊ตญ ๋Œ€ํ‘œ ์‡ผํ•‘๋ชฐ</p>
 </div>
 <a href="https://www.coupang.com" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
<!-- Bookmark Item 5 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="500">
 <div class="text-3xl">๐Ÿ“ฐ</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">๋‹ค์Œ</h3>
 <p class="text-purple-200">๋‰ด์Šค ๋ฐ ํฌํ„ธ ์„œ๋น„์Šค</p>
 </div>
 <a href="https://www.daum.net" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
<!-- Bookmark Item 6 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="600">
 <div class="text-3xl">๐ŸŽฎ</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">์ŠคํŒ€</h3>
 <p class="text-purple-200">PC ๊ฒŒ์ž„ ํ”Œ๋žซํผ</p>
 </div>
 <a href="https://store.steampowered.com" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
<!-- Bookmark Item 7 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="700">
 <div class="text-3xl">๐Ÿ“š</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">๊นƒํ—ˆ๋ธŒ</h3>
 <p class="text-purple-200">์ฝ”๋“œ ์ €์žฅ์†Œ ๋ฐ ํ˜‘์—… ํ”Œ๋žซํผ</p>
 </div>
 <a href="https://github.com" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
<!-- Bookmark Item 8 -->
 <div class="glass-button rounded-xl p-6 flex items-center gap-4 shimmer-effect" data-aos="fade-up" data-aos-delay="800">
 <div class="text-3xl">๐Ÿ’ฌ</div>
 <div class="flex-1">
 <h3 class="text-white text-xl font-semibold">๋””์Šค์ฝ”๋“œ</h3>
 <p class="text-purple-200">๊ฒŒ์ด๋จธ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”Œ๋žซํผ</p>
 </div>
 <a href="https://discord.com" target="_blank" class="glass-button px-4 py-2 rounded-lg text-white hover:bg-white/20 transition-colors">
 ๋ฐฉ๋ฌธํ•˜๊ธฐ
 </a>
 </div>
 </div>
<!-- Footer -->
 <footer class="text-center py-12 text-purple-300">
 <p>ยฉ 2023 ๋ถ๋งˆํฌ ๋งํฌ ๋ชจ์Œ. ๋ชจ๋“  ๊ถŒํ•œ ๋ณด์œ .</p>
 </footer>
 </div>
<script>
 feather.replace();
 </script>
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <script>
 AOS.init({
 duration: 800,
 easing: 'ease-out-cubic'
 });
 </script>
</body>
</html>