94 lines
6.4 KiB
Plaintext
94 lines
6.4 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Player</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.grid { display: flex; flex-direction: row; flex-wrap: wrap; }
|
|
.stat { display: flex; flex-direction: row; align-items: center; width: 30%; margin: 0 3% 12dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp 12dp; }
|
|
.stat .stat-ico { width: 34dp; height: 34dp; margin-right: 12dp; image-color: #5cc8f0; }
|
|
.stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
|
|
.stat .v { font-family: "IBM Plex Mono"; font-size: 20dp; margin-top: 2dp; }
|
|
.skill { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
|
.skill:hover { border-color: #5cc8f0; }
|
|
.skill.selected { border-color: #f2b13c; }
|
|
.skill .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; width: 220dp; }
|
|
.skill .lvl { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-right: 14dp; color: #8197ad; }
|
|
.skill .bar { flex: 1; margin-right: 14dp; }
|
|
.skill .next { font-family: "IBM Plex Mono"; width: 120dp; text-align: right; }
|
|
.skill .next.max { color: #5fd08a; }
|
|
.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.gap { margin-right: 18dp; }
|
|
.big-num { font-family: "IBM Plex Mono"; font-size: 30dp; color: #f2b13c; margin: 6dp 0 14dp 0; }
|
|
.namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
|
.namefield .label { margin-right: 10dp; }
|
|
.namefield input.text { flex: 1; }
|
|
.xp { margin-left: auto; }
|
|
</style>
|
|
</head>
|
|
<body class="window medium" data-model="player">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/><span class="title">PLAYER</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">XP <span class="v">{{ xp }}</span></span>
|
|
<span class="chip">Bank <span class="v">{{ balance }}</span></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="nav">
|
|
<div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/stat_kill_icon_total.3db"/><span>Statistics</span></div>
|
|
<div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_rank.3db"/><span>Skills</span></div>
|
|
<div class="item" data-class-active="page == 2" data-action="page" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Account bank</span></div>
|
|
</div>
|
|
<div class="content">
|
|
<div data-if="page == 0">
|
|
<h3 style="margin-bottom: 10dp;">Statistics</h3>
|
|
<div class="grid">
|
|
<div class="stat" data-for="s : stats"><img class="stat-ico" data-attr-src="s.icon"/><div class="sv"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="colm" data-if="page == 1">
|
|
<div class="win-head" style="padding: 0 0 10dp 0; border-bottom-width: 0;"><h3>Skills</h3><span class="hint xp">Level up with your experience points</span></div>
|
|
<div class="skill" data-for="k : skills" data-class-selected="k.selected" data-action="skill" data-attr-data-arg="k.key">
|
|
<span class="n">{{ k.name }}</span>
|
|
<span class="lvl">{{ k.level }} / 10</span>
|
|
<div class="bar"><div class="fill" data-style-width="k.percent + '%'"></div></div>
|
|
<span class="next" data-class-max="k.max">{{ k.next }}</span>
|
|
</div>
|
|
<div class="hint" style="margin: 6dp 0 10dp 0;">{{ skill_info }}</div>
|
|
<div class="actions"><div class="btn primary" data-action="levelup">Level up<div class="tip">Spends the experience points shown beside the skill on its next level.</div></div></div>
|
|
</div>
|
|
|
|
<div class="split" data-if="page == 2">
|
|
<div class="colm gap">
|
|
<h3>Account balance</h3>
|
|
<div class="big-num">{{ balance }}</div>
|
|
<div class="hint" data-if="bank_note != ''">{{ bank_note }}</div>
|
|
<div class="namefield"><span class="label">Amount</span><input class="text" type="text" data-value="amount" maxlength="13"/></div>
|
|
<div class="actions">
|
|
<div class="btn primary" data-action="deposit">Deposit<div class="tip">Moves the amount from your ship's credits into the account.</div></div>
|
|
<div class="btn primary" data-action="withdraw">Withdraw<div class="tip">Moves the amount from the account to your ship's credits.</div></div>
|
|
</div>
|
|
<div class="hint">Deposit and withdraw move credits between your ship and the account. The account is shared by your characters.</div>
|
|
</div>
|
|
<div class="colm">
|
|
<h3 style="margin-bottom: 8dp;">Send to</h3>
|
|
<div class="table" style="flex: 1;">
|
|
<div class="body">
|
|
<div class="empty" data-if="recipients.size == 0">Nobody online.</div>
|
|
<div class="row" data-for="r : recipients" data-class-selected="r.selected" data-action="recipient" data-attr-data-arg="r.name"><span class="c1">{{ r.name }}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="actions" style="margin-top: 10dp;"><div class="btn primary" data-action="send">Send amount<div class="tip">Sends the amount from your account to the picked pilot's account.</div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<span class="key">Esc</span><span class="hint">close</span>
|
|
<span class="status">{{ status }}</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|