67 lines
2.9 KiB
HTML
67 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>CaTML Standalone Demo</title>
|
||
<!-- Load the CaTML runtime interpreter -->
|
||
<script src="catml.js"></script>
|
||
<style>
|
||
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #fff8f0; color: #333; padding: 20px; }
|
||
.cardboard-box { background: #ffe4c4; border: 2px dashed #cd853f; border-radius: 12px; padding: 25px; max-width: 650px; margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
|
||
.btn-bap { background: #ff6b6b; color: white; border: none; padding: 10px 18px; border-radius: 20px; cursor: pointer; font-size: 16px; font-weight: bold; transition: transform 0.1s; }
|
||
.btn-bap:hover { background: #fa5252; transform: scale(1.05); }
|
||
.sniff-box { padding: 8px 14px; border: 2px solid #deb887; border-radius: 8px; font-size: 14px; width: 60%; margin-right: 10px; }
|
||
.treat-list { background: #fff; border-radius: 8px; padding: 15px 30px; margin: 15px 0; border: 1px solid #fed; }
|
||
.footer-box { margin-top: 25px; border-top: 1px solid #ebd3be; padding-top: 15px; font-size: 13px; color: #8c7b75; text-align: center; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Writing pure CaTML inside <script type="text/catml"> -->
|
||
<script type="text/catml">
|
||
<box breed="cardboard-box">
|
||
<curtain>
|
||
<meow1>🐾 Welcome to CaTML!</meow1>
|
||
<purr><claw>CaTML</claw> stands for <hiss>Cat Altered Text Markup Language</hiss>.</purr>
|
||
</curtain>
|
||
|
||
<nap />
|
||
|
||
<perch>
|
||
<meow2>Why CaTML?</meow2>
|
||
<purr>
|
||
Standard HTML is for humans. Cats require proper semantics: boxes for divs, purrs for paragraphs, and baps for buttons!
|
||
</purr>
|
||
|
||
<meow3>Favorite Treats (<feather breed="fluffy">ranked by tastiness</feather>)</meow3>
|
||
<bowl breed="treat-list">
|
||
<treat>🐟 Fresh Atlantic Salmon</treat>
|
||
<treat>🍗 Warm Roast Chicken Bits</treat>
|
||
<treat>🌿 Organic Catnip Sprinkles</treat>
|
||
</bowl>
|
||
</perch>
|
||
|
||
<perch>
|
||
<meow3>Interactive Bap Station</meow3>
|
||
<purr>Try bapping this button to test inline event handling:</purr>
|
||
<bap breed="btn-bap" on-bap="alert('🐾 BAP! You pushed the glass off the counter! 🥛💥')">
|
||
🐾 Bap the Glass!
|
||
</bap>
|
||
</perch>
|
||
|
||
<nap />
|
||
|
||
<perch>
|
||
<meow3>Sniff Test (Input field)</meow3>
|
||
<sniff breed="sniff-box" treat-type="text" curiosity="Sniff something here..." on-sniff="document.getElementById('sniff-output').textContent = 'Cat smells: ' + this.value;" />
|
||
<purr tag="sniff-output" fluff="color: #d9480f; font-weight: bold; margin-top: 8px;"></purr>
|
||
</perch>
|
||
|
||
<litterbox breed="footer-box">
|
||
<purr>Built with ❤️ and fur • Powered by <scratch catch="https://git.p20.dev/christian/CaTML.git" target="_blank">CaTML Runtime</scratch></purr>
|
||
</litterbox>
|
||
</box>
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|