|
|
<!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 - Royal Edition</title> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&family=Pinyon+Script&family=Cinzel:wght@400;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
|
|
|
<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: #f3e5ab; |
|
|
--paper-texture: #e6d69c; |
|
|
--ink-color: #3b2518; |
|
|
--gold-accent: #d4af37; |
|
|
--gold-dark: #aa8c2c; |
|
|
--bg-color: #1a0f0a; |
|
|
--red-seal: #8a1c1c; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: var(--bg-color); |
|
|
|
|
|
background-image: radial-gradient(circle at center, #2a1f1a 0%, #0d0502 100%); |
|
|
font-family: 'Cinzel', serif; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
padding: 40px 20px; |
|
|
gap: 30px; |
|
|
margin: 0; |
|
|
color: #d4d4d4; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
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 { |
|
|
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-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-wrapper { |
|
|
position: relative; |
|
|
padding: 20px; |
|
|
background: #222; |
|
|
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; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
.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 { |
|
|
position: absolute; |
|
|
width: 50px; height: 50px; |
|
|
background-size: contain; |
|
|
background-repeat: no-repeat; |
|
|
opacity: 0.8; |
|
|
z-index: 3; |
|
|
} |
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
|
text-shadow: 0 0 1px rgba(59, 37, 24, 0.3); |
|
|
filter: contrast(1.1); |
|
|
} |
|
|
|
|
|
|
|
|
.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); |
|
|
text-shadow: 1px 1px 0px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.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 { |
|
|
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; |
|
|
} |
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header> |
|
|
<h1>Leonardo's Codex</h1> |
|
|
<div class="subtitle">Royal Edition • XVI Century Style</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="controls"> |
|
|
<button onclick="exportJPG()">📸 Lưu Ảnh (JPG)</button> |
|
|
<button onclick="exportPDF()">📜 Xuất Văn Bản (PDF)</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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, |
|
|
|
|
|
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> |
|
|
|
|
|
|
|
|
<div class="letter-wrapper"> |
|
|
<div id="capture-target" class="letter-container"> |
|
|
|
|
|
<div class="border-frame"></div> |
|
|
<div class="border-inner"></div> |
|
|
|
|
|
|
|
|
<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 class="wax-seal"> |
|
|
<div class="wax-inner-ring"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loading"> |
|
|
<div class="spinner"></div> |
|
|
<div>Đang niêm phong văn bản...</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const input = document.getElementById('letterInput'); |
|
|
const output = document.querySelector('.letter-content'); |
|
|
const loading = document.getElementById('loading'); |
|
|
|
|
|
|
|
|
function renderLetter() { |
|
|
output.innerText = input.value; |
|
|
} |
|
|
|
|
|
|
|
|
renderLetter(); |
|
|
|
|
|
|
|
|
input.addEventListener('input', renderLetter); |
|
|
|
|
|
|
|
|
|
|
|
async function exportJPG() { |
|
|
showLoading(true); |
|
|
const element = document.getElementById('capture-target'); |
|
|
try { |
|
|
|
|
|
const canvas = await html2canvas(element, { |
|
|
scale: 2, |
|
|
backgroundColor: null, |
|
|
useCORS: true, |
|
|
logging: false |
|
|
}); |
|
|
|
|
|
|
|
|
const link = document.createElement('a'); |
|
|
link.download = 'Hoang_Gia_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 { |
|
|
|
|
|
const canvas = await html2canvas(element, { |
|
|
scale: 2, |
|
|
useCORS: true, |
|
|
logging: false |
|
|
}); |
|
|
|
|
|
const imgData = canvas.toDataURL('image/jpeg', 0.9); |
|
|
const { jsPDF } = window.jspdf; |
|
|
|
|
|
|
|
|
const pdf = new jsPDF('p', 'mm', 'a4'); |
|
|
const imgWidth = 210; |
|
|
const imgHeight = canvas.height * imgWidth / canvas.width; |
|
|
|
|
|
|
|
|
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."); |
|
|
} |
|
|
showLoading(false); |
|
|
} |
|
|
|
|
|
function showLoading(show) { |
|
|
loading.style.display = show ? 'flex' : 'none'; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
