90 lines
5.7 KiB
Plaintext
90 lines
5.7 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Construction site</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin-right: 14dp; }
|
|
.col.last { margin-right: 0; }
|
|
.col h3 { margin-bottom: 6dp; }
|
|
.sub { font-size: 12dp; margin-bottom: 6dp; color: #8197ad; }
|
|
.lst { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
|
|
.it { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
|
.it:hover { background-color: #122033; }
|
|
.it.picked { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
|
.it.dim { color: #8197ad; }
|
|
.it .n { flex: 1; min-width: 0; font-size: 14dp; }
|
|
.it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; margin-left: 8dp; }
|
|
.it .o { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
|
|
.bar { height: 6dp; background-color: #ffffff10; margin: 4dp 0 10dp 0; }
|
|
.bar .fill { height: 6dp; background-color: #f2b13c; }
|
|
.move { margin-top: 12dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #f2b13c; background-color: #5cc8f010; }
|
|
.move .t { flex: 1; min-width: 0; }
|
|
.move .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
|
|
.move .t .a { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
|
.move .range { width: 220dp; margin: 0 10dp; }
|
|
.move .btn { margin: 0 0 0 6dp; }
|
|
.fund { margin-top: 12dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #5cc8f0; background-color: #5cc8f010; }
|
|
.fund .t { flex: 1; min-width: 0; }
|
|
.fund .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; }
|
|
.fund .t .a { font-size: 12dp; color: #8197ad; margin-top: 2dp; }
|
|
.fund .btn { margin: 0 0 0 6dp; }
|
|
.foot2 { display: flex; flex-direction: row; align-items: center; margin-top: 12dp; }
|
|
.foot2 .hint { flex: 1; }
|
|
.foot2 .btn { margin: 0 0 0 8dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="sitetrade">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
|
|
<span class="title">CONSTRUCTION SITE</span><span class="sl">\\\</span>
|
|
<span class="spacer"></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content" style="display: flex; flex-direction: column;">
|
|
<div class="t" style="font-family: 'Saira SemiCondensed'; font-weight: 600; font-size: 18dp;">{{ title }}</div>
|
|
<div class="hint">{{ line }}</div>
|
|
<div class="bar"><div class="fill" data-style-width="progress + '%'"></div></div>
|
|
<div class="cols">
|
|
<div class="col">
|
|
<h3>Your cargo</h3>
|
|
<div class="sub">Click a ware the site needs</div>
|
|
<div class="lst">
|
|
<div class="hint" style="padding: 10dp;" data-if="hold.size == 0">Your hold is empty.</div>
|
|
<div class="it" data-for="i : hold" data-class-picked="i.selected" data-class-dim="!i.useful" data-action="pick" data-attr-data-arg="i.key">
|
|
<span class="n">{{ i.name }}</span><span class="c">{{ i.hold }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col last">
|
|
<h3>The site needs</h3>
|
|
<div class="sub">Delivered / needed - ordered from the traders</div>
|
|
<div class="lst">
|
|
<div class="hint" style="padding: 10dp;" data-if="needs.size == 0">Nothing - all wares are in.</div>
|
|
<div class="it" data-for="i : needs" data-class-picked="i.selected" data-class-dim="!i.useful" data-action="pick" data-attr-data-arg="i.key">
|
|
<span class="n">{{ i.name }}</span><span class="c">{{ i.need }}</span><span class="o" data-if="i.ordered != ''">{{ i.ordered }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="move" data-if="can_deliver">
|
|
<div class="t"><div class="n">{{ pick_name }}</div><div class="a">{{ qty_text }}</div></div>
|
|
<input class="range" type="range" min="1" step="1" data-attr-max="qty_max" data-value="qty"/>
|
|
<div class="btn" data-action="all">Max</div>
|
|
<div class="btn primary" data-action="deliver">Deliver<div class="tip">Hands the amount from your hold to the site.</div></div>
|
|
</div>
|
|
<div class="fund" data-if="owner">
|
|
<div class="t"><div class="n">{{ fund_title }}</div><div class="a">{{ fund_line }}</div></div>
|
|
<div class="btn" data-if="funded" data-action="unfund">Take orders back<div class="tip">Withdraws the site's buy orders - the escrow goes back to your bank.</div></div>
|
|
<div class="btn primary" data-if="can_fund" data-action="fund">{{ fund_button }}<div class="tip">Places buy orders on the Galactic Market for what the site still lacks; the price is paid from your bank as escrow. Trader pilots fly the wares in.</div></div>
|
|
</div>
|
|
<div class="foot2">
|
|
<span class="hint">{{ status }}</span>
|
|
<div class="btn" data-action="close">Close</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|