Hugging Face's logo

Spaces:
tahatehrani
/
taja
Running

App Files Community
taja
File size: 7,268 Bytes 
8d7d0e7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سامانه اطلاعات اتوبوس</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/moment-jalaali@0.9.2/build/moment-jalaali.js"></script>
    <style>
        body {
            font-family: 'Vazirmatn', sans-serif;
            background: linear-gradient(45deg, #3490dc, #6574cd, #9561e2, #f66d9b);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .glass {
            background: rgba(255, 255, 255, 0.25);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .loading {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .bus-icon {
            animation: drive 5s linear infinite;
        }
        @keyframes drive {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <header class="glass text-white p-4 mb-8">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">سامانه اطلاعات اتوبوس</h1>
            <div id="clock" class="text-xl font-semibold"></div>
        </div>
    </header>

    <main class="flex-grow container mx-auto px-4 py-8">
        <div class="glass p-6 mb-8 max-w-3xl mx-auto">
            <form id="search-form" class="mb-4">
                <div class="flex flex-col sm:flex-row">
                    <input type="text" id="station-id" class="flex-grow px-4 py-2 rounded-lg sm:rounded-l-none border-2 border-blue-500 focus:outline-none focus:border-blue-600 mb-2 sm:mb-0" placeholder="کد ایستگاه را وارد کنید" required>
                    <button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-lg sm:rounded-r-lg hover:bg-blue-600 transition-colors duration-200">جستجو</button>
                </div>
            </form>
            <div id="error" class="text-red-500"></div>
            <div class="relative overflow-hidden h-8">
                <svg class="bus-icon h-8 w-8 text-blue-500 absolute" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2M8 7H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-2M9 7h6" />
                </svg>
            </div>
        </div>

        <div id="loading" class="hidden flex justify-center items-center mb-4">
            <div class="loading"></div>
        </div>

        <div id="result" class="glass p-6 max-w-3xl mx-auto"></div>
    </main>

    <footer class="glass text-white p-4 mt-8">
        <div class="container mx-auto text-center">
            <p>© ۱۴۰۳ سامانه اطلاعات اتوبوس. تمامی حقوق محفوظ است.</p>
        </div>
    </footer>

    <script>
        const form = document.getElementById('search-form');
        const stationIdInput = document.getElementById('station-id');
        const errorDiv = document.getElementById('error');
        const resultDiv = document.getElementById('result');
        const loadingDiv = document.getElementById('loading');
        const clockDiv = document.getElementById('clock');

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const stationId = stationIdInput.value.trim();
            
            if (!stationId) {
                showError('لطفاً کد ایستگاه را وارد کنید.');
                return;
            }

            try {
                showLoading();
                const data = await fetchStationData(stationId);
                hideLoading();
                showResult(data);
            } catch (error) {
                hideLoading();
                showError('خطایی در دریافت اطلاعات رخ داد. لطفاً دوباره تلاش کنید.');
            }
        });

        function showError(message) {
            errorDiv.textContent = message;
            resultDiv.innerHTML = '';
        }

        function showLoading() {
            loadingDiv.classList.remove('hidden');
            resultDiv.innerHTML = '';
        }

        function hideLoading() {
            loadingDiv.classList.add('hidden');
        }

        function showResult(data) {
            errorDiv.textContent = '';
            let html = '<h2 class="text-xl font-semibold mb-4">اطلاعات ایستگاه</h2>';
            html += '<div class="overflow-x-auto"><table class="w-full table-auto">';
            html += '<thead><tr class="bg-blue-100"><th class="px-4 py-2">مسیر</th><th class="px-4 py-2">اطلاعات</th></tr></thead><tbody>';
            
            data.forEach((item, index) => {
                html += `<tr class="${index % 2 === 0 ? 'bg-white' : 'bg-blue-50'}">`;
                html += `<td class="border px-4 py-2 font-semibold">مسیر ${item.route_code}</td>`;
                html += `<td class="border px-4 py-2">
                    <p><span class="font-medium">زمان تقریبی رسیدن:</span> ${item.eta}</p>
                    <p><span class="font-medium">مقصد:</span> ${item.destination_name}</p>
                    <p><span class="font-medium">اتوبوس:</span> ${item.bus}</p>
                    <p><span class="font-medium">نوع:</span> ${item.route_type}</p>
                </td>`;
                html += '</tr>';
            });
            
            html += '</tbody></table></div>';
            resultDiv.innerHTML = html;
        }

        function updateClock() {
            const now = moment();
            const jalaliDate = now.format('jYYYY/jMM/jDD');
            const time = now.format('HH:mm:ss');
            clockDiv.textContent = `${jalaliDate} ${time}`;
        }

        setInterval(updateClock, 1000);
        updateClock();

        async function fetchStationData(stationId) {
            const response = await fetch(`http://server1.ththt.ir:9204/api/update_eta/${stationId}`);
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return await response.json();
        }
    </script>
</body>
</html>