Spaces:

raineye
/

ds

Running

App Files Files Community

raineye commited on Apr 6, 2025

Commit

3b6855c

verified ·

1 Parent(s): c4fe9cb

Add 1 files

Browse files

Files changed (1) hide show

index.html +152 -4

index.html CHANGED Viewed

@@ -59,6 +59,16 @@
         .recording-animation {
             animation: pulse 1.5s infinite;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden">
@@ -74,10 +84,10 @@
             <button id="theme-toggle" class="text-gray-400 hover:text-white transition-colors">
                 <i class="fas fa-moon"></i>
             </button>
-            <button class="text-gray-400 hover:text-white transition-colors">
                 <i class="fas fa-cog"></i>
             </button>
-            <button class="text-gray-400 hover:text-white transition-colors">
                 <i class="fas fa-user"></i>
             </button>
         </div>
@@ -164,7 +174,7 @@
     <!-- 文件选择模态框 -->
     <div id="file-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-medium text-white">选择文件</h3>
                 <button id="close-file-modal" class="text-gray-400 hover:text-white">
@@ -196,7 +206,7 @@
     <!-- 语音录制模态框 -->
     <div id="voice-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-medium text-white">语音输入</h3>
                 <button id="close-voice-modal" class="text-gray-400 hover:text-white">
@@ -231,6 +241,101 @@
         </div>
     </div>
     <script>
         // 自动调整输入框高度
         function autoResize(textarea) {
@@ -540,6 +645,49 @@
                 `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
         }
         // 辅助函数：格式化文件大小
         function formatFileSize(bytes) {
             if (bytes === 0) return '0 Bytes';

         .recording-animation {
             animation: pulse 1.5s infinite;
         }
+        /* 模态框动画 */
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .modal-animation {
+            animation: modalFadeIn 0.3s ease-out;
+        }
     </style>
 </head>
 <body class="bg-gray-900 text-gray-100 h-screen flex flex-col overflow-hidden">
             <button id="theme-toggle" class="text-gray-400 hover:text-white transition-colors">
                 <i class="fas fa-moon"></i>
             </button>
+            <button id="settings-button" class="text-gray-400 hover:text-white transition-colors">
                 <i class="fas fa-cog"></i>
             </button>
+            <button id="user-button" class="text-gray-400 hover:text-white transition-colors">
                 <i class="fas fa-user"></i>
             </button>
         </div>
     <!-- 文件选择模态框 -->
     <div id="file-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-medium text-white">选择文件</h3>
                 <button id="close-file-modal" class="text-gray-400 hover:text-white">
     <!-- 语音录制模态框 -->
     <div id="voice-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-medium text-white">语音输入</h3>
                 <button id="close-voice-modal" class="text-gray-400 hover:text-white">
         </div>
     </div>
+    <!-- 设置模态框 -->
+    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium text-white">设置</h3>
+                <button id="close-settings-modal" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-gray-300 mb-2">语言</label>
+                    <select class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option>简体中文</option>
+                        <option>English</option>
+                        <option>Español</option>
+                        <option>日本語</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-gray-300 mb-2">回答长度</label>
+                    <select class="w-full bg-gray-700 border border-gray-600 rounded-lg py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option>简短</option>
+                        <option selected>中等</option>
+                        <option>详细</option>
+                    </select>
+                </div>
+                <div class="flex items-center justify-between">
+                    <span class="text-gray-300">历史记录</span>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="sr-only peer" checked>
+                        <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                </div>
+                <div class="flex items-center justify-between">
+                    <span class="text-gray-300">阅读模式</span>
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="sr-only peer">
+                        <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    </label>
+                </div>
+            </div>
+            <div class="mt-6 flex justify-end space-x-3">
+                <button id="cancel-settings" class="px-4 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700">
+                    取消
+                </button>
+                <button id="save-settings" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">
+                    保存设置
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- 用户信息模态框 -->
+    <div id="user-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md modal-animation">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium text-white">用户信息</h3>
+                <button id="close-user-modal" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="flex flex-col items-center mb-6">
+                <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mb-3">
+                    <i class="fas fa-user text-3xl text-white"></i>
+                </div>
+                <h4 class="text-white font-medium">访客用户</h4>
+                <p class="text-gray-400 text-sm">未登录</p>
+            </div>
+            <div class="space-y-3">
+                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                    <span class="text-gray-300">登录/注册</span>
+                    <i class="fas fa-chevron-right text-gray-400"></i>
+                </button>
+                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                    <span class="text-gray-300">订阅计划</span>
+                    <i class="fas fa-chevron-right text-gray-400"></i>
+                </button>
+                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                    <span class="text-gray-300">帮助中心</span>
+                    <i class="fas fa-chevron-right text-gray-400"></i>
+                </button>
+                <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors">
+                    <span class="text-gray-300">反馈建议</span>
+                    <i class="fas fa-chevron-right text-gray-400"></i>
+                </button>
+            </div>
+            <div class="mt-6">
+                <button id="logout-button" class="w-full px-4 py-2 rounded-lg border border-gray-600 text-gray-300 hover:bg-gray-700">
+                    退出登录
+                </button>
+            </div>
+        </div>
+    </div>
     <script>
         // 自动调整输入框高度
         function autoResize(textarea) {
                 `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
         }
+        // 设置功能
+        const settingsModal = document.getElementById('settings-modal');
+        const settingsButton = document.getElementById('settings-button');
+        const closeSettingsModal = document.getElementById('close-settings-modal');
+        const cancelSettings = document.getElementById('cancel-settings');
+        const saveSettings = document.getElementById('save-settings');
+        settingsButton.addEventListener('click', () => {
+            settingsModal.classList.remove('hidden');
+        });
+        closeSettingsModal.addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+        });
+        cancelSettings.addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+        });
+        saveSettings.addEventListener('click', () => {
+            alert('设置已保存');
+            settingsModal.classList.add('hidden');
+        });
+        // 用户功能
+        const userModal = document.getElementById('user-modal');
+        const userButton = document.getElementById('user-button');
+        const closeUserModal = document.getElementById('close-user-modal');
+        const logoutButton = document.getElementById('logout-button');
+        userButton.addEventListener('click', () => {
+            userModal.classList.remove('hidden');
+        });
+        closeUserModal.addEventListener('click', () => {
+            userModal.classList.add('hidden');
+        });
+        logoutButton.addEventListener('click', () => {
+            alert('您已退出登录');
+            userModal.classList.add('hidden');
+        });
         // 辅助函数：格式化文件大小
         function formatFileSize(bytes) {
             if (bytes === 0) return '0 Bytes';