加入我們的 Discord 伺服器 - 聊天咖啡廳

立即加入聊天咖啡廳 Discord 社群！與志同道合的朋友一起聊天、玩遊戲、聽音樂。現在就取得專屬邀請連結！
Discord 邀請, 聊天咖啡廳, Discord 社群, 加入 Discord, Discord 伺服器

加入聊天咖啡廳 Discord 社群
🎉 加入我們的 Discord 伺服器，與數百位成員一起享受 AI 對話、音樂播放、遊戲揪團等豐富功能！


<link rel="stylesheet" href="/css/invite/invite.css">
<!-- 預載入關鍵資源 -->
<link rel="preconnect" href="https://discord.com">
<link rel="dns-prefetch" href="https://cdn.discordapp.com">
<!-- 頁面專屬結構化資料 -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "加入聊天咖啡廳 Discord 社群",
    "description": "立即加入聊天咖啡廳 Discord 社群！與志同道合的朋友一起聊天、玩遊戲、聽音樂。",
    "url": "https://www.coffeeshoptw.com/invite/",
    "mainEntity": {
        "@type": "Organization",
        "name": "聊天の咖啡廳 Discord",
        "description": "溫馨的 Discord 社群，提供 AI 對話、音樂播放、遊戲揪團等功能",
        "url": "https://discord.gg/VzdeVzHfxB"
    },
    "publisher": {
        "@type": "Organization",
        "name": "聊天の咖啡廳",
        "url": "https://www.coffeeshoptw.com"
    }
}
</script>
<div class="invite-page">
    <!-- 背景效果 -->
    <div class="invite-background">
        <div class="bg-gradient"></div>
        <div class="bg-particles" id="particles"></div>
    </div>

    <div class="invite-container">
        <!-- 主題切換按鈕 -->
        <button class="theme-toggle" id="theme-toggle" aria-label="切換深淺色模式" type="button" title="切換主題">
            <i class="fas fa-sun" id="theme-icon" aria-hidden="true"></i>
        </button>
        
        <!-- 伺服器資訊卡片 -->
        <div class="server-card">
            <div class="server-banner">
                <!-- IF: guild_info and guild_info.icon_url -->
                <img src="<span data-var="guild_info.icon_url"></span>" alt="<span data-var="guild_info.name if guild_info else '聊天咖啡廳'"></span> 伺服器圖示" class="server-icon" loading="lazy" decoding="async">
                </div><div class="auth-conditional" data-auth-required="false">
                <div class="server-icon-placeholder">
                    <i class="fab fa-discord" aria-hidden="true"></i>
                </div>
                </div><!-- ENDIF -->
            </div>
            
            <div class="server-info">
                <h1 class="server-name">
                    <!-- IF: guild_info -->
                    <span data-var="guild_info.name"></span>
                    </div><div class="auth-conditional" data-auth-required="false">
                    聊天の咖啡廳
                    </div><!-- ENDIF -->
                </h1>
                
                <!-- IF: guild_info and guild_info.description -->
                <p class="server-description"><span data-var="guild_info.description"></span></p>
                </div><div class="auth-conditional" data-auth-required="false">
                <p class="server-description">歡迎來到聊天咖啡廳！這裡是一個溫馨的 Discord 社群，我們有 AI 對話、音樂播放、遊戲揪團等豐富功能等著你來體驗！</p>
                </div><!-- ENDIF -->
                
                <div class="server-stats">
                    <div class="stat-item" id="member-stat">
                        <i class="fas fa-users"></i>
                        <span class="stat-value" id="member-count">
                            <!-- IF: guild_info --><span data-var="guild_info.member_count"></span></div><div class="auth-conditional" data-auth-required="false">--</div><!-- ENDIF -->
                        </span>
                        <span class="stat-label">成員</span>
                    </div>
                    <div class="stat-item" id="online-stat">
                        <span class="online-dot"></span>
                        <span class="stat-value" id="online-count">--</span>
                        <span class="stat-label">在線</span>
                    </div>
                </div>

                <!-- IF: guild_info and guild_info.features -->
                <div class="server-features">
                    <!-- FOR: feature in guild_info.features[:5] --><template class="loop-template">
                    <span class="feature-badge">
                        <!-- IF: feature == 'COMMUNITY' -->
                        <i class="fas fa-users"></i> 社群伺服器
                        <!-- ELIF -->
                        <i class="fas fa-check-circle"></i> 已驗證
                        <!-- ELIF -->
                        <i class="fas fa-handshake"></i> 合作夥伴
                        <!-- ELIF -->
                        <i class="fas fa-compass"></i> 可探索
                        </div><div class="auth-conditional" data-auth-required="false">
                        <i class="fas fa-star"></i> <span data-var="feature|replace('_', ' ')|title"></span>
                        </div><!-- ENDIF -->
                    </span>
                    </template><!-- ENDFOR -->
                </div>
                </div><!-- ENDIF -->
            </div>
        </div>

        <!-- 邀請產生區塊 -->
        <div class="invite-generator">
            <h2 class="section-title">
                <i class="fas fa-link"></i>
                取得邀請連結
            </h2>
            
            <div class="invite-options">
                <div class="option-group">
                    <label for="invite-duration">
                        <i class="fas fa-clock"></i> 有效期限
                    </label>
                    <select id="invite-duration" class="invite-select">
                        <option value="1800">30 分鐘</option>
                        <option value="3600">1 小時</option>
                        <option value="21600">6 小時</option>
                        <option value="43200">12 小時</option>
                        <option value="86400" selected>1 天</option>
                        <option value="604800">7 天</option>
                    </select>
                </div>
                
                <div class="option-group">
                    <label for="invite-uses">
                        <i class="fas fa-user-plus"></i> 使用次數
                    </label>
                    <select id="invite-uses" class="invite-select">
                        <option value="1" selected>1 次</option>
                        <option value="5">5 次</option>
                        <option value="10">10 次</option>
                        <option value="25">25 次</option>
                        <option value="50">50 次</option>
                        <option value="100">100 次</option>
                        <option value="0">無限制</option>
                    </select>
                </div>
            </div>
            
            <button class="btn-generate" id="generate-btn" aria-label="產生 Discord 邀請連結" type="button">
                <i class="fas fa-magic" aria-hidden="true"></i>
                <span>產生邀請連結</span>
            </button>
            
            <!-- 邀請結果 -->
            <div class="invite-result" id="invite-result" style="display: none;">
                <div class="result-header">
                    <i class="fas fa-check-circle"></i>
                    <span>邀請連結已產生！</span>
                </div>
                
                <div class="invite-link-box">
                    <input type="text" id="invite-link" readonly class="invite-link-input" aria-label="邀請連結" autocomplete="off">
                    <button class="btn-copy" id="copy-btn" title="複製連結" aria-label="複製邀請連結到剪貼簿" type="button">
                        <i class="fas fa-copy" aria-hidden="true"></i>
                    </button>
                </div>
                
                <div class="invite-meta">
                    <span class="meta-item" id="expire-info">
                        <i class="fas fa-hourglass-half"></i>
                        <span>--</span>
                    </span>
                    <span class="meta-item" id="uses-info">
                        <i class="fas fa-users"></i>
                        <span>--</span>
                    </span>
                </div>
                
                <div class="invite-actions">
                    <a href="#" id="discord-link" class="btn-action btn-discord" target="_blank" rel="noopener noreferrer" aria-label="在 Discord 應用程式中開啟邀請連結">
                        <i class="fab fa-discord" aria-hidden="true"></i>
                        在 Discord 開啟
                    </a>
                    <button class="btn-action btn-share" id="share-btn" aria-label="分享邀請連結" type="button">
                        <i class="fas fa-share-alt" aria-hidden="true"></i>
                        分享
                    </button>
                </div>
                
                <!-- QR Code 區塊 -->
                <div class="qr-code-section" id="qr-section">
                    <button class="btn-qr-toggle" id="qr-toggle" type="button" aria-expanded="false" aria-controls="qr-container">
                        <i class="fas fa-qrcode" aria-hidden="true"></i>
                        <span>顯示 QR Code</span>
                    </button>
                    <div class="qr-container" id="qr-container" style="display: none;" role="img" aria-label="邀請連結 QR Code">
                        <canvas id="qr-canvas"></canvas>
                        <p class="qr-hint">掃描 QR Code 加入伺服器</p>
                    </div>
                </div>
            </div>
            
            <!-- 載入中 -->
            <div class="invite-loading" id="invite-loading" style="display: none;">
                <div class="loading-spinner"></div>
                <span>正在產生邀請連結...</span>
            </div>
            
            <!-- 錯誤訊息 -->
            <div class="invite-error" id="invite-error" style="display: none;">
                <i class="fas fa-exclamation-triangle"></i>
                <span id="error-message">發生錯誤</span>
                <button class="btn-retry" id="retry-btn">
                    <i class="fas fa-redo"></i> 重試
                </button>
            </div>
        </div>

        <!-- 功能亮點 -->
        <div class="features-highlight">
            <h3>加入後你可以...</h3>
            <div class="highlight-grid">
                <div class="highlight-item">
                    <div class="highlight-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <span>與 AI 對話</span>
                </div>
                <div class="highlight-item">
                    <div class="highlight-icon">
                        <i class="fab fa-spotify"></i>
                    </div>
                    <span>聽音樂</span>
                </div>
                <div class="highlight-item">
                    <div class="highlight-icon">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <span>找人揪團</span>
                </div>
                <div class="highlight-item">
                    <div class="highlight-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <span>交朋友</span>
                </div>
            </div>
        </div>

        <!-- 備用連結 -->
        <div class="fallback-section">
            <p>邀請連結無法使用？試試這個：</p>
            <a href="https://discord.gg/VzdeVzHfxB" class="fallback-link" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-discord"></i>
                discord.gg/VzdeVzHfxB
            </a>
        </div>
    </div>
</div>

<!-- 分享對話框 -->
<div class="share-modal" id="share-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="share-modal-title">
    <div class="modal-backdrop" id="modal-backdrop" aria-hidden="true"></div>
    <div class="modal-content">
        <button class="modal-close" id="modal-close" aria-label="關閉分享對話框" type="button">
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
        <h3 id="share-modal-title">分享邀請連結</h3>
        <div class="share-options">
            <a href="#" class="share-option" id="share-twitter" target="_blank">
                <i class="fab fa-twitter"></i>
                Twitter
            </a>
            <a href="#" class="share-option" id="share-facebook" target="_blank">
                <i class="fab fa-facebook"></i>
                Facebook
            </a>
            <a href="#" class="share-option" id="share-line" target="_blank">
                <i class="fab fa-line"></i>
                LINE
            </a>
            <button class="share-option" id="share-native">
                <i class="fas fa-share-alt"></i>
                更多選項
            </button>
        </div>
    </div>
</div>

<!-- Toast 通知 -->
<div class="toast-container" id="toast-container"></div>
<script src="/js/invite/invite.js"></script>