@pheem49/mint 1.2.1

package/src/UI/widget.css

@@ -0,0 +1,218 @@
+:root {
+    --accent: #8b5cf6;
+    --accent-glow: rgba(139, 92, 246, 0.6);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    background: transparent;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: 'Outfit', sans-serif;
+    user-select: none;
+}
+
+.drag-region {
+    -webkit-app-region: drag;
+}
+
+#widget-container {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.aura-container {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.aura {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    filter: blur(12px);
+    opacity: 0;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.character-body {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, #1e293b, #0f172a);
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+    box-shadow: 0 0 15px var(--accent-glow);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    transition: all 0.3s ease;
+    -webkit-app-region: drag;
+}
+
+.eyes {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 4px;
+}
+
+.eye {
+    width: 8px;
+    height: 8px;
+    background: var(--accent);
+    border-radius: 50%;
+    transition: height 0.2s, background 0.3s;
+}
+
+.mouth {
+    width: 12px;
+    height: 4px;
+    background: var(--accent);
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.status-badge {
+    position: absolute;
+    bottom: -15px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    font-size: 0.65rem;
+    padding: 2px 6px;
+    border-radius: 8px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+}
+
+#widget-container:hover .status-badge {
+    opacity: 1;
+}
+
+/* States */
+.state-idle .character-body {
+    animation: float 4s ease-in-out infinite;
+}
+
+.state-idle .eye {
+    animation: blink 4s infinite;
+}
+
+.state-listening .character-body {
+    box-shadow: 0 0 25px rgba(6, 182, 212, 0.8);
+    border-color: #06b6d4;
+    transform: scale(1.1);
+}
+
+.state-listening .aura {
+    opacity: 0.8;
+    background: radial-gradient(circle, #06b6d4, transparent);
+    animation: aura-breathe 2s ease-in-out infinite;
+    transform: scale(1.4);
+}
+
+.state-listening .eye {
+    background: #06b6d4;
+    height: 10px;
+}
+
+.state-listening .mouth {
+    background: #06b6d4;
+    width: 16px;
+    height: 6px;
+    border-radius: 50%;
+}
+
+.state-thinking .character-body {
+    box-shadow: 0 0 20px rgba(245, 158, 11, 0.8);
+    border-color: #f59e0b;
+    animation: pulse 1.5s infinite alternate;
+}
+
+.state-thinking .aura {
+    opacity: 0.7;
+    background: radial-gradient(circle, #f59e0b, transparent);
+    animation: aura-spin 3s linear infinite;
+    transform: scale(1.2);
+    border: 2px dashed rgba(245, 158, 11, 0.3);
+}
+
+.state-thinking .eye {
+    background: #f59e0b;
+}
+
+.state-thinking .mouth {
+    background: #f59e0b;
+}
+
+.state-speaking .character-body {
+    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
+    border-color: #10b981;
+}
+
+.state-speaking .aura {
+    opacity: 0.6;
+    background: radial-gradient(circle, #10b981, transparent);
+    animation: aura-pulse 0.5s infinite alternate;
+    transform: scale(1.3);
+}
+
+.state-speaking .eye {
+    background: #10b981;
+}
+
+.state-speaking .mouth {
+    background: #10b981;
+    animation: speak 0.3s infinite alternate;
+}
+
+/* Animations */
+@keyframes aura-breathe {
+    0%, 100% { transform: scale(1.2); opacity: 0.5; }
+    50% { transform: scale(1.6); opacity: 0.9; }
+}
+
+@keyframes aura-spin {
+    from { transform: scale(1.2) rotate(0deg); }
+    to { transform: scale(1.2) rotate(360deg); }
+}
+
+@keyframes aura-pulse {
+    from { transform: scale(1.1); opacity: 0.4; }
+    to { transform: scale(1.4); opacity: 0.8; }
+}
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-6px); }
+}
+
+@keyframes blink {
+    0%, 96%, 100% { height: 8px; }
+    98% { height: 2px; }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.05); }
+}
+
+@keyframes speak {
+    0% { width: 8px; height: 4px; }
+    100% { width: 14px; height: 10px; border-radius: 50%; }
+}

package/src/UI/widget.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mint Widget</title>
+    <link rel="stylesheet" href="widget.css">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
+</head>
+<body class="drag-region">
+    <div id="widget-container" class="state-idle">
+        <div class="aura-container">
+            <div class="aura"></div>
+        </div>
+        <div class="character-body">
+            <!-- Eyes / Face -->
+            <div class="eyes">
+                <div class="eye left"></div>
+                <div class="eye right"></div>
+            </div>
+            <!-- Mouth/Indicator -->
+            <div class="mouth"></div>
+        </div>
+        <!-- Status Badge -->
+        <div class="status-badge" id="status-badge">Idle</div>
+    </div>
+    <script src="widget.js"></script>
+</body>
+</html>

package/src/UI/widget.js

@@ -0,0 +1,10 @@
+const widgetContainer = document.getElementById('widget-container');
+const statusBadge = document.getElementById('status-badge');
+
+if (window.widgetAPI) {
+    window.widgetAPI.onStateChange((state) => {
+        // state can be: 'idle', 'listening', 'thinking', 'speaking'
+        widgetContainer.className = `state-${state}`;
+        statusBadge.textContent = state.charAt(0).toUpperCase() + state.slice(1);
+    });
+}

package/tech_news.txt

@@ -0,0 +1,3 @@
+หัวข้อข่าว: DeepL ขยายบริการสู่การแปลด้วยเสียง (Voice Translation)
+
+สรุป: DeepL แพลตฟอร์มแปลภาษาชั้นนำ ได้ประกาศขยายขีดความสามารถเข้าสู่ตลาดการแปลด้วยเสียง (Voice Translation) เพื่อยกระดับการแข่งขันในตลาดสื่อสารด้วย AI และการแปลภาษาแบบเรียลไทม์

package/test_knowledge.txt

@@ -0,0 +1,3 @@
+Project X Secret Code: ALPHA-OMEGA-99
+The launch date for Project X is December 25th, 2026.
+The lead engineer is Dr. Poom.