Skip to content

Commit e079ae0

Browse files
daffadevhostingdaffadevhosting
committed
update UI
1 parent 1e651be commit e079ae0

File tree

13 files changed

+180
-96
lines changed

13 files changed

+180
-96
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
# [daffadevhosting.github.io](https://daffadevhosting.github.io/)
1+
## Github AI Personal Asist
2+
### [daffadevhosting.github.io](https://daffadevhosting.github.io/)
23

‎_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
title: DaffaDev
44
description: > # this means to ignore newlines until "baseurl:"
5-
Write an awesome description for your new site here.
5+
Advanced AI, Github Personal Asist.
66
baseurl: "" # the subpath of your site, e.g. /blog
77
url: "https://daffadevhosting.github.io" # the base hostname & protocol for your site
88

‎_includes/chat-launcher.html

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
<div id="suggestions" class="relative z-[9999] flex flex-wrap gap-2 px-3 py-2 text-sm text-gray-300 border-b border-gray-800 bg-gray-900 z-80">
2-
<button class="cursor-pointer bg-gray-700 px-3 py-1 rounded-full hover:bg-gray-600" data-suggest="ada repo AI chatbot?">ada repo AI chatbot?</button>
3-
<button class="cursor-pointer bg-gray-700 px-3 py-1 rounded-full hover:bg-gray-600" data-suggest="repo yang trending?">repo yang trending?</button>
4-
<div id="ai-notice" class="text-gray-400 text-sm hidden md:block px-3 py-1 italic"></div>
5-
</div>
6-
1+
<div id="ai-notice" class="absolute bottom-4 left-2 w-full text-left h-6 typing-effect text-sm font-mono"></div>
72
<div id="chat-launcher" class="fixed inset-0 flex items-center justify-center z-50 transition-all duration-500">
83

94
<form id="chat-launcher-form"
10-
class="sticky bottom-0 flex flex-col bg-gray-800 w-90 text-white px-4 py-2 rounded-full shadow-md transition-all duration-500 w-60">
5+
class="flex flex-col glow-btn w-90 px-4 py-2 bg-cyan-500/20 border border-cyan-500 rounded-full hover:bg-cyan-500/30 transition-all">
116
<div class="flex">
127
<input id="launcher-input" type="text" placeholder="Mulai mencari..."
13-
class="bg-transparent outline-none w-full h-10 text-left placeholder-gray-400" autocomplete="off" />
8+
class="bg-transparent outline-none w-full h-10 text-left placeholder-gray-400"
9+
rows="2" onresize="null" autocomplete="off" autofocus
10+
style="resize: none;" />
1411
</div>
1512
<div id="chat-btn-area" class="flex justify-between items-center gap-2 items-center hidden">
1613
<small class="text-gray-300 opacity-0.20"><a href="https://github.com/daffadevhosting/daffadevhosting.github.io" class="cursor-pointer bg-gray-700 px-3 py-1 rounded-full hover:bg-gray-600" target="_blank">Daffa</a></small>
@@ -27,8 +24,7 @@
2724
</form>
2825
</div>
2926

30-
<div id="chat-welcome" class="text-center text-gray-300 text-lg md:text-xl p-6 transition-all duration-700 opacity-100 blur-0" style="margin: 80px auto;max-width: 800px;">
31-
<span class="font-bold text-blue-400">L Y Я A</span><br>
27+
<div id="chat-welcome" class="text-center text-gray-300 text-lg md:text-xl p-6 transition-all duration-700 opacity-100 blur-0" style="margin: auto;max-width: 800px;"><br>
3228
</div>
3329

3430
<!-- Chat Box Area -->

‎_includes/chat-ui-suggest.html

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,5 @@
1-
<!-- _includes/chat-ui.html -->
2-
<div id="chat-wrapper" class="fixed inset-0 flex items-center justify-center z-50">
3-
<div id="chat-box" class="hidden flex flex-col max-h-[70vh] w-full max-w-md mx-auto bg-gray-900 text-white border border-gray-700 rounded-lg shadow-lg overflow-hidden">
4-
<div class="flex-1 overflow-y-auto p-4 space-y-2" id="chat-messages"></div>
5-
6-
<!-- Saran Tombol -->
7-
<div id="suggestions" class="flex flex-wrap gap-2 px-3 py-2 text-sm text-gray-300 border-t border-gray-800 bg-gray-900">
8-
<button class="cursor-pointer bg-gray-700 px-3 py-1 rounded-full hover:bg-gray-600" data-suggest="Cari repo animasi tailwind">Cari repo animasi tailwind</button>
9-
<button class="cursor-pointer bg-gray-700 px-3 py-1 rounded-full hover:bg-gray-600" data-suggest="ada repo AI chatbot?">ada repo AI chatbot?</button>
10-
<button class="cursor-pointer bg-gray-700 px-3 py-1 rounded-full hover:bg-gray-600" data-suggest="Ada ebook bisnis?">Ada ebook bisnis?</button>
1+
<div id="suggestions" class="relative z-[9999] flex flex-wrap gap-2 px-3 py-2 text-sm text-gray-300 border-b border-gray-800 bg-gray-900 z-80">
2+
<img src="{{site.baseurl}}/assets/images/og-image.png" class="w-12 h-12 rounded-full object-cover">
3+
<button class="cursor-pointer glow-btn px-4 py-2 border border-purple-500 rounded-full hover:bg-purple-500/20 transition-all" data-suggest="ada repo AI chatbot?">ada repo AI chatbot?</button>
4+
<button class="cursor-pointer glow-btn px-4 py-2 border border-purple-500 rounded-full hover:bg-purple-500/20 transition-all" data-suggest="repo yang trending?">repo yang trending?</button>
115
</div>
12-
13-
<form id="chat-form" class="bg-gray-800 p-3 flex gap-2 border-t border-gray-700">
14-
<input id="user-input" type="text" placeholder="Tulis pesan..."
15-
class="flex-1 bg-gray-700 text-white placeholder-gray-400 rounded px-4 py-2 focus:outline-none focus:ring focus:ring-blue-500 transition" />
16-
<button type="submit"
17-
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Kirim</button>
18-
</form>
19-
</div>
20-
21-
<!-- Floating button -->
22-
<button id="floating-input" class="absolute bg-gray-800 text-white px-6 py-3 rounded-lg shadow-md border border-gray-700 hover:bg-gray-700 transition-all">
23-
Chat dengan DaffaBot 💬
24-
</button>
25-
</div>

‎_includes/head.html

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,44 @@
11
<head>
22
<meta charset="utf-8">
33
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55

6-
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
6+
<title>{% if page.title %}{{ page.title | escape }} | {{ site.title | escape }}{% else %}{{ site.title | escape }} - AI-Powered Repository Search{% endif %}</title>
7+
78
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
8-
9-
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
9+
1010
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
11-
12-
{% feed_meta %}
1311

12+
<link rel="stylesheet" href="{{ '/assets/css/styles.css' | relative_url }}">
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
14+
<link rel="icon" href="/favicon.ico" type="image/x-icon">
15+
16+
<meta property="og:title" content="{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}">
17+
<meta property="og:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
18+
<meta property="og:image" content="{{ site.url }}/assets/images/og-image.png"> <meta property="og:url" content="{{ page.url | replace:'index.html','' | absolute_url }}">
19+
<meta property="og:site_name" content="{{ site.title | escape }}">
20+
<meta property="og:type" content="website">
21+
22+
<meta name="twitter:card" content="summary_large_image">
23+
<meta name="twitter:title" content="{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}">
24+
<meta name="twitter:description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
25+
<meta name="twitter:image" content="{{ site.url }}/assets/images/og-image.png"> {% feed_meta %}
1426
{% include chat-style.html %}
27+
28+
<script type="application/ld+json">
29+
{
30+
"@context": "https://schema.org",
31+
"@type": "WebSite",
32+
"name": "{{ site.title | escape }}",
33+
"url": "{{ site.url }}",
34+
"potentialAction": {
35+
"@type": "SearchAction",
36+
"target": {
37+
"@type": "EntryPoint",
38+
"urlTemplate": "{{ site.url }}/search?q={search_term_string}"
39+
},
40+
"query-input": "required name=search_term_string"
41+
}
42+
}
43+
</script>
1544
</head>

‎_layouts/default.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
<body class="invisible" onload="document.body.classList.remove('invisible')">
77
<canvas id="matrix" class="matrix-bg"></canvas>
8+
{% include chat-ui-suggest.html %}
89
<div class="app-container">
910
<main class="main" aria-label="Content">
1011
{% include chat-launcher.html %}

‎assets/css/styles.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ html, body {
44
height: 100%;
55
overflow: hidden;
66
}
7+
:root {
8+
--neon-cyan: #00ffff;
9+
--neon-purple: #9945ff;
10+
--neon-pink: #ff00ff;
11+
--bg-dark: #0a0a0a;
12+
--bg-card: rgba(20, 20, 20, 0.8);
13+
}
714
body {
815
font-family: 'Inter', sans-serif;
916
background: var(--bg-dark);
@@ -21,6 +28,15 @@ body {
2128
-webkit-text-fill-color: transparent;
2229
animation: gradientShift 3s ease infinite;
2330
}
31+
.neon-border {
32+
border: 1px solid transparent;
33+
background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(45deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink)) border-box;
34+
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
35+
}
36+
.neon-text {
37+
text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
38+
animation: pulse 2s ease-in-out infinite;
39+
}
2440
.matrix-bg {
2541
position: fixed;
2642
top: 0;
@@ -101,6 +117,27 @@ body.ready #chat-box-wrapper {
101117
border-color: rgba(0, 255, 255, 0.5);
102118
}
103119

120+
121+
@keyframes pulse {
122+
0%, 100% { opacity: 1; }
123+
50% { opacity: 0.7; }
124+
}
125+
126+
@keyframes gradientShift {
127+
0% { background-position: 0% 50%; }
128+
50% { background-position: 100% 50%; }
129+
100% { background-position: 0% 50%; }
130+
}
131+
132+
.floating {
133+
animation: float 6s ease-in-out infinite;
134+
}
135+
136+
@keyframes float {
137+
0%, 100% { transform: translateY(0px); }
138+
50% { transform: translateY(-20px); }
139+
}
140+
104141
@media (max-width: 800px) {
105142
#chat-messages {
106143
padding: 5px;

‎assets/images/og-image.png

1.23 MB
Loading

‎assets/js/aiService.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ document.addEventListener('DOMContentLoaded', async () => {
5959
chatWelcomeDiv.classList.add('opacity-0', 'blur-sm');
6060

6161
setTimeout(() => {
62-
chatWelcomeDiv.innerHTML = `<h2 class="font-bold text-4xl text-blue-400">L Y Я A</h2><br>${aboutAIText}`;
62+
chatWelcomeDiv.innerHTML = `<h2 class="font-bold text-4xl gradient-text">L Y Я A</h2><br>${aboutAIText}<br>`;
6363
chatWelcomeDiv.classList.remove('opacity-0', 'blur-sm');
6464
chatWelcomeDiv.classList.add('opacity-100', 'blur-0');
6565
}, 700); // Sesuaikan dengan durasi transisi CSS kamu

‎assets/js/core/core-ai.js

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ document.addEventListener("DOMContentLoaded", async () => {
2929
const btnArea = document.getElementById("chat-btn-area");
3030
const micBtn = document.getElementById("mic-button");
3131
const welcome = document.getElementById("chat-welcome");
32+
const notice = document.getElementById("ai-notice");
3233
// removed default github search
3334

3435
setupVoiceRecognition(micBtn, async (transcript) => {
@@ -49,27 +50,32 @@ document.addEventListener("DOMContentLoaded", async () => {
4950
});
5051

5152
// Logika modal untuk GitHub repo stats (tetap sama)
52-
document.addEventListener('click', (e) => {
53-
const card = e.target.closest('[data-repo-owner]');
54-
if (card) {
55-
const owner = card.dataset.repoOwner;
56-
const fullName = card.dataset.repoFullname;
57-
58-
const modal = document.getElementById('repoModal');
59-
const content = document.getElementById('repoModalContent');
60-
61-
content.innerHTML = `
62-
<p class="mb-2">Stats untuk <strong>${fullName}</strong></p>
63-
<img
64-
src="https://github-readme-stats.vercel.app/api?username=${owner}&show_icons=true&theme=radical"
65-
alt="${owner} GitHub Stats"
66-
class="w-full rounded-md"
67-
/>
68-
`;
69-
modal.classList.remove('hidden');
70-
modal.classList.add('flex');
71-
}
72-
});
53+
document.addEventListener('click', (e) => {
54+
const card = e.target.closest('[data-repo-owner]');
55+
if (card) {
56+
const owner = card.dataset.repoOwner;
57+
const fullName = card.dataset.repoFullName;
58+
59+
console.log("Card clicked:", card);
60+
console.log("Owner:", owner);
61+
console.log("Full Name from dataset:", fullName);
62+
63+
const modal = document.getElementById('repoModal');
64+
const content = document.getElementById('repoModalContent');
65+
66+
// ... sisanya kode kamu
67+
content.innerHTML = `
68+
<p class="mb-2">Stats untuk <strong>${fullName}</strong></p>
69+
<img
70+
src="https://github-readme-stats.vercel.app/api?username=${owner}&show_icons=true&theme=radical"
71+
alt="${owner} GitHub Stats"
72+
class="w-full rounded-md"
73+
/>
74+
`;
75+
modal.classList.remove('hidden');
76+
modal.classList.add('flex');
77+
}
78+
});
7379

7480
document.getElementById('closeModal').addEventListener('click', () => {
7581
document.getElementById('repoModal').classList.add('hidden');
@@ -79,21 +85,23 @@ document.addEventListener("DOMContentLoaded", async () => {
7985
const resetLauncher = () => {
8086
launcher.classList.remove("bottom-0", "left-0", "right-0", "items-end", "justify-center");
8187
launcher.classList.add("inset-0", "items-center", "justify-center");
82-
launcherForm.classList.remove("rounded-t-lg", "w-full", "max-w-xl");
88+
launcherForm.classList.remove("static", "bottom-0", "rounded-t-lg", "w-full", "max-w-xl");
8389
launcherForm.classList.add("rounded-full", "w-60");
8490
chatWrapper.classList.add("hidden", "scale-100", "opacity-100");
8591
welcome.classList.remove("opacity-0", "blur-md");
8692
btnArea.classList.add("hidden");
93+
notice.classList.remove("hidden");
8794
};
8895

8996
launcherInput.addEventListener("focus", () => {
9097
launcher.classList.remove("inset-0", "items-center", "justify-center");
9198
launcher.classList.add("bottom-0", "left-0", "right-0", "items-end", "justify-center");
9299
launcherForm.classList.remove("rounded-full", "w-60");
93-
launcherForm.classList.add("rounded-t-lg", "w-full", "max-w-xl");
100+
launcherForm.classList.add("static", "bottom-0", "rounded-t-lg", "w-full", "max-w-xl");
94101
chatWrapper.classList.remove("hidden", "scale-0", "opacity-0");
95102
welcome.classList.add("opacity-0", "blur-md");
96103
btnArea.classList.remove("hidden");
104+
notice.classList.add("hidden");
97105
launcherInput.focus();
98106
});
99107

@@ -327,7 +335,6 @@ document.addEventListener("DOMContentLoaded", () => {
327335
simulateTyping(noticeTexts, "ai-notice");
328336
});
329337

330-
// Matrix background animation
331338
const canvas = document.getElementById('matrix');
332339
const ctx = canvas.getContext('2d');
333340

0 commit comments

Comments
 (0)