📘 Interpreter Language Manual

🧠 What is Interpreter Language?

Interpreter Language (Developed by heck) is a simple language for creating widgets like counters, buttons, inputs, and draggable windows — all without needing to write JavaScript directly.

Everything is written using easy-to-read commands inside special blocks starting with ^^ and ending with ^^;.

This manual will guide you step-by-step, perfect if you're new to this!

🧱 Step-by-Step: Basic Structure

Step 1: Write your command line. For example:
create div with id(#hello)^^
Step 2: On a new line, add the HTML content you want inside that element.
Don't put content inline with the command.
Step 3: Close the command block with ^^; on its own line. 
create div with id(#hello)^^
  <p>Welcome!</p>
^^;

📦 Creating Elements

To add elements, use create with the element type and ID.

Example: Create a box that says "Hello World":
create div with id(#mybox)^^
  <h1>Hello World</h1>
  <p>This is a custom widget.</p>
^^;

You can put any valid HTML inside the block.

💾 Using Storage

Interpreter Language lets you save values that stick around even if the page reloads, using localstorage.

Set a value:
set localstorage.score = "100";
Set default value if none exists yet:
default localstorage.count = 0;
Change values easily:
inc localstorage.count;  // increase by 1
dec localstorage.count;  // decrease by 1
reset localstorage.count;  // reset to empty

🎯 Event Listeners (Click Actions)

To react to clicks or other events, use create eventlistener-on(#id)-doing^^ ... ^^;.

Example: Increase a counter when a button is clicked:
create eventlistener-on(#plus)-doing^^
  inc localstorage.count;
^^;

This adds a click listener to #plus that increases the count stored value.

🧍 Getting Input Values

If you create an input element, you can get its current value using getvalue(#inputid).

Example: Save the text typed inside input #myinput when a button is clicked:
create eventlistener-on(#savebtn)-doing^^
  set localstorage.text = getvalue(#myinput)
^^;

📅 Date Format

To show dates, use:

loadtextfrom(date.format="dd/mm/yyyy dayname")

Where:

🎨 Applying CSS

To add CSS styles, use set override css = ^^ ... ^^;.

Example: Change body background and text color:
set override css = ^^
  body {
    background: black;
    color: white;
  }
^^;

Note: Avoid overriding body styles if the parent page already has them.

📦 Making Elements Draggable

To make an element draggable, add dragmovable attribute to the element's div:

<div dragmovable>Drag me!</div>

You can also add offsets or save position:

<div dragmovable="-5,-5">Offset drag</div>
<div dragmovable="0,0,stored">Saved position</div>

🧪 Full Example

set override css = ^^
  body { #app: black; color: white; }
^^;

default localstorage.count = 0;

create div with id(#app)^^
  <h1>Counter</h1>
  <p>loadtextfrom(localstorage.count)</p>
  <button id="plus">+<button>
  <button id="minus">-<button>
^^;

create eventlistener-on(#plus)-doing^^
  inc localstorage.count;
^^;

create eventlistener-on(#minus)-doing^^
  dec localstorage.count;
^^;

This creates a simple counter widget with increment and decrement buttons.

📏 Rules You Must Follow

💡 Tips