Hugging Face's logo

Spaces:
KuangQuanS
/
superniu
Running

App Files Community
KuangQuanS commited on
Commit
bdd5b65
·
verified ·
1 Parent(s): 534ab92

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +227 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Superniu
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: red
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: superniu
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,227 @@
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>MediTrack | Doctor Login</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f0f7ff;
15
+ }
16
+
17
+ .login-card {
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
19
+ transition: all 0.3s ease;
20
+ }
21
+
22
+ .login-card:hover {
23
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
24
+ }
25
+
26
+ .input-group {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .input-group:focus-within {
31
+ transform: translateY(-2px);
32
+ }
33
+
34
+ .wave-shape {
35
+ position: absolute;
36
+ bottom: 0;
37
+ left: 0;
38
+ width: 100%;
39
+ overflow: hidden;
40
+ line-height: 0;
41
+ }
42
+
43
+ .wave-shape svg {
44
+ position: relative;
45
+ display: block;
46
+ width: calc(100% + 1.3px);
47
+ height: 100px;
48
+ }
49
+
50
+ @keyframes float {
51
+ 0% { transform: translateY(0px); }
52
+ 50% { transform: translateY(-10px); }
53
+ 100% { transform: translateY(0px); }
54
+ }
55
+
56
+ .floating {
57
+ animation: float 6s ease-in-out infinite;
58
+ }
59
+
60
+ .pulse {
61
+ animation: pulse 2s infinite;
62
+ }
63
+
64
+ @keyframes pulse {
65
+ 0% { transform: scale(1); }
66
+ 50% { transform: scale(1.05); }
67
+ 100% { transform: scale(1); }
68
+ }
69
+ </style>
70
+ </head>
71
+ <body>
72
+ <div class="min-h-screen flex flex-col md:flex-row">
73
+ <!-- Left Side - Branding/Illustration -->
74
+ <div class="w-full md:w-1/2 bg-gradient-to-br from-blue-600 to-blue-400 flex flex-col items-center justify-center p-10 text-white relative overflow-hidden">
75
+ <div class="wave-shape">
76
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
77
+ <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" fill="#ffffff"></path>
78
+ </svg>
79
+ </div>
80
+
81
+ <div class="text-center relative z-10 max-w-md">
82
+ <div class="floating mx-auto mb-8">
83
+ <i class="fas fa-heartbeat text-6xl text-white pulse"></i>
84
+ </div>
85
+ <h1 class="text-4xl font-bold mb-4">MediTrack</h1>
86
+ <p class="text-xl mb-6">Doctor Follow-Up Management System</p>
87
+ <p class="text-blue-100">Securely access patient records, schedule follow-ups, and manage treatments from anywhere.</p>
88
+ </div>
89
+
90
+ <!-- Medical themed decorative elements -->
91
+ <div class="absolute top-20 left-10 opacity-20 text-6xl">
92
+ <i class="fas fa-heartbeat"></i>
93
+ </div>
94
+ <div class="absolute bottom-20 right-10 opacity-20 text-6xl">
95
+ <i class="fas fa-stethoscope"></i>
96
+ </div>
97
+ <div class="absolute top-1/3 right-20 opacity-20 text-4xl">
98
+ <i class="fas fa-hospital"></i>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Right Side - Login Form -->
103
+ <div class="w-full md:w-1/2 flex items-center justify-center p-8 bg-white">
104
+ <div class="login-card bg-white rounded-xl p-8 w-full max-w-md">
105
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Welcome Back</h2>
106
+ <p class="text-gray-600 mb-8">Please login to access your account</p>
107
+
108
+ <form>
109
+ <div class="mb-6">
110
+ <div class="input-group mb-4">
111
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
112
+ <div class="relative">
113
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
114
+ <i class="fas fa-envelope text-gray-400"></i>
115
+ </div>
116
+ <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="doctor@example.com" required>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="input-group mb-4">
121
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
122
+ <div class="relative">
123
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
124
+ <i class="fas fa-lock text-gray-400"></i>
125
+ </div>
126
+ <input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="••••••••" required>
127
+ <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3" id="togglePassword">
128
+ <i class="fas fa-eye text-gray-400 hover:text-gray-600 cursor-pointer"></i>
129
+ </button>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="flex items-center justify-between mb-4">
134
+ <div class="flex items-center">
135
+ <input id="remember" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
136
+ <label for="remember" class="ml-2 text-sm text-gray-600">Remember me</label>
137
+ </div>
138
+ <a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
139
+ </div>
140
+ </div>
141
+
142
+ <button type="submit" class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center transition-all duration-300 transform hover:scale-[1.02]">
143
+ Sign In
144
+ <i class="fas fa-arrow-right ml-2"></i>
145
+ </button>
146
+
147
+ <div class="relative my-6">
148
+ <div class="absolute inset-0 flex items-center">
149
+ <div class="w-full border-t border-gray-300"></div>
150
+ </div>
151
+ <div class="relative flex justify-center text-sm">
152
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="grid grid-cols-2 gap-3">
157
+ <a href="#" class="text-gray-700 bg-white hover:bg-gray-50 focus:ring-2 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-center border border-gray-300">
158
+ <i class="fab fa-google text-red-500 mr-2"></i>
159
+ Google
160
+ </a>
161
+ <a href="#" class="text-gray-700 bg-white hover:bg-gray-50 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-center border border-gray-300">
162
+ <i class="fab fa-microsoft text-blue-500 mr-2"></i>
163
+ Microsoft
164
+ </a>
165
+ </div>
166
+ </form>
167
+
168
+ <p class="mt-8 text-center text-sm text-gray-500">
169
+ Don't have an account? <a href="#" class="text-blue-600 hover:underline">Request access</a>
170
+ </p>
171
+
172
+ <div class="mt-8 text-center text-xs text-gray-400">
173
+ <p>By continuing, you agree to our <a href="#" class="text-blue-500 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a>.</p>
174
+ <p class="mt-1">© 2023 MediTrack. All rights reserved.</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <script>
181
+ document.addEventListener('DOMContentLoaded', function() {
182
+ // Toggle password visibility
183
+ const togglePassword = document.querySelector('#togglePassword');
184
+ const password = document.querySelector('#password');
185
+
186
+ togglePassword.addEventListener('click', function() {
187
+ const icon = this.querySelector('i');
188
+ const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
189
+ password.setAttribute('type', type);
190
+ icon.classList.toggle('fa-eye');
191
+ icon.classList.toggle('fa-eye-slash');
192
+ });
193
+
194
+ // Simple form validation example
195
+ const form = document.querySelector('form');
196
+ form.addEventListener('submit', function(e) {
197
+ e.preventDefault();
198
+
199
+ const email = document.getElementById('email').value;
200
+ const password = document.getElementById('password').value;
201
+
202
+ if (!email || !password) {
203
+ alert('Please fill in all fields');
204
+ return;
205
+ }
206
+
207
+ // In a real app, you would submit the form to your backend
208
+ console.log('Login attempted with:', email, password);
209
+ // Simulate login (remove in production)
210
+ alert('Login successful! Redirecting...');
211
+ // window.location.href = 'dashboard.html';
212
+ });
213
+
214
+ // Animation for buttons on hover
215
+ const buttons = document.querySelectorAll('button, a[href="#"]');
216
+ buttons.forEach(button => {
217
+ button.addEventListener('mouseenter', function() {
218
+ this.style.transform = 'translateY(-1px)';
219
+ });
220
+ button.addEventListener('mouseleave', function() {
221
+ this.style.transform = 'translateY(0)';
222
+ });
223
+ });
224
+ });
225
+ </script>
226
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=KuangQuanS/superniu" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
227
+ </html>