Hugging Face's logo

Spaces:
madhal2k
/
cot
Running

App Files Community
madhal2k commited on
Commit
472bc35
·
verified ·
1 Parent(s): efe4221

Create a mobile app based on provided image - Follow Up Deployment

Browse files
Files changed (2) hide show
  1. index.html +161 -16
  2. prompts.txt +1 -0
index.html CHANGED
@@ -1,20 +1,165 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- </head>
9
- <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
- <div class="w-full">
11
- <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
12
- <h1 class="text-4xl lg:text-6xl font-bold font-sans">
13
- <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
14
- Ask me anything.
15
- </h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </div>
17
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
18
- <script></script>
19
- </body>
 
 
 
20
  </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>Mobile App UI</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50">
23
+ <!-- Mobile App Container -->
24
+ <div class="max-w-md mx-auto h-screen flex flex-col relative overflow-hidden shadow-xl">
25
+ <!-- App Header -->
26
+ <div class="gradient-bg text-white p-6 flex justify-between items-center">
27
+ <div>
28
+ <h1 class="text-2xl font-bold">Hello, User</h1>
29
+ <p class="text-gray-200">Welcome back</p>
30
+ </div>
31
+ <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
32
+ <i data-feather="bell"></i>
33
+ </div>
34
+ </div>
35
+
36
+ <!-- Main Content -->
37
+ <div class="flex-1 overflow-y-auto p-6 space-y-6">
38
+ <!-- Balance Card -->
39
+ <div class="gradient-bg rounded-2xl p-6 text-white shadow-lg" data-aos="fade-up">
40
+ <div class="flex justify-between items-center mb-4">
41
+ <h2 class="font-medium">Your Balance</h2>
42
+ <i data-feather="more-horizontal"></i>
43
+ </div>
44
+ <h1 class="text-3xl font-bold mb-4">$12,345.67</h1>
45
+ <div class="flex justify-between items-center">
46
+ <div class="flex space-x-2">
47
+ <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
48
+ <i data-feather="arrow-down" class="text-green-300"></i>
49
+ </div>
50
+ <div>
51
+ <p class="text-xs text-gray-200">Income</p>
52
+ <p class="font-medium">$5,432</p>
53
+ </div>
54
+ </div>
55
+ <div class="flex space-x-2">
56
+ <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
57
+ <i data-feather="arrow-up" class="text-red-300"></i>
58
+ </div>
59
+ <div>
60
+ <p class="text-xs text-gray-200">Expense</p>
61
+ <p class="font-medium">$1,234</p>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Quick Actions -->
68
+ <div class="grid grid-cols-4 gap-4" data-aos="fade-up" data-aos-delay="100">
69
+ <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center">
70
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
71
+ <i data-feather="send" class="text-blue-500"></i>
72
+ </div>
73
+ <span class="text-sm">Transfer</span>
74
+ </div>
75
+ <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center">
76
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2">
77
+ <i data-feather="dollar-sign" class="text-purple-500"></i>
78
+ </div>
79
+ <span class="text-sm">Pay</span>
80
+ </div>
81
+ <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center">
82
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
83
+ <i data-feather="credit-card" class="text-green-500"></i>
84
+ </div>
85
+ <span class="text-sm">Card</span>
86
+ </div>
87
+ <div class="bg-white p-4 rounded-xl shadow flex flex-col items-center">
88
+ <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
89
+ <i data-feather="more-horizontal" class="text-yellow-500"></i>
90
+ </div>
91
+ <span class="text-sm">More</span>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Recent Transactions -->
96
+ <div class="space-y-4" data-aos="fade-up" data-aos-delay="200">
97
+ <div class="flex justify-between items-center">
98
+ <h2 class="font-bold text-lg">Recent Transactions</h2>
99
+ <span class="text-blue-500 text-sm">See all</span>
100
+ </div>
101
+
102
+ <div class="bg-white rounded-xl shadow p-4">
103
+ <div class="flex items-center space-x-4">
104
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
105
+ <i data-feather="shopping-bag" class="text-blue-500"></i>
106
+ </div>
107
+ <div class="flex-1">
108
+ <h3 class="font-medium">Amazon Purchase</h3>
109
+ <p class="text-gray-500 text-sm">Today, 10:45 AM</p>
110
+ </div>
111
+ <div class="text-red-500 font-medium">-$45.99</div>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="bg-white rounded-xl shadow p-4">
116
+ <div class="flex items-center space-x-4">
117
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
118
+ <i data-feather="dollar-sign" class="text-green-500"></i>
119
+ </div>
120
+ <div class="flex-1">
121
+ <h3 class="font-medium">Salary Deposit</h3>
122
+ <p class="text-gray-500 text-sm">Yesterday, 9:30 AM</p>
123
+ </div>
124
+ <div class="text-green-500 font-medium">+$2,500.00</div>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="bg-white rounded-xl shadow p-4">
129
+ <div class="flex items-center space-x-4">
130
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
131
+ <i data-feather="coffee" class="text-purple-500"></i>
132
+ </div>
133
+ <div class="flex-1">
134
+ <h3 class="font-medium">Starbucks</h3>
135
+ <p class="text-gray-500 text-sm">Yesterday, 2:15 PM</p>
136
+ </div>
137
+ <div class="text-red-500 font-medium">-$4.75</div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Bottom Navigation -->
144
+ <div class="bg-white border-t border-gray-200 flex justify-around items-center p-4">
145
+ <div class="p-2 text-blue-500">
146
+ <i data-feather="home"></i>
147
+ </div>
148
+ <div class="p-2 text-gray-500">
149
+ <i data-feather="credit-card"></i>
150
+ </div>
151
+ <div class="p-2 text-gray-500">
152
+ <i data-feather="pie-chart"></i>
153
+ </div>
154
+ <div class="p-2 text-gray-500">
155
+ <i data-feather="user"></i>
156
+ </div>
157
+ </div>
158
  </div>
159
+
160
+ <script>
161
+ AOS.init();
162
+ feather.replace();
163
+ </script>
164
+ </body>
165
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Create a mobile app based on provided image