75 lines
4.4 KiB
Plaintext
75 lines
4.4 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Mission board</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 46%; margin-right: 18dp; }
|
|
.list { flex: 1; overflow-y: auto; }
|
|
.offer { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
|
.offer:hover { border-color: #5cc8f0; }
|
|
.offer.selected { border-color: #f2b13c; }
|
|
.offer img { width: 40dp; height: 40dp; margin-right: 12dp; }
|
|
.offer .mid { flex: 1; min-width: 0; }
|
|
.offer .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
|
|
.offer .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
|
.offer .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-left: 12dp; text-align: right; }
|
|
.brief-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
|
.brief-head img { width: 54dp; height: 54dp; margin-right: 14dp; }
|
|
.brief-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
|
|
.brief-head .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
|
/* the offer's picture (NN_MissionVendor's video screen) */
|
|
.photo { display: block; width: 300dp; height: 225dp; margin: 0 0 10dp 0; border: 2dp #3d6d96; border-radius: 3dp; }
|
|
.briefing { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
.empty-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
.empty-board img { width: 64dp; height: 64dp; margin-bottom: 12dp; opacity: 0.6; }
|
|
</style>
|
|
</head>
|
|
<body class="window medium" data-model="missionboard">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
|
|
<span class="title">MISSION BOARD</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Offers <span class="v">{{ offers.size }}</span></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="empty-board" data-if="offers.size == 0">
|
|
<img src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
|
|
<div class="hint">{{ empty_text }}</div>
|
|
</div>
|
|
<div class="split" data-if="offers.size > 0">
|
|
<div class="colm side">
|
|
<h3 style="margin-bottom: 8dp;">Offers</h3>
|
|
<div class="list">
|
|
<div class="offer" data-for="o : offers" data-class-selected="o.selected" data-action="pick" data-attr-data-arg="o.key">
|
|
<img data-attr-src="o.icon"/>
|
|
<div class="mid"><div class="t">{{ o.title }}</div><div class="d">{{ o.text }}</div></div>
|
|
<span class="r">{{ o.reward }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="brief-head" data-if="has_pick">
|
|
<img data-attr-src="pick.icon"/>
|
|
<div><div class="t">{{ pick.title }}</div><div class="r">{{ pick.reward }}</div></div>
|
|
</div>
|
|
<img class="photo" data-if="has_pick && photo != ''" data-attr-src="photo"/>
|
|
<div class="briefing" data-if="has_pick">{{ briefing }}</div>
|
|
<div class="hint" data-if="!has_pick">{{ status == '' ? 'Pick an offer.' : status }}</div>
|
|
<div class="actions" style="margin-top: 12dp;" data-if="has_pick">
|
|
<div class="btn primary" data-class-disabled="waiting" data-action="accept">Accept mission<div class="tip">Takes the mission; the board closes when the mission giver agrees.</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>
|