Like 0
Fork 0

Last active 3 hours ago

taufikmuharrom revised this gist 3 hours ago. Go to revision

No changes

taufikmuharrom revised this gist 3 hours ago. Go to revision

8 files changed, 1252 insertions

embed-iframe-auth-history.html(file created)

@@ -0,0 +1,231 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Iframe (Auth + History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white;
22 + border-radius: 24px;
23 + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24 + width: 100%;
25 + max-width: 480px;
26 + overflow: hidden;
27 + border: 1px solid #f1f5f9;
28 + }
29 +
30 + .card-header {
31 + padding: 32px;
32 + text-align: center;
33 + border-bottom: 1px solid #f1f5f9;
34 + }
35 +
36 + .icon-circle {
37 + width: 64px;
38 + height: 64px;
39 + background: #e0e7ff;
40 + color: #4f46e5;
41 + border-radius: 50%;
42 + display: flex;
43 + align-items: center;
44 + justify-content: center;
45 + font-size: 28px;
46 + margin: 0 auto 16px;
47 + }
48 +
49 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
50 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
51 +
52 + .card-body { padding: 24px 32px 32px; }
53 + .section-title {
54 + font-size: 0.7rem;
55 + font-weight: 700;
56 + text-transform: uppercase;
57 + letter-spacing: 0.05em;
58 + color: #94a3b8;
59 + margin-bottom: 12px;
60 + }
61 +
62 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
63 + .badge {
64 + font-size: 0.7rem;
65 + font-weight: 600;
66 + padding: 6px 12px;
67 + background: #f1f5f9;
68 + border-radius: 99px;
69 + display: flex;
70 + align-items: center;
71 + gap: 6px;
72 + color: #475569;
73 + }
74 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
75 + .badge-active { background: #e0f2f1; color: #14b8a6; }
76 + .badge-active .badge-dot { background: #14b8a6; }
77 +
78 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
79 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
80 + .detail-row:last-child { border-bottom: none; }
81 + .detail-label { color: #64748b; font-weight: 500; }
82 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
83 +
84 + .btn-primary {
85 + width: 100%;
86 + background: #4f46e5;
87 + color: white;
88 + border: none;
89 + padding: 14px 24px;
90 + font-size: 0.95rem;
91 + font-weight: 600;
92 + border-radius: 12px;
93 + cursor: pointer;
94 + display: inline-flex;
95 + align-items: center;
96 + justify-content: center;
97 + gap: 8px;
98 + transition: all 0.2s ease;
99 + }
100 + .btn-primary:hover {
101 + transform: translateY(-2px);
102 + filter: brightness(1.1);
103 + }
104 +
105 + .modal {
106 + display: none;
107 + position: fixed;
108 + inset: 0;
109 + background: rgba(0, 0, 0, 0.4);
110 + backdrop-filter: blur(8px);
111 + z-index: 1000;
112 + align-items: center;
113 + justify-content: center;
114 + padding: 20px;
115 + }
116 + .modal.active { display: flex; }
117 + .modal-content {
118 + background: white;
119 + border-radius: 24px;
120 + width: 100%;
121 + max-width: 800px;
122 + height: 80vh;
123 + max-height: 600px;
124 + display: flex;
125 + flex-direction: column;
126 + overflow: hidden;
127 + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
128 + }
129 + .modal-header {
130 + padding: 16px 24px;
131 + background: #f8fafc;
132 + border-bottom: 1px solid #f1f5f9;
133 + display: flex;
134 + justify-content: space-between;
135 + align-items: center;
136 + }
137 + .modal-header h3 { font-size: 1rem; color: #0f172a; }
138 + .close-btn {
139 + background: #f1f5f9;
140 + border: none;
141 + width: 32px;
142 + height: 32px;
143 + border-radius: 8px;
144 + cursor: pointer;
145 + display: flex;
146 + align-items: center;
147 + justify-content: center;
148 + font-size: 1.25rem;
149 + color: #64748b;
150 + }
151 + .modal-body { flex: 1; min-height: 0; }
152 + iframe { width: 100%; height: 100%; border: none; }
153 + </style>
154 + </head>
155 + <body>
156 +
157 + <div class="card">
158 + <div class="card-header">
159 + <div class="icon-circle">🔐</div>
160 + <h1>Chatbot Embed Demo</h1>
161 + <p>Authenticated • With History • Iframe</p>
162 + </div>
163 + <div class="card-body">
164 + <div class="section-title">Configuration</div>
165 + <div class="badges">
166 + <span class="badge badge-active"><span class="badge-dot"></span>Auth On</span>
167 + <span class="badge badge-active"><span class="badge-dot"></span>With History</span>
168 + <span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
169 + </div>
170 + <div class="details">
171 + <div class="detail-row">
172 + <span class="detail-label">Authentication</span>
173 + <span class="detail-value">Required</span>
174 + </div>
175 + <div class="detail-row">
176 + <span class="detail-label">History</span>
177 + <span class="detail-value">Enabled</span>
178 + </div>
179 + <div class="detail-row">
180 + <span class="detail-label">Base URL</span>
181 + <span class="detail-value">.../chatbot-auth/{app_code}/history</span>
182 + </div>
183 + </div>
184 + <button class="btn-primary" onclick="openChatbot()">
185 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
186 + Open Chatbot
187 + </button>
188 + </div>
189 + </div>
190 +
191 + <div id="chatModal" class="modal">
192 + <div class="modal-content">
193 + <div class="modal-header">
194 + <h3>Chatbot — Auth + History</h3>
195 + <button class="close-btn" onclick="closeChatbot()">&times;</button>
196 + </div>
197 + <div class="modal-body">
198 + <iframe id="chatIframe" src="" allow="microphone"></iframe>
199 + </div>
200 + </div>
201 + </div>
202 +
203 + <script>
204 + const APP_CODE = '4eFb0BunqZYEZlg7'
205 + const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
206 +
207 + function openChatbot() {
208 + const modal = document.getElementById('chatModal')
209 + const iframe = document.getElementById('chatIframe')
210 + iframe.src = `${BASE_URL}/chatbot-auth/${APP_CODE}/history`
211 + modal.classList.add('active')
212 + document.body.style.overflow = 'hidden'
213 + }
214 +
215 + function closeChatbot() {
216 + const modal = document.getElementById('chatModal')
217 + const iframe = document.getElementById('chatIframe')
218 + modal.classList.remove('active')
219 + setTimeout(() => {
220 + iframe.src = ''
221 + document.body.style.overflow = ''
222 + }, 300)
223 + }
224 +
225 + document.getElementById('chatModal').addEventListener('click', (e) => {
226 + if (e.target === document.getElementById('chatModal')) closeChatbot()
227 + })
228 + </script>
229 +
230 + </body>
231 + </html>

embed-iframe-auth-no-history.html(file created)

@@ -0,0 +1,191 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Iframe (Auth • No History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white;
22 + border-radius: 24px;
23 + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24 + width: 100%;
25 + max-width: 480px;
26 + overflow: hidden;
27 + border: 1px solid #f1f5f9;
28 + }
29 +
30 + .card-header {
31 + padding: 32px;
32 + text-align: center;
33 + border-bottom: 1px solid #f1f5f9;
34 + }
35 +
36 + .icon-circle {
37 + width: 64px;
38 + height: 64px;
39 + background: #e0e7ff;
40 + color: #4f46e5;
41 + border-radius: 50%;
42 + display: flex;
43 + align-items: center;
44 + justify-content: center;
45 + font-size: 28px;
46 + margin: 0 auto 16px;
47 + }
48 +
49 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
50 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
51 +
52 + .card-body { padding: 24px 32px 32px; }
53 + .section-title {
54 + font-size: 0.7rem;
55 + font-weight: 700;
56 + text-transform: uppercase;
57 + letter-spacing: 0.05em;
58 + color: #94a3b8;
59 + margin-bottom: 12px;
60 + }
61 +
62 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
63 + .badge {
64 + font-size: 0.7rem;
65 + font-weight: 600;
66 + padding: 6px 12px;
67 + background: #f1f5f9;
68 + border-radius: 99px;
69 + display: flex;
70 + align-items: center;
71 + gap: 6px;
72 + color: #475569;
73 + }
74 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
75 + .badge-active { background: #e0f2f1; color: #14b8a6; }
76 + .badge-active .badge-dot { background: #14b8a6; }
77 +
78 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
79 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
80 + .detail-row:last-child { border-bottom: none; }
81 + .detail-label { color: #64748b; font-weight: 500; }
82 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
83 +
84 + .btn-primary {
85 + width: 100%;
86 + background: #4f46e5;
87 + color: white;
88 + border: none;
89 + padding: 14px 24px;
90 + font-size: 0.95rem;
91 + font-weight: 600;
92 + border-radius: 12px;
93 + cursor: pointer;
94 + display: inline-flex;
95 + align-items: center;
96 + justify-content: center;
97 + gap: 8px;
98 + }
99 + .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
100 +
101 + .modal {
102 + display: none;
103 + position: fixed;
104 + inset: 0;
105 + background: rgba(0, 0, 0, 0.4);
106 + backdrop-filter: blur(8px);
107 + z-index: 1000;
108 + align-items: center;
109 + justify-content: center;
110 + padding: 20px;
111 + }
112 + .modal.active { display: flex; }
113 + .modal-content {
114 + background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px;
115 + display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
116 + }
117 + .modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
118 + .modal-header h3 { font-size: 1rem; color: #0f172a; }
119 + .close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; }
120 + .modal-body { flex: 1; min-height: 0; }
121 + iframe { width: 100%; height: 100%; border: none; }
122 + </style>
123 + </head>
124 + <body>
125 +
126 + <div class="card">
127 + <div class="card-header">
128 + <div class="icon-circle">🔐</div>
129 + <h1>Chatbot Embed Demo</h1>
130 + <p>Authenticated • No History • Iframe</p>
131 + </div>
132 + <div class="card-body">
133 + <div class="section-title">Configuration</div>
134 + <div class="badges">
135 + <span class="badge badge-active"><span class="badge-dot"></span>Auth Required</span>
136 + <span class="badge"><span class="badge-dot"></span>History Disabled</span>
137 + <span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
138 + </div>
139 + <div class="details">
140 + <div class="detail-row">
141 + <span class="detail-label">Authentication</span>
142 + <span class="detail-value">True</span>
143 + </div>
144 + <div class="detail-row">
145 + <span class="detail-label">History</span>
146 + <span class="detail-value">None</span>
147 + </div>
148 + <div class="detail-row">
149 + <span class="detail-label">Base URL</span>
150 + <span class="detail-value">.../chatbot-auth/{app_code}</span>
151 + </div>
152 + </div>
153 + <button class="btn-primary" onclick="openChatbot()">
154 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
155 + Open Chatbot
156 + </button>
157 + </div>
158 + </div>
159 +
160 + <div id="chatModal" class="modal">
161 + <div class="modal-content">
162 + <div class="modal-header">
163 + <h3>Chatbot — Auth + No History</h3>
164 + <button class="close-btn" onclick="closeChatbot()">&times;</button>
165 + </div>
166 + <div class="modal-body">
167 + <iframe id="chatIframe" src="" allow="microphone"></iframe>
168 + </div>
169 + </div>
170 + </div>
171 +
172 + <script>
173 + const APP_CODE = '4eFb0BunqZYEZlg7'
174 + const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
175 + function openChatbot() {
176 + const modal = document.getElementById('chatModal')
177 + const iframe = document.getElementById('chatIframe')
178 + iframe.src = `${BASE_URL}/chatbot-auth/${APP_CODE}`
179 + modal.classList.add('active')
180 + document.body.style.overflow = 'hidden'
181 + }
182 + function closeChatbot() {
183 + const modal = document.getElementById('chatModal')
184 + const iframe = document.getElementById('chatIframe')
185 + modal.classList.remove('active')
186 + setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300)
187 + }
188 + </script>
189 +
190 + </body>
191 + </html>

embed-iframe-no-auth-history.html(file created)

@@ -0,0 +1,121 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Iframe (Public • History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white; border-radius: 24px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 480px; overflow: hidden; border: 1px solid #f1f5f9;
22 + }
23 + .card-header { padding: 32px; text-align: center; border-bottom: 1px solid #f1f5f9; }
24 + .icon-circle { width: 64px; height: 64px; background: #f0fdfa; color: #14b8a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; }
25 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
26 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
27 + .card-body { padding: 24px 32px 32px; }
28 + .section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 12px; }
29 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
30 + .badge { font-size: 0.7rem; font-weight: 600; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; }
31 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
32 + .badge-active { background: #dbeafe; color: #1e40af; }
33 + .badge-active .badge-dot { background: #1e40af; }
34 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
35 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
36 + .detail-row:last-child { border-bottom: none; }
37 + .detail-label { color: #64748b; font-weight: 500; }
38 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
39 +
40 + .btn-primary {
41 + width: 100%; background: #14b8a6; color: white; border: none; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
42 + }
43 + .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
44 + .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
45 + .modal.active { display: flex; }
46 + .modal-content { background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
47 + .modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
48 + .modal-header h3 { font-size: 1rem; color: #0f172a; }
49 + .close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; }
50 + .modal-body { flex: 1; min-height: 0; }
51 + iframe { width: 100%; height: 100%; border: none; }
52 + </style>
53 + </head>
54 + <body>
55 +
56 + <div class="card">
57 + <div class="card-header">
58 + <div class="icon-circle">💬</div>
59 + <h1>Chatbot Embed Demo</h1>
60 + <p>Public • With History • Iframe</p>
61 + </div>
62 + <div class="card-body">
63 + <div class="section-title">Configuration</div>
64 + <div class="badges">
65 + <span class="badge"><span class="badge-dot"></span>No Auth</span>
66 + <span class="badge badge-active"><span class="badge-dot"></span>History Enabled</span>
67 + <span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
68 + </div>
69 + <div class="details">
70 + <div class="detail-row">
71 + <span class="detail-label">Authentication</span>
72 + <span class="detail-value">False</span>
73 + </div>
74 + <div class="detail-row">
75 + <span class="detail-label">History</span>
76 + <span class="detail-value">True</span>
77 + </div>
78 + <div class="detail-row">
79 + <span class="detail-label">Base URL</span>
80 + <span class="detail-value">.../chatbot/{app_code}/history</span>
81 + </div>
82 + </div>
83 + <button class="btn-primary" onclick="openChatbot()">
84 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
85 + Open Chatbot
86 + </button>
87 + </div>
88 + </div>
89 +
90 + <div id="chatModal" class="modal">
91 + <div class="modal-content">
92 + <div class="modal-header">
93 + <h3>Chatbot — Public + History</h3>
94 + <button class="close-btn" onclick="closeChatbot()">&times;</button>
95 + </div>
96 + <div class="modal-body">
97 + <iframe id="chatIframe" src="" allow="microphone"></iframe>
98 + </div>
99 + </div>
100 + </div>
101 +
102 + <script>
103 + const APP_CODE = '4eFb0BunqZYEZlg7'
104 + const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
105 + function openChatbot() {
106 + const modal = document.getElementById('chatModal')
107 + const iframe = document.getElementById('chatIframe')
108 + iframe.src = `${BASE_URL}/chatbot/${APP_CODE}/history`
109 + modal.classList.add('active')
110 + document.body.style.overflow = 'hidden'
111 + }
112 + function closeChatbot() {
113 + const modal = document.getElementById('chatModal')
114 + const iframe = document.getElementById('chatIframe')
115 + modal.classList.remove('active')
116 + setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300)
117 + }
118 + </script>
119 +
120 + </body>
121 + </html>

embed-iframe-no-auth-no-history.html(file created)

@@ -0,0 +1,119 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Iframe (Public • No History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white; border-radius: 24px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 480px; overflow: hidden; border: 1px solid #f1f5f9;
22 + }
23 + .card-header { padding: 32px; text-align: center; border-bottom: 1px solid #f1f5f9; }
24 + .icon-circle { width: 64px; height: 64px; background: #f0fdfa; color: #14b8a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; }
25 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
26 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
27 + .card-body { padding: 24px 32px 32px; }
28 + .section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 12px; }
29 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
30 + .badge { font-size: 0.7rem; font-weight: 600; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; }
31 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
32 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
33 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
34 + .detail-row:last-child { border-bottom: none; }
35 + .detail-label { color: #64748b; font-weight: 500; }
36 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
37 +
38 + .btn-primary {
39 + width: 100%; background: #14b8a6; color: white; border: none; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
40 + }
41 + .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
42 + .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
43 + .modal.active { display: flex; }
44 + .modal-content { background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
45 + .modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
46 + .modal-header h3 { font-size: 1rem; color: #0f172a; }
47 + .close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; }
48 + .modal-body { flex: 1; min-height: 0; }
49 + iframe { width: 100%; height: 100%; border: none; }
50 + </style>
51 + </head>
52 + <body>
53 +
54 + <div class="card">
55 + <div class="card-header">
56 + <div class="icon-circle">💬</div>
57 + <h1>Chatbot Embed Demo</h1>
58 + <p>Public • No History • Iframe</p>
59 + </div>
60 + <div class="card-body">
61 + <div class="section-title">Configuration</div>
62 + <div class="badges">
63 + <span class="badge"><span class="badge-dot"></span>No Auth</span>
64 + <span class="badge"><span class="badge-dot"></span>History Off</span>
65 + <span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
66 + </div>
67 + <div class="details">
68 + <div class="detail-row">
69 + <span class="detail-label">Authentication</span>
70 + <span class="detail-value">None</span>
71 + </div>
72 + <div class="detail-row">
73 + <span class="detail-label">History</span>
74 + <span class="detail-value">Disabled</span>
75 + </div>
76 + <div class="detail-row">
77 + <span class="detail-label">Base URL</span>
78 + <span class="detail-value">.../chatbot/{app_code}</span>
79 + </div>
80 + </div>
81 + <button class="btn-primary" onclick="openChatbot()">
82 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
83 + Open Chatbot
84 + </button>
85 + </div>
86 + </div>
87 +
88 + <div id="chatModal" class="modal">
89 + <div class="modal-content">
90 + <div class="modal-header">
91 + <h3>Chatbot — Public + No History</h3>
92 + <button class="close-btn" onclick="closeChatbot()">&times;</button>
93 + </div>
94 + <div class="modal-body">
95 + <iframe id="chatIframe" src="" allow="microphone"></iframe>
96 + </div>
97 + </div>
98 + </div>
99 +
100 + <script>
101 + const APP_CODE = '4eFb0BunqZYEZlg7'
102 + const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
103 + function openChatbot() {
104 + const modal = document.getElementById('chatModal')
105 + const iframe = document.getElementById('chatIframe')
106 + iframe.src = `${BASE_URL}/chatbot/${APP_CODE}`
107 + modal.classList.add('active')
108 + document.body.style.overflow = 'hidden'
109 + }
110 + function closeChatbot() {
111 + const modal = document.getElementById('chatModal')
112 + const iframe = document.getElementById('chatIframe')
113 + modal.classList.remove('active')
114 + setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300)
115 + }
116 + </script>
117 +
118 + </body>
119 + </html>

embed-script-auth-history.html(file created)

@@ -0,0 +1,148 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Script (Auth + History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white;
22 + border-radius: 24px;
23 + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24 + width: 100%;
25 + max-width: 480px;
26 + overflow: hidden;
27 + border: 1px solid #f1f5f9;
28 + }
29 +
30 + .card-header {
31 + padding: 32px;
32 + text-align: center;
33 + border-bottom: 1px solid #f1f5f9;
34 + }
35 +
36 + .icon-circle {
37 + width: 64px;
38 + height: 64px;
39 + background: #e0e7ff;
40 + color: #4f46e5;
41 + border-radius: 50%;
42 + display: flex;
43 + align-items: center;
44 + justify-content: center;
45 + font-size: 28px;
46 + margin: 0 auto 16px;
47 + }
48 +
49 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
50 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
51 +
52 + .card-body { padding: 24px 32px 32px; }
53 + .section-title {
54 + font-size: 0.7rem;
55 + font-weight: 700;
56 + text-transform: uppercase;
57 + letter-spacing: 0.05em;
58 + color: #94a3b8;
59 + margin-bottom: 12px;
60 + }
61 +
62 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
63 + .badge {
64 + font-size: 0.7rem;
65 + font-weight: 600;
66 + padding: 6px 12px;
67 + background: #f1f5f9;
68 + border-radius: 99px;
69 + display: flex;
70 + align-items: center;
71 + gap: 6px;
72 + color: #475569;
73 + }
74 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
75 + .badge-active { background: #e0f2f1; color: #14b8a6; }
76 + .badge-active .badge-dot { background: #14b8a6; }
77 +
78 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
79 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
80 + .detail-row:last-child { border-bottom: none; }
81 + .detail-label { color: #64748b; font-weight: 500; }
82 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
83 +
84 + .widget-preview {
85 + text-align: center;
86 + padding: 24px;
87 + background: #fdfdfd;
88 + border: 2px dashed #e2e8f0;
89 + border-radius: 16px;
90 + }
91 + .widget-preview svg { color: #4f46e5; margin-bottom: 12px; opacity: 0.8; }
92 + .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
93 + </style>
94 + </head>
95 + <body>
96 +
97 + <div class="card">
98 + <div class="card-header">
99 + <div class="icon-circle">🔐</div>
100 + <h1>Chatbot Embed Demo</h1>
101 + <p>Authenticated • With History • Script</p>
102 + </div>
103 + <div class="card-body">
104 + <div class="section-title">Configuration</div>
105 + <div class="badges">
106 + <span class="badge badge-active"><span class="badge-dot"></span>Auth On</span>
107 + <span class="badge badge-active"><span class="badge-dot"></span>With History</span>
108 + <span class="badge"><span class="badge-dot"></span>Script Mode</span>
109 + </div>
110 + <div class="details">
111 + <div class="detail-row">
112 + <span class="detail-label">Authentication</span>
113 + <span class="detail-value">Required</span>
114 + </div>
115 + <div class="detail-row">
116 + <span class="detail-label">History</span>
117 + <span class="detail-value">Enabled</span>
118 + </div>
119 + <div class="detail-row">
120 + <span class="detail-label">Base URL</span>
121 + <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
122 + </div>
123 + </div>
124 + <div class="widget-preview">
125 + <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
126 + <p>Lihat di pojok <strong>kanan bawah</strong>.</p>
127 + </div>
128 + </div>
129 + </div>
130 +
131 + <script>
132 + window.blivChatbotConfig = {
133 + token: '4eFb0BunqZYEZlg7',
134 + baseUrl: 'https://ai-studio.bliv.bangunindo.io',
135 + isDev: true,
136 + login: true,
137 + history: true,
138 + draggable: true,
139 + dragAxis: 'both',
140 + dynamicScript: true,
141 + systemVariables: {},
142 + userVariables: {}
143 + };
144 + </script>
145 + <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
146 +
147 + </body>
148 + </html>

embed-script-auth-no-history.html(file created)

@@ -0,0 +1,148 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Script (Auth • No History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white;
22 + border-radius: 24px;
23 + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24 + width: 100%;
25 + max-width: 480px;
26 + overflow: hidden;
27 + border: 1px solid #f1f5f9;
28 + }
29 +
30 + .card-header {
31 + padding: 32px;
32 + text-align: center;
33 + border-bottom: 1px solid #f1f5f9;
34 + }
35 +
36 + .icon-circle {
37 + width: 64px;
38 + height: 64px;
39 + background: #e0e7ff;
40 + color: #4f46e5;
41 + border-radius: 50%;
42 + display: flex;
43 + align-items: center;
44 + justify-content: center;
45 + font-size: 28px;
46 + margin: 0 auto 16px;
47 + }
48 +
49 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
50 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
51 +
52 + .card-body { padding: 24px 32px 32px; }
53 + .section-title {
54 + font-size: 0.7rem;
55 + font-weight: 700;
56 + text-transform: uppercase;
57 + letter-spacing: 0.05em;
58 + color: #94a3b8;
59 + margin-bottom: 12px;
60 + }
61 +
62 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
63 + .badge {
64 + font-size: 0.7rem;
65 + font-weight: 600;
66 + padding: 6px 12px;
67 + background: #f1f5f9;
68 + border-radius: 99px;
69 + display: flex;
70 + align-items: center;
71 + gap: 6px;
72 + color: #475569;
73 + }
74 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
75 + .badge-active { background: #e0f2f1; color: #14b8a6; }
76 + .badge-active .badge-dot { background: #14b8a6; }
77 +
78 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
79 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
80 + .detail-row:last-child { border-bottom: none; }
81 + .detail-label { color: #64748b; font-weight: 500; }
82 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
83 +
84 + .widget-preview {
85 + text-align: center;
86 + padding: 24px;
87 + background: #fdfdfd;
88 + border: 2px dashed #e2e8f0;
89 + border-radius: 16px;
90 + }
91 + .widget-preview svg { color: #4f46e5; margin-bottom: 12px; opacity: 0.8; }
92 + .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
93 + </style>
94 + </head>
95 + <body>
96 +
97 + <div class="card">
98 + <div class="card-header">
99 + <div class="icon-circle">🔐</div>
100 + <h1>Chatbot Embed Demo</h1>
101 + <p>Authenticated • No History • Script</p>
102 + </div>
103 + <div class="card-body">
104 + <div class="section-title">Configuration</div>
105 + <div class="badges">
106 + <span class="badge badge-active"><span class="badge-dot"></span>Auth Required</span>
107 + <span class="badge"><span class="badge-dot"></span>History Disabled</span>
108 + <span class="badge"><span class="badge-dot"></span>Script Mode</span>
109 + </div>
110 + <div class="details">
111 + <div class="detail-row">
112 + <span class="detail-label">Authentication</span>
113 + <span class="detail-value">True</span>
114 + </div>
115 + <div class="detail-row">
116 + <span class="detail-label">History</span>
117 + <span class="detail-value">False</span>
118 + </div>
119 + <div class="detail-row">
120 + <span class="detail-label">Base URL</span>
121 + <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
122 + </div>
123 + </div>
124 + <div class="widget-preview">
125 + <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
126 + <p>Lihat di pojok <strong>kanan bawah</strong>.</p>
127 + </div>
128 + </div>
129 + </div>
130 +
131 + <script>
132 + window.blivChatbotConfig = {
133 + token: '4eFb0BunqZYEZlg7',
134 + baseUrl: 'https://ai-studio.bliv.bangunindo.io',
135 + isDev: true,
136 + login: true,
137 + history: false,
138 + draggable: true,
139 + dragAxis: 'both',
140 + dynamicScript: true,
141 + systemVariables: {},
142 + userVariables: {}
143 + };
144 + </script>
145 + <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
146 +
147 + </body>
148 + </html>

embed-script-no-auth-history.html(file created)

@@ -0,0 +1,148 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Script (Public • History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white;
22 + border-radius: 24px;
23 + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24 + width: 100%;
25 + max-width: 480px;
26 + overflow: hidden;
27 + border: 1px solid #f1f5f9;
28 + }
29 +
30 + .card-header {
31 + padding: 32px;
32 + text-align: center;
33 + border-bottom: 1px solid #f1f5f9;
34 + }
35 +
36 + .icon-circle {
37 + width: 64px;
38 + height: 64px;
39 + background: #f0fdfa;
40 + color: #14b8a6;
41 + border-radius: 50%;
42 + display: flex;
43 + align-items: center;
44 + justify-content: center;
45 + font-size: 28px;
46 + margin: 0 auto 16px;
47 + }
48 +
49 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
50 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
51 +
52 + .card-body { padding: 24px 32px 32px; }
53 + .section-title {
54 + font-size: 0.7rem;
55 + font-weight: 700;
56 + text-transform: uppercase;
57 + letter-spacing: 0.05em;
58 + color: #94a3b8;
59 + margin-bottom: 12px;
60 + }
61 +
62 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
63 + .badge {
64 + font-size: 0.7rem;
65 + font-weight: 600;
66 + padding: 6px 12px;
67 + background: #f1f5f9;
68 + border-radius: 99px;
69 + display: flex;
70 + align-items: center;
71 + gap: 6px;
72 + color: #475569;
73 + }
74 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
75 + .badge-active { background: #dbeafe; color: #1e40af; }
76 + .badge-active .badge-dot { background: #1e40af; }
77 +
78 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
79 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
80 + .detail-row:last-child { border-bottom: none; }
81 + .detail-label { color: #64748b; font-weight: 500; }
82 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
83 +
84 + .widget-preview {
85 + text-align: center;
86 + padding: 24px;
87 + background: #fdfdfd;
88 + border: 2px dashed #e2e8f0;
89 + border-radius: 16px;
90 + }
91 + .widget-preview svg { color: #14b8a6; margin-bottom: 12px; opacity: 0.8; }
92 + .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
93 + </style>
94 + </head>
95 + <body>
96 +
97 + <div class="card">
98 + <div class="card-header">
99 + <div class="icon-circle">💬</div>
100 + <h1>Chatbot Embed Demo</h1>
101 + <p>Public • With History • Script</p>
102 + </div>
103 + <div class="card-body">
104 + <div class="section-title">Configuration</div>
105 + <div class="badges">
106 + <span class="badge"><span class="badge-dot"></span>No Auth</span>
107 + <span class="badge badge-active"><span class="badge-dot"></span>History On</span>
108 + <span class="badge"><span class="badge-dot"></span>Script Mode</span>
109 + </div>
110 + <div class="details">
111 + <div class="detail-row">
112 + <span class="detail-label">Authentication</span>
113 + <span class="detail-value">None</span>
114 + </div>
115 + <div class="detail-row">
116 + <span class="detail-label">History</span>
117 + <span class="detail-value">True</span>
118 + </div>
119 + <div class="detail-row">
120 + <span class="detail-label">Base URL</span>
121 + <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
122 + </div>
123 + </div>
124 + <div class="widget-preview">
125 + <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
126 + <p>Lihat di pojok <strong>kanan bawah</strong>.</p>
127 + </div>
128 + </div>
129 + </div>
130 +
131 + <script>
132 + window.blivChatbotConfig = {
133 + token: '4eFb0BunqZYEZlg7',
134 + baseUrl: 'https://ai-studio.bliv.bangunindo.io',
135 + isDev: true,
136 + login: false,
137 + history: true,
138 + draggable: true,
139 + dragAxis: 'both',
140 + dynamicScript: true,
141 + systemVariables: {},
142 + userVariables: {}
143 + };
144 + </script>
145 + <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
146 +
147 + </body>
148 + </html>

embed-script-no-auth-no-history.html(file created)

@@ -0,0 +1,146 @@
1 + <!DOCTYPE html>
2 + <html lang="id">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>Bliv AI - Script (Public • No History)</title>
7 + <style>
8 + * { margin: 0; padding: 0; box-sizing: border-box; }
9 + body {
10 + font-family: -apple-system, system-ui, sans-serif;
11 + background: #f8fafc;
12 + color: #1e293b;
13 + display: flex;
14 + align-items: center;
15 + justify-content: center;
16 + min-height: 100vh;
17 + padding: 20px;
18 + }
19 +
20 + .card {
21 + background: white;
22 + border-radius: 24px;
23 + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24 + width: 100%;
25 + max-width: 480px;
26 + overflow: hidden;
27 + border: 1px solid #f1f5f9;
28 + }
29 +
30 + .card-header {
31 + padding: 32px;
32 + text-align: center;
33 + border-bottom: 1px solid #f1f5f9;
34 + }
35 +
36 + .icon-circle {
37 + width: 64px;
38 + height: 64px;
39 + background: #f0fdfa;
40 + color: #14b8a6;
41 + border-radius: 50%;
42 + display: flex;
43 + align-items: center;
44 + justify-content: center;
45 + font-size: 28px;
46 + margin: 0 auto 16px;
47 + }
48 +
49 + .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
50 + .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
51 +
52 + .card-body { padding: 24px 32px 32px; }
53 + .section-title {
54 + font-size: 0.7rem;
55 + font-weight: 700;
56 + text-transform: uppercase;
57 + letter-spacing: 0.05em;
58 + color: #94a3b8;
59 + margin-bottom: 12px;
60 + }
61 +
62 + .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
63 + .badge {
64 + font-size: 0.7rem;
65 + font-weight: 600;
66 + padding: 6px 12px;
67 + background: #f1f5f9;
68 + border-radius: 99px;
69 + display: flex;
70 + align-items: center;
71 + gap: 6px;
72 + color: #475569;
73 + }
74 + .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
75 +
76 + .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
77 + .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
78 + .detail-row:last-child { border-bottom: none; }
79 + .detail-label { color: #64748b; font-weight: 500; }
80 + .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
81 +
82 + .widget-preview {
83 + text-align: center;
84 + padding: 24px;
85 + background: #fdfdfd;
86 + border: 2px dashed #e2e8f0;
87 + border-radius: 16px;
88 + }
89 + .widget-preview svg { color: #14b8a6; margin-bottom: 12px; opacity: 0.8; }
90 + .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
91 + </style>
92 + </head>
93 + <body>
94 +
95 + <div class="card">
96 + <div class="card-header">
97 + <div class="icon-circle">💬</div>
98 + <h1>Chatbot Embed Demo</h1>
99 + <p>Public • No History • Script</p>
100 + </div>
101 + <div class="card-body">
102 + <div class="section-title">Configuration</div>
103 + <div class="badges">
104 + <span class="badge"><span class="badge-dot"></span>No Auth</span>
105 + <span class="badge"><span class="badge-dot"></span>History Off</span>
106 + <span class="badge"><span class="badge-dot"></span>Script Mode</span>
107 + </div>
108 + <div class="details">
109 + <div class="detail-row">
110 + <span class="detail-label">Authentication</span>
111 + <span class="detail-value">False</span>
112 + </div>
113 + <div class="detail-row">
114 + <span class="detail-label">History</span>
115 + <span class="detail-value">False</span>
116 + </div>
117 + <div class="detail-row">
118 + <span class="detail-label">Base URL</span>
119 + <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
120 + </div>
121 + </div>
122 + <div class="widget-preview">
123 + <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
124 + <p>Lihat di pojok <strong>kanan bawah</strong>.</p>
125 + </div>
126 + </div>
127 + </div>
128 +
129 + <script>
130 + window.blivChatbotConfig = {
131 + token: '4eFb0BunqZYEZlg7',
132 + baseUrl: 'https://ai-studio.bliv.bangunindo.io',
133 + isDev: true,
134 + login: false,
135 + history: false,
136 + draggable: true,
137 + dragAxis: 'both',
138 + dynamicScript: true,
139 + systemVariables: {},
140 + userVariables: {}
141 + };
142 + </script>
143 + <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
144 +
145 + </body>
146 + </html>
Newer Older

Powered by Opengist ⋅ Load: 96ms⋅

English
⋅ Bliv Official Website