ShadowAI/home.html at main · Sahith59/ShadowAI · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shadow AI — Setup</title>
    <link rel="stylesheet" href="home-styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
</head>

<body>
    <div class="home-container">
        <!-- Title Bar -->
        <header class="home-titlebar">
            <div class="titlebar-left">
                <div class="window-controls">
                    <button class="window-btn close" id="btn-close"></button>
                    <button class="window-btn minimize" id="btn-minimize"></button>
                    <button class="window-btn maximize" id="btn-maximize"></button>
                </div>
                <div class="app-branding">
                    <div class="logo-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                            <path d="M2 17l10 5 10-5"></path>
                            <path d="M2 12l10 5 10-5"></path>
                        </svg>
                    </div>
                    <h1 class="app-title">Shadow AI</h1>
                    <span class="version-badge">v1.0</span>
                </div>
            </div>
            <div class="titlebar-right">
                <span class="hotkey-badge">⌘⇧L to listen</span>
            </div>
        </header>

        <!-- Main Content -->
        <main class="home-main">
            <!-- Hero Section -->
            <section class="hero-section">
                <h2 class="hero-title">Prepare Your Session</h2>
                <p class="hero-subtitle">Pick your mode, add context, and launch.</p>
            </section>

            <!-- Session Mode Selector -->
            <section class="setup-section">
                <div class="section-header">
                    <div class="section-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polygon points="10 8 16 12 10 16 10 8"></polygon>
                        </svg>
                    </div>
                    <h3 class="section-title">Session Mode</h3>
                    <span class="section-hint">What are you preparing for?</span>
                </div>
                <div class="mode-grid" id="mode-grid">
                    <!-- Populated by home-renderer.js -->
                </div>
            </section>

            <!-- Briefing Context -->
            <section class="setup-section">
                <div class="section-header">
                    <div class="section-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                    </div>
                    <h3 class="section-title">Briefing Context</h3>
                    <span class="section-hint">Optional — tell the AI what to focus on</span>
                </div>
                <textarea id="briefing-text" class="briefing-textarea"
                    placeholder="Example: I'm preparing for a Google coding interview. Focus on system design and algorithms. Use Python for all code examples. My experience level is senior engineer with 5 years..."></textarea>
                <div class="textarea-footer">
                    <span class="char-count" id="char-count">0 / 2000</span>
                </div>
            </section>

            <!-- Document Upload -->
            <section class="setup-section">
                <div class="section-header">
                    <div class="section-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                        </svg>
                    </div>
                    <h3 class="section-title">Reference Documents</h3>
                    <span class="section-hint">Optional — upload files for extra context</span>
                </div>
                <div class="drop-zone" id="drop-zone">
                    <div class="drop-zone-content">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                            <polyline points="17 8 12 3 7 8"></polyline>
                            <line x1="12" y1="3" x2="12" y2="15"></line>
                        </svg>
                        <p class="drop-zone-title">Drop files here or click to browse</p>
                        <span class="drop-zone-hint">PDF, DOCX, TXT, PNG, JPG — max 10MB each</span>
                    </div>
                    <input type="file" id="file-input" multiple accept=".pdf,.docx,.doc,.txt,.png,.jpg,.jpeg" hidden>
                </div>
                <div class="file-list" id="file-list">
                    <!-- Files added dynamically -->
                </div>
            </section>
        </main>

        <!-- Footer with Launch Button -->
        <footer class="home-footer">
            <div class="footer-info">
                <span class="shield-icon">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                </span>
                <span class="stealth-label">Invisible to screen sharing</span>
            </div>
            <button class="launch-btn" id="btn-launch">
                <span class="launch-btn-text">Start ShadowBot</span>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
            </button>
        </footer>
    </div>

    <script src="services/prompts.js"></script>
    <script src="services/context.js"></script>
    <script src="home-renderer.js"></script>
</body>

</html>