file-transfer-go/web/templates/index.html

{{define "content"}}
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto">
            <!-- 标题 -->
            <div class="text-center mb-8">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">P2P文件传输</h1>
                <p class="text-gray-600">选择文件自动生成取件码，对方输入取件码即可在线下载</p>
            </div>

            <!-- 主界面 -->
            <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
                <!-- 发送文件区域 -->
                <div id="senderSection" class="mb-8">
                    <h3 class="text-xl font-semibold mb-4">📤 发送文件</h3>
                    
                    <!-- 文件选择区域 -->
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors cursor-pointer" 
                         onclick="document.getElementById('fileInput').click()">
                        <div class="text-6xl mb-4">📁</div>
                        <p class="text-lg mb-2">点击选择文件或拖拽文件到此处</p>
                        <p class="text-gray-500">支持多文件选择</p>
                        <input type="file" id="fileInput" multiple class="hidden">
                    </div>

                    <!-- 选中的文件列表 -->
                    <div id="selectedFiles" class="mt-6 hidden">
                        <h4 class="font-semibold mb-3">已选择的文件：</h4>
                        <div id="filesList" class="space-y-2 max-h-60 overflow-y-auto"></div>
                        <div class="mt-4 text-center">
                            <button id="generateCodeBtn" onclick="generatePickupCode()" 
                                    class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold">
                                🎯 生成取件码
                            </button>
                        </div>
                    </div>

                    <!-- 取件码显示 -->
                    <div id="pickupCodeSection" class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg hidden">
                        <div class="text-center">
                            <h4 class="font-semibold text-green-800 mb-2">取件码已生成</h4>
                            <div class="text-3xl font-mono font-bold text-green-600 mb-2" id="pickupCodeDisplay"></div>
                            <p class="text-green-700 mb-4">请将此取件码发送给对方</p>
                            <div class="flex justify-center space-x-3">
                                <button onclick="copyPickupCode()" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
                                    📋 复制取件码
                                </button>
                                <button onclick="resetSender()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">
                                    🔄 重新选择文件
                                </button>
                            </div>
                        </div>
                        
                        <!-- 连接状态 -->
                        <div id="senderStatus" class="mt-4 text-center">
                            <div class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-100 text-yellow-800">
                                <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span>
                                等待接收方连接...
                            </div>
                        </div>
                        
                        <!-- 房间状态显示 -->
                        <div id="roomStatusSection" class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg hidden">
                            <h5 class="font-semibold text-blue-800 mb-2">房间状态</h5>
                            <div id="roomConnections" class="text-sm text-blue-700">
                                <div>在线用户: <span id="onlineCount">0</span> 人</div>
                                <div>发送方: <span id="senderCount">0</span> 人</div>
                                <div>接收方: <span id="receiverCount">0</span> 人</div>
                            </div>
                            <div id="clientsList" class="mt-2 space-y-1"></div>
                        </div>
                    </div>
                </div>

                <!-- 分隔线 -->
                <div class="border-t border-gray-200 my-8"></div>

                <!-- 接收文件区域 -->
                <div id="receiverSection">
                    <h3 class="text-xl font-semibold mb-4">📥 接收文件</h3>
                    
                    <!-- 取件码输入 -->
                    <div id="codeInputSection">
                        <div class="flex justify-center mb-4">
                            <div class="flex flex-col items-center max-w-md w-full">
                                <input type="text" id="pickupCodeInput" placeholder="输入6位取件码" maxlength="6"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg text-center text-2xl font-mono font-bold uppercase mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <button onclick="joinRoom()" class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-semibold">
                                    🔗 连接并获取文件
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 文件列表显示 -->
                    <div id="receiverFilesSection" class="hidden">
                        <h4 class="font-semibold mb-3">可下载的文件：</h4>
                        <div id="receiverFilesList" class="space-y-2"></div>
                        
                        <!-- 接收状态 -->
                        <div id="receiverStatus" class="mt-4 text-center">
                            <div class="inline-flex items-center px-3 py-1 rounded-full bg-green-100 text-green-800">
                                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                已连接，可以下载文件
                            </div>
                        </div>
                        
                        <!-- 房间状态显示 (接收方) -->
                        <div id="receiverRoomStatusSection" class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                            <h5 class="font-semibold text-blue-800 mb-2">房间状态</h5>
                            <div id="receiverRoomConnections" class="text-sm text-blue-700">
                                <div>在线用户: <span id="receiverOnlineCount">0</span> 人</div>
                                <div>发送方: <span id="receiverSenderCount">0</span> 人</div>
                                <div>接收方: <span id="receiverReceiverCount">0</span> 人</div>
                            </div>
                            <div id="receiverClientsList" class="mt-2 space-y-1"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 传输进度 -->
            <div id="transferProgress" class="bg-white rounded-xl shadow-lg p-6 hidden">
                <h3 class="text-xl font-semibold mb-4">传输进度</h3>
                <div id="progressList" class="space-y-3"></div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<!-- P2P文件传输相关脚本 -->
<script src="/static/js/p2p-transfer-new.js"></script>
{{end}}