Update app-backup.py

app-backup.py

@@ -224,23 +224,26 @@ def get_vercel_deployments():
         return []
 
 def get_vercel_card(deployment, index):
-    """Generate HTML card for a Vercel deployment"""
-    # URL에서 첫 6글자만 추출하여 vercel.app 도메인 구성
+    """Generate HTML card for a Vercel deployment with like button"""
     raw_url = deployment.get('url', '')
-    project_name = raw_url[:6] if len(raw_url) >= 6 else raw_url  # 첫 6글자만 추출
-    url = f"{project_name}.vercel.app"  # 새로운 URL 형식 적용
+    project_name = raw_url[:6] if len(raw_url) >= 6 else raw_url
+    url = f"{project_name}.vercel.app"
     
     created = format_timestamp(deployment.get('created'))
     name = deployment.get('name', 'Unnamed Project')
     state = deployment.get('state', 'N/A')
     
-    bg_color = get_pastel_color(index + 20)
+    # 고유 ID 생성 (카드 식별용)
+    card_id = f"vercel-card-{project_name}"
     
+    bg_color = get_pastel_color(index + 20)
     tech_emojis = ['⚡', '🚀', '🌟', '✨', '💫', '🔥', '🌈', '🎯', '🎨', '🔮']
     random_emojis = random.sample(tech_emojis, 3)
     
     return f"""
-    <div style='border: none; 
+    <div id="{card_id}" class="vercel-card"
+         data-likes="0"
+         style='border: none; 
                 padding: 25px; 
                 margin: 15px; 
                 border-radius: 20px; 
@@ -254,18 +257,24 @@ def get_vercel_card(deployment, index):
         <div style='position: absolute; top: -15px; right: -15px; font-size: 100px; opacity: 0.1;'>
             {random_emojis[0]}
         </div>
+        <div style='position: absolute; top: 10px; right: 10px; font-size: 20px;'>
+            {random_emojis[1]}
+        </div>
+        <div style='position: absolute; bottom: 10px; left: 10px; font-size: 20px;'>
+            {random_emojis[2]}
+        </div>
         <h3 style='color: #2d2d2d; 
                    margin: 0 0 20px 0; 
                    font-size: 1.4em;
                    display: flex;
                    align-items: center;
                    gap: 10px;'>
-            <span style='font-size: 1.3em'>{random_emojis[1]}</span>
+            <span style='font-size: 1.3em'>{random_emojis[0]}</span>
             <a href='https://{url}' target='_blank' 
                style='text-decoration: none; color: #2d2d2d;'>
                 {name}
             </a>
-            <span style='font-size: 1.3em'>{random_emojis[2]}</span>
+            <span style='font-size: 1.3em'>{random_emojis[1]}</span>
         </h3>
         <div style='margin: 15px 0; color: #444; background: rgba(255,255,255,0.5); 
                     padding: 15px; border-radius: 12px;'>
@@ -279,7 +288,14 @@ def get_vercel_card(deployment, index):
                 <strong>URL:</strong> 🔗 https://{url}
             </p>
         </div>
-        <div style='margin-top: 20px;'>
+        <div style='margin-top: 20px; display: flex; justify-content: space-between; align-items: center;'>
+            <div class="like-section" style="display: flex; align-items: center; gap: 10px;">
+                <button onclick="toggleLike('{card_id}')" class="like-button" 
+                        style="background: none; border: none; cursor: pointer; font-size: 1.5em; padding: 5px 10px;">
+                    🤍
+                </button>
+                <span class="like-count" style="font-size: 1.2em; color: #666;">0</span>
+            </div>
             <a href='https://{url}' target='_blank' 
                style='background: linear-gradient(45deg, #0084ff, #00a3ff);
                       color: white; 
@@ -294,7 +310,7 @@ def get_vercel_card(deployment, index):
                       box-shadow: 0 2px 8px rgba(0,132,255,0.3);'
                onmouseover='this.style.transform="scale(1.05)"; this.style.boxShadow="0 4px 12px rgba(0,132,255,0.4)"'
                onmouseout='this.style.transform="scale(1)"; this.style.boxShadow="0 2px 8px rgba(0,132,255,0.3)"'>
-                <span>View Deployment</span> 🚀
+                <span>View Deployment</span> 🚀 {random_emojis[0]}
             </a>
         </div>
     </div>
@@ -339,18 +355,69 @@ def get_user_spaces():
                 </p>
             </div>
             
-            <!-- Vercel Deployments (먼저 표시) -->
+            <!-- Vercel Deployments -->
             <h3 style='color: #333; margin: 20px 0;'>⚡ Vercel Deployments</h3>
-            <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
+            <div id="vercel-container" style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
                 {"".join(get_vercel_card(dep, idx) for idx, dep in enumerate(vercel_deployments))}
             </div>
             
-            <!-- Hugging Face Spaces (나중에 표시) -->
+            <!-- Hugging Face Spaces -->
             <h3 style='color: #333; margin: 20px 0;'>🤗 Hugging Face Spaces</h3>
             <div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;'>
                 {"".join(get_space_card(space, idx) for idx, space in enumerate(user_spaces))}
             </div>
         </div>
+        <script>
+        document.addEventListener('DOMContentLoaded', function() {{
+            // 좋아요 상태 로드
+            function loadLikes() {{
+                const cards = document.querySelectorAll('.vercel-card');
+                cards.forEach(card => {{
+                    const cardId = card.id;
+                    const likes = localStorage.getItem(cardId) || 0;
+                    card.querySelector('.like-count').textContent = likes;
+                    card.dataset.likes = likes;
+                    updateLikeButton(card, likes > 0);
+                }});
+                sortCards();
+            }}
+            
+            // 좋아요 버튼 토글
+            window.toggleLike = function(cardId) {{
+                const card = document.getElementById(cardId);
+                const likeCount = parseInt(localStorage.getItem(cardId) || 0);
+                const newCount = likeCount > 0 ? 0 : 1;
+                
+                localStorage.setItem(cardId, newCount);
+                card.querySelector('.like-count').textContent = newCount;
+                card.dataset.likes = newCount;
+                updateLikeButton(card, newCount > 0);
+                
+                sortCards();
+            }}
+            
+            // 좋아요 버튼 상태 업데이트
+            function updateLikeButton(card, isLiked) {{
+                const button = card.querySelector('.like-button');
+                button.textContent = isLiked ? '❤️' : '🤍';
+            }}
+            
+            // 카드 정렬
+            function sortCards() {{
+                const container = document.getElementById('vercel-container');
+                const cards = Array.from(container.children);
+                
+                cards.sort((a, b) => {{
+                    return parseInt(b.dataset.likes) - parseInt(a.dataset.likes);
+                }});
+                
+                cards.forEach(card => container.appendChild(card));
+            }}
+            
+            // 초기 로드
+            loadLikes();
+        }});
+        </script>
         """
 
         return html_content