Update app.py

app.py

@@ -30,158 +30,583 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
         html_code = f'<img src="{badge_url}" alt="badge">'
 
     badge_preview = f"""
-    <div style='padding:30px; background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-         border-radius: 16px; display: flex; justify-content: center;
-         box-shadow: 0 6px 12px rgba(0,0,0,0.05);'>
+    <div style='padding:30px; background: #FFFFFF;
+         border: 4px solid #1F2937; border-radius: 12px; 
+         display: flex; justify-content: center;
+         box-shadow: 6px 6px 0px #1F2937;'>
         {html_code}
     </div>
     """
-    return html_code, badge_preview
+    
+    # 정보 로그 생성
+    info_log = f"""✅ BADGE GENERATED!
+{'=' * 50}
+🏷️ Badge Info:
+   • Label: {label}
+   • Message: {message}
+   • Logo: {logo}
+{'=' * 50}
+🎨 Style Settings:
+   • Background: {color}
+   • Label Color: {label_color}
+   • Logo Color: {logo_color}
+   • Style: {style}
+{'=' * 50}
+🔗 Link: {link if link else 'None'}
+{'=' * 50}
+💾 HTML code ready to copy!"""
+    
+    return html_code, badge_preview, info_log
+
+
+# ============================================
+# 🎨 Comic Classic Theme - Toon Playground
+# ============================================
+
+css = """
+/* ===== 🎨 Google Fonts Import ===== */
+@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
+
+/* ===== 🎨 Comic Classic 배경 - 빈티지 페이퍼 + 도트 패턴 ===== */
+.gradio-container {
+    background-color: #FEF9C3 !important;
+    background-image: 
+        radial-gradient(#1F2937 1px, transparent 1px) !important;
+    background-size: 20px 20px !important;
+    min-height: 100vh !important;
+    font-family: 'Comic Neue', cursive, sans-serif !important;
+}
+
+/* ===== 허깅페이스 상단 요소 숨김 ===== */
+.huggingface-space-header,
+#space-header,
+.space-header,
+[class*="space-header"],
+.svelte-1ed2p3z,
+.space-header-badge,
+.header-badge,
+[data-testid="space-header"],
+.svelte-kqij2n,
+.svelte-1ax1toq,
+.embed-container > div:first-child {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+/* ===== Footer 완전 숨김 ===== */
+footer,
+.footer,
+.gradio-container footer,
+.built-with,
+[class*="footer"],
+.gradio-footer,
+.main-footer,
+div[class*="footer"],
+.show-api,
+.built-with-gradio,
+a[href*="gradio.app"],
+a[href*="huggingface.co/spaces"] {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* ===== 메인 컨테이너 ===== */
+#col-container { 
+    max-width: 1200px; 
+    margin: 0 auto; 
+}
+
+/* ===== 🎨 헤더 타이틀 - 코믹 스타일 ===== */
+.header-text h1 {
+    font-family: 'Bangers', cursive !important;
+    color: #1F2937 !important;
+    font-size: 3.5rem !important;
+    font-weight: 400 !important;
+    text-align: center !important;
+    margin-bottom: 0.5rem !important;
+    text-shadow: 
+        4px 4px 0px #FACC15,
+        6px 6px 0px #1F2937 !important;
+    letter-spacing: 3px !important;
+    -webkit-text-stroke: 2px #1F2937 !important;
+}
+
+/* ===== 🎨 서브타이틀 ===== */
+.subtitle {
+    text-align: center !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-size: 1.2rem !important;
+    color: #1F2937 !important;
+    margin-bottom: 1.5rem !important;
+    font-weight: 700 !important;
+}
+
+/* ===== 🎨 카드/패널 - 만화 프레임 스타일 ===== */
+.gr-panel,
+.gr-box,
+.gr-form,
+.block,
+.gr-group {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+    transition: all 0.2s ease !important;
+}
+
+.gr-panel:hover,
+.block:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 8px 8px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 입력 필드 (Textbox) ===== */
+textarea, 
+input[type="text"], 
+input[type="number"] {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-size: 1rem !important;
+    font-weight: 700 !important;
+    transition: all 0.2s ease !important;
+}
+
+textarea:focus, 
+input[type="text"]:focus, 
+input[type="number"]:focus {
+    border-color: #3B82F6 !important;
+    box-shadow: 4px 4px 0px #3B82F6 !important;
+    outline: none !important;
+}
+
+textarea::placeholder {
+    color: #9CA3AF !important;
+    font-weight: 400 !important;
+}
+
+/* ===== 🎨 드롭다운 스타일 ===== */
+.gr-dropdown {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 3px 3px 0px #1F2937 !important;
+}
+
+.gr-dropdown > div {
+    background: #FFFFFF !important;
+    border: none !important;
+}
+
+.gr-dropdown input {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+}
+
+.gr-dropdown ul {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+
+.gr-dropdown ul li {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    padding: 8px 12px !important;
+}
+
+.gr-dropdown ul li:hover {
+    background: #FACC15 !important;
+    color: #1F2937 !important;
+}
+
+.gr-dropdown ul li.selected {
+    background: #3B82F6 !important;
+    color: #FFFFFF !important;
+}
+
+/* ===== 🎨 Primary 버튼 - 코믹 블루 ===== */
+.gr-button-primary,
+button.primary,
+.gr-button.primary,
+.generate-btn {
+    background: #3B82F6 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #FFFFFF !important;
+    font-family: 'Bangers', cursive !important;
+    font-weight: 400 !important;
+    font-size: 1.3rem !important;
+    letter-spacing: 2px !important;
+    padding: 14px 28px !important;
+    box-shadow: 5px 5px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
+}
+
+.gr-button-primary:hover,
+button.primary:hover,
+.gr-button.primary:hover,
+.generate-btn:hover {
+    background: #2563EB !important;
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 7px 7px 0px #1F2937 !important;
+}
+
+.gr-button-primary:active,
+button.primary:active,
+.gr-button.primary:active,
+.generate-btn:active {
+    transform: translate(3px, 3px) !important;
+    box-shadow: 2px 2px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 Secondary 버튼 - 코믹 레드 ===== */
+.gr-button-secondary,
+button.secondary {
+    background: #EF4444 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #FFFFFF !important;
+    font-family: 'Bangers', cursive !important;
+    font-weight: 400 !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 1px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
+}
+
+.gr-button-secondary:hover,
+button.secondary:hover {
+    background: #DC2626 !important;
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 로그 출력 영역 ===== */
+.info-log textarea {
+    background: #1F2937 !important;
+    color: #10B981 !important;
+    font-family: 'Courier New', monospace !important;
+    font-size: 0.9rem !important;
+    font-weight: 400 !important;
+    border: 3px solid #10B981 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #10B981 !important;
+}
+
+/* ===== 🎨 코드 블록 스타일 ===== */
+.gr-code,
+pre,
+code {
+    background: #1F2937 !important;
+    color: #10B981 !important;
+    font-family: 'Courier New', monospace !important;
+    border: 3px solid #10B981 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #10B981 !important;
+    padding: 12px !important;
+}
+
+/* ===== 🎨 탭 스타일 ===== */
+.gr-tabs {
+    background: transparent !important;
+}
+
+.gr-tab-item {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px 8px 0 0 !important;
+    color: #1F2937 !important;
+    font-family: 'Bangers', cursive !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 1px !important;
+    padding: 10px 20px !important;
+    margin-right: 4px !important;
+    box-shadow: 3px -3px 0px #1F2937 !important;
+    transition: all 0.2s ease !important;
+}
+
+.gr-tab-item:hover {
+    background: #FEF3C7 !important;
+    transform: translateY(-2px) !important;
+}
+
+.gr-tab-item.selected {
+    background: #3B82F6 !important;
+    color: #FFFFFF !important;
+    box-shadow: 4px -4px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 라벨 스타일 ===== */
+label,
+.gr-input-label,
+.gr-block-label {
+    color: #1F2937 !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+}
+
+span.gr-label {
+    color: #1F2937 !important;
+}
+
+/* ===== 🎨 Example Grid 스타일 ===== */
+.example-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, auto);
+    gap: 16px;
+    margin-top: 20px;
+}
+
+.example-item {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    text-align: center !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+
+.example-item:hover {
+    transform: translate(-3px, -3px) !important;
+    box-shadow: 7px 7px 0px #1F2937 !important;
+    background: #FEF3C7 !important;
+}
+
+.example-item:active {
+    transform: translate(2px, 2px) !important;
+    box-shadow: 2px 2px 0px #1F2937 !important;
+}
+
+@media (max-width: 768px) {
+    .example-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
+    .example-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ===== 🎨 Badge Section 스타일 ===== */
+.badge-section {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+    margin-bottom: 20px !important;
+}
+
+.badge-section h3 {
+    font-family: 'Bangers', cursive !important;
+    color: #1F2937 !important;
+    font-size: 1.3rem !important;
+    letter-spacing: 1px !important;
+    margin-bottom: 16px !important;
+}
+
+/* ===== 🎨 Help Section 스타일 ===== */
+.help-section {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 12px !important;
+    padding: 24px !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+}
+
+.help-section h3 {
+    font-family: 'Bangers', cursive !important;
+    color: #3B82F6 !important;
+    font-size: 1.5rem !important;
+    letter-spacing: 1px !important;
+    margin-bottom: 16px !important;
+}
+
+.help-section h4 {
+    font-family: 'Comic Neue', cursive !important;
+    color: #1F2937 !important;
+    font-weight: 700 !important;
+    font-size: 1.1rem !important;
+    margin: 16px 0 8px 0 !important;
+}
+
+.help-section p,
+.help-section li {
+    font-family: 'Comic Neue', cursive !important;
+    color: #1F2937 !important;
+    font-size: 1rem !important;
+    line-height: 1.6 !important;
+}
+
+.help-section ul {
+    padding-left: 20px !important;
+}
+
+.help-section a {
+    color: #3B82F6 !important;
+    font-weight: 700 !important;
+}
+
+.help-section a:hover {
+    color: #EF4444 !important;
+}
+
+/* ===== 🎨 스크롤바 - 코믹 스타일 ===== */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: #FEF9C3;
+    border: 2px solid #1F2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #3B82F6;
+    border: 2px solid #1F2937;
+    border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #EF4444;
+}
+
+/* ===== 🎨 선택 하이라이트 ===== */
+::selection {
+    background: #FACC15;
+    color: #1F2937;
+}
+
+/* ===== 🎨 링크 스타일 ===== */
+a {
+    color: #3B82F6 !important;
+    text-decoration: none !important;
+    font-weight: 700 !important;
+}
+
+a:hover {
+    color: #EF4444 !important;
+}
+
+/* ===== 🎨 Row/Column 간격 ===== */
+.gr-row {
+    gap: 1.5rem !important;
+}
+
+.gr-column {
+    gap: 1rem !important;
+}
+
+/* ===== 🎨 License/Credit 뱃지 ===== */
+.license-badge {
+    display: inline-block;
+    background: #10B981 !important;
+    color: #FFFFFF !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    padding: 6px 14px !important;
+    border: 2px solid #1F2937 !important;
+    border-radius: 20px !important;
+    box-shadow: 2px 2px 0px #1F2937 !important;
+    margin: 4px !important;
+}
+
+.credit-badge {
+    display: inline-block;
+    background: #3B82F6 !important;
+    color: #FFFFFF !important;
+    font-family: 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    padding: 6px 14px !important;
+    border: 2px solid #1F2937 !important;
+    border-radius: 20px !important;
+    box-shadow: 2px 2px 0px #1F2937 !important;
+    margin: 4px !important;
+}
+
+/* ===== 반응형 조정 ===== */
+@media (max-width: 768px) {
+    .header-text h1 {
+        font-size: 2.2rem !important;
+        text-shadow: 
+            3px 3px 0px #FACC15,
+            4px 4px 0px #1F2937 !important;
+    }
+    
+    .gr-button-primary,
+    button.primary {
+        padding: 12px 20px !important;
+        font-size: 1.1rem !important;
+    }
+    
+    .gr-panel,
+    .block {
+        box-shadow: 4px 4px 0px #1F2937 !important;
+    }
+}
+
+/* ===== 🎨 다크모드 비활성화 ===== */
+@media (prefers-color-scheme: dark) {
+    .gradio-container {
+        background-color: #FEF9C3 !important;
+    }
+}
+"""
 
 # ---------------------------
 # Gradio UI
 # ---------------------------
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    # Product Hunt badge (prominent but non‑intrusive)
-    gr.HTML(
-        """
-        <div style='display:flex; justify-content:center; margin-top:8px; margin-bottom:18px;'>
-            <a href="https://www.producthunt.com/posts/badgecraft?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-badgecraft" target="_blank">
-                <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=955939&theme=light&t=1745314452274" alt="BadgeCraft - badge&#0044;&#0032;ai&#0044;&#0032;generation&#0044;&#0032;web&#0044;&#0032;html&#0044;&#0032;link | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-
+with gr.Blocks(fill_height=True, css=css, title="BadgeCraft") as demo:
+    
+    # HOME Badge
+    gr.HTML("""
+        <div style="text-align: center; margin: 20px 0 10px 0;">
+            <a href="https://www.humangen.ai" target="_blank" style="text-decoration: none;">
+                <img src="https://img.shields.io/static/v1?label=🏠 HOME&message=HUMANGEN.AI&color=0000ff&labelColor=ffcc00&style=for-the-badge" alt="HOME">
             </a>
         </div>
+    """)
+    
+    # Header Title
+    gr.Markdown(
         """
+        # 🎨 BADGECRAFT GENERATOR 🏷️
+        """,
+        elem_classes="header-text"
     )
-
-    # Custom CSS
-    gr.HTML("""
-    <style>
-      body { 
-        background: linear-gradient(120deg, #f8f9fa, #e2eafc); 
-        font-family: 'Poppins', 'Noto Sans KR', sans-serif;
-      }
-      .gradio-container { 
-        background: rgba(255, 255, 255, 0.85); 
-        backdrop-filter: blur(10px);
-        border-radius: 20px; 
-        padding: 24px; 
-        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-      .gr-button { 
-        background: linear-gradient(135deg, #a8dadc, #88c1e9) !important; 
-        color: #1d3557 !important; 
-        border: none !important;
-        border-radius: 10px !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-        box-shadow: 0 4px 10px rgba(138, 198, 209, 0.3) !important;
-      }
-      .gr-button:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 6px 15px rgba(138, 198, 209, 0.4) !important;
-      }
-      .gr-textbox, .gr-select, .gr-color { 
-        background: #e8f6f3 !important; 
-        border: 2px solid #d9f0ea !important;
-        border-radius: 12px !important;
-        transition: all 0.3s ease !important;
-      }
-      .gr-textbox:focus, .gr-select:focus, .gr-color:focus {
-        border-color: #a8dadc !important;
-        box-shadow: 0 0 0 3px rgba(168, 218, 220, 0.25) !important;
-      }
-      label.block span {
-        color: #457b9d !important;
-        font-weight: 600 !important;
-        font-size: 1rem !important;
-      }
-      h1 { 
-        color: #5e60ce; 
-        font-weight: 800;
-        letter-spacing: -0.5px;
-      }
-      h3 { 
-        color: #5e60ce; 
-        font-weight: 600;
-      }
-      .footer {
-        margin-top: 30px;
-        text-align: center;
-        font-size: 0.9rem;
-        color: #6d6875;
-      }
-      .badge-section {
-        background: rgba(255, 255, 255, 0.7);
-        border-radius: 16px;
-        padding: 20px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
-        margin-bottom: 24px;
-        border: 1px solid rgba(230, 240, 255, 0.7);
-      }
-      .example-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-template-rows: repeat(2, auto);
-        gap: 16px;
-        margin-top: 20px;
-      }
-      .example-item {
-        background: linear-gradient(135deg, #f1f8ff, #e8f4ff);
-        border-radius: 12px;
-        padding: 16px;
-        text-align: center;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        border: 2px solid transparent;
-      }
-      .example-item:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 8px 15px rgba(0,0,0,0.05);
-        border-color: #a8dadc;
-      }
-      @media (max-width: 768px) {
-        .example-grid {
-          grid-template-columns: repeat(2, 1fr);
-        }
-      }
-      @media (max-width: 600px) {
-        .example-grid {
-          grid-template-columns: 1fr;
-        }
-      }
-      .color-preview {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        margin-right: 5px;
-        border-radius: 4px;
-        vertical-align: middle;
-      }
-    </style>
-    """)
-
-    # Header section
-    gr.HTML("""
-    <div style="text-align:center; margin-bottom:24px;">
-        <h1 style="font-size:2.8rem; margin-bottom:0.2em; background: linear-gradient(90deg, #5e60ce, #64dfdf); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-            🎨 BadgeCraft
-        </h1>
-        <p style="font-size:1.2rem; margin:0.5em 0; color:#457b9d; max-width:700px; margin:0 auto;">
-            Create beautiful badges with live preview and HTML snippet
-        </p>
-        <div style="margin-top:10px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;">
-            <span style="display:inline-block; background:#e9f5db; color:#588157; padding:6px 12px; border-radius:30px; font-size:0.9rem;">
-                <strong>✨ MIT License</strong>
-            </span>
-            <span style="display:inline-block; background:#d8f3dc; color:#2d6a4f; padding:6px 12px; border-radius:30px; font-size:0.9rem;">
-                <strong>👥 Created by OpenFreeAI Team</strong>
-            </span>
+    
+    gr.Markdown(
+        """
+        <p class="subtitle">✨ Create beautiful badges with live preview and HTML snippet! 💻</p>
+        <div style="text-align: center; margin: 10px 0;">
+            <span class="license-badge">✨ MIT License</span>
+            <span class="credit-badge">👥 OpenFreeAI Team</span>
         </div>
-    </div>
-    """)
+        """,
+    )
 
     # Define color options
     color_options = {
@@ -202,50 +627,81 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     }
 
     with gr.Tabs():
-        with gr.TabItem("Badge Generator"):
-            with gr.Row():
-                with gr.Column():
+        with gr.TabItem("🎨 Badge Generator"):
+            with gr.Row(equal_height=False):
+                with gr.Column(scale=1, min_width=400):
                     with gr.Group(elem_classes="badge-section"):
-                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>✏️ Badge Settings</h3>")
-                        label = gr.Textbox(label="Label", value="Discord", elem_id="label-input", lines=1)
-                        message = gr.Textbox(label="Message", value="Join our community", elem_id="message-input", lines=1)
-                        logo = gr.Textbox(label="Logo", value="discord", elem_id="logo-input", lines=1)
+                        gr.HTML("<h3>✏️ BADGE SETTINGS</h3>")
+                        label = gr.Textbox(
+                            label="🏷️ Label",
+                            value="Discord",
+                            lines=1
+                        )
+                        message = gr.Textbox(
+                            label="💬 Message",
+                            value="Join our community",
+                            lines=1
+                        )
+                        logo = gr.Textbox(
+                            label="🖼️ Logo",
+                            value="discord",
+                            lines=1
+                        )
                         style = gr.Dropdown(
-                            label="Style", 
+                            label="🎭 Style", 
                             choices=["flat", "flat-square", "plastic", "for-the-badge", "social"], 
-                            value="for-the-badge",
-                            elem_id="style-input"
+                            value="for-the-badge"
                         )
 
-                        # Dropdown color selections
                         color = gr.Dropdown(
-                            label="Background Color", 
+                            label="🎨 Background Color", 
                             choices=list(color_options.keys()),
-                            value="Blue",
-                            elem_id="color-input"
+                            value="Blue"
                         )
                         label_color = gr.Dropdown(
-                            label="Label Background Color", 
+                            label="🏷️ Label Background Color", 
                             choices=list(color_options.keys()),
-                            value="Purple",
-                            elem_id="label-color-input"
+                            value="Purple"
                         )
                         logo_color = gr.Dropdown(
-                            label="Logo Color", 
+                            label="✨ Logo Color", 
                             choices=["white", "black"] + list(color_options.keys()),
-                            value="white",
-                            elem_id="logo-color-input"
+                            value="white"
+                        )
+                        link = gr.Textbox(
+                            label="🔗 Link (URL)",
+                            value="https://discord.gg/openfreeai",
+                            lines=1
+                        )
+                    
+                    with gr.Accordion("📜 Generation Log", open=True):
+                        info_log = gr.Textbox(
+                            label="",
+                            placeholder="Badge info will appear here...",
+                            lines=14,
+                            max_lines=20,
+                            interactive=False,
+                            elem_classes="info-log"
                         )
-                        link = gr.Textbox(label="Link (URL)", value="https://discord.gg/openfreeai", elem_id="link-input", lines=1)
-                with gr.Column():
+                        
+                with gr.Column(scale=1, min_width=400):
                     with gr.Group(elem_classes="badge-section"):
-                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>👁️ Preview</h3>")
+                        gr.HTML("<h3>👁️ LIVE PREVIEW</h3>")
                         out_preview = gr.HTML(label="")
+                    
                     with gr.Group(elem_classes="badge-section"):
-                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>💻 HTML Code</h3>")
+                        gr.HTML("<h3>💻 HTML CODE</h3>")
                         out_code = gr.Code(label="", language="html", lines=3)
+                    
+                    gr.Markdown(
+                        """
+                        <p style="text-align: center; margin-top: 15px; font-weight: 700; color: #1F2937;">
+                            💡 Copy the HTML code and paste it into your website or README!
+                        </p>
+                        """
+                    )
 
-            # Example list (label, message, bg_color, label_color, logo, logo_color, style, link)
+            # Example list
             examples = [
                 ["Discord",    "Openfree AI",    "Blue", "Purple", "discord",   "white", "for-the-badge", "https://discord.gg/openfreeai"],
                 ["X.com",      "Follow us",      "Blue", "Cyan", "x",         "white", "for-the-badge", "https://x.com/openfree_ai"],
@@ -258,6 +714,14 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             ]
 
             # Example grid preview
+            gr.Markdown(
+                """
+                <p style="text-align: center; margin: 25px 0 15px 0; font-family: 'Bangers', cursive; font-size: 1.5rem; color: #1F2937;">
+                    🌟 CLICK AN EXAMPLE TO USE! 🌟
+                </p>
+                """
+            )
+            
             html_items = '<div class="example-grid">'
             for idx, ex in enumerate(examples):
                 color_hex = color_options.get(ex[2], ex[2])
@@ -277,7 +741,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 html_items += f'''
                 <div class="example-item" onclick="applyExample({idx})">
                     <img src="{badge_url}" alt="{ex[0]} badge" style="margin-bottom:8px;">
-                    <div style="font-size:0.9rem; color:#457b9d;">{ex[0]}</div>
+                    <div style="font-size:0.9rem; color:#1F2937; font-family: 'Comic Neue', cursive; font-weight: 700;">{ex[0]}</div>
                 </div>
                 '''
             html_items += '</div>'
@@ -330,47 +794,34 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
             gr.HTML(html_items + apply_example_js)
 
-            def process_badge(label, message, color_name, label_color_name, logo, logo_color_name, style, link):
-                color_hex = color_options.get(color_name, "#000000")
-                label_color_hex = color_options.get(label_color_name, "#000000")
-                logo_color_hex = logo_color_name if logo_color_name in ["white", "black"] else color_options.get(logo_color_name, "#ffffff")
-                return generate_static_badge(label, message, color_hex, label_color_hex, logo, logo_color_hex, style, link)
-
-            demo.load(
-                fn=process_badge,
-                inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                outputs=[out_code, out_preview],
-            )
-            for inp in [label, message, color, label_color, logo, logo_color, style, link]:
-                inp.change(
-                    fn=process_badge,
-                    inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                    outputs=[out_code, out_preview],
-                )
-
-        with gr.TabItem("Help"):
+        with gr.TabItem("❓ Help"):
             gr.HTML('''
-            <div style="padding: 20px; background: rgba(255, 255, 255, 0.7); border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.03);">
-                <h3 style="color: #5e60ce; margin-top:0;">📋 How to Use BadgeCraft</h3>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">✨ What are Badges?</h4>
+            <div class="help-section">
+                <h3>📋 HOW TO USE BADGECRAFT</h3>
+                
+                <h4>✨ What are Badges?</h4>
                 <p>Badges are small visual indicators that can be used in README files, websites, and documentation. Shields.io badges are widely used to display project status, social media links, version information, and more.</p>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">🛠️ Basic Settings</h4>
+                
+                <h4>🛠️ Basic Settings</h4>
                 <ul>
                     <li><strong>Label</strong>: Text displayed on the left side of the badge (e.g., "Discord", "Version", "Status")</li>
                     <li><strong>Message</strong>: Text displayed on the right side of the badge</li>
                     <li><strong>Logo</strong>: Name of a logo provided by Simple Icons (<a href="https://simpleicons.org/" target="_blank">View List</a>)</li>
                     <li><strong>Style</strong>: Determines the shape of the badge (flat, plastic, for-the-badge, etc.)</li>
                 </ul>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">🎨 Color Settings</h4>
+                
+                <h4>🎨 Color Settings</h4>
                 <ul>
                     <li><strong>Background Color</strong>: Background color for the right side of the badge</li>
                     <li><strong>Label Background Color</strong>: Background color for the left side of the badge</li>
                     <li><strong>Logo Color</strong>: Color of the logo (e.g. white or black)</li>
                 </ul>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">🔗 Using the HTML</h4>
+                
+                <h4>🔗 Using the HTML</h4>
                 <p>Copy the generated HTML code and paste it into your website, blog, GitHub README, etc.</p>
                 <p>HTML works in GitHub READMEs, but if you prefer markdown, use <code>![alt text](badge URL)</code>.</p>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">💡 Tips</h4>
+                
+                <h4>💡 Tips</h4>
                 <ul>
                     <li>Click on any example in the grid to automatically fill in all settings</li>
                     <li>The preview updates in real-time as you make changes</li>
@@ -380,14 +831,24 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             </div>
             ''')
 
-    # Footer
-    gr.HTML('''
-    <div class="footer">
-        <p>© 2023-2025 BadgeCraft | MIT License  
-           <a href="https://discord.gg/openfreeai" target="_blank" style="color:#5e60ce;">Discord</a>
-        </p>
-    </div>
-    ''')
+    def process_badge(label, message, color_name, label_color_name, logo, logo_color_name, style, link):
+        color_hex = color_options.get(color_name, "#000000")
+        label_color_hex = color_options.get(label_color_name, "#000000")
+        logo_color_hex = logo_color_name if logo_color_name in ["white", "black"] else color_options.get(logo_color_name, "#ffffff")
+        return generate_static_badge(label, message, color_hex, label_color_hex, logo, logo_color_hex, style, link)
+
+    demo.load(
+        fn=process_badge,
+        inputs=[label, message, color, label_color, logo, logo_color, style, link],
+        outputs=[out_code, out_preview, info_log],
+    )
+    
+    for inp in [label, message, color, label_color, logo, logo_color, style, link]:
+        inp.change(
+            fn=process_badge,
+            inputs=[label, message, color, label_color, logo, logo_color, style, link],
+            outputs=[out_code, out_preview, info_log],
+        )
 
 if __name__ == "__main__":
     demo.launch()