Arcline — Crypto Bot Dashboard

Quick start

1. Unzip the package.
2. Open template/index.html in your browser — it works straight from the file system, no build step and no server needed.
3. To put it online, upload the template/ folder to any static host (shared hosting, Netlify, S3, GitHub Pages…).

Every page links to explicit files (index.html, markets.html…), so it also works on hosts that do not serve folder index pages.

Features

• Overview — 5 KPI cards with sparklines, equity curve with range buttons and a buy & hold comparison line, allocation donut, live candlestick chart (EMA 20, bot buy/sell markers, volume), live signals feed, open positions with live P&L and a close action, daily P&L bars and recent fills.
• Markets — watchlist with live sparklines, large candlestick chart with 4 timeframes, simulated order book and trade tape, paper order ticket (market/limit, % of balance buttons, fee estimate) and a session orders list.
• Order history — summary figures, 60-day P&L chart, search, three filters, sortable columns, pagination and CSV export (built in the browser).
• Strategies — strategy cards with on/off switches (remembered in the browser), performance sparkline, stats, an edit dialog with validated parameters and a "New strategy" dialog.
• Risk settings — position sizing, loss limits, stops & targets, allowed pairs, usage meters that update while you type, saving to the browser and an emergency "Pause all bots" switch.
• Exchanges — connected-account cards with status, a simulated connection test, disconnect, and an "add connection" form with key/secret fields, show/hide, permissions and a withdrawals-disabled confirmation. Nothing is sent anywhere.
• Everywhere — dark and light theme (remembered), collapsible sidebar on phones, notifications menu, toasts, accessible dialogs (focus trap, Esc), keyboard-friendly controls, responsive from 390 px phones to wide screens, 404 page.
• No dependencies — the charts are a small canvas library written for this template (charts.js). No CDNs, no external requests, fonts are bundled.

File structure

template/
  index.html         Overview
  markets.html       Markets & paper order ticket
  trades.html        Order history
  strategies.html    Strategies
  risk.html          Risk settings
  exchanges.html     Exchange connections
  404.html           Not-found page
  assets/
    css/app.css      All styles (design tokens at the top)
    js/data.js       ALL sample data — replace with your own
    js/charts.js     ArcCharts: line, bars, candles, sparkline, donut
    js/app.js        Layout (sidebar/top bar), live price simulation, page logic
    fonts/           Instrument Sans + JetBrains Mono (OFL)
    img/favicon.svg
documentation/index.html   This file

Customise & rebrand

Name, user and mode

Open assets/js/data.js and edit brand: name, tagline, user and mode ('paper' or 'live' — changes the badge). The sidebar and top bar are built from it on every page.

Colours

All colours are CSS variables at the top of assets/css/app.css: :root is the dark theme, [data-theme="light"] the light theme. Change --accent and --accent-2 to rebrand; --up/--down are profit/loss. Charts read the same variables, so they follow automatically. Use hex colours for chart variables (the charts add transparency to them).

Logo

The logo mark is an SVG path (P.logo in app.js) inside .brand__mark; replace it or swap in an <img>. Replace assets/img/favicon.svg too.

Menu

Edit the NAV array in app.js to rename, reorder or add pages. A new page needs <body data-page="…" data-title="…" data-sub="…"> and the same shell markup as the other pages.

Default theme

Change data-theme="dark" on <html> and the ||'dark' fallback in the small inline script in each page's head.

Connect your own data

The template ships with sample data only. Everything lives in assets/js/data.js in plain objects (markets, equity, positions, orders, strategies, signals, exchanges, risk…). The simplest way to go live is to have your bot's backend output the same shapes:

// example: load positions from your own API before app.js runs
const res = await fetch('/api/positions');   // your server
ARC.positions = await res.json();           // [{ id, sym, side, qty, entry, sl, tp, strategy, opened }]

The simulated price feed is in section 03 of app.js (setInterval that moves ARC.markets[].price). Replace it with your WebSocket handler and call the subscribers (live.on) on every update — the charts, KPIs and tables already redraw from there.

Saving forms (risk settings, strategy parameters, switches) uses localStorage in the demo. Swap the store.set(...) calls for requests to your API.

Charts API

Each chart returns { update(newOptions) }. el is a .chart container; the chart resizes with it and redraws on theme change.

Security note

The exchange form is UI only. In a real product, send API keys only to your own server over HTTPS, store them encrypted, and never keep secrets in the browser or in localStorage.

Browser support

Current Chrome, Edge, Firefox and Safari (desktop and mobile). Uses CSS variables, grid, color-mix() and canvas.

FAQ

Does it trade or connect to an exchange?

No. It is a front-end template with sample data and a simulated price feed. You connect it to your own bot or backend.

Can I use it for a client?

Yes. The Licence covers one end product (yours or one client's). The Full source licence covers one production domain for you and your clients, including white-label and SaaS use. Neither allows reselling the template itself.

Do I need a build tool or framework?

No. Plain HTML, CSS and JavaScript. You can move the markup into React, Vue or any framework if you like.

Are the numbers real results?

No. All figures are sample data for the demo and say nothing about real trading performance.

Support & licence

Questions or found a bug? Contact us through vortaxis.com/store. Please include the product name and version.

Licence terms: see LICENSE.txt. Bundled fonts: see THIRD-PARTY.txt.