> For the complete documentation index, see [llms.txt](https://code-after-sex.gitbook.io/script-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://code-after-sex.gitbook.io/script-documentation/cas-telegram/interface.md).

# Editing the interface

Customize the CAS Telegram device — the web source, live browser preview, palette, artwork and locale-driven text. Optional; the device works out of the box.

You only need this page if you want to change how the device looks. The resource works out of the box without touching any of it.

## What ships

`web/dist/` is the built device and is the only part the server loads. Do not edit files inside it by hand. They are overwritten every time you build.

`web/src/` is the source. It is not needed at runtime and can be deleted from a live server.

{% hint style="danger" %}
`web/dist/` must be present. A resource shipped without it opens to a blank panel in game.
{% endhint %}

## Changing text without building

Every line of text comes from `locales/en.lua` and `locales/tr.lua`. Change it there and restart the resource. No build is needed.

Only come back to this page if you want to change layout, colours, or artwork.

## Requirements

[Node.js](https://nodejs.org) 18 or newer.

## Setup

```bash
cd web
npm install
```

## Making a change

```bash
npm run dev
```

Open the address it prints. The whole device runs in your browser with no game needed, filled with sample conversations, contacts, circles, and listings. Every screen is reachable from the left rail.

Changes appear as you save.

## Building for release

```bash
npm run build
```

This writes `web/dist/`. Restart the resource to see it in game.

{% hint style="danger" %}
Never ship `web/node_modules`. It is large and is not needed. Delete it before zipping, or exclude it.
{% endhint %}

## Changing colours

The palette is at the top of `web/src/styles.css`:

```css
:root {
  --bg: #010101;
  --panel: #0d0d0d;
  --red: #CB0101;
  --red-hover: #A50101;
  --text: #F5F3EE;
}
```

Change the values and rebuild.

## Changing artwork

Pictures and textures live in `web/public/`. Replace a file with one of the same name and rebuild.

Two of them are referenced from `config.lua` as well, so if you rename anything update [Photographs](/script-documentation/cas-telegram/configuration.md#photographs) and [Marketplace pictures](/script-documentation/cas-telegram/configuration.md#marketplace-pictures) to match.

## Text size

Players set their own under **Settings** then **Appearance**. There is nothing to configure on the server.