89 lines
5.1 KiB
Plaintext
89 lines
5.1 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>New pilot</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
.colm.list { flex: 1; }
|
|
.colm.side { flex: 0 0 32%; margin-left: 18dp; }
|
|
.colm.fig { flex: 0 0 24%; margin-left: 18dp; }
|
|
#figure { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
|
|
.fig .hint { text-align: center; margin-top: 6dp; }
|
|
.starts { flex: 1; overflow-y: auto; }
|
|
.region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 10dp 0 6dp 0; }
|
|
.start { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
|
|
.start:hover { border-color: #5cc8f0; }
|
|
.start.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
|
.start img { width: 38dp; height: 38dp; margin-right: 12dp; }
|
|
.start .txt { flex: 1; min-width: 0; }
|
|
.start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
|
|
.start.selected .n { color: #f2b13c; }
|
|
.start .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
|
.start .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
|
|
.namebox { margin-bottom: 14dp; }
|
|
.namebox .label { margin-bottom: 6dp; }
|
|
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
|
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
|
|
.detail .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; }
|
|
.detail .facts { display: flex; flex-direction: row; margin: 10dp 0; }
|
|
.detail .facts div { margin-right: 24dp; }
|
|
.detail .facts .v { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 16dp; }
|
|
.detail .d { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="charcreate">
|
|
<div class="win-head">
|
|
<span class="title">NEW PILOT</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Starts <span class="v">{{ count }}</span></span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="split">
|
|
<div class="colm list">
|
|
<h3 style="margin-bottom: 4dp;">Where do you start?</h3>
|
|
<div class="hint" data-if="count == 0">The server offers no start.</div>
|
|
<div class="starts">
|
|
<div data-for="r : regions">
|
|
<div class="region">{{ r.name }}</div>
|
|
<div class="start" data-for="s : r.starts" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
|
|
<img data-if="s.icon != ''" data-attr-src="s.icon"/>
|
|
<div class="txt"><div class="n">{{ s.base }}</div><div class="k">{{ s.ship }}</div></div>
|
|
<span class="m">{{ s.money }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm fig">
|
|
<h3 style="margin-bottom: 8dp;">Your pilot</h3>
|
|
<div id="figure"></div>
|
|
<div class="hint">drag to turn</div>
|
|
</div>
|
|
<div class="colm side">
|
|
<div class="namebox">
|
|
<div class="label">Pilot name</div>
|
|
<input class="text" type="text" data-value="name" maxlength="23" placeholder="Your name in Sirius"/>
|
|
</div>
|
|
<div class="detail" data-if="has_pick">
|
|
<div class="n">{{ pick.base }}</div>
|
|
<div class="k">{{ pick_region }}</div>
|
|
<div class="facts">
|
|
<div><div class="label">Ship</div><div class="v">{{ pick.ship }}</div></div>
|
|
<div><div class="label">Credits</div><div class="v">{{ pick.money }}</div></div>
|
|
</div>
|
|
<div class="d">{{ pick_desc }}</div>
|
|
</div>
|
|
<div class="actions" style="margin-top: 12dp;">
|
|
<div class="btn primary" data-class-disabled="name == '' || !has_pick || !ready" data-action="create">Create pilot<div class="tip">Creates the pilot at the picked start; the server may refuse a name that is taken.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<div class="btn" data-action="back">Back</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|