move wayfinder files to Flumi folder
This commit is contained in:
Face
592
flumi/Scripts/Constants.gd
Normal file
592
flumi/Scripts/Constants.gd
Normal file
@@ -0,0 +1,592 @@
|
||||
extends Node
|
||||
|
||||
const MAIN_COLOR = Color(27/255.0, 27/255.0, 27/255.0, 1)
|
||||
const SECONDARY_COLOR = Color(43/255.0, 43/255.0, 43/255.0, 1)
|
||||
|
||||
const HOVER_COLOR = Color(0, 0, 0, 1)
|
||||
|
||||
const DEFAULT_CSS = """
|
||||
body { text-base text-[#000000] text-left }
|
||||
h1 { text-5xl font-bold }
|
||||
h2 { text-4xl font-bold }
|
||||
h3 { text-3xl font-bold }
|
||||
h4 { text-2xl font-bold }
|
||||
h5 { text-xl font-bold }
|
||||
b { font-bold }
|
||||
i { font-italic }
|
||||
u { underline }
|
||||
small { text-xl }
|
||||
mark { bg-[#FFFF00] }
|
||||
code { text-xl font-mono }
|
||||
a { text-[#1a0dab] }
|
||||
pre { text-xl font-mono }
|
||||
|
||||
button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] }
|
||||
button[disabled] { bg-[#666666] text-[#999999] cursor-not-allowed }
|
||||
"""
|
||||
|
||||
var HTML_CONTENT2 = """<head>
|
||||
<title>My Custom Dashboard</title>
|
||||
<icon src="https://cdn-icons-png.flaticon.com/512/1828/1828774.png">
|
||||
<meta name="theme-color" content="#1a202c">
|
||||
<meta name="description" content="A stylish no-script dashboard">
|
||||
|
||||
<font name="roboto" src="https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2" />
|
||||
|
||||
<style>
|
||||
h1 { text-[#ffffff] text-3xl font-bold }
|
||||
h2 { text-[#cbd5e1] text-xl }
|
||||
p { text-[#94a3b8] text-base }
|
||||
button { bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e] active:bg-[#15803d] }
|
||||
.card { bg-[#1e293b] text-[#f8fafc] rounded-xl p-4 shadow-lg }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="bg-[#0f172a] p-8 text-white font-roboto">
|
||||
<h1 style="text-center mb-4">📊 My Dashboard</h1>
|
||||
|
||||
<!-- Top Summary Cards -->
|
||||
<div style="flex flex-row gap-4 justify-center flex-wrap">
|
||||
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
||||
<h2 style="text-red-500">Users</h2>
|
||||
<p>1,240</p>
|
||||
</div>
|
||||
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
||||
<h2>Sales</h2>
|
||||
<p>$9,842</p>
|
||||
</div>
|
||||
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
||||
<h2>Visitors</h2>
|
||||
<p>3,590</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<separator direction="horizontal" />
|
||||
|
||||
<!-- User Info Panel -->
|
||||
<h2 style="text-center mt-6">👤 User Panel</h2>
|
||||
<div style="flex flex-row gap-4 justify-center mt-2">
|
||||
<div style="card w-64">
|
||||
<p>Name: Jane Doe</p>
|
||||
<p>Email: jane@example.com</p>
|
||||
<p>Status: <span style="text-[#22c55e]">Active</span></p>
|
||||
</div>
|
||||
<div style="card w-64">
|
||||
<p>Plan: Pro</p>
|
||||
<p>Projects: 8</p>
|
||||
<p>Tasks: 42</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<separator direction="horizontal" />
|
||||
|
||||
<!-- Recent Activity Log -->
|
||||
<h2 style="text-center mt-6">📝 Recent Activity</h2>
|
||||
<ul style="w-[80%] mt-2 flex justify-center flex-column gap-2">
|
||||
<li style="bg-[#334155] px-4 py-2 rounded-xl mb-1">✅ Task "Update UI" marked as complete</li>
|
||||
<li style="bg-[#334155] px-4 py-2 rounded-xl mb-1">🔔 New comment on "Bug Fix #224"</li>
|
||||
<li style="bg-[#334155] px-4 py-2 rounded-xl mb-1">📤 Exported report "Q2 Metrics"</li>
|
||||
</ul>
|
||||
|
||||
<separator direction="horizontal" />
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<h2 style="text-center mt-6">🔧 Actions</h2>
|
||||
<div style="flex flex-row gap-2 justify-center mt-2">
|
||||
<button style="rounded-lg px-4 py-2">Create Report</button>
|
||||
<button style="rounded-lg px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] active:bg-[#1e40af]">Invite User</button>
|
||||
<button style="rounded-lg px-4 py-2 bg-[#facc15] text-[#000] hover:bg-[#eab308] active:bg-[#ca8a04]">Upgrade Plan</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
""".to_utf8_buffer()
|
||||
var HTML_CONTENT = """<head>
|
||||
<title>My cool web</title>
|
||||
<icon src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png\">
|
||||
|
||||
<meta name=\"theme-color\" content=\"#000000\">
|
||||
<meta name=\"description\" content=\"My cool web\">
|
||||
|
||||
<font name="roboto" src="https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2" />
|
||||
|
||||
<style>
|
||||
h1 { text-[#ff0000] font-italic hover:text-[#00ff00] }
|
||||
p { text-[#333333] text-2xl }
|
||||
button { hover:bg-[#FF6B35] hover:text-[#FFFFFF] active:bg-[#CC5429] active:text-[#F0F0F0] }
|
||||
</style>
|
||||
<style src=\"styles.css\">
|
||||
<script src=\"script.lua\" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Header 1</h1>
|
||||
<h2>Header 2</h2>
|
||||
<h3>Header 3</h3>
|
||||
<h4>Header 4</h4>
|
||||
<h5>Header 5</h5>
|
||||
<h6>Header 6</h6>
|
||||
|
||||
<separator />
|
||||
|
||||
<p>Normal font</p>
|
||||
<p style="font-mono">Mono font</p>
|
||||
<p style="font-sans">Sans font</p>
|
||||
<p style="font-roboto">Custom font - Roboto</p>
|
||||
|
||||
<p>Hey there! this is a test</p>
|
||||
<b>This is bold</b>
|
||||
<i>This is italic <mark>actually, and it's pretty <u>cool</u></mark></i>
|
||||
<u>This is underline</u>
|
||||
<small>this is small</small>
|
||||
<mark>this is marked</mark>
|
||||
<code>this is code<span> THIS IS A SPAN AND SHOULDNT BE ANY DIFFERENT</span></code>
|
||||
|
||||
<p>
|
||||
<a href="https://youtube.com">Hello gang</a>
|
||||
</p>
|
||||
|
||||
<pre>
|
||||
Text in a pre element
|
||||
is displayed in a fixed-width
|
||||
font, and it preserves
|
||||
both spaces and
|
||||
line breaks
|
||||
</pre>
|
||||
|
||||
<p style="text-center w-32 h-32">
|
||||
So
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<button style="rounded-lg px-4 py-2 cursor-pointer">Create Report</button>
|
||||
<button style="rounded-lg px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] active:bg-[#1e40af] cursor-pointer">Invite User</button>
|
||||
<button style="rounded-lg px-4 py-2 bg-[#facc15] text-[#000] hover:bg-[#eab308] active:bg-[#ca8a04] cursor-pointer">Upgrade Plan</button>
|
||||
</div>
|
||||
<button disabled="true">Disabled Button</button>
|
||||
<button>Normal Button</button>
|
||||
|
||||
<separator direction="horizontal" />
|
||||
|
||||
<!-- Test CSS Properties -->
|
||||
<h2 style="text-center mt-6">🧪 CSS Properties Test</h2>
|
||||
<div style="flex flex-col gap-2 justify-center items-center mt-2">
|
||||
<div style="bg-[#ef4444] text-white p-4 rounded-lg opacity-75 z-10 cursor-pointer">
|
||||
<p>Opacity 75% with cursor pointer and z-index 10 - Text should show pointer cursor, not I-beam</p>
|
||||
</div>
|
||||
<div style="bg-[#10b981] text-white p-4 rounded-lg opacity-50 z-20 cursor-text">
|
||||
<p>Opacity 50% with cursor text and z-index 20 - Text should show I-beam cursor</p>
|
||||
</div>
|
||||
<div style="bg-[#8b5cf6] text-white p-4 rounded-lg opacity-[0.25] z-[999] cursor-default">
|
||||
<p>Custom opacity 0.25 with cursor default and z-index 999 - Text should show arrow cursor</p>
|
||||
</div>
|
||||
<div style="bg-[#f59e0b] text-white p-2 rounded cursor-move">
|
||||
<p>Cursor move - Text should show move cursor</p>
|
||||
</div>
|
||||
<div style="bg-[#06b6d4] text-white p-2 rounded cursor-crosshair">
|
||||
<p>Cursor crosshair - Text should show crosshair cursor</p>
|
||||
</div>
|
||||
<div style="bg-[#84cc16] text-white p-2 rounded cursor-help">
|
||||
<p>Cursor help - Text should show help cursor</p>
|
||||
</div>
|
||||
<div style="bg-[#ec4899] text-white p-2 rounded cursor-not-allowed">
|
||||
<p>Cursor not-allowed - Text should show forbidden cursor</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<separator direction="horizontal" />
|
||||
|
||||
<!-- Test cursor inheritance -->
|
||||
<h2 style="text-center mt-6">🖱️ Cursor Inheritance Test</h2>
|
||||
<div style="cursor-pointer bg-[#1e293b] p-4 rounded-lg">
|
||||
<p>This paragraph is inside a div with cursor-pointer.</p>
|
||||
<p>Both paragraphs should show pointer cursor instead of default I-beam.</p>
|
||||
<div style="bg-[#334155] p-2 rounded mt-2">
|
||||
<p>This nested paragraph should also inherit the pointer cursor.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Border examples -->
|
||||
<div style="border p-2 mb-2">border</div>
|
||||
<div style="border-2 p-2 mb-2">border-2</div>
|
||||
<div style="border-4 p-2 mb-2">border-4</div>
|
||||
<div style="border-2 border-red-500 p-2 mb-2">border-2 border-red-500</div>
|
||||
<div style="border p-2 mb-2">border-solid</div>
|
||||
<div style="border border-dashed p-2 mb-2">border-dashed</div>
|
||||
<div style="border border-dotted p-2 mb-2">border-dotted</div>
|
||||
<div style="border-none p-2 mb-2">border-none</div>
|
||||
<div style="border-t p-2 mb-2">border-t</div>
|
||||
<div style="border-r p-2 mb-2">border-r</div>
|
||||
<div style="border-b p-2 mb-2">border-b</div>
|
||||
<div style="border-l p-2 mb-2">border-l</div>
|
||||
<div style="border-t-4 p-2 mb-2">border-t-4</div>
|
||||
<div style="border-b-2 p-2 mb-2">border-b-2</div>
|
||||
<div style="border-l-6 p-2 mb-2">border-l-6</div>
|
||||
<div style="border-t-3 border-green-500 p-2 mb-2">border-t-3 border-green-500</div>
|
||||
<div style="border border-white p-2 mb-2">border-white</div>
|
||||
<div style="border border-black p-2 mb-2">border-black</div>
|
||||
<div style="border border-transparent p-2 mb-2">border-transparent</div>
|
||||
<div style="border border-gray-400 p-2 mb-2">border-gray-400</div>
|
||||
<div style="border border-slate-700 p-2 mb-2">border-slate-700</div>
|
||||
<div style="border border-red-500 p-2 mb-2">border-red-500</div>
|
||||
<div style="border border-green-600 p-2 mb-2">border-green-600</div>
|
||||
<div style="border border-blue-400 p-2 mb-2">border-blue-400</div>
|
||||
<div style="border border-yellow-300 p-2 mb-2">border-yellow-300</div>
|
||||
|
||||
<select style=\"text-center max-w-5 max-h-32\">
|
||||
<option value=\"test1\">Test 1</option>
|
||||
<option value=\"test2\" selected=\"true\">Test 2</option>
|
||||
<option value=\"test3\">Test 3</option>
|
||||
<option value=\"test4\" disabled=\"true\">Test 4</option>
|
||||
<option value=\"test5\">Test 5</option>
|
||||
</select>
|
||||
|
||||
<textarea />
|
||||
<textarea cols=\"30\" />
|
||||
<textarea rows=\"2\" />
|
||||
<textarea maxlength=\"20\" />
|
||||
<textarea readonly=\"true\">le skibidi le toilet</textarea>
|
||||
<textarea disabled=\"true\" value=\"DISABLED\" />
|
||||
<textarea placeholder=\"this is a placeholder...\" />
|
||||
|
||||
<!-- action, method, and type=submit are for when we implement Lua -->
|
||||
<form action=\"/submit\" method=\"POST\">
|
||||
<span>Name:</span>
|
||||
<input type=\"text\" placeholder=\"First name\" value=\"John\" maxlength=\"20\" minlength=\"3\" />
|
||||
<span>Email regex:</span>
|
||||
<input type=\"text\" placeholder=\"Last name\" value=\"Doe\" pattern=\"^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$\" />
|
||||
<span>Smart:</span>
|
||||
<input type=\"checkbox\" />
|
||||
<input type=\"checkbox\" value=\"true\" />
|
||||
|
||||
<p>favorite food</p>
|
||||
<input type=\"radio\" group=\"food\" />
|
||||
<span>Pizza</span>
|
||||
<input type=\"radio\" group=\"food\" />
|
||||
<span>Berry</span>
|
||||
<input type=\"radio\" group=\"food\" />
|
||||
<span>Gary</span>
|
||||
|
||||
<h2>Color</h2>
|
||||
<input type=\"color\" value=\"#ff0000\" />
|
||||
<h2>Date</h2>
|
||||
<input type=\"date\" value=\"2018-07-22\" />
|
||||
|
||||
<h2>Range Slider</h2>
|
||||
<input style=\"max-w-2 max-h-2\" type=\"range\" min=\"0\" max=\"100\" step=\"5\" value=\"50\" />
|
||||
|
||||
<h2>Number Input</h2>
|
||||
<input type=\"number\" min=\"1\" max=\"10\" step=\"0.5\" value=\"5\" placeholder=\"Enter number\" />
|
||||
|
||||
<h2>File Upload</h2>
|
||||
<input type=\"file\" accept=\".txt,.pdf,image/*\" />
|
||||
</form>
|
||||
<separator direction=\"horizontal\" />
|
||||
# Ordered list
|
||||
<ol>
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
</ol>
|
||||
|
||||
<ol type=\"zero-lead\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ol>
|
||||
|
||||
<ol type=\"lower-alpha\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ol>
|
||||
|
||||
<ol type=\"upper-alpha\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<ol type=\"lower-roman\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ol>
|
||||
|
||||
<ol type=\"upper-roman\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ul>
|
||||
|
||||
<ul type=\"circle\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ul>
|
||||
<ul type=\"none\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ul>
|
||||
<ul type=\"square\">
|
||||
<li>hello gang</li>
|
||||
<li>this</li>
|
||||
<li>is</li>
|
||||
<li>a test</li>
|
||||
</ul>
|
||||
<img style=\"text-center max-w-24 max-h-24\" src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMNUPIKabszX0Js_c0kfa4cz_JQYKfGTuBUA&s\" />
|
||||
<separator direction=\"vertical\" />
|
||||
|
||||
<!-- FLEXBOX EXAMPLES -->
|
||||
<h2>Flex Row (gap, justify-between, items-center)</h2>
|
||||
<div style=\"flex flex-row gap-4 justify-between items-center w-64 h-16 bg-[#f0f0f0]\">
|
||||
<span style=\"bg-[#ffaaaa] w-16 h-8 flex items-center justify-center\">A</span>
|
||||
<span style=\"bg-[#aaffaa] w-16 h-8 flex items-center justify-center\">B</span>
|
||||
<span style=\"bg-[#aaaaff] w-16 h-8 flex items-center justify-center\">C</span>
|
||||
</div>
|
||||
|
||||
<h2>Flex Column (gap, items-center, content-center)</h2>
|
||||
<div style=\"flex flex-col gap-2 items-center content-center h-32 w-32 bg-[#e0e0e0]\">
|
||||
<span style=\"bg-[#ffaaaa] w-16 h-6 flex items-center justify-center\">1</span>
|
||||
<span style=\"bg-[#aaffaa] w-16 h-6 flex items-center justify-center\">2</span>
|
||||
<span style=\"bg-[#aaaaff] w-16 h-6 flex items-center justify-center\">3</span>
|
||||
</div>
|
||||
|
||||
<h2>Flex Wrap (row, wrap, gap)</h2>
|
||||
<div style=\"flex flex-row flex-wrap gap-2 w-40 bg-[#f8f8f8]\">
|
||||
<span style=\"bg-[#ffaaaa] w-16 h-6 flex items-center justify-center\">X</span>
|
||||
<span style=\"bg-[#aaffaa] w-16 h-6 flex items-center justify-center\">Y</span>
|
||||
<span style=\"bg-[#aaaaff] w-16 h-6 flex items-center justify-center\">Z</span>
|
||||
<span style=\"bg-[#ffffaa] w-16 h-6 flex items-center justify-center\">W</span>
|
||||
</div>
|
||||
|
||||
<h2>Flex Grow/Shrink/Basis</h2>
|
||||
<div style=\"flex flex-row gap-2 w-64 bg-[#f0f0f0]\">
|
||||
<span style=\"bg-[#ffaaaa] flex-grow-1 h-8 flex items-center justify-center\">Grow 1</span>
|
||||
<span style=\"bg-[#aaffaa] flex-grow-2 h-8 flex items-center justify-center\">Grow 2</span>
|
||||
<span style=\"bg-[#aaaaff] flex-shrink-0 w-8 h-8 flex items-center justify-center\">No Shrink</span>
|
||||
</div>
|
||||
|
||||
<h2>Align Self</h2>
|
||||
<div style=\"flex flex-row h-24 bg-[#f0f0f0] items-stretch gap-2 w-64\">
|
||||
<span style=\"bg-[#ffaaaa] w-12 h-8 self-start flex items-center justify-center\">Start</span>
|
||||
<span style=\"bg-[#aaffaa] w-12 h-8 self-center flex items-center justify-center\">Center</span>
|
||||
<span style=\"bg-[#aaaaff] w-12 h-8 self-end flex items-center justify-center\">End</span>
|
||||
<span style=\"bg-[#ffffaa] w-12 h-8 self-stretch flex items-center justify-center\">Stretch</span>
|
||||
</div>
|
||||
</body>""".to_utf8_buffer()
|
||||
|
||||
var HTML_CONTENT_S = """<head>
|
||||
<title>CSS Selector Tests</title>
|
||||
<style>
|
||||
/* Descendant selectors */
|
||||
div p { text-[#663399] }
|
||||
.container span { bg-[#ffeeaa] }
|
||||
|
||||
/* Direct child selectors */
|
||||
.outer-div > p { font-bold }
|
||||
.parent > button { bg-[#44cc88] }
|
||||
|
||||
/* Adjacent sibling selectors */
|
||||
h1 + p { text-[#ff0000] font-bold }
|
||||
h2 + div { bg-[#eeffee] }
|
||||
|
||||
/* General sibling selectors */
|
||||
h1 ~ p { text-[#0000ff] }
|
||||
h1 ~ .second-p { text-[#0000ff] }
|
||||
h3 ~ span { bg-[#ffdddd] }
|
||||
|
||||
/* Attribute selectors */
|
||||
input[type="text"] { border border-[#cccccc] bg-[#f9f9f9] }
|
||||
a[href^="https"] { text-[#008000] font-bold }
|
||||
button[disabled] { bg-[#888888] text-[#cccccc] }
|
||||
input[placeholder*="email"] { border-2 border-[#0066cc] bg-[#ffffff] }
|
||||
div[class$="special"] { bg-[#ffffaa] }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>CSS Selector Test Page</h1>
|
||||
<p>This paragraph should be red and bold (h1 + p)</p>
|
||||
<p class="second-p">This paragraph should be blue (h1 ~ p)</p>
|
||||
|
||||
<h2>Descendant vs Child Selectors</h2>
|
||||
<div class="outer-div">
|
||||
<p>This paragraph should be purple and bold (div p and .outer-div > p)</p>
|
||||
<div>
|
||||
<p>This paragraph should be purple but not bold (div p only)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Attribute Selectors</h3>
|
||||
<input type="text" placeholder="Enter your name" />
|
||||
<input type="text" placeholder="Enter your email address" />
|
||||
<input type="password" placeholder="Enter password" />
|
||||
|
||||
<br />
|
||||
<a href="http://example.com">HTTP Link (normal)</a>
|
||||
<br />
|
||||
<a href="https://secure.com">HTTPS Link (green and bold)</a>
|
||||
|
||||
<br />
|
||||
<button>Normal Button</button>
|
||||
<button disabled="true">Disabled Button (gray)</button>
|
||||
|
||||
<h3>Sibling Selectors</h3>
|
||||
<div style="bg-[#eeffee]">This div should have light green bg (h2 + div)</div>
|
||||
<span>This span should have light red bg (h3 ~ span)</span>
|
||||
<span>This span should also have light red bg (h3 ~ span)</span>
|
||||
|
||||
<div class="container">
|
||||
<span>This span should have yellow bg (.container span)</span>
|
||||
<p>Regular paragraph in container</p>
|
||||
</div>
|
||||
|
||||
<div class="parent">
|
||||
<button>This button should be green (.parent > button)</button>
|
||||
<div>
|
||||
<button>This button should be normal (not direct child)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-special">This div should have yellow bg (class ends with 'special')</div>
|
||||
<div class="special-item">This div should be normal</div>
|
||||
</body>
|
||||
""".to_utf8_buffer()
|
||||
|
||||
var HTML_CONTENT3 = """<head>
|
||||
<title>Task Manager</title>
|
||||
<icon src="https://cdn-icons-png.flaticon.com/512/126/126472.png">
|
||||
|
||||
<meta name="theme-color" content="#1e1e2f">
|
||||
<meta name="description" content="Manage your tasks easily.">
|
||||
|
||||
<style>
|
||||
h1 { text-[#4ade80] text-3xl font-bold }
|
||||
p { text-[#94a3b8] text-lg }
|
||||
input { border border-[#cbd5e1] px-2 py-1 rounded }
|
||||
</style>
|
||||
|
||||
<script src="logic.lua" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="text-center">📝 My Task Manager</h1>
|
||||
<p style="text-center mb-4">Keep track of your to-do list</p>
|
||||
|
||||
<!-- Task List -->
|
||||
<div style="flex flex-col gap-2 w-80 mx-auto bg-[#f8fafc] p-4 rounded">
|
||||
<span style="flex justify-between items-center bg-[#e2e8f0] px-2 py-1 rounded">
|
||||
<span>✅ Finish homework</span>
|
||||
<button style="bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e]">Delete</button>
|
||||
</span>
|
||||
<span style="flex justify-between items-center bg-[#e2e8f0] px-2 py-1 rounded">
|
||||
<span>✍️ Write blog post</span>
|
||||
<button style="bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e]">Delete</button>
|
||||
</span>
|
||||
<span style="flex justify-between items-center bg-[#e2e8f0] px-2 py-1 rounded">
|
||||
<span>💪 Gym workout</span>
|
||||
<button style="bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e]">Delete</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<separator direction="horizontal" />
|
||||
|
||||
<!-- Add New Task -->
|
||||
<h2 style="text-center mt-4">Add a New Task</h2>
|
||||
<form action="/add-task" method="POST" style="flex flex-col gap-2 w-80 mx-auto">
|
||||
<input type="text" placeholder="Enter task..." minlength="3" required="true" />
|
||||
<input type="date" />
|
||||
<button type="submit" style="bg-[#4ade80] text-[#ffffff] hover:bg-[#22c55e]">Add Task</button>
|
||||
</form>
|
||||
|
||||
<separator direction="horizontal" />
|
||||
|
||||
<h2 style="text-center">Task Categories</h2>
|
||||
<div style="flex flex-row gap-2 justify-center items-center w-full">
|
||||
<span style="bg-[#fef3c7] px-4 py-2 rounded">📚 Study</span>
|
||||
<span style="bg-[#d1fae5] px-4 py-2 rounded">💼 Work</span>
|
||||
<span style="bg-[#e0e7ff] px-4 py-2 rounded">🏋️ Health</span>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<input type=\"password\" placeholder=\"your password...\" />
|
||||
<button type=\"submit\" style=\"bg-[#4CAF50] rounded-lg text-[#FFFFFF]\">Submit</button>
|
||||
<button style=\"bg-[#2196F3] rounded-xl text-[#FFFFFF]\">Blue Button</button>
|
||||
<button style=\"bg-[#FF5722] rounded-full text-[#FFFFFF]\">Orange Pill</button>
|
||||
<button style=\"bg-[#9C27B0] rounded-[20px] text-[#FFFFFF]\">Purple Custom</button>
|
||||
<button style=\"bg-[#FFD700] rounded text-[#000000] hover:bg-[#FFA500] hover:text-[#FFFFFF]\">Hover Test</button>
|
||||
</form>
|
||||
|
||||
<h2>Button Style Tests</h2>
|
||||
|
||||
<button>Normal, no-styling button.</button>
|
||||
|
||||
<h3>Corner Radius Variants</h3>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-none\">No Radius</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-sm\">Small (2px)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded\">Default (4px)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-md\">Medium (6px)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-lg\">Large (8px)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-xl\">Extra Large (12px)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-2xl\">2XL (16px)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-3xl\">3XL (24px)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-full\">Full (Pill)</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-[30px]\">Custom 30px</button>
|
||||
|
||||
<h3>Color Combinations</h3>
|
||||
<button style=\"bg-[#FF6B6B] text-[#FFFFFF] rounded-lg\">Red Background</button>
|
||||
<button style=\"bg-[#4ECDC4] text-[#2C3E50] rounded-lg\">Teal & Dark Text</button>
|
||||
<button style=\"bg-[#45B7D1] text-[#FFFFFF] rounded-lg\">Sky Blue</button>
|
||||
<button style=\"bg-[#96CEB4] text-[#2C3E50] rounded-lg\">Mint Green</button>
|
||||
<button style=\"bg-[#FFEAA7] text-[#2D3436] rounded-lg\">Yellow Cream</button>
|
||||
<button style=\"bg-[#DDA0DD] text-[#FFFFFF] rounded-lg\">Plum Purple</button>
|
||||
<button style=\"bg-[#98D8C8] text-[#2C3E50] rounded-lg\">Seafoam</button>
|
||||
|
||||
<h3>Hover Effects</h3>
|
||||
<button style=\"bg-[#3498DB] text-[#FFFFFF] rounded-lg hover:bg-[#2980B9] hover:text-[#F8F9FA]\">Blue Hover</button>
|
||||
<button style=\"bg-[#E67E22] text-[#FFFFFF] rounded-xl hover:bg-[#D35400] hover:text-[#ECF0F1]\">Orange Hover</button>
|
||||
<button style=\"bg-[#9B59B6] text-[#FFFFFF] rounded-full hover:bg-[#8E44AD] hover:text-[#F4F4F4]\">Purple Pill Hover</button>
|
||||
<button style=\"bg-[#1ABC9C] text-[#FFFFFF] rounded-2xl hover:bg-[#16A085]\">Turquoise Hover</button>
|
||||
|
||||
<h3>Advanced Hover Combinations</h3>
|
||||
<button style=\"bg-[#34495E] text-[#ECF0F1] rounded hover:bg-[#E74C3C] hover:text-[#FFFFFF]\">Dark to Red</button>
|
||||
<button style=\"bg-[#F39C12] text-[#2C3E50] rounded-lg hover:bg-[#27AE60] hover:text-[#FFFFFF]\">Gold to Green</button>
|
||||
<button style=\"bg-[#FFFFFF] text-[#2C3E50] rounded-xl hover:bg-[#2C3E50] hover:text-[#FFFFFF]\">Light to Dark</button>
|
||||
|
||||
<h3>Text Color Focus</h3>
|
||||
<button style=\"text-[#E74C3C] rounded-lg\">Red Text Only</button>
|
||||
<button style=\"text-[#27AE60] rounded-lg\">Green Text Only</button>
|
||||
<button style=\"text-[#3498DB] rounded-lg\">Blue Text Only</button>
|
||||
<button style=\"text-[#9B59B6] rounded-full\">Purple Text Pill</button>
|
||||
|
||||
<h3>Mixed Styles</h3>
|
||||
<button style=\"bg-[#FF7675] text-[#FFFFFF] rounded-[15px] hover:bg-[#FD79A8] hover:text-[#2D3436]\">Custom Mix 1</button>
|
||||
<button style=\"bg-[#6C5CE7] text-[#DDD] rounded-3xl hover:bg-[#A29BFE] hover:text-[#2D3436]\">Custom Mix 2</button>
|
||||
<button style=\"bg-[#00B894] text-[#FFFFFF] rounded-[25px] hover:bg-[#00CEC9] hover:text-[#2D3436]\">Custom Mix 3</button>
|
||||
<button style=\"bg-[#0000ff] text-[#FFFFFF] rounded-[25px] hover:bg-[#ff0000] hover:text-[#2D3436]\">Blue normal, red hover</button>
|
||||
|
||||
<h3>Active State Tests</h3>
|
||||
<button style=\"bg-[#3498DB] text-[#FFFFFF] rounded-lg hover:bg-[#2980B9] active:bg-[#1F618D] active:text-[#F8F9FA]\">Blue with Active</button>
|
||||
<button style=\"bg-[#E74C3C] text-[#FFFFFF] rounded-xl hover:bg-[#C0392B] active:bg-[#A93226] active:text-[#ECF0F1]\">Red with Active</button>
|
||||
<button style=\"bg-[#27AE60] text-[#FFFFFF] rounded-full hover:bg-[#229954] active:bg-[#1E8449] active:text-[#D5DBDB]\">Green Pill Active</button>
|
||||
<button style=\"bg-[#F39C12] text-[#2C3E50] rounded hover:bg-[#E67E22] hover:text-[#FFFFFF] active:bg-[#D35400] active:text-[#F7F9FC]\">Gold Multi-State</button>
|
||||
<button style=\"bg-[#9B59B6] text-[#FFFFFF] rounded-2xl active:bg-[#7D3C98] active:text-[#E8DAEF]\">Purple Active Only</button>
|
||||
|
||||
</body>
|
||||
""".to_utf8_buffer()
|
||||
Reference in New Issue
Block a user