| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1" />
|
| <title>Borderless - Immigration Research Agent</title>
|
| <link
|
| href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css"
|
| rel="stylesheet"
|
| />
|
| <link rel="stylesheet" href="/assets/server.css" />
|
| <link rel="stylesheet" href="/assets/globe.css" />
|
| </head>
|
| <body>
|
| <div class="app-shell">
|
| <header class="app-header">
|
| <div class="borderless-hero">
|
| <h2>Borderless</h2>
|
| <p class="borderless-hero-description">
|
| Describe your background once. The agent researches official sources, and suggests countries to migrate to.
|
| </p>
|
| </div>
|
| <div class="header-actions">
|
| <button type="button" id="history-open" class="header-button">
|
| History
|
| </button>
|
| <button type="button" id="new-chat" class="header-button">
|
| New chat
|
| </button>
|
| <a id="auth-login" class="header-button" href="/login/huggingface" hidden>
|
| Log in with Hugging Face
|
| </a>
|
| <a id="auth-logout" class="header-button" href="/logout" hidden>
|
| Log out
|
| </a>
|
| </div>
|
| </header>
|
|
|
| <main class="borderless-main-workspace">
|
| <section class="borderless-center-panel">
|
| <div class="globe-root globe-column">
|
| <div class="globe-shell is-loading">
|
| <div
|
| class="globe-map"
|
| data-style="https://tiles.openfreemap.org/styles/liberty"
|
| data-center="[0, 20]"
|
| data-zoom="1.5"
|
| data-projection="globe"
|
| ></div>
|
| <div class="globe-status globe-loading">Loading the globe...</div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section class="borderless-chat-panel">
|
| <div id="form-view" class="side-view is-active">
|
| <form id="intake-form" class="borderless-form-panel" novalidate>
|
| <div class="form-row">
|
| <div class="form-field">
|
| <label for="current-country">Current country</label>
|
| <select id="current-country" required></select>
|
| </div>
|
| <div class="form-field">
|
| <label for="residence-status">Current residence status</label>
|
| <select id="residence-status" required></select>
|
| </div>
|
| </div>
|
| <div class="form-row">
|
| <div class="form-field">
|
| <label for="education">Education</label>
|
| <select id="education" required></select>
|
| </div>
|
| <div class="form-field">
|
| <label for="occupation">Occupation</label>
|
| <select id="occupation" required></select>
|
| </div>
|
| </div>
|
| <div class="form-row">
|
| <div class="form-field">
|
| <label for="experience">Experience</label>
|
| <select id="experience" required></select>
|
| </div>
|
| <div class="form-field">
|
| <label for="timeline">Target timeline</label>
|
| <select id="timeline" required></select>
|
| </div>
|
| </div>
|
| <div class="form-row">
|
| <div class="form-field">
|
| <label for="budget">Budget</label>
|
| <select id="budget" required></select>
|
| </div>
|
| <div class="form-field">
|
| <label for="family">Family / dependents</label>
|
| <select id="family" required></select>
|
| </div>
|
| </div>
|
| <div class="form-field form-goals-field">
|
| <label for="goals">Goals in everyday language</label>
|
| <textarea
|
| id="goals"
|
| required
|
| placeholder="e.g. I want a realistic skilled-worker route, lower risk, and a path to permanent residence."
|
| ></textarea>
|
| </div>
|
| <div class="form-footer">
|
| <button type="submit" id="create-prompt" class="primary">
|
| Submit
|
| </button>
|
| <div class="form-examples">
|
| <p class="form-examples-note">Try an example</p>
|
| <div id="persona-list" class="persona-list"></div>
|
| </div>
|
| </div>
|
| </form>
|
| <div id="form-status" class="status-banner"></div>
|
| </div>
|
|
|
| <div id="chat-view" class="side-view">
|
| <div id="status-banner" class="status-banner"></div>
|
| <div id="chat-messages" class="chat-messages"></div>
|
| <div class="chat-input-row">
|
| <textarea
|
| id="chat-input"
|
| placeholder="Ask a follow-up question..."
|
| ></textarea>
|
| <button type="button" id="chat-send" class="primary">Send</button>
|
| </div>
|
| </div>
|
| </section>
|
| </main>
|
| </div>
|
|
|
| <div id="history-dialog" class="history-dialog" hidden>
|
| <div class="history-dialog-backdrop" data-history-close></div>
|
| <div
|
| class="history-dialog-panel"
|
| role="dialog"
|
| aria-modal="true"
|
| aria-labelledby="history-dialog-title"
|
| >
|
| <div class="history-dialog-header">
|
| <h3 id="history-dialog-title">Chat history</h3>
|
| <button
|
| type="button"
|
| id="history-close"
|
| class="history-dialog-close"
|
| aria-label="Close"
|
| >
|
| Close
|
| </button>
|
| </div>
|
| <div id="history-list" class="history-list"></div>
|
| </div>
|
| </div>
|
|
|
| <script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
|
| <script type="module" src="/assets/globe.js"></script>
|
| <script type="module" src="/assets/app.js"></script>
|
| </body>
|
| </html>
|
|
|
