Hugging Face's logo

Spaces:
Abmacode12
/
codecanvas-creative-rose-ide-workspace
Running

App Files Community
codecanvas-creative-rose-ide-workspace
File size: 2,928 Bytes
460f6aa
 
 
 
 
 
 
 
 
7dd63e9
460f6aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7dd63e9
 
460f6aa
 
 
 
 
 
 
 
7dd63e9
 
460f6aa
 
7dd63e9
 
460f6aa
 
 
 
 
 
 
 
7dd63e9
 
460f6aa
 
 
 
7dd63e9
460f6aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
/* Custom styles for CodeCanvas */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    min-height: 100vh;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: rgba(244, 63, 94, 0.3);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(244, 63, 94, 0.5);
}

/* Glass effect */
.glass-effect {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pulse animation for active elements */
@keyframes pulse-rose {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(244, 63, 94, 0);
    }
}

.pulse-rose {
    animation: pulse-rose 2s infinite;
}

/* Loading spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(244, 63, 94, 0.1);
    border-top-color: #f43f5e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Code block styling */
.code-block {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-left: 4px solid #f43f5e;
    padding: 1.5rem;
    border-radius: 0 1rem 1rem 0;
    position: relative;
    overflow: hidden;
}

.code-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f43f5e, transparent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .mobile-menu-open {
        transform: translateX(0);
    }
    
    .mobile-menu-closed {
        transform: translateX(-100%);
    }
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid #f43f5e;
    outline-offset: 2px;
}

/* Selection color */
::selection {
    background: rgba(244, 63, 94, 0.3);
    color: white;
}

/* Smooth transitions */
.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}