Spaces:

CVNSS
/

thuphap

Running

App Files Files Community

CVNSS commited on Dec 12, 2025

Commit

aef225a

verified ·

1 Parent(s): 4bd451d

Update index.html

Browse files

Files changed (1) hide show

index.html +195 -99

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thư Pháp Leonardo da Vinci</title>
     <!-- Import Renaissance & Royal Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&family=Pinyon+Script&family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
@@ -13,15 +13,20 @@
     <style>
         :root {
-            --paper-color: #e8dcc5; /* Màu giấy da dê (Vellum) đậm đà hơn */
-            --ink-color: #2b1d0e;   /* Mực nâu đen (Sepia đậm) */
-            --gold-accent: #c5a059; /* Màu vàng kim loại cũ */
-            --border-color: #5c4033;
         }
         body {
-            background-color: #1a1a1a;
-            font-family: 'Segoe UI', sans-serif;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -29,179 +34,260 @@
             gap: 30px;
             margin: 0;
             color: #d4d4d4;
         }
         h1 {
             color: var(--gold-accent);
-            font-family: 'Cinzel', serif; /* Font tiêu đề phong cách La Mã cổ đại */
-            font-size: 2.5rem;
             margin: 0;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
-            letter-spacing: 4px;
             text-transform: uppercase;
-            border-bottom: 2px solid var(--gold-accent);
-            padding-bottom: 10px;
         }
         .subtitle {
-            color: #888;
             font-size: 0.9rem;
-            margin-top: -10px;
             font-style: italic;
-            font-family: 'Cinzel', serif;
         }
         /* --- CONTROLS SECTION --- */
         .controls {
             display: flex;
-            gap: 15px;
             margin-bottom: 10px;
         }
         button {
-            padding: 10px 20px;
-            border: 1px solid var(--gold-accent);
-            background: rgba(0,0,0,0.5);
             color: var(--gold-accent);
             font-family: 'Cinzel', serif;
             cursor: pointer;
             transition: all 0.3s ease;
             text-transform: uppercase;
-            letter-spacing: 1px;
             font-size: 0.8rem;
         }
         button:hover {
-            background: var(--gold-accent);
-            color: #1a1a1a;
             box-shadow: 0 0 15px var(--gold-accent);
         }
         /* --- INPUT SECTION --- */
         .input-container {
-            width: 700px;
-            background: #2a2a2a;
-            padding: 25px;
             border: 1px solid #444;
-            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
             display: flex;
             flex-direction: column;
             gap: 10px;
         }
         .input-container label {
-            font-weight: bold;
-            color: #aaa;
-            text-transform: uppercase;
-            font-size: 0.75rem;
             letter-spacing: 1px;
-            font-family: 'Segoe UI', sans-serif;
         }
         textarea {
             width: 100%;
-            height: 120px;
             padding: 15px;
-            border: 1px solid #444;
-            background-color: #1f1f1f;
             color: #e0e0e0;
             font-family: 'Segoe UI', sans-serif;
             font-size: 1rem;
             resize: vertical;
             box-sizing: border-box;
             line-height: 1.6;
         }
         textarea:focus {
             outline: none;
             border-color: var(--gold-accent);
         }
         /* --- LETTER STYLES --- */
         .letter-container {
             width: 800px;
             min-height: 1100px;
             background-color: var(--paper-color);
             position: relative;
-            padding: 80px 90px;
             box-sizing: border-box;
-            box-shadow: 0 20px 50px rgba(0,0,0,0.8);
-            /* Texture giấy da cũ kỹ (Parchment Texture) */
-            background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15' fill='%236b4c35'/%3E%3C/svg%3E");
         }
         /* Royal Border (Viền Hoàng Gia) */
-        .letter-container::before {
-            content: "";
             position: absolute;
-            top: 20px; left: 20px; right: 20px; bottom: 20px;
             border: 2px solid #5c4033;
             pointer-events: none;
         }
-        .letter-container::after {
-            content: "";
             position: absolute;
-            top: 25px; left: 25px; right: 25px; bottom: 25px;
-            border: 1px solid var(--gold-accent);
             pointer-events: none;
         }
-        /* Corner Ornaments (Họa tiết góc) - CSS thuần */
         .corner {
             position: absolute;
-            width: 40px; height: 40px;
-            border: 2px solid var(--gold-accent);
-            z-index: 2;
         }
-        .top-left { top: 15px; left: 15px; border-right: none; border-bottom: none; }
-        .top-right { top: 15px; right: 15px; border-left: none; border-bottom: none; }
-        .bottom-left { bottom: 15px; left: 15px; border-right: none; border-top: none; }
-        .bottom-right { bottom: 15px; right: 15px; border-left: none; border-top: none; }
         .letter-content {
-            /* Font Herr Von Muellerhoff rất giống chữ viết tay bay bổng thế kỷ 18 */
             font-family: 'Herr Von Muellerhoff', cursive;
             font-weight: 400;
-            font-size: 3.2rem; /* Font này cần size rất to mới đọc được */
-            line-height: 1.3;
             color: var(--ink-color);
             position: relative;
-            z-index: 1;
             white-space: pre-wrap;
-            text-align: left; /* Da Vinci thường viết kín trang */
-            /* Hiệu ứng mực thấm nhẹ */
-            text-shadow: 0 0 1px rgba(43, 29, 14, 0.2);
         }
-        /* Drop Cap (Chữ cái đầu dòng lớn) */
         .letter-content::first-letter {
             font-family: 'Pinyon Script', cursive;
-            font-size: 5rem;
             float: left;
-            margin-right: 10px;
             line-height: 0.8;
-            color: #5c4033;
-            text-shadow: 1px 1px 0px var(--gold-accent);
         }
-        /* Loading overlay for export */
         #loading {
             display: none;
             position: fixed;
             top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.8);
             z-index: 999;
             color: var(--gold-accent);
             justify-content: center;
             align-items: center;
             flex-direction: column;
             font-family: 'Cinzel', serif;
         }
         .spinner {
-            width: 40px; height: 40px;
-            border: 4px solid var(--gold-accent);
-            border-top: 4px solid transparent;
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin-bottom: 20px;
@@ -212,18 +298,20 @@
 </head>
 <body>
-    <h1>Leonardo's Codex</h1>
-    <div class="subtitle">Phong cách Hoàng Gia & Bút tích Da Vinci</div>
     <!-- EXPORT CONTROLS -->
     <div class="controls">
-        <button onclick="exportJPG()">📸 Tải ảnh (JPG)</button>
-        <button onclick="exportPDF()">📄 Tải tài liệu (PDF)</button>
     </div>
     <!-- INPUT SECTION -->
     <div class="input-container">
-        <label for="letterInput">✎ Nội dung thư (Nhập vào đây):</label>
         <textarea id="letterInput" spellcheck="false">Hod Chij Mihp, wayl 12 thagj 12 namo 2025
 Thayd Bihl cihj menb,
@@ -248,20 +336,32 @@ Wylg Huzo L.AI</textarea>
     </div>
     <!-- LETTER DISPLAY -->
-    <div id="capture-target" class="letter-container">
-        <!-- Corner Ornaments -->
-        <div class="corner top-left"></div>
-        <div class="corner top-right"></div>
-        <div class="corner bottom-left"></div>
-        <div class="corner bottom-right"></div>
-        <div class="letter-content"></div>
     </div>
     <!-- Loading Screen -->
     <div id="loading">
         <div class="spinner"></div>
-        <div>Đang xử lý bút tích...</div>
     </div>
     <script>
@@ -290,12 +390,13 @@ Wylg Huzo L.AI</textarea>
                 const canvas = await html2canvas(element, {
                     scale: 2, // Tăng độ nét
                     backgroundColor: null, // Giữ màu nền trong suốt nếu có
-                    useCORS: true
                 });
                 // Tải xuống
                 const link = document.createElement('a');
-                link.download = 'Thu_Phap_DaVinci.jpg';
                 link.href = canvas.toDataURL('image/jpeg', 0.9);
                 link.click();
             } catch (err) {
@@ -312,26 +413,21 @@ Wylg Huzo L.AI</textarea>
                 // Tạo canvas trước
                 const canvas = await html2canvas(element, {
                     scale: 2,
-                    useCORS: true
                 });
                 const imgData = canvas.toDataURL('image/jpeg', 0.9);
                 const { jsPDF } = window.jspdf;
-                // Khổ A4 (210mm x 297mm) hoặc theo tỷ lệ ảnh
-                // Ở đây ta dùng khổ tùy chỉnh theo kích thước ảnh để không bị cắt
-                const imgWidth = 210; // mm (A4 width)
-                const pageHeight = 297; // mm (A4 height)
-                const imgHeight = canvas.height * imgWidth / canvas.width;
                 const pdf = new jsPDF('p', 'mm', 'a4');
-                // Nếu ảnh dài hơn A4, tự động chia trang hoặc co lại?
-                // Ở đây ta co lại cho vừa 1 trang (fit to page) nếu cần, hoặc in dài
-                // Để đơn giản cho thư tay, ta in 1 trang dài
                 pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
-                pdf.save('Thu_Phap_DaVinci.pdf');
             } catch (err) {
                 console.error("Lỗi xuất PDF:", err);
                 alert("Không thể xuất PDF. Vui lòng thử lại.");

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thư Pháp Leonardo da Vinci - Royal Edition</title>
     <!-- Import Renaissance & Royal Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&family=Pinyon+Script&family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
     <style>
         :root {
+            --paper-color: #f3e5ab; /* Màu giấy da dê sáng hơn, sang trọng hơn */
+            --paper-texture: #e6d69c;
+            --ink-color: #3b2518;   /* Mực nâu đậm (Sepia) */
+            --gold-accent: #d4af37; /* Vàng kim loại chuẩn Royal */
+            --gold-dark: #aa8c2c;
+            --bg-color: #1a0f0a;    /* Nền gỗ tối màu */
+            --red-seal: #8a1c1c;    /* Màu sáp đỏ */
         }
         body {
+            background-color: var(--bg-color);
+            /* Họa tiết nền tối giản sang trọng */
+            background-image: radial-gradient(circle at center, #2a1f1a 0%, #0d0502 100%);
+            font-family: 'Cinzel', serif;
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 30px;
             margin: 0;
             color: #d4d4d4;
+            min-height: 100vh;
+        }
+        /* --- HEADER --- */
+        header {
+            text-align: center;
+            border-bottom: 1px solid var(--gold-dark);
+            padding-bottom: 20px;
+            width: 100%;
+            max-width: 800px;
+            position: relative;
+        }
+        header::after {
+            content: "♕";
+            display: block;
+            font-size: 2rem;
+            color: var(--gold-accent);
+            margin-top: 10px;
+            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
         }
         h1 {
             color: var(--gold-accent);
+            font-size: 3rem;
             margin: 0;
+            text-shadow: 2px 2px 4px #000;
+            letter-spacing: 6px;
             text-transform: uppercase;
+            font-weight: 400;
         }
         .subtitle {
+            color: #8f8f8f;
             font-size: 0.9rem;
+            margin-top: 5px;
             font-style: italic;
+            letter-spacing: 2px;
         }
         /* --- CONTROLS SECTION --- */
         .controls {
             display: flex;
+            gap: 20px;
             margin-bottom: 10px;
+            z-index: 10;
         }
         button {
+            padding: 12px 25px;
+            border: 1px solid var(--gold-dark);
+            background: linear-gradient(180deg, #2b2b2b 0%, #1a1a1a 100%);
             color: var(--gold-accent);
             font-family: 'Cinzel', serif;
             cursor: pointer;
             transition: all 0.3s ease;
             text-transform: uppercase;
+            letter-spacing: 2px;
             font-size: 0.8rem;
+            font-weight: bold;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.5);
+            border-radius: 2px;
         }
         button:hover {
+            background: linear-gradient(180deg, var(--gold-accent) 0%, var(--gold-dark) 100%);
+            color: #1a0f0a;
             box-shadow: 0 0 15px var(--gold-accent);
+            border-color: #fff;
         }
         /* --- INPUT SECTION --- */
         .input-container {
+            width: 800px;
+            background: rgba(30, 25, 20, 0.9);
+            padding: 20px;
             border: 1px solid #444;
+            border-top: 3px solid var(--gold-dark);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
             display: flex;
             flex-direction: column;
             gap: 10px;
+            box-sizing: border-box;
         }
         .input-container label {
+            color: var(--gold-accent);
+            font-size: 0.8rem;
             letter-spacing: 1px;
         }
         textarea {
             width: 100%;
+            height: 100px;
             padding: 15px;
+            border: 1px solid #333;
+            background-color: #121212;
             color: #e0e0e0;
             font-family: 'Segoe UI', sans-serif;
             font-size: 1rem;
             resize: vertical;
             box-sizing: border-box;
             line-height: 1.6;
+            border-left: 2px solid var(--gold-dark);
         }
         textarea:focus {
             outline: none;
+            background-color: #1a1a1a;
             border-color: var(--gold-accent);
         }
         /* --- LETTER STYLES --- */
+        .letter-wrapper {
+            position: relative;
+            padding: 20px;
+            background: #222; /* Bóng đổ giả lập mặt bàn */
+            box-shadow: 0 20px 50px rgba(0,0,0,0.9);
+            border-radius: 2px;
+        }
         .letter-container {
             width: 800px;
             min-height: 1100px;
             background-color: var(--paper-color);
             position: relative;
+            padding: 90px 100px;
             box-sizing: border-box;
+            overflow: hidden;
+            /* Texture giấy da dê cao cấp */
+            background-image:
+                url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12' fill='%238b5e3c'/%3E%3C/svg%3E"),
+                linear-gradient(to bottom right, rgba(255,255,255,0.4), rgba(0,0,0,0.1));
+            box-shadow: inset 0 0 80px rgba(60, 40, 20, 0.3); /* Vignette mép giấy */
         }
         /* Royal Border (Viền Hoàng Gia) */
+        .border-frame {
             position: absolute;
+            top: 25px; left: 25px; right: 25px; bottom: 25px;
             border: 2px solid #5c4033;
             pointer-events: none;
+            z-index: 2;
         }
+        .border-inner {
             position: absolute;
+            top: 32px; left: 32px; right: 32px; bottom: 32px;
+            border: 1px solid var(--gold-dark);
             pointer-events: none;
+            z-index: 2;
         }
+        /* Corner Ornaments */
         .corner {
             position: absolute;
+            width: 50px; height: 50px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            opacity: 0.8;
+            z-index: 3;
+        }
+        /* Sử dụng CSS Gradient để vẽ hoa văn góc đơn giản */
+        .corner::before {
+            content: "";
+            position: absolute;
+            width: 100%; height: 100%;
+            border: 3px double var(--gold-dark);
         }
+        .top-left { top: 20px; left: 20px; border-right: none; border-bottom: none; }
+        .top-right { top: 20px; right: 20px; border-left: none; border-bottom: none; transform: rotate(90deg); }
+        .bottom-left { bottom: 20px; left: 20px; border-right: none; border-bottom: none; transform: rotate(-90deg); }
+        .bottom-right { bottom: 20px; right: 20px; border-left: none; border-bottom: none; transform: rotate(180deg); }
         .letter-content {
             font-family: 'Herr Von Muellerhoff', cursive;
             font-weight: 400;
+            font-size: 2.6rem;
+            line-height: 1.4;
             color: var(--ink-color);
             position: relative;
+            z-index: 5;
             white-space: pre-wrap;
+            text-align: justify;
+            /* Hiệu ứng mực loang nhẹ & không đều màu */
+            text-shadow: 0 0 1px rgba(59, 37, 24, 0.3);
+            filter: contrast(1.1);
         }
+        /* Drop Cap Royal */
         .letter-content::first-letter {
             font-family: 'Pinyon Script', cursive;
+            font-size: 6.5rem;
             float: left;
+            margin-right: 15px;
+            margin-top: -10px;
             line-height: 0.8;
+            color: var(--red-seal); /* Dropcap màu đỏ son */
+            text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
         }
+        /* Wax Seal (Con dấu sáp) */
+        .wax-seal {
+            position: absolute;
+            bottom: 60px;
+            right: 60px;
+            width: 120px;
+            height: 120px;
+            background: radial-gradient(circle at 30% 30%, #b03030, #8a1c1c, #520e0e);
+            border-radius: 50%;
+            box-shadow: 3px 3px 10px rgba(0,0,0,0.4), inset -2px -2px 10px rgba(0,0,0,0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: rgba(0,0,0,0.3);
+            border: 4px dashed rgba(0,0,0,0.1);
+            z-index: 4;
+            transform: rotate(-15deg);
+        }
+        .wax-seal::after {
+            content: "ROYAL";
+            font-family: 'Cinzel', serif;
+            font-weight: 700;
+            font-size: 1.2rem;
+            color: rgba(255,255,255,0.2);
+            text-shadow: -1px -1px 0 rgba(0,0,0,0.3), 1px 1px 0 rgba(255,255,255,0.1);
+        }
+        .wax-inner-ring {
+            position: absolute;
+            width: 80%; height: 80%;
+            border: 2px solid rgba(0,0,0,0.2);
+            border-radius: 50%;
+        }
+        /* Loading overlay */
         #loading {
             display: none;
             position: fixed;
             top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.9);
             z-index: 999;
             color: var(--gold-accent);
             justify-content: center;
             align-items: center;
             flex-direction: column;
             font-family: 'Cinzel', serif;
+            letter-spacing: 2px;
         }
         .spinner {
+            width: 50px; height: 50px;
+            border: 3px solid rgba(212, 175, 55, 0.3);
+            border-top: 3px solid var(--gold-accent);
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin-bottom: 20px;
 </head>
 <body>
+    <header>
+        <h1>Leonardo's Codex</h1>
+        <div class="subtitle">Royal Edition • XVI Century Style</div>
+    </header>
     <!-- EXPORT CONTROLS -->
     <div class="controls">
+        <button onclick="exportJPG()">📸 Lưu Ảnh (JPG)</button>
+        <button onclick="exportPDF()">📜 Xuất Văn Bản (PDF)</button>
     </div>
     <!-- INPUT SECTION -->
     <div class="input-container">
+        <label for="letterInput">✎ Nội dung bút tích (Sẽ hiển thị tự động bên dưới):</label>
         <textarea id="letterInput" spellcheck="false">Hod Chij Mihp, wayl 12 thagj 12 namo 2025
 Thayd Bihl cihj menb,
     </div>
     <!-- LETTER DISPLAY -->
+    <div class="letter-wrapper">
+        <div id="capture-target" class="letter-container">
+            <!-- Borders -->
+            <div class="border-frame"></div>
+            <div class="border-inner"></div>
+            <!-- Corner Ornaments -->
+            <div class="corner top-left"></div>
+            <div class="corner top-right"></div>
+            <div class="corner bottom-left"></div>
+            <div class="corner bottom-right"></div>
+            <!-- Content -->
+            <div class="letter-content"></div>
+            <!-- Wax Seal -->
+            <div class="wax-seal">
+                <div class="wax-inner-ring"></div>
+            </div>
+        </div>
     </div>
     <!-- Loading Screen -->
     <div id="loading">
         <div class="spinner"></div>
+        <div>Đang niêm phong văn bản...</div>
     </div>
     <script>
                 const canvas = await html2canvas(element, {
                     scale: 2, // Tăng độ nét
                     backgroundColor: null, // Giữ màu nền trong suốt nếu có
+                    useCORS: true,
+                    logging: false
                 });
                 // Tải xuống
                 const link = document.createElement('a');
+                link.download = 'Hoang_Gia_DaVinci.jpg';
                 link.href = canvas.toDataURL('image/jpeg', 0.9);
                 link.click();
             } catch (err) {
                 // Tạo canvas trước
                 const canvas = await html2canvas(element, {
                     scale: 2,
+                    useCORS: true,
+                    logging: false
                 });
                 const imgData = canvas.toDataURL('image/jpeg', 0.9);
                 const { jsPDF } = window.jspdf;
+                // Khổ A4 (210mm x 297mm)
                 const pdf = new jsPDF('p', 'mm', 'a4');
+                const imgWidth = 210;
+                const imgHeight = canvas.height * imgWidth / canvas.width;
+                // Căn chỉnh nếu dài quá khổ A4 thì in trang dài hoặc fit
                 pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
+                pdf.save('Hoang_Gia_DaVinci.pdf');
             } catch (err) {
                 console.error("Lỗi xuất PDF:", err);
                 alert("Không thể xuất PDF. Vui lòng thử lại.");