Hugging Face's logo

Spaces:
Shalomjs
/
zodiac-event-wizard
Running

App Files Community
Shalomjs commited on
Commit
3469ba6
·
verified ·
1 Parent(s): e03fa49

creat a simple react app with zodiac and react hook for that does multis for for creating events

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +340 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Zodiac Event Wizard
3
- emoji: 🌍
4
- colorFrom: purple
5
- colorTo: green
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: Zodiac Event Wizard ✨
3
+ colorFrom: green
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,341 @@
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>Zodiac Event Wizard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
11
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js"></script>
13
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
14
+ <style>
15
+ .bg-primary {
16
+ background-color: #6366f1;
17
+ }
18
+ .bg-secondary {
19
+ background-color: #10b981;
20
+ }
21
+ .text-primary {
22
+ color: #6366f1;
23
+ }
24
+ .text-secondary {
25
+ color: #10b981;
26
+ }
27
+ .border-primary {
28
+ border-color: #6366f1;
29
+ }
30
+ .border-secondary {
31
+ border-color: #10b981;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 min-h-screen">
36
+ <div id="root"></div>
37
+
38
+ <script type="text/babel">
39
+ const { useState } = React;
40
+
41
+ const EventForm = () => {
42
+ const [step, setStep] = useState(1);
43
+ const [loading, setLoading] = useState(false);
44
+ const [success, setSuccess] = useState(false);
45
+ const [formData, setFormData] = useState({
46
+ name: '',
47
+ date: '',
48
+ time: '',
49
+ description: '',
50
+ category: '',
51
+ privacy: 'public',
52
+ reminders: false
53
+ });
54
+
55
+ const nextStep = () => setStep(prev => Math.min(prev + 1, 4));
56
+ const prevStep = () => setStep(prev => Math.max(prev - 1, 1));
57
+
58
+ const handleChange = (e) => {
59
+ const { name, value, type, checked } = e.target;
60
+ setFormData(prev => ({
61
+ ...prev,
62
+ [name]: type === 'checkbox' ? checked : value
63
+ }));
64
+ };
65
+
66
+ const handleSubmit = (e) => {
67
+ e.preventDefault();
68
+ setLoading(true);
69
+
70
+ // Simulate API call
71
+ setTimeout(() => {
72
+ setLoading(false);
73
+ setSuccess(true);
74
+ }, 1500);
75
+ };
76
+
77
+ if (success) {
78
+ return (
79
+ <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl p-8 text-center">
80
+ <div className="h-20 w-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
81
+ <i data-feather="check" className="text-green-500 w-12 h-12"></i>
82
+ </div>
83
+ <h2 className="text-2xl font-bold text-gray-800 mb-2">Event Created Successfully!</h2>
84
+ <p className="text-gray-600 mb-6">Your event has been scheduled successfully.</p>
85
+ <button
86
+ onClick={() => {
87
+ setSuccess(false);
88
+ setStep(1);
89
+ setFormData({
90
+ name: '',
91
+ date: '',
92
+ time: '',
93
+ description: '',
94
+ category: '',
95
+ privacy: 'public',
96
+ reminders: false
97
+ });
98
+ }}
99
+ className="bg-primary hover:bg-indigo-600 text-white font-medium py-2 px-6 rounded-full transition duration-300"
100
+ >
101
+ Create Another Event
102
+ </button>
103
+ </div>
104
+ );
105
+ }
106
+
107
+ return (
108
+ <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-8">
109
+ <div className="p-8">
110
+ <div className="flex justify-between items-center mb-8">
111
+ {[1, 2, 3, 4].map((i) => (
112
+ <div key={i} className="flex flex-col items-center">
113
+ <div className={`h-10 w-10 rounded-full flex items-center justify-center ${i <= step ? 'bg-primary text-white' : 'bg-gray-200 text-gray-600'}`}>
114
+ {i}
115
+ </div>
116
+ <span className={`text-xs mt-2 ${i <= step ? 'text-primary font-medium' : 'text-gray-500'}`}>
117
+ {i === 1 ? 'Details' : i === 2 ? 'Description' : i === 3 ? 'Settings' : 'Review'}
118
+ </span>
119
+ </div>
120
+ ))}
121
+ </div>
122
+
123
+ <form onSubmit={handleSubmit}>
124
+ {/* Step 1 */}
125
+ {step === 1 && (
126
+ <div className="space-y-6">
127
+ <h2 className="text-2xl font-bold text-gray-800">Event Details</h2>
128
+ <div>
129
+ <label className="block text-gray-700 text-sm font-medium mb-1">Event Name</label>
130
+ <input
131
+ type="text"
132
+ name="name"
133
+ value={formData.name}
134
+ onChange={handleChange}
135
+ className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
136
+ required
137
+ />
138
+ </div>
139
+ <div className="grid grid-cols-2 gap-4">
140
+ <div>
141
+ <label className="block text-gray-700 text-sm font-medium mb-1">Date</label>
142
+ <input
143
+ type="date"
144
+ name="date"
145
+ value={formData.date}
146
+ onChange={handleChange}
147
+ className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
148
+ required
149
+ />
150
+ </div>
151
+ <div>
152
+ <label className="block text-gray-700 text-sm font-medium mb-1">Time</label>
153
+ <input
154
+ type="time"
155
+ name="time"
156
+ value={formData.time}
157
+ onChange={handleChange}
158
+ className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
159
+ required
160
+ />
161
+ </div>
162
+ </div>
163
+ </div>
164
+ )}
165
+
166
+ {/* Step 2 */}
167
+ {step === 2 && (
168
+ <div className="space-y-6">
169
+ <h2 className="text-2xl font-bold text-gray-800">Description</h2>
170
+ <div>
171
+ <label className="block text-gray-700 text-sm font-medium mb-1">Description</label>
172
+ <textarea
173
+ name="description"
174
+ value={formData.description}
175
+ onChange={handleChange}
176
+ rows="4"
177
+ className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
178
+ />
179
+ </div>
180
+ <div>
181
+ <label className="block text-gray-700 text-sm font-medium mb-1">Category</label>
182
+ <select
183
+ name="category"
184
+ value={formData.category}
185
+ onChange={handleChange}
186
+ className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
187
+ required
188
+ >
189
+ <option value="">Select a category</option>
190
+ <option value="business">Business</option>
191
+ <option value="social">Social</option>
192
+ <option value="education">Education</option>
193
+ <option value="entertainment">Entertainment</option>
194
+ </select>
195
+ </div>
196
+ </div>
197
+ )}
198
+
199
+ {/* Step 3 */}
200
+ {step === 3 && (
201
+ <div className="space-y-6">
202
+ <h2 className="text-2xl font-bold text-gray-800">Settings</h2>
203
+ <div>
204
+ <label className="block text-gray-700 text-sm font-medium mb-1">Privacy</label>
205
+ <div className="space-y-2">
206
+ <label className="flex items-center space-x-2">
207
+ <input
208
+ type="radio"
209
+ name="privacy"
210
+ value="public"
211
+ checked={formData.privacy === 'public'}
212
+ onChange={handleChange}
213
+ className="text-primary"
214
+ />
215
+ <span>Public (Anyone can see)</span>
216
+ </label>
217
+ <label className="flex items-center space-x-2">
218
+ <input
219
+ type="radio"
220
+ name="privacy"
221
+ value="private"
222
+ checked={formData.privacy === 'private'}
223
+ onChange={handleChange}
224
+ className="text-primary"
225
+ />
226
+ <span>Private (Invite only)</span>
227
+ </label>
228
+ </div>
229
+ </div>
230
+ <div>
231
+ <label className="flex items-center space-x-2">
232
+ <input
233
+ type="checkbox"
234
+ name="reminders"
235
+ checked={formData.reminders}
236
+ onChange={handleChange}
237
+ className="text-primary rounded"
238
+ />
239
+ <span>Send reminder notifications</span>
240
+ </label>
241
+ </div>
242
+ </div>
243
+ )}
244
+
245
+ {/* Step 4 */}
246
+ {step === 4 && (
247
+ <div className="space-y-6">
248
+ <h2 className="text-2xl font-bold text-gray-800">Review</h2>
249
+ <div className="bg-gray-50 p-4 rounded-lg">
250
+ <div className="grid grid-cols-2 gap-4 mb-4">
251
+ <div>
252
+ <p className="text-sm text-gray-500">Event Name</p>
253
+ <p className="font-medium">{formData.name}</p>
254
+ </div>
255
+ <div>
256
+ <p className="text-sm text-gray-500">Date & Time</p>
257
+ <p className="font-medium">{formData.date} at {formData.time}</p>
258
+ </div>
259
+ </div>
260
+ <div className="mb-4">
261
+ <p className="text-sm text-gray-500">Description</p>
262
+ <p className="font-medium">{formData.description || 'No description'}</p>
263
+ </div>
264
+ <div className="grid grid-cols-2 gap-4">
265
+ <div>
266
+ <p className="text-sm text-gray-500">Category</p>
267
+ <p className="font-medium">{formData.category || 'Not selected'}</p>
268
+ </div>
269
+ <div>
270
+ <p className="text-sm text-gray-500">Privacy</p>
271
+ <p className="font-medium capitalize">{formData.privacy}</p>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ )}
277
+
278
+ <div className="mt-8 flex justify-between">
279
+ {step > 1 && (
280
+ <button
281
+ type="button"
282
+ onClick={prevStep}
283
+ className="px-6 py-2 border border-gray-300 rounded-full text-gray-700 hover:bg-gray-100 transition duration-300"
284
+ >
285
+ Previous
286
+ </button>
287
+ )}
288
+ {step < 4 ? (
289
+ <button
290
+ type="button"
291
+ onClick={nextStep}
292
+ className="ml-auto bg-primary hover:bg-indigo-600 text-white font-medium py-2 px-6 rounded-full transition duration-300"
293
+ >
294
+ Next
295
+ </button>
296
+ ) : (
297
+ <button
298
+ type="submit"
299
+ disabled={loading}
300
+ className="ml-auto bg-primary hover:bg-indigo-600 text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center"
301
+ >
302
+ {loading ? (
303
+ <>
304
+ <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
305
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
306
+ <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
307
+ </svg>
308
+ Submitting...
309
+ </>
310
+ ) : 'Submit'}
311
+ </button>
312
+ )}
313
+ </div>
314
+ </form>
315
+ </div>
316
+ </div>
317
+ );
318
+ };
319
+
320
+ const App = () => {
321
+ return (
322
+ <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-12 px-4 sm:px-6 lg:px-8">
323
+ <div className="text-center mb-10">
324
+ <div className="flex justify-center mb-4">
325
+ <div className="h-16 w-16 bg-primary rounded-full flex items-center justify-center">
326
+ <i data-feather="calendar" className="text-white w-8 h-8"></i>
327
+ </div>
328
+ </div>
329
+ <h1 className="text-3xl font-bold text-gray-900 mb-2">Zodiac Event Wizard</h1>
330
+ <p className="text-gray-600">Create your perfect event in just a few steps</p>
331
+ </div>
332
+ <EventForm />
333
+ </div>
334
+ );
335
+ };
336
+
337
+ ReactDOM.render(<App />, document.getElementById('root'));
338
+ feather.replace();
339
+ </script>
340
+ </body>
341
  </html>