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 { text-[16px] bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] } button[disabled] { bg-[#666666] text-[#999999] cursor-not-allowed } """ var HTML_CONTENT2 = """ My Custom Dashboard

๐Ÿ“Š My Dashboard

Users

1,240

Sales

$9,842

Visitors

3,590

๐Ÿ‘ค User Panel

Name: Jane Doe

Email: jane@example.com

Status: Active

Plan: Pro

Projects: 8

Tasks: 42

๐Ÿ“ Recent Activity

  • โœ… Task "Update UI" marked as complete
  • ๐Ÿ”” New comment on "Bug Fix #224"
  • ๐Ÿ“ค Exported report "Q2 Metrics"

๐Ÿ”ง Actions

""".to_utf8_buffer() var HTML_CONTENTvv = """ My cool web

CSS Selector Test Page

This paragraph should be red and bold (h1 + p)

This paragraph should be blue (h1 ~ p)

Descendant vs Child Selectors

This paragraph should be purple and bold (div p and .outer-div > p)

This paragraph should be purple but not bold (div p only)

Attribute Selectors


HTTP Link (normal)
HTTPS Link (green and bold)

Sibling Selectors

This div should have light green bg (h2 + div)
This span should have light red bg (h3 ~ span) This span should also have light red bg (h3 ~ span)
This span should have yellow bg (.container span)

Regular paragraph in container

This div should have yellow bg (class ends with 'special')
This div should be normal
""".to_utf8_buffer() var HTML_CONTENT3 = """ Task Manager

Welcome to GURT Lua API Demo

This page demonstrates the GURT Lua API in action.

Click me to see Lua in action!

Click the button

Move your mouse

Move mouse over Button

Type something

Style Controls:
""".to_utf8_buffer() var HTML_CONTENT_ADD_REMOVE = """ Lua List Manipulation Demo

List Manipulation with Lua

Use the buttons below to add or remove items from the list:

""".to_utf8_buffer() var HTML_CONTENT_DOM_MANIPULATION = """ DOM Utilities Test

DOM Utilities Demo

Non-interactible
Child 1
Child 2
Child 3

Test

""".to_utf8_buffer() var HTML_CONTENTc = """ Input Events API Demo

๐ŸŽ›๏ธ Input Events API Demo

Input Elements

Checkbox Option

Option 1 Option 2 Option 3

Event Log

Waiting for events...

Available Events:

  • input: Fires as you type (real-time)
  • change: Fires when value changes and element loses focus
  • focusin: Fires when element gains focus
  • focusout: Fires when element loses focus
  • click: Fires when button is clicked
  • submit: Fires when form is submitted (includes form data)
""".to_utf8_buffer() var HTML_CONTENT_CLIPBOARD = """ Network & Clipboard API Demo

Clipboard API

Clipboard Operations

""".to_utf8_buffer() var HTML_CONTENTx = """ Signal API Demo

๐Ÿ”” Signal API Demo

Signal API Usage Example:

local mySignal = Signal.new()

mySignal:connect(function(arg1, arg2) print("Event fired with: ", arg1, arg2) end)

mySignal:fire("Hello", 123)

connection:disconnect()

Controls

Status

Loading status...

Event Log

Initializing...

Signal API Features:

  • Signal.new(): Creates a new signal object
  • signal:connect(callback): Connects a callback function and returns a connection object
  • signal:fire(...): Fires the signal with optional arguments
  • connection:disconnect(): Disconnects a specific connection
  • signal:disconnect(): Disconnects all connections from the signal
  • Multiple Connections: One signal can have multiple connected callbacks
  • Argument Passing: Signals can pass multiple arguments to connected callbacks
""".to_utf8_buffer() var HTML_CONTENTa = """ Button getAttribute/setAttribute Demo

๐Ÿ”˜ Button getAttribute & setAttribute Demo

โœ… Target button is currently ENABLED. Click it to see the counter increase!

Target Button

Button clicked 0 times!

Control Buttons

Current Attributes

Loading status...

How It Works:

  • Enable: Uses setAttribute('disabled', '') to remove the disabled attribute
  • Disable: Uses setAttribute('disabled', 'true') to add the disabled attribute
  • Toggle: Uses getAttribute('disabled') to check current state, then toggles it
  • Status: Uses getAttribute() to read multiple attributes and displays them
  • Bonus: Also demonstrates setting custom data attributes and style changes
""".to_utf8_buffer() var HTML_CONTENTva = """ WebSocket API Demo

๐Ÿ”Œ WebSocket API Demo

WebSocket API Usage:

local socket = WebSocket:new(url)

socket:on('open', function() ... end)

socket:on('message', function(event) print(event.data) end)

socket:send('Hello Server!')

socket:close()

Connection

Status: Disconnected

Send Messages

Or press Enter to send

Event Log

Initializing...

WebSocket Events:

  • open: Fired when connection is established
  • message: Fired when a message is received (event.data contains the message)
  • close: Fired when connection is closed
  • error: Fired when an error occurs (event.message contains error info)

WebSocket Methods:

  • WebSocket:new(url): Creates and connects to WebSocket server
  • socket:send(message): Sends a text message to the server
  • socket:close(): Closes the connection
  • socket:on(event, callback): Registers event handlers
""".to_utf8_buffer() var HTML_CONTENTy = """ Network & JSON API Demo

๐ŸŒ Network & JSON API Demo

API Examples:

Network: fetch(url, {method: "POST", headers: {...}, body: "..."})

JSON: JSON.stringify(data) and JSON.parse(jsonString)

Input Controls

Network Tests

JSON Tests

Response Log

Initializing...

Network API Features:

  • fetch(url, options): Makes HTTP requests with support for all methods
  • Response methods: text(), json(), ok() for processing responses
  • Headers & Body: Full control over request headers and body content
  • Status & StatusText: Access to HTTP response status information

JSON API Features:

  • JSON.stringify(): Alias for encode (browser compatibility)
  • JSON.parse(): Alias for decode (browser compatibility)
""".to_utf8_buffer() var HTML_CONTENTyea = """ setInterval & Network Image Demo

โฐ setInterval & ๐Ÿ–ผ๏ธ Network Image Demo

Testing Features:

Intervals: gurt.setInterval(callback, delay) and gurt.clearInterval(id)

Network Images: fetch() with binary data and dynamic <img> creation

0

Interval Controls

Network Image Test

Click "Load Random Image" to test binary data fetching

Activity Log

Initializing...

Implementation Notes:

  • setInterval: Creates repeating timers (one_shot = false)
  • clearInterval: Stops and cleans up interval timers
  • Binary Data: fetch() handles binary image data seamlessly
  • Dynamic DOM: Images created and appended programmatically
  • Random Images: Picsum service provides different images each time
""".to_utf8_buffer() var HTML_CONTENT = """ Object-Fit CSS Demo

๐Ÿ–ผ๏ธ Object-Fit CSS Demonstration

object-none

Image keeps original size, may overflow container
object-none

object-fill

Image fills container, may distort aspect ratio
object-fill

object-contain

Image fits inside container while preserving aspect ratio
object-contain

object-cover

Image covers entire container while preserving aspect ratio
object-cover

๐Ÿ“ Object-fit Property Mapping

object-none: Godot's STRETCH_KEEP - Image keeps original dimensions

object-fill: Godot's STRETCH_SCALE - Image stretches to fill container

object-contain: Godot's STRETCH_KEEP_ASPECT - Image fits inside with preserved aspect ratio

object-cover: Godot's STRETCH_KEEP_ASPECT_COVERED - Image covers container with preserved aspect ratio

""".to_utf8_buffer()