Skip to content

Commit 1e651be

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

File tree

9 files changed

+481
-471
lines changed

9 files changed

+481
-471
lines changed

‎_includes/chat-launcher.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<div id="chat-launcher" class="fixed inset-0 flex items-center justify-center z-50 transition-all duration-500">
88

99
<form id="chat-launcher-form"
10-
class="flex flex-col bg-gray-800 w-90 text-white px-4 py-2 rounded-full shadow-md transition-all duration-500 w-60">
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">
1111
<div class="flex">
12-
<input id="launcher-input" type="text" placeholder="Tulis pesan..."
12+
<input id="launcher-input" type="text" placeholder="Mulai mencari..."
1313
class="bg-transparent outline-none w-full h-10 text-left placeholder-gray-400" autocomplete="off" />
1414
</div>
1515
<div id="chat-btn-area" class="flex justify-between items-center gap-2 items-center hidden">

‎_layouts/default.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
{% include head.html %}
55

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

‎assets/css/main.scss

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎assets/css/styles.css

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,33 @@ html, body {
44
height: 100%;
55
overflow: hidden;
66
}
7+
body {
8+
font-family: 'Inter', sans-serif;
9+
background: var(--bg-dark);
10+
background-image:
11+
radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
12+
radial-gradient(circle at 80% 80%, rgba(153, 69, 255, 0.1) 0%, transparent 50%),
13+
radial-gradient(circle at 40% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 50%);
14+
min-height: 100vh;
15+
overflow-x: hidden;
16+
}
17+
.gradient-text {
18+
background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
19+
background-size: 200% 200%;
20+
-webkit-background-clip: text;
21+
-webkit-text-fill-color: transparent;
22+
animation: gradientShift 3s ease infinite;
23+
}
24+
.matrix-bg {
25+
position: fixed;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
pointer-events: none;
31+
opacity: 0.1;
32+
z-index: 0;
33+
}
734
.app-container {
835
display: flex;
936
flex-direction: column;
@@ -21,7 +48,7 @@ html, body {
2148
body.ready #chat-box-wrapper {
2249
opacity: 1;
2350
transform: scale(1);
24-
}
51+
}
2552
#chat-launcher {
2653
transition: transform 0.4s ease-in-out;
2754
}
@@ -62,6 +89,17 @@ body.ready #chat-box-wrapper {
6289
scrollbar-width: thin;
6390
scrollbar-color: #4b5563 #1f2937;
6491
}
92+
.repo-card {
93+
backdrop-filter: blur(10px);
94+
border: 1px solid rgba(0, 255, 255, 0.2);
95+
transition: all 0.3s ease;
96+
}
97+
98+
.repo-card:hover {
99+
transform: translateY(-5px);
100+
box-shadow: 0 10px 40px rgba(0, 255, 255, 0.3);
101+
border-color: rgba(0, 255, 255, 0.5);
102+
}
65103

66104
@media (max-width: 800px) {
67105
#chat-messages {

‎assets/js/aiService.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', async () => {
4242
const chatWelcomeDiv = document.getElementById('chat-welcome');
4343
if (chatWelcomeDiv) {
4444
// Tampilkan pesan loading atau placeholder
45-
chatWelcomeDiv.innerHTML = `<h2 class="font-bold text-4xl text-blue-400">L Y Я A</h2><br><p class="text-gray-300 animate-pulse">Memuat AI...</p>`;
45+
chatWelcomeDiv.innerHTML = `<h2 class="font-bold text-4xl gradient-text">L Y Я A</h2><br><p class="text-gray-300 animate-pulse">Membangunkan Lyra...</p>`;
4646

4747
try {
4848
const initialAboutAIResponse = await sendToAI("Kamu siapa?");
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', async () => {
6767

6868
} catch (error) {
6969
console.error("Terjadi kesalahan saat memuat respons AI:", error.message);
70-
chatWelcomeDiv.innerHTML = `<span class="font-bold text-red-500">Error:</span> Gagal memuat AI. ${error.message}`;
70+
chatWelcomeDiv.innerHTML = `<span class="font-bold text-red-500">Error:</span> Gagal memuat Lyra. ${error.message}`;
7171
chatWelcomeDiv.classList.add('text-red-500');
7272
}
7373

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

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,4 +325,48 @@ function simulateTyping(texts, targetId, delay = 40, pause = 800) {
325325

326326
document.addEventListener("DOMContentLoaded", () => {
327327
simulateTyping(noticeTexts, "ai-notice");
328-
});
328+
});
329+
330+
// Matrix background animation
331+
const canvas = document.getElementById('matrix');
332+
const ctx = canvas.getContext('2d');
333+
334+
canvas.width = window.innerWidth;
335+
canvas.height = window.innerHeight;
336+
337+
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
338+
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
339+
const nums = '0123456789';
340+
const matrix = katakana + latin + nums;
341+
342+
const matrixArray = matrix.split("");
343+
344+
const fontSize = 12;
345+
const columns = canvas.width / fontSize;
346+
const drops = [];
347+
348+
for (let x = 0; x < columns; x++) {
349+
drops[x] = 1;
350+
}
351+
352+
function drawMatrix() {
353+
ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
354+
ctx.fillRect(0, 0, canvas.width, canvas.height);
355+
356+
ctx.fillStyle = '#00ffff';
357+
ctx.shadowColor = '#08b4e9ff';
358+
ctx.shadowBlur = 5; // Kekuatan efek cahaya
359+
ctx.font = fontSize + 'px monospace';
360+
361+
for (let i = 0; i < drops.length; i++) {
362+
const text = matrixArray[Math.floor(Math.random() * matrixArray.length)];
363+
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
364+
365+
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
366+
drops[i] = 0;
367+
}
368+
drops[i]++;
369+
}
370+
}
371+
372+
setInterval(drawMatrix, 35);

‎assets/sass/base/_root.scss

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)