Spaces:
Sleeping
Sleeping
| <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> | |