Hugging Face's logo

Spaces:
Hamed744
/
Testhtml
Running

App Files Community
Hamed744 commited on
Commit
0d3d9ff
·
verified ·
1 Parent(s): ed22ae5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +186 -19
index.html CHANGED
@@ -1,19 +1,186 @@
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="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>آپلود و ارتقاء اشتراک</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary: #7b2ff7;
11
+ --secondary: #f107a3;
12
+ --accent: #ffc107;
13
+ --text-dark: #2c3e50;
14
+ --text-light: #6c757d;
15
+ --bg-light: #f8f9fa;
16
+ --card-bg: #fff;
17
+ --border: #e0e0e0;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Vazirmatn', sans-serif;
22
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ min-height: 100vh;
27
+ margin: 0;
28
+ color: var(--text-dark);
29
+ }
30
+
31
+ .container {
32
+ background: var(--card-bg);
33
+ padding: 40px;
34
+ border-radius: 20px;
35
+ box-shadow: 0 10px 30px rgba(0,0,0,0.08);
36
+ max-width: 600px;
37
+ width: 90%;
38
+ text-align: center;
39
+ animation: fadeIn 0.6s ease;
40
+ }
41
+
42
+ .svg-icon {
43
+ width: 90px;
44
+ height: 90px;
45
+ color: var(--accent);
46
+ filter: drop-shadow(0 4px 8px rgba(255,193,7,0.3));
47
+ margin-bottom: 20px;
48
+ transition: transform 0.3s ease;
49
+ }
50
+ .container:hover .svg-icon {
51
+ transform: translateY(-5px);
52
+ }
53
+
54
+ h2 {
55
+ font-size: 2em;
56
+ color: var(--primary);
57
+ margin-bottom: 15px;
58
+ }
59
+
60
+ p {
61
+ color: var(--text-light);
62
+ font-size: 1.1em;
63
+ margin-bottom: 30px;
64
+ line-height: 1.8;
65
+ }
66
+
67
+ .upload-area {
68
+ border: 2px dashed var(--border);
69
+ border-radius: 15px;
70
+ padding: 35px;
71
+ background: var(--bg-light);
72
+ cursor: not-allowed;
73
+ transition: all 0.3s ease;
74
+ }
75
+ .upload-area:hover {
76
+ border-color: var(--secondary);
77
+ background: #f1f3f5;
78
+ }
79
+ .upload-area svg {
80
+ width: 60px;
81
+ height: 60px;
82
+ fill: #a0a0a0;
83
+ margin-bottom: 15px;
84
+ transition: fill 0.3s ease, transform 0.3s ease;
85
+ }
86
+ .upload-area:hover svg {
87
+ fill: var(--secondary);
88
+ transform: translateY(-5px);
89
+ }
90
+ .upload-area p {
91
+ margin: 0;
92
+ font-size: 1em;
93
+ color: #888;
94
+ }
95
+
96
+ .buttons {
97
+ display: flex;
98
+ justify-content: center;
99
+ gap: 15px;
100
+ margin-top: 25px;
101
+ flex-wrap: wrap;
102
+ }
103
+ button {
104
+ padding: 12px 25px;
105
+ border: none;
106
+ border-radius: 8px;
107
+ font-size: 1em;
108
+ font-weight: 600;
109
+ cursor: pointer;
110
+ transition: all 0.3s ease;
111
+ }
112
+ .upgrade-button {
113
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
114
+ color: #fff;
115
+ position: relative;
116
+ overflow: hidden;
117
+ }
118
+ .upgrade-button::before {
119
+ content: '';
120
+ position: absolute;
121
+ top: 0; left: -100%;
122
+ width: 100%; height: 100%;
123
+ background: rgba(255,255,255,0.2);
124
+ transform: skewX(-30deg);
125
+ transition: left 0.4s ease;
126
+ }
127
+ .upgrade-button:hover::before {
128
+ left: 100%;
129
+ }
130
+ .upgrade-button:hover {
131
+ transform: translateY(-3px);
132
+ box-shadow: 0 8px 20px rgba(123,47,247,0.3);
133
+ }
134
+ .later-button {
135
+ background: var(--border);
136
+ color: var(--text-dark);
137
+ }
138
+ .later-button:hover {
139
+ background: #ccc;
140
+ transform: translateY(-2px);
141
+ }
142
+
143
+ @keyframes fadeIn {
144
+ from {opacity: 0; transform: translateY(20px);}
145
+ to {opacity: 1; transform: translateY(0);}
146
+ }
147
+
148
+ @media (max-width: 768px) {
149
+ .container {padding: 30px;}
150
+ h2 {font-size: 1.6em;}
151
+ }
152
+ </style>
153
+ </head>
154
+ <body>
155
+
156
+ <div class="container">
157
+ <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
158
+ <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0
159
+ 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6
160
+ 9c-1.1 0-2-.9-2-2s.9-2 2-2
161
+ 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71
162
+ 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z"/>
163
+ </svg>
164
+ <h2>برای آپلود و تحلیل فایل اشتراک تهیه کنید!</h2>
165
+ <p>امکان آپلود فایل‌های صوتی، ویدیویی، PDF و... تنها در نسخه نامحدود فعال است. برای دسترسی کامل، اشتراک خود را ارتقا دهید.</p>
166
+
167
+ <div class="upload-area">
168
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
169
+ <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4
170
+ 9.11 4 6.6 5.64 5.35 8.04
171
+ 2.34 8.36 0 10.91 0 14c0 3.31
172
+ 2.69 6 6 6h13c2.76 0 5-2.24
173
+ 5-5 0-2.64-2.05-4.78-4.65-4.96zM14
174
+ 13v4h-4v-4H7l5-5 5 5h-3z"/>
175
+ </svg>
176
+ <p>اینجا فایل‌های خود را آپلود کنید (فقط در نسخه نامحدود)</p>
177
+ </div>
178
+
179
+ <div class="buttons">
180
+ <button class="upgrade-button">🚀 ارتقا به نسخه نامحدود</button>
181
+ <button class="later-button">بعداً</button>
182
+ </div>
183
+ </div>
184
+
185
+ </body>
186
+ </html>