Hugging Face's logo

Spaces:
arreumb
/
deepsiteclone
Running

App Files Community
arreumb commited on
Commit
d831736
·
verified ·
1 Parent(s): 42cc99f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +143 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsiteclone
3
- emoji: 🔥
4
- colorFrom: gray
5
- colorTo: pink
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: deepsiteclone
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,143 @@
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>3D Animated Card</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ perspective: 1000px;
11
+ overflow: hidden;
12
+ background-color: #0f172a;
13
+ }
14
+
15
+ .card-container {
16
+ transform-style: preserve-3d;
17
+ animation: cardEntrance 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
18
+ }
19
+
20
+ .card {
21
+ transform-style: preserve-3d;
22
+ box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
23
+ transition: all 0.5s ease;
24
+ }
25
+
26
+ .card::before {
27
+ content: '';
28
+ position: absolute;
29
+ top: 0;
30
+ left: 0;
31
+ right: 0;
32
+ bottom: 0;
33
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0) 50%);
34
+ border-radius: 1rem;
35
+ pointer-events: none;
36
+ }
37
+
38
+ @keyframes cardEntrance {
39
+ 0% {
40
+ transform: translateZ(-1000px) rotateY(180deg);
41
+ opacity: 0;
42
+ }
43
+ 30% {
44
+ opacity: 0.5;
45
+ }
46
+ 100% {
47
+ transform: translateZ(0) rotateY(0deg);
48
+ opacity: 1;
49
+ }
50
+ }
51
+
52
+ .glow {
53
+ position: absolute;
54
+ width: 100%;
55
+ height: 100%;
56
+ border-radius: 1rem;
57
+ box-shadow: 0 0 60px rgba(99, 102, 241, 0.4);
58
+ opacity: 0;
59
+ animation: glowFade 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
60
+ }
61
+
62
+ @keyframes glowFade {
63
+ 0%, 70% {
64
+ opacity: 0;
65
+ }
66
+ 100% {
67
+ opacity: 1;
68
+ }
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="flex items-center justify-center min-h-screen bg-gray-900 text-gray-100">
73
+ <div class="card-container w-80 h-96 relative">
74
+ <div class="glow"></div>
75
+ <div class="card absolute w-full h-full bg-gray-800 rounded-xl p-6 flex flex-col">
76
+ <div class="flex items-center mb-6">
77
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3">
78
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
79
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
80
+ </svg>
81
+ </div>
82
+ <div>
83
+ <h2 class="text-xl font-bold">Quantum Card</h2>
84
+ <p class="text-xs text-gray-400">Premium Access</p>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="flex-1 flex flex-col justify-center">
89
+ <div class="bg-gray-700 rounded-lg p-4 mb-6">
90
+ <div class="flex justify-between items-center mb-2">
91
+ <span class="text-sm text-gray-400">Card Number</span>
92
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-400" viewBox="0 0 20 20" fill="currentColor">
93
+ <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
94
+ </svg>
95
+ </div>
96
+ <p class="text-lg font-mono tracking-wider">•••• •••• •••• 4242</p>
97
+ </div>
98
+
99
+ <div class="grid grid-cols-2 gap-4 mb-6">
100
+ <div>
101
+ <p class="text-xs text-gray-400 mb-1">Expires</p>
102
+ <p class="font-medium">12/25</p>
103
+ </div>
104
+ <div>
105
+ <p class="text-xs text-gray-400 mb-1">CVV</p>
106
+ <p class="font-medium">•••</p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="flex justify-between items-center">
112
+ <p class="text-sm text-gray-400">John Doe</p>
113
+ <div class="flex space-x-2">
114
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center">
115
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
116
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd" />
117
+ </svg>
118
+ </div>
119
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center">
120
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
121
+ <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
122
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" />
123
+ </svg>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <script>
131
+ // Add some interactive effects
132
+ document.querySelector('.card').addEventListener('mouseenter', function() {
133
+ this.style.transform = 'rotateY(10deg) rotateX(5deg) translateZ(20px)';
134
+ this.style.boxShadow = '0 0 30px rgba(99, 102, 241, 0.7)';
135
+ });
136
+
137
+ document.querySelector('.card').addEventListener('mouseleave', function() {
138
+ this.style.transform = 'rotateY(0deg) rotateX(0deg) translateZ(0)';
139
+ this.style.boxShadow = '0 0 20px rgba(99, 102, 241, 0.5)';
140
+ });
141
+ </script>
142
+ <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=arreumb/deepsiteclone" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
143
+ </html>