Skip to content

Commit 49d777b

Browse files
beastoinbeastoin
authored
Enhance the UI/UX of the chatgpt plugin (#2829)
1 parent 0e98dca commit 49d777b

File tree

1 file changed

+117
-34
lines changed

1 file changed

+117
-34
lines changed

‎plugins/example/templates/chatgpt/index.html‎

Lines changed: 117 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@
77
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
88
<style>
99
:root {
10-
--chatgpt-bg: #343541;
11-
--chatgpt-text: #ECECF1;
12-
--chatgpt-secondary-text: #C5C5D2;
13-
--chatgpt-accent: #19C37D;
14-
--chatgpt-accent-hover: #0DA26B;
15-
--chatgpt-border: #565869;
10+
--omi-bg: #000000;
11+
--omi-text: #FFFFFF;
12+
--omi-secondary-text: #BDBDBD;
13+
--omi-accent: #673AB7;
14+
--omi-accent-hover: #512DA8;
15+
--omi-border: #424242;
16+
--omi-surface: #1F1F25;
1617
}
1718

1819
* {
@@ -23,8 +24,9 @@
2324

2425
body {
2526
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
26-
background-color: var(--chatgpt-bg);
27-
color: var(--chatgpt-text);
27+
background: var(--omi-bg);
28+
background: radial-gradient(ellipse at top, #1F1F25, var(--omi-bg));
29+
color: var(--omi-text);
2830
display: flex;
2931
flex-direction: column;
3032
min-height: 100vh;
@@ -61,7 +63,7 @@
6163
}
6264

6365
.logo-icon svg path {
64-
fill: var(--chatgpt-text);
66+
fill: var(--omi-text);
6567
}
6668

6769
.logo-text {
@@ -72,28 +74,85 @@
7274
.connect-card {
7375
width: 100%;
7476
text-align: center;
75-
padding: 2rem;
76-
background-color: rgba(255, 255, 255, 0.05);
77-
border-radius: 12px;
78-
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
77+
padding: 2.5rem;
78+
background-color: var(--omi-surface);
79+
border-radius: 16px;
80+
border: 1px solid var(--omi-border);
81+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 12px rgba(103, 58, 183, 0.1);
82+
transition: transform 0.2s ease, box-shadow 0.2s ease;
83+
}
84+
85+
.connect-card:hover {
86+
transform: translateY(-2px);
87+
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), 0 0 24px rgba(103, 58, 183, 0.15);
88+
}
89+
90+
.integrations-section {
91+
width: 100%;
92+
margin-top: 3rem;
93+
text-align: center;
94+
}
95+
96+
.integrations-title {
97+
font-size: 1.5rem;
98+
font-weight: 600;
99+
margin-bottom: 0.5rem;
100+
}
101+
102+
.integrations-subtitle {
103+
color: var(--omi-secondary-text);
104+
margin-bottom: 1.5rem;
105+
max-width: 380px;
106+
margin-left: auto;
107+
margin-right: auto;
108+
}
109+
110+
.integration-link {
111+
text-decoration: none;
112+
}
113+
114+
.integrations-grid {
115+
display: flex;
116+
flex-wrap: wrap;
117+
gap: 0.75rem;
118+
justify-content: center;
119+
}
120+
121+
.integration-item {
122+
background-color: var(--omi-surface);
123+
border: 1px solid var(--omi-border);
124+
border-radius: 20px;
125+
padding: 0.5rem 1.25rem;
126+
font-size: 0.875rem;
127+
font-weight: 500;
128+
transition: all 0.2s ease;
129+
color: var(--omi-secondary-text);
130+
}
131+
132+
.integration-item:hover {
133+
background-color: var(--omi-surface);
134+
border-color: var(--omi-accent);
135+
color: var(--omi-text);
136+
transform: translateY(-2px);
137+
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
79138
}
80139

81140
.connect-button {
82-
background-color: var(--chatgpt-accent);
141+
background: linear-gradient(to right, #7E57C2, #673AB7);
83142
color: white;
84143
border: none;
85144
border-radius: 8px;
86145
padding: 0.875rem 1.5rem;
87146
font-size: 1rem;
88-
font-weight: 500;
147+
font-weight: 600;
89148
cursor: pointer;
90149
transition: all 0.2s ease;
91150
width: 100%;
92-
margin-top: 1.5rem;
151+
margin-top: 0;
93152
display: flex;
94153
align-items: center;
95154
justify-content: center;
96-
box-shadow: 0 2px 8px rgba(25, 195, 125, 0.3);
155+
box-shadow: 0 4px 12px rgba(103, 58, 183, 0.3);
97156
}
98157

99158
.connect-button svg {
@@ -116,33 +175,39 @@
116175
}
117176

118177
.connect-button:hover {
119-
background-color: var(--chatgpt-accent-hover);
120-
transform: translateY(-1px);
121-
box-shadow: 0 4px 12px rgba(25, 195, 125, 0.4);
178+
background: linear-gradient(to right, #8769c9, #7043b8);
179+
transform: translateY(-2px);
180+
box-shadow: 0 6px 16px rgba(103, 58, 183, 0.4);
122181
}
123182

124183
.connect-button:active {
125184
transform: translateY(1px);
126-
box-shadow: 0 2px 4px rgba(25, 195, 125, 0.3);
185+
box-shadow: 0 2px 4px rgba(103, 58, 183, 0.3);
127186
}
128187

129188
.connect-button.copied {
130-
background-color: #0DA26B;
189+
background: var(--omi-accent-hover);
131190
}
132191

133192
.connect-button:disabled {
134193
opacity: 0.5;
135194
cursor: not-allowed;
136195
}
137196

197+
.title-text {
198+
font-size: 1.75rem;
199+
font-weight: 600;
200+
margin-bottom: 0.75rem;
201+
}
202+
138203
.info-text {
139-
color: var(--chatgpt-secondary-text);
140-
margin-bottom: 0.5rem;
141-
font-size: 1.05rem;
204+
color: var(--omi-secondary-text);
205+
font-size: 1rem;
206+
line-height: 1.6;
142207
}
143208

144209
.info-container {
145-
margin-bottom: 1.5rem;
210+
margin-bottom: 2rem;
146211
}
147212

148213
.notification {
@@ -151,7 +216,7 @@
151216
left: 50%;
152217
transform: translateX(-50%) translateY(10px);
153218
padding: 0.75rem 1.5rem;
154-
background-color: var(--chatgpt-accent);
219+
background-color: var(--omi-accent);
155220
color: white;
156221
border-radius: 8px;
157222
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
@@ -180,12 +245,12 @@
180245
.footer {
181246
text-align: center;
182247
padding: 1.5rem;
183-
color: var(--chatgpt-secondary-text);
248+
color: var(--omi-secondary-text);
184249
font-size: 0.875rem;
185250
}
186251

187252
a {
188-
color: var(--chatgpt-accent);
253+
color: var(--omi-accent);
189254
text-decoration: none;
190255
}
191256

@@ -214,8 +279,8 @@
214279

215280
<div class="connect-card" id="uid-display" data-uid="{{ uid }}">
216281
<div class="info-container">
217-
<p class="info-text">Connect your Omi device with ChatGPT</p>
218-
<p class="info-text">Your ID will be copied automatically</p>
282+
<h1 class="title-text">Connect to ChatGPT</h1>
283+
<p class="info-text">Connect Omi to let ChatGPT access your memories and 100+ other tools. Your User ID will be copied automatically.</p>
219284
</div>
220285
<button class="connect-button" onclick="copyAndLaunch()">
221286
<svg width="20" height="20" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -231,6 +296,22 @@
231296
Connect with ChatGPT
232297
</button>
233298
</div>
299+
300+
<div class="integrations-section">
301+
<h2 class="integrations-title">Connect to 100+ external tools</h2>
302+
<p class="integrations-subtitle">Give ChatGPT more context about you by connecting it to your favorite tools.</p>
303+
<div class="integrations-grid">
304+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">X</div></a>
305+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Google Calendar</div></a>
306+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Notion</div></a>
307+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">LinkedIn</div></a>
308+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Google Drive</div></a>
309+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Gmail</div></a>
310+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">GitHub</div></a>
311+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">Google Sheets</div></a>
312+
<a href="https://personas.omi.me/" target="_blank" class="integration-link"><div class="integration-item">...and more</div></a>
313+
</div>
314+
</div>
234315

235316
<div class="footer">
236317
© 2025 Omi • <a href="https://omi.me" target="_blank">omi.me</a>
@@ -352,7 +433,7 @@
352433
notification.style.backgroundColor = '#E34747';
353434
iconSvg.innerHTML = '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="currentColor"/>';
354435
} else {
355-
notification.style.backgroundColor = '#19C37D';
436+
notification.style.backgroundColor = 'var(--omi-accent)';
356437
iconSvg.innerHTML = '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>';
357438
}
358439

@@ -375,8 +456,10 @@
375456
</svg>
376457
No ID Available
377458
`;
378-
document.querySelectorAll('.info-text')[0].textContent = 'Please log in first';
379-
document.querySelectorAll('.info-text')[1].textContent = 'to connect with ChatGPT';
459+
document.querySelector('.connect-card .info-container').innerHTML = `
460+
<h1 class="title-text">Log in to connect</h1>
461+
<p class="info-text">Please log in to the Omi app to connect your account to ChatGPT.</p>
462+
`;
380463
}
381464
});
382465
</script>

0 commit comments

Comments
 (0)