flashgta.github.io/index.html at main · FlashGTA/flashgta.github.io · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightning - Introduction</title>
    <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@400;500;600;700;800&family=Pretendard:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
      <link rel="stylesheet" href="style.css">

</head>
<body>

    <div class="slide-container" id="intro-slide">
        <!-- Background Glow Effect -->
        <div class="bg-glow"></div>

        <!-- Left Content -->
        <div class="content-side">
            <!-- Header / Logo -->
            <div class="brand-header">
                <div class="logo-box">
                    <i class="fa-solid fa-bolt logo-icon"></i>
                </div>
                <div class="brand-name">
                    <span class="brand-title">LIGHTNING</span>
                    <span class="brand-subtitle">Gov-Tech AI Agency</span>
                </div>
            </div>

            <!-- Hero Text -->
            <h1>
                거대 조직을 위한<br>
                <span>가장 빠른 빛</span>, 라이트닝
            </h1>
            <p class="description">
                라이트닝은 공공기관 및 대형 프로젝트를 위한 <strong>긴급 대응 특수부대</strong>입니다.<br>
                복잡한 절차와 보안 규제 속에서도, <strong>AI 에이전트 기술</strong>을 활용해<br>
                상상만 했던 서비스를 단 <strong>2주 만에 현실로</strong> 만들어냅니다.
            </p>

            <!-- Key Features Grid -->
            <div class="feature-grid">
    <div class="feature-item">
        <div class="feature-icon"><i class="fa-solid fa-shield-halved"></i></div>
        <h3 class="feature-title">Gov-Secure</h3>
        <p class="feature-text">공공 환경에 적합한 안정성과<br>다양한 플랫폼 대응력</p>
    </div>
    <div class="feature-item">
        <div class="feature-icon"><i class="fa-solid fa-bolt"></i></div>
        <h3 class="feature-title">Time-Critical</h3>
        <p class="feature-text">신속한 상황 대응을 위한<br>효율적인 개발 구조</p>
    </div>
    <div class="feature-item">
        <div class="feature-icon"><i class="fa-solid fa-robot"></i></div>
        <h3 class="feature-title">AI-Native</h3>
        <p class="feature-text">AI 기술을 자연스럽게 통합한<br>지능형 서비스 설계</p>
    </div>
</div>


            <!-- Footer Info -->
            <div class="footer-info">
                <div class="info-item">
                    <i class="fa-solid fa-globe"></i>
                    <a href="#">https://flashgta.github.io/</a>
                </div>
                <div class="info-item">
                    <i class="fa-solid fa-location-dot"></i>
                    <span>Korea</span>
                </div>
            </div>
        </div>

        <!-- Right Image -->
        <div class="image-side">
            <img src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2940&auto=format&fit=crop" alt="City Architecture">
        </div>

        <!-- GEMINI AI CHAT WIDGET -->
        <div class="ai-fab" id="aiFab" title="AI Consultant">
            <i class="fa-solid fa-bolt"></i>
        </div>

        <div class="ai-chat-window" id="aiChatWindow">
            <div class="chat-header">
                <div class="chat-header-icon">
                    <i class="fa-solid fa-robot"></i>
                </div>
                <div>
                    <span class="chat-title">Lightning AI Consultant</span>
                    <span class="chat-subtitle">Powered by Gemini ✨</span>
                </div>
            </div>
            <div class="chat-messages" id="chatMessages">
                <div class="message ai">
                    안녕하세요! ⚡<br>
                    어떤 서비스나 기능이 필요하신가요? 간단히 말씀해 주세요.
                </div>
                <!-- Messages will appear here -->
                <div class="typing-indicator" id="typingIndicator">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
            </div>
            <div class="chat-input-area">
                <input type="text" id="honeypot" name="honeypot" style="display:none" tabindex="-1" autocomplete="off">
                <input type="text" class="chat-input" id="chatInput" placeholder="예: 재난 지원금 신청 앱이 급해요..." onkeypress="handleKeyPress(event)">
                <button class="send-btn" onclick="sendMessage()">
                    <i class="fa-solid fa-paper-plane"></i>
                </button>
            </div>
        </div>

    </div>


    <script>
    // ========================================
    // UI 초기화
    // ========================================
    const aiFab = document.getElementById('aiFab');
    const aiChatWindow = document.getElementById('aiChatWindow');
    const chatMessages = document.getElementById('chatMessages');
    const chatInput = document.getElementById('chatInput');
    const typingIndicator = document.getElementById('typingIndicator');

    let isOpen = false;

    aiFab.addEventListener('click', () => {
        isOpen = !isOpen;
        if (isOpen) {
            aiChatWindow.classList.add('active');
            aiFab.style.transform = 'rotate(45deg)';
            chatInput.focus();
        } else {
            aiChatWindow.classList.remove('active');
            aiFab.style.transform = 'rotate(0deg)';
        }
    });

    function handleKeyPress(e) {
        if (e.key === 'Enter') sendMessage();
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.appendChild(document.createTextNode(text));
        return div.innerHTML;
    }

    function appendMessage(text, sender) {
        const div = document.createElement('div');
        div.classList.add('message', sender);
        if (sender === 'ai') {
            // HTML 이스케이프 후 bold 파싱 적용 (XSS 방지)
            const escaped = escapeHtml(text.replace(/\[INQUIRY_COMPLETE\]/g, '').trim());
            const formatted = escaped.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
            div.innerHTML = formatted;
        } else {
            // 사용자 입력은 XSS 방지를 위해 텍스트로만 처리
            div.textContent = text;
        }
        chatMessages.insertBefore(div, typingIndicator);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function showTyping() {
        typingIndicator.style.display = 'flex';
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function hideTyping() {
        typingIndicator.style.display = 'none';
    }

    // ========================================
    // 상태 관리
    // ========================================
    // STEP: 'inquiry' → 'privacy' → 'contact_name' → 'contact_info' → 'done'
    let step = 'inquiry';
    let conversationHistory = []; // Gemini 멀티턴용
    let displayHistory = [];      // 이메일 발송용 전체 대화
    let collectedName = '';
    let collectedContact = '';
    let inquirySummary = '';

    // ========================================
    // Rate Limiting (sessionStorage 기반)
    // ========================================
    function checkRateLimit() {
        const now = Date.now();
        const windowMs = 10 * 60 * 1000; // 10분
        const maxMessages = 20;
        let timestamps = JSON.parse(sessionStorage.getItem('msgTimestamps') || '[]');
        timestamps = timestamps.filter(t => now - t < windowMs);
        if (timestamps.length >= maxMessages) {
            return false;
        }
        timestamps.push(now);
        sessionStorage.setItem('msgTimestamps', JSON.stringify(timestamps));
        return true;
    }

    function checkEmailSent() {
        return sessionStorage.getItem('emailSent') === 'true';
    }

    function markEmailSent() {
        sessionStorage.setItem('emailSent', 'true');
    }

    // ========================================
    // 메인 sendMessage 함수
    // ========================================
    async function sendMessage() {
        const text = chatInput.value.trim();
        if (!text) return;

        // Honeypot 검사
        const honeypot = document.getElementById('honeypot');
        if (honeypot && honeypot.value) return;

        // Rate Limit 검사
        if (!checkRateLimit()) {
            appendMessage('잠시 후 다시 시도해 주세요. (요청이 너무 많습니다)', 'ai');
            return;
        }

        // 입력창 초기화
        chatInput.value = '';
        appendMessage(text, 'user');
        displayHistory.push({ role: 'user', text });

        // STEP별 처리
        if (step === 'inquiry') {
            await handleInquiryStep(text);
        } else if (step === 'privacy') {
            handlePrivacyStep(text);
        } else if (step === 'contact_name') {
            handleContactNameStep(text);
        } else if (step === 'contact_info') {
            await handleContactInfoStep(text);
        }
    }

    // ========================================
    // STEP 1: Gemini 대화 (inquiry)
    // ========================================
    async function handleInquiryStep(text) {
        conversationHistory.push({ role: 'user', parts: [{ text }] });
        showTyping();

        try {
            const response = await fetch('/api/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ contents: conversationHistory })
            });

            if (response.status === 429) {
                hideTyping();
                appendMessage('잠시 후 다시 시도해 주세요. 🙏', 'ai');
                conversationHistory.pop();
                return;
            }

            if (!response.ok) throw new Error(`HTTP ${response.status}`);

            const data = await response.json();
            const aiText = data.text;

            hideTyping();

            const cleanText = aiText.replace(/\[INQUIRY_COMPLETE\]/g, '').trim();
            appendMessage(cleanText, 'ai');
            displayHistory.push({ role: 'ai', text: cleanText });
            conversationHistory.push({ role: 'model', parts: [{ text: aiText }] });

            if (inquirySummary === '' && conversationHistory.length >= 1) {
                inquirySummary = conversationHistory[0].parts[0].text;
            }

            if (aiText.includes('[INQUIRY_COMPLETE]')) {
                step = 'privacy';
                setTimeout(() => {
                    appendMessage('담당자 연결을 위해 연락처를 남겨주세요.\n개인정보는 상담 목적으로만 사용됩니다. 동의하시나요? (예 / 아니오)', 'ai');
                }, 400);
            }

        } catch (err) {
            hideTyping();
            appendMessage('응답이 지연되고 있습니다. 잠시 후 다시 시도해주세요.', 'ai');
            conversationHistory.pop();
        }
    }

    // ========================================
    // STEP 2: 개인정보 동의 (privacy)
    // ========================================
    function handlePrivacyStep(text) {
        const lower = text.toLowerCase().trim();
        if (lower === '예' || lower === '네' || lower === 'yes' || lower === 'y') {
            step = 'contact_name';
            appendMessage('감사합니다! 성함을 알려주세요.', 'ai');
        } else {
            step = 'done';
            appendMessage('소중한 시간 내주셔서 감사합니다. 언제든지 다시 방문해 주세요. 😊', 'ai');
            chatInput.disabled = true;
            chatInput.placeholder = '상담이 종료되었습니다.';
        }
    }

    // ========================================
    // STEP 3: 이름 수집 (contact_name)
    // ========================================
    function handleContactNameStep(text) {
        if (text.length < 2) {
            appendMessage('올바른 성함을 입력해 주세요.', 'ai');
            return;
        }
        collectedName = text;
        step = 'contact_info';
        appendMessage(`${collectedName}님, 연락 가능한 이메일 또는 전화번호를 알려주세요.`, 'ai');
    }

    // ========================================
    // STEP 4: 연락처 수집 및 이메일 발송 (contact_info)
    // ========================================
    async function handleContactInfoStep(text) {
        // 이메일 또는 전화번호 검증
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const phoneRegex = /^[0-9\-\+\s]{9,15}$/;

        if (!emailRegex.test(text) && !phoneRegex.test(text)) {
            appendMessage('올바른 이메일 또는 전화번호 형식으로 입력해 주세요.\n예) hong@example.com 또는 010-1234-5678', 'ai');
            return;
        }

        if (checkEmailSent()) {
            appendMessage('이미 문의가 접수되었습니다. 담당자 확인 후 연락드리겠습니다.', 'ai');
            return;
        }

        collectedContact = text;
        step = 'done';

        showTyping();

        // 전체 대화 내용 텍스트 생성
        const fullConversation = displayHistory
            .map(m => `[${m.role === 'user' ? '문의자' : 'AI'}] ${m.text}`)
            .join('\n\n');

        try {
            const honeypot = document.getElementById('honeypot');
            const response = await fetch('/api/send-email', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    visitor_name: collectedName,
                    contact: collectedContact,
                    inquiry_summary: inquirySummary,
                    full_conversation: fullConversation,
                    date: new Date().toLocaleString('ko-KR'),
                    honeypot: honeypot ? honeypot.value : ''
                })
            });

            hideTyping();

            if (response.ok) {
                appendMessage('감사합니다! 담당자가 검토 후 연락드리겠습니다. ⚡', 'ai');
                markEmailSent();
            } else {
                appendMessage('발송 중 오류가 발생했습니다. redsunjin@gmail.com으로 직접 문의해 주세요.', 'ai');
            }
        } catch (err) {
            hideTyping();
            appendMessage('발송 중 오류가 발생했습니다. redsunjin@gmail.com으로 직접 문의해 주세요.', 'ai');
        }

        chatInput.disabled = true;
        chatInput.placeholder = '상담이 완료되었습니다.';
    }
</script>
<div class="lightning-flash"></div>
</body>
</html>