Hugging Face's logo

Spaces:
Zeeshanhaider
/
pixelwizard-tools
Running

App Files Community
pixelwizard-tools
File size: 2,846 Bytes
4e762b5
ff158c3
d457bd9
ff158c3
d457bd9
 
4e762b5
 
 
 
 
 
 
ff158c3
 
 
 
 
d457bd9
 
ff158c3
 
 
 
 
 
 
d457bd9
 
ff158c3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d457bd9
 
ff158c3
 
d457bd9
ff158c3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Tool category colors */
.bg-primary-500 { background-color: #6366f1; }
.bg-secondary-500 { background-color: #ec4899; }
.bg-purple-500 { background-color: #8b5cf6; }
.bg-indigo-500 { background-color: #4f46e5; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-green-500 { background-color: #10b981; }
/* Card styles */
.card-container {
    position: relative;
    perspective: 1000px;
    height: 100%;
}

.card {
    @apply rounded-3xl shadow-xl overflow-hidden;
    height: 100%;
    transition: transform 0.6s, box-shadow 0.3s;
    transform-style: preserve-3d;
    position: relative;
    background: white;
}

.card-header {
    @apply p-6;
}

.card-image-container {
    @apply relative overflow-hidden;
    height: 300px;
}

.card-image {
    @apply w-full h-full object-cover;
}

.card-footer {
    @apply p-6 flex items-center justify-between text-white;
}

/* Glassmorphism effect */
.glassmorphism-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Minimal circular with pulse */
.minimal-card .card-image-container {
    @apply flex items-center justify-center;
}

.circle-mask {
    @apply rounded-full overflow-hidden;
    width: 250px;
    height: 250px;
    border: 8px solid;
    border-color: rgb(139, 92, 246);
    animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
    0% { border-width: 8px; }
    50% { border-width: 15px; }
    100% { border-width: 8px; }
}

/* Data block card */
.datablock-card .card-image-container {
    height: 200px;
}

.card-stats {
    @apply p-6 text-center;
}

.stat-value {
    @apply text-6xl font-bold text-primary-500;
}

.stat-label {
    @apply text-gray-600 text-lg;
}
/* Tool cards */
.tool-card {
    @apply bg-white rounded-2xl shadow-md overflow-hidden transition-all duration-300;
}

.tool-card:hover {
    @apply shadow-lg transform -translate-y-2;
}

.tool-card .card-header {
    @apply p-6;
}

.tool-card .card-header i {
    @apply w-8 h-8 mb-4;
}

.tool-preview {
    @apply h-48 w-full;
}

.tool-card .card-footer {
    @apply p-6 border-t border-gray-100;
}

.btn-tool {
    @apply px-6 py-2 bg-primary-500 text-white rounded-lg font-medium transition-all;
}

.btn-tool:hover {
    @apply bg-primary-600 shadow-md;
}

/* Card hover effects */
.card-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center rounded-3xl;
    transition: all 0.3s ease;
    opacity: 0;
}

.card-container:hover .card-overlay {
    @apply bg-opacity-70;
    opacity: 1;
}

.btn-view {
    @apply px-6 py-3 bg-white text-primary-500 font-bold rounded-full shadow-lg;
    transition: all 0.3s ease;
}

.btn-view:hover {
    @apply bg-primary-500 text-white;
}