Hugging Face's logo

Spaces:
Alim111
/
mindspark-ai-companion
Running

App Files Community
mindspark-ai-companion
File size: 8,274 Bytes 
0656b38
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84e8ed4
 
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MindSpark AI Companion</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
        body {
            font-family: 'Inter', sans-serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .chat-bubble-user {
            background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
        }
        .sidebar-item:hover {
            background: rgba(255, 255, 255, 0.15);
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Header -->
    <header class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-green-400 to-blue-500"></div>
                <h1 class="text-2xl font-bold text-gray-900">MindSpark</h1>
                <nav class="hidden md:flex space-x-6">
                    <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Features</a>
                    <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">Pricing</a>
                    <a href="#" class="text-gray-600 hover:text-gray-900 font-medium">About</a>
                </nav>
                <div class="flex items-center space-x-4">
                    <button class="px-4 py-2 text-gray-600 hover:text-gray-900 font-medium">Blog</a>
                </div>
                <div class="flex items-center space-x-3">
                    <button class="px-4 py-2 bg-gradient-to-r from-green-400 to-blue-500 text-white rounded-lg font-medium transition-all duration-300">Log in</button>
                <button class="px-6 py-2 bg-gradient-to-r from-green-400 to-blue-500 text-white rounded-lg font-medium transition-all duration-300">Sign up free</button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 flex">
        <!-- Sidebar -->
        <aside class="w-64 bg-white border-r min-h-[calc(100vh-80px)]">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-semibold text-gray-900">New Chat</h2>
            </div>
            <div class="px-6">
                <div class="mb-4 p-4 rounded-xl glass-effect">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
                <div class="space-y-2">
                    <div class="flex items-center p-3 rounded-lg sidebar-item cursor-pointer transition-all duration-300">
                    <i data-feather="message-circle" class="w-5 h-5 text-gray-600"></i>
                    <span class="ml-3 text-gray-700 font-medium">Temporary Chat</span>
                </div>
            </div>
        </aside>

        <!-- Chat Area -->
        <section class="flex-1 flex flex-col">
            <div class="flex-1 p-6 overflow-y-auto">
                <!-- Temporary Chat Notice -->
                <div class="mb-6 p-4 rounded-xl bg-gradient-to-r from-green-400 to-blue-500 text-white">
                    <div class="flex items-center text-sm">
                        <i data-feather="info" class="w-4 h-4 text-gray-400"></i>
                </div>
                <div class="bg-white rounded-2xl shadow-lg border">
                    <div class="p-4 border-b">
                        <div class="flex items-center space-x-2">
                            <div class="w-2 h-2 bg-green-400 rounded-full"></div>
                <p class="text-sm text-gray-600">This chat won't appear in history or be used to train our models. For safety purposes, we may keep a copy of this chat for up to 30 days.</p>
                    </div>
                    
                    <!-- Chat Messages -->
                    <div class="space-y-4">
                        <div class="flex justify-end">
                            <div class="max-w-[80%] bg-gradient-to-r from-green-400 to-blue-500 text-white rounded-2xl p-4">Welcome! How can I assist you today?</div>
                    </div>
                    
                    <!-- User Input Area -->
                    <div class="mt-6">
                        <div class="flex items-center space-x-3 mb-4">
                            <button class="p-2 rounded-full border hover:bg-gray-50 transition-all duration-300">
                                <i data-feather="paperclip" class="w-5 h-5 text-gray-600"></i>
                    </div>
                    <div class="flex items-center space-x-3">
                                <button class="p-2 rounded-full border hover:bg-gray-50 transition-all duration-300">
                                <i data-feather="search" class="w-5 h-5 text-gray-600"></i>
                        </div>
                        <div class="flex items-center space-x-3">
                                <button class="p-2 rounded-full border hover:bg-gray-50 transition-all duration-300">
                                <i data-feather="book-open" class="w-5 h-5 text-gray-600"></i>
                        </div>
                        <div class="flex items-center space-x-3">
                                <button class="p-2 rounded-full border hover:bg-gray-50 transition-all duration-300">
                                <i data-feather="mic" class="w-5 h-5 text-gray-600"></i>
                        </div>
                    </div>
                    
                    <!-- Input Field -->
                    <div class="mt-6">
                        <div class="flex items-center bg-white rounded-2xl border shadow-sm">
                            <input type="text" placeholder="Message ChatGPT..." class="w-full px-4 py-3 focus:outline-none focus:ring-2 focus:ring-green-400 rounded-2xl border p-3 text-gray-900 placeholder-gray-500">
                        </div>
                        <p class="text-xs text-gray-500 mt-2">By messaging MindSpark, you agree to our <a href="#" class="text-green-500 hover:text-green-600 transition-colors duration-300">Terms</a> and have read our <a href="#" class="text-green-500 hover:text-green-600 transition-colors duration-300">Privacy Policy</a>.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-white border-t py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4">
                <a href="#" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-300">
                <p>© 2024 MindSpark AI. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            200: '#bbf7d0',
                            300: '#86efac',
                            400: '#4ade80',
                            500: '#10B981',
                            600: '#059669',
                            700: '#047857',
                            800: '#065f46',
                            900: '#064e3b'
                        }
                    }
                }
            }
        }
    </script>
</body>
</html>