Hugging Face's logo

Spaces:
taupirho
/
chatkit
Running

App Files Community
taupirho commited on
Commit
8dfe269
·
verified ·
1 Parent(s): 75e9fb9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +113 -0
index.html CHANGED
@@ -5,6 +5,119 @@
5
  <meta name="viewport" content="width=device-width" />
6
  <title>My static Space</title>
7
  <link rel="stylesheet" href="style.css" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <div class="card">
 
5
  <meta name="viewport" content="width=device-width" />
6
  <title>My static Space</title>
7
  <link rel="stylesheet" href="style.css" />
8
+ <!-- Chatbot Embed -->
9
+ <style>
10
+ .chat-fab {
11
+ position: fixed;
12
+ right: 20px;
13
+ bottom: 20px;
14
+ width: 56px;
15
+ height: 56px;
16
+ border-radius: 50%;
17
+ border: none;
18
+ cursor: pointer;
19
+ background: #111;
20
+ color: #fff;
21
+ font-size: 24px;
22
+ box-shadow: 0 6px 15px rgba(0,0,0,0.25);
23
+ z-index: 10000;
24
+ }
25
+
26
+ .chat-panel {
27
+ position: fixed;
28
+ right: 20px;
29
+ bottom: 90px;
30
+ width: 400px;
31
+ height: 600px;
32
+ max-width: calc(100% - 40px);
33
+ transform: translateY(20px);
34
+ opacity: 0;
35
+ pointer-events: none;
36
+ transition: opacity .2s ease, transform .2s ease;
37
+ border-radius: 12px;
38
+ overflow: hidden;
39
+ box-shadow: 0 12px 30px rgba(0,0,0,.25);
40
+ background: #fff;
41
+ z-index: 10000;
42
+ }
43
+
44
+ .chat-panel.open {
45
+ opacity: 1;
46
+ transform: translateY(0);
47
+ pointer-events: auto;
48
+ }
49
+
50
+ .chat-header {
51
+ height: 44px;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: space-between;
55
+ padding: 0 12px;
56
+ background: #111;
57
+ color: #fff;
58
+ font: 14px/1.2 system-ui, sans-serif;
59
+ }
60
+
61
+ .chat-iframe {
62
+ border: 0;
63
+ width: 100%;
64
+ height: calc(100% - 44px);
65
+ display: block;
66
+ }
67
+
68
+ .chat-close {
69
+ background: none;
70
+ border: 0;
71
+ color: #fff;
72
+ font-size: 18px;
73
+ cursor: pointer;
74
+ }
75
+ </style>
76
+
77
+ <script>
78
+ document.addEventListener('DOMContentLoaded', function () {
79
+ const fab = document.createElement('button');
80
+ fab.className = 'chat-fab';
81
+ fab.textContent = '💬';
82
+ fab.setAttribute('aria-label', 'Open chat');
83
+
84
+ const panel = document.createElement('div');
85
+ panel.className = 'chat-panel';
86
+ panel.setAttribute('aria-hidden', 'true');
87
+
88
+ const header = document.createElement('div');
89
+ header.className = 'chat-header';
90
+ header.innerHTML = `<span>Chatbot</span>`;
91
+
92
+ const closeBtn = document.createElement('button');
93
+ closeBtn.className = 'chat-close';
94
+ closeBtn.textContent = '✕';
95
+ closeBtn.setAttribute('aria-label', 'Close chat');
96
+
97
+ closeBtn.addEventListener('click', () => {
98
+ panel.classList.remove('open');
99
+ panel.setAttribute('aria-hidden', 'true');
100
+ });
101
+
102
+ const iframe = document.createElement('iframe');
103
+ iframe.className = 'chat-iframe';
104
+ iframe.src = 'https://openai-chatkit-starter-app-mocha.vercel.app';
105
+ iframe.allow = 'clipboard-write; microphone; camera';
106
+ iframe.referrerPolicy = 'strict-origin-when-cross-origin';
107
+
108
+ header.appendChild(closeBtn);
109
+ panel.appendChild(header);
110
+ panel.appendChild(iframe);
111
+ document.body.appendChild(fab);
112
+ document.body.appendChild(panel);
113
+
114
+ fab.addEventListener('click', () => {
115
+ panel.classList.add('open');
116
+ panel.setAttribute('aria-hidden', 'false');
117
+ });
118
+ });
119
+ </script>
120
+ <!-- End Chatbot Embed -->
121
  </head>
122
  <body>
123
  <div class="card">