Spaces:

puwanath
/

anycoder-adadf141

Running

App Files Files Community

puwanath commited on Feb 14

Commit

151fccb

verified ·

1 Parent(s): c036aec

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +606 -19

index.html CHANGED Viewed

@@ -1,19 +1,606 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="th">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sawasdee App | สวัสดี</title>
+    <!-- Google Fonts: Khand for headings, Prompt for body -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Khand:wght@300;500;700&family=Prompt:wght@300;400;600&display=swap" rel="stylesheet">
+    <!-- FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --accent-color: #e67e22; /* Thai Orange/Gold vibe */
+            --success-color: #27ae60;
+            --bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
+            --card-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            --text-main: #333;
+            --text-light: #666;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Prompt', sans-serif;
+            background: var(--bg-gradient);
+            color: var(--text-main);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+        }
+        /* Header & Footer */
+        header {
+            width: 100%;
+            max-width: 1000px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+            padding: 15px;
+            background: white;
+            border-radius: 15px;
+            box-shadow: var(--card-shadow);
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--primary-color);
+            font-weight: 700;
+            font-size: 1.5rem;
+            font-family: 'Khand', sans-serif;
+        }
+        .logo i {
+            color: var(--accent-color);
+        }
+        .time-display {
+            font-family: 'Khand', sans-serif;
+            font-size: 1.2rem;
+            color: var(--primary-color);
+            font-weight: 500;
+        }
+        main {
+            width: 100%;
+            max-width: 1000px;
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 25px;
+            flex-grow: 1;
+        }
+        /* Sidebar / Profile Section */
+        .sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+        }
+        .profile-card {
+            background: white;
+            padding: 30px;
+            border-radius: 20px;
+            text-align: center;
+            box-shadow: var(--card-shadow);
+            transition: transform 0.3s ease;
+        }
+        .profile-card:hover {
+            transform: translateY(-5px);
+        }
+        .avatar {
+            width: 100px;
+            height: 100px;
+            background: #eee;
+            border-radius: 50%;
+            margin: 0 auto 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            color: var(--accent-color);
+            border: 4px solid var(--accent-color);
+        }
+        .user-info h2 {
+            font-family: 'Khand', sans-serif;
+            font-size: 1.5rem;
+            margin-bottom: 5px;
+        }
+        .user-role {
+            color: var(--text-light);
+            font-size: 0.9rem;
+        }
+        .quote-box {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 15px;
+            border-left: 5px solid var(--accent-color);
+            font-style: italic;
+            text-align: center;
+        }
+        .quote-text {
+            font-size: 1.1rem;
+            line-height: 1.6;
+        }
+        .quote-author {
+            margin-top: 10px;
+            font-weight: 600;
+            color: var(--accent-color);
+            font-size: 0.9rem;
+        }
+        /* Main Content Area */
+        .dashboard {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+        }
+        .welcome-section {
+            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
+            padding: 40px;
+            border-radius: 20px;
+            color: white;
+            text-align: center;
+            box-shadow: var(--card-shadow);
+        }
+        .welcome-section h1 {
+            font-family: 'Khand', sans-serif;
+            font-size: 3rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        }
+        .welcome-section p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        /* Grid for Tools/Cards */
+        .tools-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        .card {
+            background: white;
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: var(--card-shadow);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
+        }
+        .card-icon {
+            font-size: 2.5rem;
+            margin-bottom: 15px;
+            color: var(--primary-color);
+        }
+        .card h3 {
+            font-family: 'Khand', sans-serif;
+            margin-bottom: 10px;
+            color: var(--primary-color);
+        }
+        .card p {
+            font-size: 0.95rem;
+            color: var(--text-light);
+        }
+        /* Specific Card Styles */
+        .card.todo-card {
+            display: flex;
+            flex-direction: column;
+        }
+        .todo-list {
+            list-style: none;
+            margin-top: 15px;
+            max-height: 150px;
+            overflow-y: auto;
+            padding-right: 5px;
+        }
+        .todo-item {
+            display: flex;
+            align-items: center;
+            padding: 8px 0;
+            border-bottom: 1px solid #eee;
+            transition: 0.2s;
+        }
+        .todo-item:hover {
+            background-color: #f9f9f9;
+        }
+        .todo-item.completed span {
+            text-decoration: line-through;
+            color: #aaa;
+        }
+        .todo-item input[type="checkbox"] {
+            margin-right: 10px;
+            accent-color: var(--success-color);
+            width: 18px;
+            height: 18px;
+        }
+        .todo-item span {
+            flex-grow: 1;
+            font-size: 0.95rem;
+        }
+        .add-todo-group {
+            display: flex;
+            gap: 10px;
+            margin-top: auto;
+        }
+        input[type="text"] {
+            flex-grow: 1;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            font-family: 'Prompt', sans-serif;
+        }
+        button.add-btn {
+            background-color: var(--success-color);
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: 0.2s;
+        }
+        button.add-btn:hover {
+            background-color: #219150;
+        }
+        /* Greeting Generator Section */
+        .greeting-section {
+            background: white;
+            padding: 30px;
+            border-radius: 20px;
+            box-shadow: var(--card-shadow);
+            text-align: center;
+        }
+        .greeting-display {
+            min-height: 100px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 20px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        .greeting-text {
+            font-family: 'Khand', sans-serif;
+            font-size: 2.5rem;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+        .greeting-sub {
+            color: var(--text-light);
+        }
+        .greeting-btn {
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            padding: 12px 30px;
+            font-size: 1.1rem;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: 0.3s;
+            box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);
+        }
+        .greeting-btn:hover {
+            background-color: #d35400;
+            transform: scale(1.05);
+        }
+        /* Footer */
+        footer {
+            margin-top: 40px;
+            text-align: center;
+            width: 100%;
+            max-width: 1000px;
+        }
+        .footer-content {
+            background: white;
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: var(--card-shadow);
+            font-size: 0.9rem;
+            color: var(--text-light);
+        }
+        .anycoder-link {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 700;
+        }
+        .anycoder-link:hover {
+            text-decoration: underline;
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+            .welcome-section h1 {
+                font-size: 2rem;
+            }
+            .greeting-text {
+                font-size: 1.8rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fa-solid fa-hand-holding-heart"></i>
+            <span>Sawasdee App</span>
+        </div>
+        <div class="time-display">
+            <i class="fa-regular fa-clock"></i> <span id="clock">Loading...</span>
+        </div>
+    </header>
+    <main>
+        <!-- Left Sidebar -->
+        <aside class="sidebar">
+            <div class="profile-card">
+                <div class="avatar">
+                    <i class="fa-solid fa-user"></i>
+                </div>
+                <div class="user-info">
+                    <h2>Korbsak</h2>
+                    <div class="user-role">App User / สวัสดีครับ</div>
+                </div>
+                <p style="margin-top: 15px; color: var(--text-light); font-size: 0.9rem;">
+                    Welcome to your daily dashboard.
+                </p>
+            </div>
+            <div class="quote-box">
+                <div class="quote-text">
+                    "ความสุขไม่ใช่จุดหมายปลายทาง แต่คือวิธีการเดินทาง"
+                </div>
+                <div class="quote-author">- ไม่ทราบผู้แต่ง</div>
+            </div>
+            <div class="card">
+                <i class="fa-solid fa-calendar-days card-icon" style="color: var(--accent-color);"></i>
+                <h3>Today's Date</h3>
+                <p id="current-date">Loading date...</p>
+            </div>
+        </aside>
+        <!-- Right Dashboard -->
+        <section class="dashboard">
+            <div class="welcome-section">
+                <h1>สวัสดีครับ! (Sawasdee Krub)</h1>
+                <p>A beautiful interface designed for a better digital experience.</p>
+            </div>
+            <div class="tools-grid">
+                <div class="card">
+                    <i class="fa-solid fa-bolt card-icon" style="color: #f1c40f;"></i>
+                    <h3>Quick Tasks</h3>
+                    <p>Manage your daily activities efficiently.</p>
+                </div>
+                <div class="card">
+                    <i class="fa-solid fa-chart-pie card-icon" style="color: #9b59b6;"></i>
+                    <h3>Analytics</h3>
+                    <p>Track your productivity and habits.</p>
+                </div>
+                <div class="card">
+                    <i class="fa-solid fa-gear card-icon" style="color: #3498db;"></i>
+                    <h3>Settings</h3>
+                    <p>Customize your app preferences.</p>
+                </div>
+            </div>
+            <!-- To-Do List Widget -->
+            <div class="card todo-card">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <h3 style="margin:0; font-family: 'Khand';">My To-Do List</h3>
+                    <i class="fa-solid fa-list-check" style="color: var(--primary-color);"></i>
+                </div>
+                <ul class="todo-list" id="todo-list">
+                    <!-- Items will be added via JS -->
+                </ul>
+                <div class="add-todo-group">
+                    <input type="text" id="todo-input" placeholder="Add a new task...">
+                    <button class="add-btn" onclick="addTodo()"><i class="fa-solid fa-plus"></i></button>
+                </div>
+            </div>
+            <!-- Greeting Generator Widget -->
+            <div class="greeting-section">
+                <h3 style="margin-bottom: 15px; font-family: 'Khand';">Thai Greeting Generator</h3>
+                <div class="greeting-display">
+                    <div class="greeting-text" id="greeting-output">สวัสดีครับ (Sawasdee Krub)</div>
+                    <div class="greeting-sub">Click the button below to greet differently</div>
+                </div>
+                <button class="greeting-btn" onclick="generateRandomGreeting()">
+                    <i class="fa-solid fa-rotate-right"></i> New Greeting
+                </button>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <div class="footer-content">
+            &copy; <span id="year"></span> Sawasdee App. All rights reserved. <br>
+            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a>
+        </div>
+    </footer>
+    <script>
+        // 1. Clock & Date Logic
+        function updateClock() {
+            const now = new Date();
+            // Time
+            let hours = now.getHours();
+            let minutes = now.getMinutes();
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12;
+            hours = hours ? hours : 12; // the hour '0' should be '12'
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            const timeString = `${hours}:${minutes} ${ampm}`;
+            document.getElementById('clock').innerText = timeString;
+            // Date
+            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+            const dateString = now.toLocaleDateString('th-TH', options);
+            // Convert to Thai numerals for better look (Optional but nice)
+            const thaiNumerals = ['0','1','2','3','4','5','6','7','8','9'];
+            const convertedDate = dateString.replace(/[0-9]/g, x => thaiNumerals[x]);
+            document.getElementById('current-date').innerText = convertedDate;
+            document.getElementById('year').innerText = now.getFullYear();
+        }
+        setInterval(updateClock, 1000);
+        updateClock();
+        // 2. To-Do List Logic
+        const todoInput = document.getElementById('todo-input');
+        const todoList = document.getElementById('todo-list');
+        // Initial Data
+        let todos = [
+            { text: 'ทักทายผู้คน (Say Hello)', completed: false },
+            { text: 'ดื่มน้ำให้พอ (Drink Water)', completed: true },
+            { text: 'ทำงานที่สำคัญ (Focus Work)', completed: false }
+        ];
+        function renderTodos() {
+            todoList.innerHTML = '';
+            todos.forEach((todo, index) => {
+                const li = document.createElement('li');
+                li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
+                li.innerHTML = `
+                    <input type="checkbox" ${todo.completed ? 'checked' : ''} onclick="toggleTodo(${index})">
+                    <span>${todo.text}</span>
+                    <i class="fa-solid fa-trash" style="color: #e74c3c; cursor: pointer;" onclick="deleteTodo(${index})"></i>
+                `;
+                todoList.appendChild(li);
+            });
+        }
+        function addTodo() {
+            const text = todoInput.value.trim();
+            if (text) {
+                todos.unshift({ text: text, completed: false });
+                todoInput.value = '';
+                renderTodos();
+            }
+        }
+        function toggleTodo(index) {
+            todos[index].completed = !todos[index].completed;
+            renderTodos();
+        }
+        function deleteTodo(index) {
+            todos.splice(index, 1);
+            renderTodos();
+        }
+        // Enter key support for todo
+        todoInput.addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                addTodo();
+            }
+        });
+        renderTodos();
+        // 3. Greeting Generator Logic
+        const greetings = [
+            { thai: "สวัสดีครับ", eng: "Hello (Krub)" },
+            { thai: "สวัสดีค่ะ", eng: "Hello (Ka)" },
+            { thai: "หวัดดีครับ", eng: "Hi there! (Krub)" },
+            { thai: "ดีจังเลยครับ", eng: "That's great! (Krub)" },
+            { thai: "ขอบคุณครับ", eng: "Thank you (Krub)" },
+            { thai: "ลาก่อนครับ", eng: "Goodbye (Krub)" },
+            { thai: "อรุณสวัสดิ์", eng: "Good Morning" },
+            { thai: "สวัสดีตอนเย็น", eng: "Good Evening" }
+        ];
+        function generateRandomGreeting() {
+            const randomIndex = Math.floor(Math.random() * greetings.length);
+            const greeting = greetings[randomIndex];
+            const outputDiv = document.getElementById('greeting-output');
+            // Simple animation effect
+            outputDiv.style.opacity = 0;
+            outputDiv.style.transform = "scale(0.9)";
+            setTimeout(() => {
+                outputDiv.innerHTML = `${greeting.thai} <span style="font-size: 1.2rem; display:block; font-family:Prompt; color:#7f8c8d;">${greeting.eng}</span>`;
+                outputDiv.style.opacity = 1;
+                outputDiv.style.transform = "scale(1)";
+            }, 200);
+        }
+        // Initialize with a random greeting on load
+        generateRandomGreeting();
+    </script>
+</body>
+</html>