Spaces:

tuhbooh
/

IOA123

Sleeping

App Files Files Community

tuhbooh commited on 26 days ago

Commit

2be21af

verified ·

1 Parent(s): b58a348

Update app.py

Browse files

Files changed (1) hide show

app.py +58 -98

app.py CHANGED Viewed

@@ -1,118 +1,90 @@
-from flask import Flask
 app = Flask(__name__)
-# Nhúng HTML với nội dung giải thích chi tiết hơn
 html_content = """
 <!DOCTYPE html>
 <html lang="vi">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mini Quiz: Ngôn ngữ TP.HCM</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');
         body {
             font-family: 'Plus Jakarta Sans', sans-serif;
-            background-color: #020617;
             color: #f1f5f9;
             margin: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
-            overflow-y: auto;
-            padding: 20px 0;
         }
         .mini-card {
             background: #1e293b;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            width: 95%;
-            max-width: 420px;
-            max-height: 90vh;
             overflow-y: auto;
-            border-radius: 28px;
-            position: relative;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
-            scrollbar-width: thin;
         }
-        .mini-card::-webkit-scrollbar { width: 4px; }
-        .mini-card::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 10px; }
-        .fade-in { animation: fadeIn 0.5s ease-out forwards; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        .correct-anim { background: #065f46 !important; border-color: #10b981 !important; transform: scale(1.02); }
-        .wrong-anim { animation: shake 0.4s ease; background: #7f1d1d !important; border-color: #ef4444 !important; }
-        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
         .progress-dot { width: 8px; height: 8px; border-radius: 50%; background: #475569; transition: all 0.4s ease; }
         .progress-dot.active { background: #3b82f6; width: 24px; border-radius: 12px; }
     </style>
 </head>
 <body>
-    <div id="app" class="mini-card p-6 fade-in">
-        <!-- Header -->
-        <div class="flex justify-between items-center mb-8 border-b border-slate-700/50 pb-4">
             <div>
-                <h4 class="text-[10px] font-bold uppercase tracking-widest text-blue-500">Tìm hiểu văn hóa</h4>
-                <div class="text-[10px] text-slate-500 font-semibold" id="step-label">CÂU 1 / 3</div>
             </div>
-            <div id="dots-container" class="flex gap-2">
                 <div class="progress-dot active"></div><div class="progress-dot"></div><div class="progress-dot"></div>
             </div>
         </div>
         <div id="quiz-container">
-            <h2 id="question-text" class="text-xl font-bold mb-6 leading-snug text-white">Đang tải câu hỏi...</h2>
-            <div id="options-grid" class="space-y-3"></div>
         </div>
-        <!-- Bảng giải thích chi tiết -->
-        <div id="explanation-box" class="hidden mt-6 p-5 bg-blue-900/20 rounded-2xl border border-blue-500/30 fade-in">
-            <div class="flex items-center gap-2 mb-2">
-                <span class="text-blue-400 text-lg">📝</span>
-                <span class="text-blue-400 font-bold text-xs uppercase tracking-tighter">Giải thích chi tiết:</span>
             </div>
-            <p id="explanation-text" class="text-[13px] text-slate-300 leading-relaxed text-justify"></p>
-            <button id="next-btn" class="w-full mt-5 py-3.5 bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold rounded-xl shadow-lg shadow-blue-900/40 transition-all active:scale-95">
-                Tiếp tục thử thách
-            </button>
         </div>
-        <div id="end-screen" class="hidden text-center py-10">
-            <div class="text-6xl mb-6">🎯</div>
-            <h3 class="text-2xl font-bold text-white">Kết quả chung cuộc</h3>
-            <div id="final-score" class="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-emerald-400 my-6">0/3</div>
-            <button onclick="location.reload()" class="w-full py-4 bg-slate-800 hover:bg-slate-700 rounded-2xl text-sm font-bold border border-slate-700">Thực hiện lại</button>
         </div>
     </div>
     <script>
         const quizData = [
-            {
-                q: "Yếu tố cốt lõi nào hình thành nên sự đa dạng ngôn ngữ tại TP.HCM?",
-                options: ["Giao thoa của nhiều vùng miền", "Ảnh hưởng từ tiếng nước ngoài", "Chính sách từ chính quyền", "Quá trình biến đổi tự nhiên"],
-                correct: 0,
-                info: "TP.HCM là 'vùng đất hứa' tụ hội cư dân từ khắp mọi miền đất nước. Mỗi nhóm người mang theo phương ngữ đặc trưng (Bắc, Trung, Tây Nam Bộ...), khi hòa quyện với nhau đã tạo nên một hệ thống từ vựng cực kỳ phong phú, biến thành phố thành một 'bảo tàng ngôn ngữ sống' đầy thú vị."
-            },
-            {
-                q: "Đặc điểm nổi bật nhất trong lối nói của người Sài Gòn là gì?",
-                options: ["Sử dụng nhiều từ hán việt", "Bộc trực, hào sảng và giản dị", "Ưa chuộng sự cầu kỳ, lễ nghi", "Nói giảm nói tránh nhiều"],
-                correct: 1,
-                info: "Lối sống mở và phóng khoáng đã hình thành nên phong cách giao tiếp 'nói thẳng, nói thật'. Người Sài Gòn thường lược bỏ sự khách sáo rườm rà, thay vào đó là cách xưng hô thân thiện (anh Hai, chị Ba, chú Tư...) và những từ ngữ bộc lộ sự chân thành ngay lập tức."
-            },
-            {
-                q: "Làm thế nào để bảo tồn bản sắc ngôn ngữ thành phố hiệu quả nhất?",
-                options: ["Hạn chế sử dụng tiếng lóng", "Chuẩn hóa giọng nói duy nhất", "Kết hợp giáo dục và công nghệ số", "Chỉ sử dụng trong văn bản chính thức"],
-                correct: 2,
-                info: "Trong kỷ nguyên số, việc bảo tồn không chỉ là giữ gìn trong sách vở. Chúng ta cần 'số hóa' các phương ngữ, xây dựng từ điển điện tử và lồng ghép vào giáo dục thực tiễn. Điều này giúp thế hệ trẻ vừa tiếp cận được công nghệ, vừa không làm mất đi 'cái gốc' tiếng nói của cha ông."
-            }
         ];
         let current = 0, score = 0, active = true;
         function init() {
             active = true;
             const data = quizData[current];
@@ -120,51 +92,34 @@ html_content = """
             const grid = document.getElementById('options-grid');
             grid.innerHTML = '';
             document.getElementById('explanation-box').classList.add('hidden');
-            document.getElementById('step-label').textContent = `CÂU ${current + 1} / 3`;
-            document.querySelectorAll('.progress-dot').forEach((dot, i) => {
-                dot.className = i === current ? 'progress-dot active' : 'progress-dot';
-            });
             data.options.forEach((opt, i) => {
                 const btn = document.createElement('button');
-                btn.className = 'w-full p-4 text-left text-sm rounded-2xl border border-slate-700 bg-slate-800/40 flex items-start gap-3 transition-all hover:border-blue-500/50';
-                btn.innerHTML = `<span class="flex-none w-6 h-6 rounded-lg bg-slate-700 flex items-center justify-center text-[10px] font-bold text-blue-400">${String.fromCharCode(65+i)}</span><span class="text-slate-300 leading-tight">${opt}</span>`;
                 btn.onclick = () => {
                     if(!active) return; active = false;
                     const buttons = grid.querySelectorAll('button');
-                    if(i === data.correct) {
-                        btn.classList.add('correct-anim');
-                        score++;
-                    } else {
-                        btn.classList.add('wrong-anim');
-                        buttons[data.correct].classList.add('correct-anim');
-                    }
                     document.getElementById('explanation-text').textContent = data.info;
                     document.getElementById('explanation-box').classList.remove('hidden');
-                    // Tự động cuộn xuống để thấy giải thích
-                    setTimeout(() => { document.querySelector('.mini-card').scrollTo({top: 500, behavior: 'smooth'}); }, 100);
                 };
                 grid.appendChild(btn);
             });
         }
         document.getElementById('next-btn').onclick = () => {
             current++;
-            if(current < 3) {
-                document.querySelector('.mini-card').scrollTo({top: 0, behavior: 'smooth'});
-                init();
-            } else {
                 document.getElementById('quiz-container').classList.add('hidden');
                 document.getElementById('explanation-box').classList.add('hidden');
                 document.getElementById('end-screen').classList.remove('hidden');
                 document.getElementById('final-score').textContent = `${score}/3`;
-                document.getElementById('step-label').parentElement.classList.add('hidden');
-                document.getElementById('dots-container').classList.add('hidden');
             }
         };
         init();
     </script>
 </body>
@@ -173,7 +128,12 @@ html_content = """
 @app.route("/")
 def index():
-    return html_content
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860)

+from flask import Flask, make_response
 app = Flask(__name__)
+# Giao diện Quiz đã được tối ưu
 html_content = """
 <!DOCTYPE html>
 <html lang="vi">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sắc màu ngôn ngữ TP.HCM</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
         body {
             font-family: 'Plus Jakarta Sans', sans-serif;
+            background-color: #0f172a;
             color: #f1f5f9;
             margin: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
+            padding: 1rem;
         }
         .mini-card {
             background: #1e293b;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            width: 100%;
+            max-width: 450px;
+            max-height: 95vh;
+            border-radius: 32px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            padding: 2rem;
+            display: flex;
+            flex-direction: column;
             overflow-y: auto;
+            scrollbar-width: none;
         }
+        .mini-card::-webkit-scrollbar { display: none; }
+        .option-btn { background: rgba(51, 65, 85, 0.4); border: 1px solid rgba(71, 85, 105, 0.5); transition: all 0.3s ease; }
+        .correct-anim { background: #064e3b !important; border-color: #10b981 !important; color: #ecfdf5 !important; }
+        .wrong-anim { background: #7f1d1d !important; border-color: #ef4444 !important; }
         .progress-dot { width: 8px; height: 8px; border-radius: 50%; background: #475569; transition: all 0.4s ease; }
         .progress-dot.active { background: #3b82f6; width: 24px; border-radius: 12px; }
+        #explanation-box { animation: slideIn 0.4s ease-out forwards; }
+        @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
     </style>
 </head>
 <body>
+    <div id="app" class="mini-card">
+        <div class="flex justify-between items-center mb-6 pb-4 border-b border-slate-700/50">
             <div>
+                <p class="text-[10px] font-bold uppercase tracking-widest text-blue-500 mb-1">Hành trình ngôn ngữ</p>
+                <h4 id="step-label" class="text-xs font-semibold text-slate-400 uppercase">Câu 1 / 3</h4>
             </div>
+            <div id="dots-container" class="flex gap-1.5">
                 <div class="progress-dot active"></div><div class="progress-dot"></div><div class="progress-dot"></div>
             </div>
         </div>
         <div id="quiz-container">
+            <h2 id="question-text" class="text-xl font-bold leading-tight mb-6 text-white">Đang tải...</h2>
+            <div id="options-grid" class="space-y-3 mb-6"></div>
         </div>
+        <div id="explanation-box" class="hidden p-5 bg-blue-600/10 rounded-2xl border border-blue-500/20">
+            <div class="flex items-center gap-2 mb-3">
+                <span class="text-lg">💡</span>
+                <span class="text-[10px] font-black uppercase tracking-widest text-blue-400">Phân tích chuyên sâu</span>
             </div>
+            <p id="explanation-text" class="text-[13.5px] leading-relaxed text-slate-300 text-justify italic font-medium"></p>
+            <button id="next-btn" class="w-full mt-6 py-4 bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold rounded-xl shadow-lg transition-all active:scale-95">Tiếp tục</button>
         </div>
+        <div id="end-screen" class="hidden text-center py-8">
+            <div class="text-6xl mb-6">🏆</div>
+            <h3 class="text-2xl font-bold text-white mb-2">Hoàn thành!</h3>
+            <div id="final-score" class="text-7xl font-black text-blue-400 mb-10">0/3</div>
+            <button onclick="location.reload()" class="w-full py-4 bg-slate-800 border border-slate-700 rounded-2xl font-bold text-sm">Làm lại</button>
         </div>
     </div>
     <script>
         const quizData = [
+            { q: "Tại sao ngôn ngữ TP.HCM lại có sự pha trộn đặc trưng đến vậy?", options: ["Do vị trí địa lý", "Do chính sách", "Do giao thoa cư dân", "Do phương Tây"], correct: 2, info: "Sài Gòn là vùng đất 'mở', đón nhận di cư từ khắp miền Bắc, Trung, Tây. Sự cộng hưởng này t��o ra hệ thống từ vựng phong phú và bản sắc riêng không trộn lẫn." },
+            { q: "Tính cách 'hào sảng' ảnh hưởng thế nào đến cách nói chuyện?", options: ["Cầu kỳ, lễ nghĩa", "Bộc trực, giản dị", "Xa cách, giữ kẽ", "Dùng từ bác học"], correct: 1, info: "Lối nói 'nghĩ sao nói vậy' phản chiếu sự hào sảng. Họ chuộng từ thân mật (anh Hai, chị Ba, cưng...) giúp xóa tan khoảng cách ngay lần đầu gặp mặt." },
+            { q: "Hướng đi bền vững nhất để giữ gìn ngôn ngữ Sài Gòn?", options: ["Dùng trong gia đình", "Cấm tiếng lóng", "Giáo dục & Công nghệ", "Cố định phát âm"], correct: 2, info: "Bảo tồn không phải là giữ khư khư, mà là làm cho ngôn ngữ đó tiếp tục sống trên podcast, phim ảnh để thế hệ trẻ luôn yêu mến nó." }
         ];
         let current = 0, score = 0, active = true;
         function init() {
             active = true;
             const data = quizData[current];
             const grid = document.getElementById('options-grid');
             grid.innerHTML = '';
             document.getElementById('explanation-box').classList.add('hidden');
+            document.getElementById('step-label').textContent = `Câu ${current + 1} / 3`;
+            document.querySelectorAll('.progress-dot').forEach((dot, i) => dot.className = i === current ? 'progress-dot active' : 'progress-dot');
             data.options.forEach((opt, i) => {
                 const btn = document.createElement('button');
+                btn.className = 'option-btn w-full p-4 text-left text-sm rounded-2xl flex gap-3';
+                btn.innerHTML = `<span class="flex-none w-6 h-6 rounded-lg bg-slate-700/50 flex items-center justify-center text-[10px] font-bold text-blue-400">${String.fromCharCode(65+i)}</span><span class="text-slate-300 leading-tight">${opt}</span>`;
                 btn.onclick = () => {
                     if(!active) return; active = false;
                     const buttons = grid.querySelectorAll('button');
+                    if(i === data.correct) { btn.classList.add('correct-anim'); score++; }
+                    else { btn.classList.add('wrong-anim'); buttons[data.correct].classList.add('correct-anim'); }
                     document.getElementById('explanation-text').textContent = data.info;
                     document.getElementById('explanation-box').classList.remove('hidden');
+                    setTimeout(() => { document.querySelector('.mini-card').scrollTo({top: 1000, behavior: 'smooth'}); }, 100);
                 };
                 grid.appendChild(btn);
             });
         }
         document.getElementById('next-btn').onclick = () => {
             current++;
+            if(current < 3) { document.querySelector('.mini-card').scrollTo({top: 0, behavior: 'smooth'}); init(); }
+            else {
                 document.getElementById('quiz-container').classList.add('hidden');
                 document.getElementById('explanation-box').classList.add('hidden');
                 document.getElementById('end-screen').classList.remove('hidden');
                 document.getElementById('final-score').textContent = `${score}/3`;
             }
         };
         init();
     </script>
 </body>
 @app.route("/")
 def index():
+    # Tạo response và thêm Header để cho phép Canva (hoặc bất kỳ site nào) nhúng vào
+    response = make_response(html_content)
+    # Loại bỏ các hạn chế về Iframe
+    response.headers['X-Frame-Options'] = 'ALLOWALL'
+    response.headers['Content-Security-Policy'] = "frame-ancestors *;"
+    return response
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860)