Hugging Face's logo

Spaces:
MINDFRAM3S
/
mindfram3-studio
Running

App Files Community
mindfram3-studio
File size: 6,255 Bytes 
3bb2983
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Dashboard UI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    }
                }
            }
        }
    </script>
    <style>
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        
        .sidebar {
            transition: all 0.3s ease;
        }
        
        .sidebar-collapsed {
            width: 80px;
        }
        
        .sidebar-expanded {
            width: 280px;
        }
        
        .content-area {
            transition: all 0.3s ease;
        }
        
        .content-expanded {
            margin-left: 280px;
        }
        
        .content-collapsed {
            margin-left: 80px;
        }
        
        .progress-ring__circle {
            transition: stroke-dashoffset 0.5s;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-lg flex flex-col">
            <div class="p-4 flex items-center justify-between border-b">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
                        <i class="fas fa-rocket text-xl"></i>
                    </div>
                    <span id="logo-text" class="text-xl font-bold text-primary">DashboardPro</span>
                </div>
                <button id="toggle-sidebar" class="text-gray-500 hover:text-primary focus:outline-none">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            
            <div class="flex-1 overflow-y-auto py-4">
                <div class="px-4 mb-6">
                    <div class="relative">
                        <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>
                
                <nav>
                    <div class="px-2">
                        <div class="mb-2">
                            <p id="nav-section-title" class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Main Menu</p>
                            <ul>
                                <li>
                                    <a href="#" class="flex items-center px-4 py-3 text-primary bg-primary bg-opacity-10 rounded-lg mx-2">
                                        <i class="fas fa-home mr-3"></i>
                                        <span id="dashboard-text" class="font-medium">Dashboard</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2">
                                        <i class="fas fa-chart-line mr-3"></i>
                                        <span id="analytics-text" class="font-medium">Analytics</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2">
                                        <i class="fas fa-envelope mr-3"></i>
                                        <span id="messages-text" class="font-medium">Messages</span>
                                        <span class="ml-auto bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">5</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2">
                                        <i class="fas fa-calendar mr-3"></i>
                                        <span id="calendar-text" class="font-medium">Calendar</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        
                        <div class="mb-2">
                            <p id="settings-section-title" class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 mb-2">Settings</p>
                            <ul>
                                <li>
                                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-primary hover:bg-opacity-10 rounded-lg mx-2">
                                        <i class="fas fa-cog mr-3"></i>
                                        <span id
</html>