Navi_frontend/input.html at main · mkmacbook/Navi_frontend · 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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NAVI - 도움 요청</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans KR', sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
            color: #333;
            background-color: #ffffff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        header {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding: 20px 20px;
            text-align: left;
        }
        .navi-logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #4f46e5;
        }

        .main-content {
            flex-grow: 1;
            padding: 50px 20px;
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
        }

        .main-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #e6e9ff;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }
        .main-icon img {
            width: 40px;
            height: 40px;
        }

        .title-text {
            font-size: 1.8rem;
            font-weight: 500;
            margin-bottom: 40px;
            color: #222;
        }

        .prompt-suggestions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 40px;
        }
        .prompt-btn {
            background-color: #f2f4ff;
            color: #4f46e5;
            border: 1px solid #4f46e5;
            padding: 10px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .prompt-btn:hover {
            background-color: #e6e9ff;
        }

        /* 입력창 영역 스타일 */
        .input-area {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            border: 1px solid #eee;
            background-color: white;
        }
        .input-box {
            width: 100%;
            padding: 15px 50px 15px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            resize: none;
            box-sizing: border-box;
            min-height: 50px;
            line-height: 1.5;
            outline: none; /* 포커스 시 테두리 제거 */
        }
        .input-box::placeholder {
            color: #aaa;
        }

        /* 전송 아이콘 스타일 */
        .send-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #4f46e5;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: bold;
            padding: 10px; /* 클릭 영역 확보 */
        }
        .send-icon:hover {
            color: #3b31a8;
        }

        .plus-icon {
             position: absolute;
            left: 15px;
            bottom: 15px;
            color: #999;
            cursor: pointer;
            font-size: 1.2rem;
            display: none; /* 텍스트 입력 시 겹칠 수 있어 일단 숨김 처리하거나 위치 조정 필요 */
        }

        footer {
            padding: 30px 20px;
            text-align: center;
            font-size: 0.8rem;
            color: #999;
            border-top: 1px solid #eee;
        }
        .footer-logo {
            font-weight: 700;
            color: #4f46e5;
            font-size: 1.2rem;
            margin-bottom: 10px;
            display: block;
        }
        .footer-links {
            margin-top: 20px;
        }
        .footer-links a {
            color: #777;
            text-decoration: none;
            margin: 0 10px;
            font-size: 0.9rem;
        }

        @media (max-width: 600px) {
            .title-text { font-size: 1.5rem; }
            .prompt-suggestions { flex-direction: column; align-items: center; }
            .prompt-btn { width: 80%; }
        }
    </style>
</head>
<body>

    <header>
        <div class="navi-logo">NAVI</div>
    </header>

    <div class="main-content">
        <div class="main-icon">
            <img src="https://via.placeholder.com/40?text=A" alt="AI Icon">
        </div>

        <div class="title-text">
            도움이 필요한 사항을 입력하면<br>
            최적의 AI와 프롬프트를 추천해드릴게요!
        </div>

        <div class="prompt-suggestions">
            <div class="prompt-btn" onclick="fillInput(this)">API 기능 명세서 초안 작성하기</div>
            <div class="prompt-btn" onclick="fillInput(this)">논문 참고문헌 스타일을 자동 변환하기</div>
            <div class="prompt-btn" onclick="fillInput(this)">업로드용 로고 이미지 생성하기</div>
        </div>

        <div class="input-area">
            <textarea
                id="userInput"
                class="input-box"
                placeholder="인스타 마케팅 문구 초안 작성하기"
                onkeydown="checkEnter(event)"></textarea>

            <span class="send-icon" onclick="sendMessage()">▶</span>
        </div>

        <p style="margin-top: 50px; font-weight: 500; color: #4f46e5;">상황별 최적 AI 툴 가이드</p>
    </div>

    <footer>
        <span class="footer-logo">NAVI</span>
        <p>All right reserved © 2025 NAVI IVAN</p>
        <div class="footer-links">
            <a href="#">소개</a>
            <a href="#">개인정보처리방침</a>
            <a href="#">이용약관</a>
            <a href="#">문의하기</a>
        </div>
    </footer>

    <script>
        // 1. 메시지 전송 및 페이지 이동 함수
        function sendMessage() {
            const input = document.getElementById('userInput');
            const message = input.value.trim(); // 앞뒤 공백 제거

            if (message.length > 0) {
                // recommend.html 페이지로 이동하면서 ?q=내용 을 함께 보냄
                // encodeURIComponent는 한글이나 특수문자가 깨지지 않게 해줌
                window.location.href = `recommend.html?q=${encodeURIComponent(message)}`;
            } else {
                alert("내용을 입력해주세요!");
            }
        }

        // 2. 엔터키 감지 함수
        function checkEnter(event) {
            // 누른 키가 'Enter'이고, Shift키를 누르지 않은 상태라면
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault(); // 엔터 입력 시 줄바꿈 되는 기본 동작을 막음
                sendMessage(); // 전송 함수 실행
            }
        }

        // 3. (추가 기능) 위의 추천 버튼을 누르면 입력창에 글씨가 자동으로 써지는 기능
        function fillInput(element) {
            const input = document.getElementById('userInput');
            input.value = element.innerText; // 버튼의 텍스트를 입력창에 넣음
            input.focus(); // 입력창으로 커서 이동
        }
    </script>

</body>
</html>