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 bg-white } 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_TWEEN = """ Tween Animation Demo

๐ŸŽฌ Lua Tween Animation Demo

Note: This demo showcases the Lua Tween API for smooth animations. Each box demonstrates different animation properties and easing functions.

Fade Animation

Fade Me

Color Animation

Change Color

Scale Animation

Scale Me

Rotation Animation

Spin Me

Movement Animation

Move Me

Complex Animations

Complex

Available Tween Methods:

  • element:createTween() - Create a new tween for the element
  • tween:to(property, target_value, duration, easing) - Animate to a target value
  • tween:from(property, start_value, duration, easing) - Animate from a start value
  • tween:parallel() - Set tween to run animations in parallel
  • tween:chain() - Set tween to run animations in sequence
  • tween:steps(count) - Set number of loops
  • tween:callback(function) - Execute function when tween completes
  • tween:play() - Start the tween animation
  • tween:stop() - Stop the tween animation
  • tween:pause() - Pause the tween animation
  • tween:resume() - Resume the tween animation

Supported Properties:

  • opacity - Element transparency (0-1)
  • backgroundColor - Background color (hex/color names)
  • color/textColor - Text color (hex/color names)
  • width/height - Element dimensions (pixels)
  • x/y - Position coordinates (pixels)
  • scale - Element scale factor
  • rotation - Rotation angle (degrees)

Easing Functions:

  • easeIn - Slow start, fast end
  • easeOut - Fast start, slow end
  • easeInOut - Slow start and end, fast middle
  • easeOutIn - Fast start and end, slow middle
""".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() var HTML_CONTENT_TRANSFORM_TEST = """ Transform CSS Demo - Scale & Rotation

๐Ÿ”„ Scale & Rotation CSS Demonstration

Normal

No transform applied
Box
No transform

Scale 50%

Scaled to 50% size
Box
scale-50

Scale 150%

Scaled to 150% size
Box
scale-150

Scale X 75%

X-axis scaled to 75%
Box
scale-x-75

Scale Y 125%

Y-axis scaled to 125%
Box
scale-y-125

Custom Scale

Custom scale value 1.7
Box
scale-[170]

Rotate 45ยฐ

Rotated 45 degrees
Box
rotate-45

Rotate 90ยฐ

Rotated 90 degrees
Box
rotate-90

Custom Rotate

Custom rotation 30deg
Box
rotate-[30deg]

Scale + Rotate

Scale 125% and rotate 45ยฐ
Box
scale-125 rotate-45

Radians

Rotation using radians
Box
rotate-[1.57rad]

Hover Effect

Hover to see scale effect
Box
hover:scale-110

๐Ÿ“ Transform Utility Reference

Scale utilities: scale-{value}, scale-x-{value}, scale-y-{value}

Named values: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200

Custom values: scale-[{number}] where number is percentage (100 = 1.0)

Rotation utilities: rotate-{degrees}, rotate-x-{degrees}, rotate-y-{degrees}

Named degrees: 0, 1, 2, 3, 6, 12, 45, 90, 180, 270

Custom rotations: rotate-[{value}deg], rotate-[{value}rad], rotate-[{value}turn]

""".to_utf8_buffer() var HTML_CONTENT_AUDIO_TEST = """ Audio Tag Demo - HTML5 Audio Testing

๐ŸŽต HTML5 Audio Tag Demo

๐Ÿ“€ Basic Audio Elements

Audio with Controls

Standard audio element with visible controls
<audio src="http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg" controls></audio>

Audio with Loop

Audio element that loops automatically
<audio src="http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3" controls loop></audio>

Audio with Mute

Audio element that starts muted
<audio src="https://www.kozco.com/tech/LRMonoPhase4.wav" controls muted></audio>

๐ŸŽฎ Lua Audio Control

DOM Audio Control

Control audio elements via Lua scripting
local audio = gurt.select("#controlled-audio") audio.play() audio.volume = 0.5 audio.loop = true

Programmatic Audio

Create audio instances with Audio.new()
local audio = Audio.new("http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg") audio.volume = 0.3 audio.play()
""".to_utf8_buffer() # Set the active HTML content to use the audio demo func _ready(): HTML_CONTENT = """ Login

Login

Don't have an account? Register here

""".to_utf8_buffer()