Spaces:

CVNSS
/

thuphap

Running

App Files Files Community

CVNSS commited on Dec 12, 2025

Commit

36bb4c8

verified ·

1 Parent(s): b551cf1

Update index.html

Browse files

Files changed (1) hide show

index.html +347 -19

index.html CHANGED Viewed

@@ -1,19 +1,347 @@
-<!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="vi">
+<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">
+    <!-- Import Libraries for Export -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <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;
+            padding: 40px 20px;
+            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: 2.8rem; /* 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;
+        }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    </style>
+</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,
+Homy nay voix em thatf suh lal motf wayl ratb koj qeny. Wayl 12 thagj 12 – wayl mal zuh anj AI em laml zuah treny nend tagz CVNSS4.0 cujb cugl cugs “chaol doik”. Em camz jac jogb nhuo mihl vuak holl thahl dush motf diwd jil doj lonx lamx, thux mal trusx dayy em chiz zamj wis chux kogy zamj tin lal mihl ses laml dush. Vuak ved denb nhal lal em wis way denb thayd, neny em mulb vidb lild cho thayd laj thuo nayl.
+Zaor nayl thayd coj koez kogy ar? Em vang hay nhox mayb tidb hocr thayd dugx lopx – luc naol cugs wivy mal lair amb ap, kilb tuir em kogy bao jok zamj lujk. Lopx hocr sihp namo nay thayd chuz nhivf coj wolp kogy thayd? Em dolj chacx lal cugs “qayf vuak duz” deq thayd faiz cujk, jogb tuir em hoid xuao.
+Conl ja dihl thayd, em hi vogr moir wujk deud mahr koez. Chir Bikj chacx jok das vaol dugj woiy truzk Dair hocr chir ayb thikj roid faiz kogy thayd? Bej Cily thil chacx sapx vaol Tiwq hocr – em dolj lal bej ses jogb thayd, thogy mihp val hild.
+Conl em, thayd ily tamy, em vang onq val vang dagp cob gagx tugk chut motf. Leny lopx cao roid, bail nhiwd val koj hono nhiwd, coj nhugw luc em metf denb mucx chiz mulb boz cusf. Nhugo moig land nhox lair loik thayd zayr – dach bidf lal cauy “bidb mihl sai ov dauy, suav dush thil ses joiz leny” – em lair tuh nhacx mihl kogy dush nanz. Nhok vayf mal mayb namo qa em vang juw dush zahp hiwf hocr sihp joiz ar.
+Caij zuh anj AI em vuak holl thahl cugs vayf. Coj luc em tuzv hogz luly roid. Nhugo roid em nhox denb nhugw land thayd baoz “cux thuv di, sai roid laml lair”, theb lal em lair tifb tucr mayl mol. Val cujb cugl, zuh anj AI zuah treny nend tagz CVNSS4.0-AI cugs holl thilf. Noj jogb nhuo motf zaub mocb cho thayb loik thayd zayr vang theo em denb tanf bayy jok.
+Sapx toix, em ses cob gagx nhiwd hono nuaw deq coj theq thi vaol truzk chyly mal em moo usx. Em mulb thayd ily tamy lal em vang dagp cob gagx tugk busx, kogy boz cusf juaw chugk.
+Em xin zugk but tair dayy. Em chuc thayd thatf nhiwd sucx koez, cogy visf jagz zayr luly thalf loih val tranl wapf nivd vui.
+Hocr trol cuaz thayd,
+L.AI Zemo 1.0
+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>
+        const input = document.getElementById('letterInput');
+        const output = document.querySelector('.letter-content');
+        const loading = document.getElementById('loading');
+        // Hàm render text
+        function renderLetter() {
+            output.innerText = input.value;
+        }
+        // Render ban đầu
+        renderLetter();
+        // Cập nhật khi gõ
+        input.addEventListener('input', renderLetter);
+        // --- EXPORT FUNCTIONS ---
+        async function exportJPG() {
+            showLoading(true);
+            const element = document.getElementById('capture-target');
+            try {
+                // Tạo canvas từ HTML
+                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) {
+                console.error("Lỗi xuất ảnh:", err);
+                alert("Không thể xuất ảnh. Vui lòng thử lại.");
+            }
+            showLoading(false);
+        }
+        async function exportPDF() {
+            showLoading(true);
+            const element = document.getElementById('capture-target');
+            try {
+                // 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.");
+            }
+            showLoading(false);
+        }
+        function showLoading(show) {
+            loading.style.display = show ? 'flex' : 'none';
+        }
+    </script>
+</body>
+</html>