notel/chat-prototype.html at main · Manakin-Wraith/notel · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Prototype - Notel</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111827; }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const { useState } = React;

        const App = () => {
            return (
                <div className="min-h-screen bg-gray-900 flex items-center justify-center p-8">
                    <div className="max-w-2xl mx-auto text-center">
                        <h1 className="text-4xl font-bold text-white mb-4">
                            Chat Prototype Access
                        </h1>
                        <p className="text-gray-400 text-lg mb-8">
                            The interactive chat prototype is available in your React components
                        </p>

                        <div className="bg-black/30 backdrop-blur-xl border border-white/10 rounded-xl p-8 mb-8">
                            <h2 className="text-xl font-semibold text-white mb-4">📍 How to Access</h2>
                            <div className="text-left space-y-4">
                                <div className="bg-black/20 p-4 rounded-lg">
                                    <h3 className="text-white font-medium mb-2">Option 1: Direct Component Import</h3>
                                    <p className="text-gray-400 text-sm mb-2">Import and use the prototype in any React component:</p>
                                    <code className="text-blue-400 text-sm bg-black/50 p-2 rounded block">
                                        import ChatPrototypeDemo from './components/chat/ChatPrototypeDemo';
                                    </code>
                                </div>

                                <div className="bg-black/20 p-4 rounded-lg">
                                    <h3 className="text-white font-medium mb-2">Option 2: Development Server</h3>
                                    <p className="text-gray-400 text-sm mb-2">Run your development server and navigate to the chat prototype:</p>
                                    <code className="text-blue-400 text-sm bg-black/50 p-2 rounded block">
                                        npm run dev
                                    </code>
                                </div>

                                <div className="bg-black/20 p-4 rounded-lg">
                                    <h3 className="text-white font-medium mb-2">Components Created:</h3>
                                    <ul className="text-gray-400 text-sm space-y-1">
                                        <li>• /components/chat/ChatPrototype.tsx</li>
                                        <li>• /components/chat/ChatPrototypeDemo.tsx</li>
                                        <li>• /components/icons/MessageCircleIcon.tsx</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div className="text-sm text-gray-500">
                            <p>The prototype includes real-time messaging simulation, presence indicators, and your Notion-inspired design</p>
                        </div>
                    </div>
                </div>
            );
        };

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>