Hugging Face's logo

Spaces:
CryPanter14
/
telegram
Running

App Files Community
CryPanter14 commited on
Commit
22647b3
·
verified ·
1 Parent(s): ec76b84

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +229 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Telegram
3
- emoji: 🌍
4
- colorFrom: purple
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: telegram
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,229 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Telegram — Fast and Secure Messaging</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ :root {
12
+ --tg-blue: #0088cc;
13
+ --tg-light: #e6f4ff;
14
+ }
15
+ body {
16
+ font-family: 'Inter', sans-serif;
17
+ overflow-x: hidden;
18
+ }
19
+ .gradient-bg {
20
+ background: radial-gradient(circle at 20% 30%, rgba(0, 136, 204, 0.15) 0%, rgba(0, 136, 204, 0) 50%);
21
+ }
22
+ .btn-primary {
23
+ background-color: var(--tg-blue);
24
+ transition: all 0.3s ease;
25
+ }
26
+ .btn-primary:hover {
27
+ background-color: #0077b3;
28
+ transform: translateY(-2px);
29
+ box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
30
+ }
31
+ .feature-card:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
34
+ }
35
+ .animate-float {
36
+ animation: float 6s ease-in-out infinite;
37
+ }
38
+ @keyframes float {
39
+ 0% { transform: translateY(0px); }
40
+ 50% { transform: translateY(-15px); }
41
+ 100% { transform: translateY(0px); }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-white text-gray-800">
46
+ <!-- Navigation -->
47
+ <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
48
+ <div class="flex items-center space-x-2">
49
+ <i class="fab fa-telegram text-3xl text-blue-500"></i>
50
+ <span class="text-xl font-bold">Telegram</span>
51
+ </div>
52
+ <div class="hidden md:flex items-center space-x-8">
53
+ <a href="#" class="text-gray-600 hover:text-blue-500 transition">Features</a>
54
+ <a href="#" class="text-gray-600 hover:text-blue-500 transition">Apps</a>
55
+ <a href="#" class="text-gray-600 hover:text-blue-500 transition">API</a>
56
+ <a href="#" class="text-gray-600 hover:text-blue-500 transition">FAQ</a>
57
+ <a href="#" class="text-gray-600 hover:text-blue-500 transition">Security</a>
58
+ <a href="#" class="text-gray-600 hover:text-blue-500 transition">Blog</a>
59
+ </div>
60
+ <div class="flex items-center space-x-4">
61
+ <a href="#" class="text-blue-500 hover:text-blue-600 font-medium">Log In</a>
62
+ <a href="#" class="px-4 py-2 rounded-full btn-primary text-white font-medium">Sign Up</a>
63
+ </div>
64
+ <button class="md:hidden text-gray-600">
65
+ <i class="fas fa-bars text-xl"></i>
66
+ </button>
67
+ </nav>
68
+
69
+ <!-- Hero Section -->
70
+ <section class="gradient-bg">
71
+ <div class="container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center">
72
+ <div class="md:w-1/2 mb-12 md:mb-0">
73
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Telegram delivers messages faster than any other application.</h1>
74
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.</p>
75
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
76
+ <button class="px-8 py-3 rounded-full btn-primary text-white font-medium">Download for Free</button>
77
+ <button class="px-8 py-3 rounded-full border border-blue-500 text-blue-500 font-medium hover:bg-blue-50 transition">Web Version</button>
78
+ </div>
79
+ </div>
80
+ <div class="md:w-1/2 flex justify-center">
81
+ <img src="https://telegram.org/img/t_ipad_anim3.png" alt="Telegram App Preview" class="animate-float max-w-md w-full">
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Apps Section -->
87
+ <section class="py-20 bg-gray-50">
88
+ <div class="container mx-auto px-6">
89
+ <h2 class="text-3xl font-bold text-center mb-16">Apps for all your devices</h2>
90
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
91
+ <!-- iOS -->
92
+ <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition text-center">
93
+ <i class="fab fa-apple text-5xl text-gray-700 mb-4"></i>
94
+ <h3 class="text-xl font-bold mb-2">Telegram for iOS</h3>
95
+ <p class="text-gray-600 mb-4">For iPhone, iPad and iPod touch.</p>
96
+ <a href="#" class="text-blue-500 font-medium inline-flex items-center">
97
+ App Store <i class="fas fa-external-link-alt ml-2 text-xs"></i>
98
+ </a>
99
+ </div>
100
+ <!-- Android -->
101
+ <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition text-center">
102
+ <i class="fab fa-android text-5xl text-green-500 mb-4"></i>
103
+ <h3 class="text-xl font-bold mb-2">Telegram for Android</h3>
104
+ <p class="text-gray-600 mb-4">For Android phones and tablets.</p>
105
+ <a href="#" class="text-blue-500 font-medium inline-flex items-center">
106
+ Google Play <i class="fas fa-external-link-alt ml-2 text-xs"></i>
107
+ </a>
108
+ </div>
109
+ <!-- Desktop -->
110
+ <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition text-center">
111
+ <i class="fas fa-desktop text-5xl text-gray-700 mb-4"></i>
112
+ <h3 class="text-xl font-bold mb-2">Telegram Desktop</h3>
113
+ <p class="text-gray-600 mb-4">For Windows, macOS and Linux.</p>
114
+ <a href="#" class="text-blue-500 font-medium inline-flex items-center">
115
+ Download <i class="fas fa-external-link-alt ml-2 text-xs"></i>
116
+ </a>
117
+ </div>
118
+ <!-- Web -->
119
+ <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition text-center">
120
+ <i class="fas fa-globe text-5xl text-blue-500 mb-4"></i>
121
+ <h3 class="text-xl font-bold mb-2">Telegram Web</h3>
122
+ <p class="text-gray-600 mb-4">No installation required.</p>
123
+ <a href="#" class="text-blue-500 font-medium inline-flex items-center">
124
+ Open Web App <i class="fas fa-external-link-alt ml-2 text-xs"></i>
125
+ </a>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </section>
130
+
131
+ <!-- Features Section -->
132
+ <section class="py-20">
133
+ <div class="container mx-auto px-6">
134
+ <h2 class="text-3xl font-bold text-center mb-16">Powerful Features</h2>
135
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
136
+ <!-- Feature 1 -->
137
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
138
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
139
+ <i class="fas fa-lock text-blue-500 text-2xl"></i>
140
+ </div>
141
+ <h3 class="text-xl font-bold mb-3">Private</h3>
142
+ <p class="text-gray-600">Telegram messages are heavily encrypted and can self-destruct.</p>
143
+ </div>
144
+ <!-- Feature 2 -->
145
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
146
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
147
+ <i class="fas fa-bolt text-blue-500 text-2xl"></i>
148
+ </div>
149
+ <h3 class="text-xl font-bold mb-3">Fast</h3>
150
+ <p class="text-gray-600">Telegram delivers messages faster than any other application.</p>
151
+ </div>
152
+ <!-- Feature 3 -->
153
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
154
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
155
+ <i class="fas fa-cloud text-blue-500 text-2xl"></i>
156
+ </div>
157
+ <h3 class="text-xl font-bold mb-3">Cloud-Based</h3>
158
+ <p class="text-gray-600">Telegram lets you access your messages from multiple devices.</p>
159
+ </div>
160
+ <!-- Feature 4 -->
161
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
162
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
163
+ <i class="fas fa-users text-blue-500 text-2xl"></i>
164
+ </div>
165
+ <h3 class="text-xl font-bold mb-3">Groups</h3>
166
+ <p class="text-gray-600">Create group chats with up to 200,000 members.</p>
167
+ </div>
168
+ <!-- Feature 5 -->
169
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
170
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
171
+ <i class="fas fa-robot text-blue-500 text-2xl"></i>
172
+ </div>
173
+ <h3 class="text-xl font-bold mb-3">Bots</h3>
174
+ <p class="text-gray-600">Powerful bots that get things done, automate tasks and entertain.</p>
175
+ </div>
176
+ <!-- Feature 6 -->
177
+ <div class="feature-card bg-white rounded-xl p-8 shadow-md transition duration-300">
178
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
179
+ <i class="fas fa-file-alt text-blue-500 text-2xl"></i>
180
+ </div>
181
+ <h3 class="text-xl font-bold mb-3">Files</h3>
182
+ <p class="text-gray-600">Send files of any type up to 2GB each and access them anywhere.</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- Stats Section -->
189
+ <section class="py-20 bg-blue-500 text-white">
190
+ <div class="container mx-auto px-6 text-center">
191
+ <h2 class="text-3xl font-bold mb-16">Telegram by the Numbers</h2>
192
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
193
+ <div>
194
+ <div class="text-4xl font-bold mb-2">700M+</div>
195
+ <div class="text-xl">Monthly Active Users</div>
196
+ </div>
197
+ <div>
198
+ <div class="text-4xl font-bold mb-2">2.5B+</div>
199
+ <div class="text-xl">Daily Messages</div>
200
+ </div>
201
+ <div>
202
+ <div class="text-4xl font-bold mb-2">500K+</div>
203
+ <div class="text-xl">Active Bots</div>
204
+ </div>
205
+ <div>
206
+ <div class="text-4xl font-bold mb-2">180</div>
207
+ <div class="text-xl">Countries Reached</div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- Testimonials -->
214
+ <section class="py-20 bg-gray-50">
215
+ <div class="container mx-auto px-6">
216
+ <h2 class="text-3xl font-bold text-center mb-16">What People Say About Telegram</h2>
217
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
218
+ <!-- Testimonial 1 -->
219
+ <div class="bg-white rounded-xl p-8 shadow-md">
220
+ <div class="flex items-center mb-4">
221
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
222
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="User" class="w-full h-full object-cover">
223
+ </div>
224
+ <div>
225
+ <h4 class="font-bold">Sarah Johnson</h4>
226
+ <p class="text-gray-600 text-sm">Tech Journalist</p>
227
+ </div>
228
+
229
+ </html>