Spaces:

duqing26
/

remote-team-clock

Sleeping

App Files Files Community

duqing2026 commited on 23 days ago

Commit

082aeb1

0 Parent(s):

Initial commit: Remote Team Clock

Browse files

Files changed (4) hide show

Dockerfile +16 -0
README.md +42 -0
app.py +15 -0
templates/index.html +432 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,16 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY . /app
+RUN pip install --no-cache-dir flask gunicorn
+# Create a non-root user
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,42 @@

+---
+title: Remote Team Clock
+emoji: ⏰
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+---
+# 远程团队时钟 (Remote Team Clock)
+一个为远程团队设计的可视化时区协作工具。
+## 功能特点
+- 🌍 **多时区支持**：轻松添加位于世界各地的团队成员
+- ⏱️ **可视化时间轴**：直观展示每个人当前的当地时间
+- 📅 **会议规划**：拖动滑块，快速找到适合所有人的会议时间
+- 🌓 **昼夜显示**：自动识别工作时间（绿色）、休息时间（蓝色）和深夜（深色）
+- 🔒 **隐私安全**：所有数据仅存储在本地浏览器，不上传服务器
+## 技术栈
+- **Backend**: Flask (Python)
+- **Frontend**: Vue 3 + Tailwind CSS
+- **Library**: Day.js (Timezone handling)
+## 部署说明
+本项目已配置 Dockerfile，可直接部署至 Hugging Face Spaces。
+```bash
+# 本地运行
+pip install flask
+python app.py
+```
+## 关于
+Designed for remote teams to synchronize effectively.

app.py ADDED Viewed

	@@ -0,0 +1,15 @@

+from flask import Flask, render_template, send_from_directory
+import os
+app = Flask(__name__, static_folder='static', template_folder='templates')
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/static/<path:path>')
+def serve_static(path):
+    return send_from_directory('static', path)
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

templates/index.html ADDED Viewed

	@@ -0,0 +1,432 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>远程团队时钟 (Remote Team Clock)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/zh-cn.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <script>
+        dayjs.extend(window.dayjs_plugin_utc);
+        dayjs.extend(window.dayjs_plugin_timezone);
+        dayjs.locale('zh-cn');
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#10b981',
+                        night: '#1e293b',
+                        day: '#f0f9ff'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .slider-thumb::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #3b82f6;
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        .time-slot {
+            transition: all 0.3s ease;
+        }
+        .time-slot:hover {
+            transform: scale(1.05);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 min-h-screen font-sans">
+    <div id="app" class="container mx-auto px-4 py-8 max-w-5xl">
+        <!-- Header -->
+        <header class="mb-8 text-center">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">
+                <i class="fas fa-clock text-primary mr-2"></i>远程团队时钟
+            </h1>
+            <p class="text-gray-500">可视化跨时区协作，轻松找到最佳会议时间</p>
+        </header>
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Column: Controls & Members -->
+            <div class="lg:col-span-1 space-y-6">
+                <!-- Add Member Card -->
+                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
+                    <h2 class="text-xl font-semibold mb-4 flex items-center">
+                        <i class="fas fa-user-plus text-secondary mr-2"></i>添加成员
+                    </h2>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">姓名 / 角色</label>
+                            <input v-model="newMember.name" type="text" placeholder="例如：产品经理" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">城市 / 时区</label>
+                            <select v-model="newMember.timezone" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none bg-white">
+                                <option value="" disabled>选择时区</option>
+                                <option v-for="tz in commonTimezones" :key="tz.value" :value="tz.value">
+                                    {{ tz.label }} ({{ formatOffset(tz.value) }})
+                                </option>
+                            </select>
+                        </div>
+                        <button @click="addMember" :disabled="!newMember.name || !newMember.timezone" class="w-full bg-primary hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
+                            <i class="fas fa-plus mr-1"></i> 添加
+                        </button>
+                    </div>
+                </div>
+                <!-- Current Time Display -->
+                <div class="bg-gradient-to-br from-night to-slate-800 text-white rounded-xl shadow-lg p-6">
+                    <div class="text-center">
+                        <div class="text-sm opacity-75 mb-1">我的本地时间</div>
+                        <div class="text-3xl font-mono font-bold">{{ localTimeStr }}</div>
+                        <div class="text-xs opacity-50 mt-1">{{ localDateStr }}</div>
+                    </div>
+                </div>
+                <!-- Member List (Compact) -->
+                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 max-h-[400px] overflow-y-auto">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-semibold">团队成员 ({{ members.length }})</h2>
+                        <button @click="resetMembers" class="text-xs text-red-500 hover:text-red-700 underline">重置</button>
+                    </div>
+                    <div v-if="members.length === 0" class="text-center text-gray-400 py-8">
+                        暂无成员，请添加
+                    </div>
+                    <ul class="space-y-3">
+                        <li v-for="(member, index) in members" :key="index" class="flex justify-between items-center group p-2 hover:bg-gray-50 rounded-lg transition">
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold mr-3 text-xs">
+                                    {{ getInitials(member.name) }}
+                                </div>
+                                <div>
+                                    <div class="font-medium text-sm">{{ member.name }}</div>
+                                    <div class="text-xs text-gray-500">{{ getCityName(member.timezone) }}</div>
+                                </div>
+                            </div>
+                            <button @click="removeMember(index)" class="text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition">
+                                <i class="fas fa-trash-alt"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <!-- Right Column: Visualization -->
+            <div class="lg:col-span-2 space-y-6">
+                <!-- Timeline Controller -->
+                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
+                    <div class="flex justify-between items-end mb-4">
+                        <div>
+                            <h2 class="text-xl font-semibold flex items-center">
+                                <i class="fas fa-sliders-h text-primary mr-2"></i>会议时间规划
+                            </h2>
+                            <p class="text-sm text-gray-500 mt-1">拖动滑块查看不同时间的团队状态</p>
+                        </div>
+                        <div class="text-right">
+                            <div class="text-2xl font-bold text-primary">{{ formatTime(selectedHour) }}</div>
+                            <div class="text-xs text-gray-500">基准时间 (我的时区)</div>
+                        </div>
+                    </div>
+                    <div class="relative pt-6 pb-2">
+                        <input type="range" min="0" max="23" step="1" v-model.number="selectedHour"
+                            class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
+                        <div class="flex justify-between text-xs text-gray-400 mt-2">
+                            <span>00:00</span>
+                            <span>06:00</span>
+                            <span>12:00</span>
+                            <span>18:00</span>
+                            <span>23:00</span>
+                        </div>
+                    </div>
+                    <div class="mt-4 flex justify-center space-x-4 text-sm">
+                        <button @click="selectedHour = Math.max(0, selectedHour - 1)" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded text-gray-600">
+                            <i class="fas fa-minus mr-1"></i> -1小时
+                        </button>
+                        <button @click="setNow" class="px-3 py-1 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded font-medium">
+                            回到现在
+                        </button>
+                        <button @click="selectedHour = Math.min(23, selectedHour + 1)" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded text-gray-600">
+                            +1小时 <i class="fas fa-plus ml-1"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Team Timeline Grid -->
+                <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 overflow-x-auto">
+                    <h3 class="font-semibold text-gray-700 mb-4">团队时间概览</h3>
+                    <div class="space-y-4 min-w-[500px]">
+                        <div v-for="(member, index) in members" :key="index" class="relative">
+                            <div class="flex items-center mb-2">
+                                <div class="w-24 font-medium text-sm truncate mr-2" :title="member.name">{{ member.name }}</div>
+                                <div class="flex-1 h-12 flex rounded-lg overflow-hidden border border-gray-100">
+                                    <!-- Render 24 hour blocks centered around selected time? No, show current selected time explicitly -->
+                                    <!-- Better: Show a single bar with the time at selectedHour -->
+                                    <div class="w-full flex items-center px-4 rounded-lg transition-colors duration-300"
+                                         :class="getSlotClass(member.timezone)">
+                                        <div class="text-2xl mr-3">
+                                            <i :class="getIcon(member.timezone)"></i>
+                                        </div>
+                                        <div>
+                                            <div class="text-xl font-bold">
+                                                {{ getMemberTime(member.timezone) }}
+                                            </div>
+                                            <div class="text-xs opacity-75">
+                                                {{ getMemberDateDiff(member.timezone) }}
+                                            </div>
+                                        </div>
+                                        <div class="ml-auto text-right">
+                                            <div class="text-xs font-bold uppercase tracking-wide opacity-60">
+                                                {{ getPeriod(member.timezone) }}
+                                            </div>
+                                            <div class="text-xs opacity-50">
+                                                {{ getCityName(member.timezone) }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Legend -->
+                    <div class="mt-6 flex flex-wrap gap-4 text-xs text-gray-500 justify-center border-t pt-4">
+                        <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-green-100 border border-green-300 mr-1"></span> 工作时间 (9-18)</div>
+                        <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-blue-50 border border-blue-200 mr-1"></span> 休息/早晚</div>
+                        <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-slate-800 border border-slate-600 mr-1"></span> 深夜 (22-7)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer class="mt-12 text-center text-gray-400 text-sm">
+            <p>© 2025 Remote Team Clock. Built with Flask, Vue 3 & Tailwind.</p>
+        </footer>
+    </div>
+    <script>
+        const { createApp, ref, computed, onMounted, watch } = Vue;
+        createApp({
+            setup() {
+                const now = dayjs();
+                const selectedHour = ref(now.hour());
+                const currentMinute = ref(now.minute());
+                // Common Timezones
+                const commonTimezones = [
+                    { label: '北京/上海 (UTC+8)', value: 'Asia/Shanghai' },
+                    { label: '东京 (UTC+9)', value: 'Asia/Tokyo' },
+                    { label: '悉尼 (UTC+11)', value: 'Australia/Sydney' },
+                    { label: '伦敦 (UTC+0)', value: 'Europe/London' },
+                    { label: '巴黎/柏林 (UTC+1)', value: 'Europe/Paris' },
+                    { label: '纽约 (UTC-5)', value: 'America/New_York' },
+                    { label: '旧金山/硅谷 (UTC-8)', value: 'America/Los_Angeles' },
+                    { label: '芝加哥 (UTC-6)', value: 'America/Chicago' },
+                    { label: '迪拜 (UTC+4)', value: 'Asia/Dubai' },
+                    { label: '新加坡 (UTC+8)', value: 'Asia/Singapore' },
+                    { label: '孟买 (UTC+5:30)', value: 'Asia/Kolkata' },
+                ];
+                const newMember = ref({ name: '', timezone: '' });
+                const members = ref([]);
+                // Load from local storage
+                onMounted(() => {
+                    const saved = localStorage.getItem('rtc_members');
+                    if (saved) {
+                        members.value = JSON.parse(saved);
+                    } else {
+                        // Default members
+                        members.value = [
+                            { name: '我 (北京)', timezone: 'Asia/Shanghai' },
+                            { name: 'Alice (伦敦)', timezone: 'Europe/London' },
+                            { name: 'Bob (纽约)', timezone: 'America/New_York' }
+                        ];
+                    }
+                    // Update current minute every minute to keep display accurate-ish
+                    setInterval(() => {
+                        currentMinute.value = dayjs().minute();
+                    }, 60000);
+                });
+                watch(members, (newVal) => {
+                    localStorage.setItem('rtc_members', JSON.stringify(newVal));
+                }, { deep: true });
+                const addMember = () => {
+                    if (newMember.value.name && newMember.value.timezone) {
+                        members.value.push({ ...newMember.value });
+                        newMember.value = { name: '', timezone: '' };
+                    }
+                };
+                const removeMember = (index) => {
+                    members.value.splice(index, 1);
+                };
+                const resetMembers = () => {
+                    if(confirm('确定要重置所有成员吗？')) {
+                        members.value = [];
+                        localStorage.removeItem('rtc_members');
+                    }
+                };
+                const setNow = () => {
+                    selectedHour.value = dayjs().hour();
+                };
+                const formatTime = (hour) => {
+                    return `${String(hour).padStart(2, '0')}:00`;
+                };
+                const getInitials = (name) => {
+                    return name ? name.substring(0, 2).toUpperCase() : '?';
+                };
+                const getCityName = (tz) => {
+                    return tz.split('/')[1].replace('_', ' ');
+                };
+                const formatOffset = (tz) => {
+                    return dayjs().tz(tz).format('Z');
+                };
+                // Core logic to calculate time for a member based on selectedHour (which is in local user's timezone)
+                const getMemberDayjs = (tz) => {
+                    // 1. Get "today" at "selectedHour" in LOCAL time
+                    const localTarget = dayjs().hour(selectedHour.value).minute(0);
+                    // 2. Convert this instant to the target timezone
+                    return localTarget.tz(tz);
+                };
+                const getMemberTime = (tz) => {
+                    return getMemberDayjs(tz).format('HH:mm');
+                };
+                const getMemberDateDiff = (tz) => {
+                    const target = getMemberDayjs(tz);
+                    const local = dayjs().hour(selectedHour.value).minute(0);
+                    const diff = target.date() - local.date();
+                    if (diff === 0) return '今天';
+                    if (diff === 1 || diff < -20) return '明天 (+1天)'; // simplistic check
+                    if (diff === -1 || diff > 20) return '昨天 (-1天)';
+                    return target.format('MM-DD');
+                };
+                const getPeriod = (tz) => {
+                    const hour = getMemberDayjs(tz).hour();
+                    if (hour >= 5 && hour < 12) return '上午';
+                    if (hour >= 12 && hour < 18) return '下午';
+                    return '晚上';
+                };
+                const getIcon = (tz) => {
+                    const hour = getMemberDayjs(tz).hour();
+                    if (hour >= 6 && hour < 18) return 'fas fa-sun text-yellow-500';
+                    return 'fas fa-moon text-blue-300';
+                };
+                const getSlotClass = (tz) => {
+                    const hour = getMemberDayjs(tz).hour();
+                    // Working hours: 9 - 18 (Green)
+                    // Sleeping: 22 - 7 (Dark)
+                    // Others: Light Blue
+                    if (hour >= 9 && hour < 18) {
+                        return 'bg-green-100 text-green-900 border-green-200';
+                    } else if (hour >= 22 || hour < 7) {
+                        return 'bg-slate-800 text-slate-100 border-slate-700';
+                    } else {
+                        return 'bg-blue-50 text-blue-800 border-blue-200';
+                    }
+                };
+                const localTimeStr = computed(() => {
+                    return dayjs().format('HH:mm:ss');
+                });
+                const localDateStr = computed(() => {
+                    return dayjs().format('YYYY年MM月DD日 dddd');
+                });
+                // Update real-time clock
+                setInterval(() => {
+                    // Trigger reactivity for localTimeStr
+                    // But we are using computed without ref dependency?
+                    // Need a ref to trigger re-calc.
+                    // Actually dayjs() is not reactive.
+                    // Let's use a trigger.
+                }, 1000);
+                const nowTrigger = ref(Date.now());
+                setInterval(() => {
+                    nowTrigger.value = Date.now();
+                }, 1000);
+                const reactiveLocalTime = computed(() => {
+                    nowTrigger.value; // dependency
+                    return dayjs().format('HH:mm:ss');
+                });
+                const reactiveLocalDate = computed(() => {
+                    nowTrigger.value;
+                    return dayjs().format('YYYY年MM月DD日 dddd');
+                });
+                return {
+                    selectedHour,
+                    members,
+                    newMember,
+                    commonTimezones,
+                    addMember,
+                    removeMember,
+                    resetMembers,
+                    setNow,
+                    formatTime,
+                    getInitials,
+                    getCityName,
+                    formatOffset,
+                    getMemberTime,
+                    getMemberDateDiff,
+                    getPeriod,
+                    getIcon,
+                    getSlotClass,
+                    localTimeStr: reactiveLocalTime,
+                    localDateStr: reactiveLocalDate
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>