132 lines
9.4 KiB
Plaintext
132 lines
9.4 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.look { flex: 0 0 27%; }
|
|
.colm.fig { flex: 1; margin: 0 18dp; }
|
|
.colm.side { flex: 0 0 30%; }
|
|
#figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; border: 1dp #3d6d9655; }
|
|
.fig .hint { text-align: center; margin-top: 6dp; }
|
|
.sexes { display: flex; flex-direction: row; margin-bottom: 10dp; }
|
|
.sexes .btn { flex: 1; margin-right: 6dp; text-align: center; }
|
|
.sexes .btn.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c1a; }
|
|
.kinds { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; }
|
|
.kind { padding: 5dp 10dp; margin: 0 6dp 6dp 0; border: 1dp #3d6d96; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; }
|
|
.kind:hover { border-color: #5cc8f0; color: #cfe3f2; }
|
|
.kind.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
|
|
.tiles { flex: 1; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; padding-right: 4dp; }
|
|
/* two per row: the width holds the padding and the border (border-box) */
|
|
.tile { box-sizing: border-box; width: 48.5%; margin-bottom: 7dp; height: 40dp; padding: 4dp 6dp; border: 1dp #3d6d9688; background-color: #5cc8f00c; display: flex; align-items: center; font-size: 13dp; }
|
|
.tile:hover { border-color: #5cc8f0; }
|
|
.tile.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
|
.tile .tn { flex: 1; color: #cfe3f2; }
|
|
.tile.selected .tn { color: #f2b13c; }
|
|
/* faces and clothes: the portrait above the name */
|
|
.tiles.portraits .tile { height: 112dp; flex-direction: column; justify-content: flex-start; padding: 5dp 4dp; }
|
|
.tile img { width: 76dp; height: 76dp; margin-bottom: 4dp; decorator: vertical-gradient(#16263a #0a121d); }
|
|
.tile { position: relative; }
|
|
.hint.bad { color: #ef6a5b; }
|
|
.tile.locked img { opacity: 0.55; }
|
|
.tile .lock { position: absolute; top: 3dp; right: 3dp; padding: 1dp 4dp; font-size: 10dp; letter-spacing: 1dp; color: #0a121d; background-color: #f2b13c; }
|
|
.tiles.portraits .tile .tn { flex: 0 0 auto; text-align: center; font-size: 12dp; line-height: 1.15; }
|
|
.tile.selected .tn { color: #f2b13c; }
|
|
.lookfoot { display: flex; flex-direction: row; margin-top: 8dp; }
|
|
.starts { flex: 1; overflow-y: auto; min-height: 120dp; }
|
|
.region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 8dp 0 4dp 0; }
|
|
.start { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; margin-bottom: 5dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
|
|
.start:hover { border-left-color: #5cc8f0; }
|
|
.start.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
|
|
.start img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
|
.start .txt { flex: 1; min-width: 0; }
|
|
.start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
|
|
.start.selected .n { color: #f2b13c; }
|
|
.start .k { font-size: 12dp; color: #8197ad; margin-top: 1dp; }
|
|
.start .m { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 13dp; }
|
|
.namebox { margin-bottom: 12dp; }
|
|
.namebox .label { margin-bottom: 6dp; }
|
|
.detail { padding: 10dp; margin-top: 10dp; max-height: 34%; display: flex; flex-direction: column; min-height: 0; background-color: #5cc8f008; border: 1dp #3d6d9655; }
|
|
.detail .facts { display: flex; flex-direction: row; }
|
|
.detail .facts div { margin-right: 20dp; }
|
|
.detail .facts .v { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 15dp; }
|
|
.detail .d { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.4; font-size: 13dp; margin-top: 8dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="charcreate">
|
|
<div class="win-head">
|
|
<span class="title">NEW PILOT</span><span class="sl">\\\</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 look">
|
|
<h3 style="margin-bottom: 8dp;">Your look</h3>
|
|
<div class="hint" data-if="look_wait">Asking the server for its outfits ... a server without them dresses the pilot in the start costume.</div>
|
|
<div class="hint" data-if="!look_wait && !has_look">This server offers no outfits: the pilot wears the start costume.</div>
|
|
<div data-if="has_look" class="colm" style="flex: 1;">
|
|
<div class="sexes">
|
|
<div class="btn" data-class-on="!female" data-action="sex" data-arg="male">Male</div>
|
|
<div class="btn" data-class-on="female" data-class-disabled="!has_female" data-action="sex" data-arg="female">Female<div class="tip" data-if="!has_female">The server offers no women's faces and clothes yet.</div></div>
|
|
</div>
|
|
<div class="kinds">
|
|
<div class="kind" data-class-on="tab == 'head'" data-action="tab" data-arg="head">Face</div>
|
|
<div class="kind" data-class-on="tab == 'body'" data-action="tab" data-arg="body">Clothes</div>
|
|
<div class="kind" data-class-on="tab == 'hat'" data-action="tab" data-arg="hat">Hat</div>
|
|
<div class="kind" data-class-on="tab == 'eyewear'" data-action="tab" data-arg="eyewear">Eyewear</div>
|
|
<div class="kind" data-class-on="tab == 'helmet'" data-action="tab" data-arg="helmet">Comm helmet</div>
|
|
</div>
|
|
<div class="tiles portraits">
|
|
<div class="tile" data-for="t : tiles" data-class-selected="t.selected" data-class-locked="t.locked" data-action="part" data-attr-data-arg="t.key"><span class="lock" data-if="t.locked">SHOP</span><img data-if="t.icon != ''" data-attr-src="t.icon"/><span class="tn">{{ t.name }}</span></div>
|
|
</div>
|
|
<div class="hint" data-if="tab == 'helmet'">The comm helmet shows on the comm screen only.</div>
|
|
<div class="hint bad" data-if="look_locked">A part of this look is sold in the REM Coin shop - buy it there first, or pick another.</div>
|
|
<div class="lookfoot">
|
|
<div class="btn" data-action="random">Random look<div class="tip">A random face, clothes and extras of the ones the server offers.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm fig">
|
|
<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>
|
|
<h3 style="margin-bottom: 2dp;">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 class="detail" data-if="has_pick">
|
|
<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 || (has_look && look_locked)" data-action="create">Create pilot<div class="tip">Creates the pilot at the picked start, in the look on the left; 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>
|