92 lines
5.4 KiB
Plaintext
92 lines
5.4 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Accounts</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
.colm.side { flex: 0 0 36%; margin-left: 18dp; }
|
|
.ids { flex: 1; overflow-y: auto; }
|
|
.id { padding: 10dp 12dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
|
|
.id:hover { border-left-color: #5cc8f0; }
|
|
.id.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
|
|
.id .top { display: flex; flex-direction: row; align-items: center; }
|
|
.id .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
|
|
.id.selected .n { color: #f2b13c; }
|
|
.id .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5fd08a; margin-left: 8dp; }
|
|
.id .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
|
.id .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 4dp; }
|
|
.detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
|
|
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
|
|
.detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
|
|
.newid { padding: 12dp; background-color: #5cc8f008; }
|
|
.newid input.text { display: block; width: 100%; margin: 8dp 0dp 10dp 0dp; }
|
|
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
|
|
.center .hint { max-width: 520dp; margin-bottom: 12dp; }
|
|
.msg { margin-bottom: 10dp; }
|
|
.msg.bad { color: #ef6a5b; }
|
|
</style>
|
|
</head>
|
|
<body class="window medium" data-model="accounts">
|
|
<div class="win-head">
|
|
<span class="title">Accounts</span><span class="sl">\\\</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip" data-if="who != ''">Discord <span class="v">{{ who }}</span></span>
|
|
<span class="chip" data-if="state == 'ready'">IDs <span class="v">{{ ids.size }}</span></span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="center" data-if="state == 'loading'">
|
|
<div class="hint">Asking the REM website for your IDs...</div>
|
|
</div>
|
|
<div class="center" data-if="state == 'nologin'">
|
|
<div class="hint">{{ message }}</div>
|
|
<div class="hint">Start the REM launcher, log in with Discord and open this window again. Without the login the game plays with the ID it has.</div>
|
|
<div class="btn" data-action="retry">Try again</div>
|
|
</div>
|
|
<div class="center" data-if="state == 'error'">
|
|
<div class="hint" style="color: #ef6a5b;">{{ message }}</div>
|
|
<div class="btn" data-action="retry">Try again</div>
|
|
</div>
|
|
<div class="split" data-if="state == 'ready'">
|
|
<div class="colm">
|
|
<h3 style="margin-bottom: 8dp;">Your Freelancer IDs</h3>
|
|
<div class="msg" data-if="message != ''" data-class-bad="message_bad">{{ message }}</div>
|
|
<div class="ids">
|
|
<div class="hint" data-if="ids.size == 0">No ID yet - make one on the right.</div>
|
|
<div class="id" data-for="r : ids" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
|
|
<div class="top">
|
|
<span class="n">{{ r.name }}</span>
|
|
<span class="tag" data-if="r.current">IN USE</span>
|
|
</div>
|
|
<div class="d" data-if="r.desc != ''">{{ r.desc }}</div>
|
|
<div class="c">{{ r.chars }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm side">
|
|
<div class="detail" data-if="has_pick">
|
|
<div class="n">{{ pick_name }}</div>
|
|
<div class="s">{{ pick_text }}</div>
|
|
<div class="actions" style="margin-top: 10dp;">
|
|
<div class="btn primary" data-class-disabled="!can_switch" data-action="switch">{{ switch_label }}<div class="tip">{{ switch_tip }}</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="detail" data-if="!has_pick"><div class="hint">Pick an ID to play with it.</div></div>
|
|
<div class="newid">
|
|
<h3>New ID</h3>
|
|
<div class="hint">A fresh Freelancer ID on your Discord account - for more pilots on the server.</div>
|
|
<input class="text" type="text" data-value="new_name" placeholder="Name of the ID (only for you)" maxlength="40"/>
|
|
<div class="btn" data-class-disabled="busy || new_name == ''" data-action="create">Make the ID<div class="tip">Makes the ID and picks it; switch to it to create its pilots.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<div class="btn" data-action="close">Close</div>
|
|
<span class="status">{{ status }}</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|