71 lines
4.6 KiB
Plaintext
71 lines
4.6 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Player status</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 42%; margin-right: 18dp; overflow-y: auto; }
|
|
.grid { display: block; margin-bottom: 8dp; }
|
|
.stat { display: inline-block; box-sizing: border-box; width: 48%; margin: 0 2% 8dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 8dp 12dp; }
|
|
.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: 17dp; margin-top: 2dp; }
|
|
.list { flex: 1; overflow-y: auto; }
|
|
.faction { display: flex; flex-direction: row; align-items: center; padding: 7dp 10dp; margin-bottom: 5dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
|
.faction:hover { border-color: #5cc8f0; }
|
|
.faction.selected { border-color: #f2b13c; }
|
|
.faction.own .n { color: #f2b13c; }
|
|
.faction .n { width: 40%; font-size: 14dp; }
|
|
.faction .rep { flex: 1; display: flex; flex-direction: row; height: 6dp; margin: 0 12dp; }
|
|
.faction .half { width: 50%; height: 6dp; background-color: #00000066; display: flex; flex-direction: row; }
|
|
.faction .half.l { justify-content: flex-end; border-right: 1dp #8197ad; }
|
|
.faction .neg { height: 6dp; background-color: #ef6a5b; }
|
|
.faction .pos { height: 6dp; background-color: #5fd08a; }
|
|
.faction .s { width: 90dp; text-align: right; font-size: 12dp; color: #8197ad; font-family: "Saira SemiCondensed"; text-transform: uppercase; letter-spacing: 1dp; }
|
|
.card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
</style>
|
|
</head>
|
|
<body class="window medium" data-model="playerinfo">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/>
|
|
<span class="title">PLAYER STATUS</span>
|
|
<span class="spacer"></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="hint" data-if="!received">Waiting for the server...</div>
|
|
<div class="split" data-if="received">
|
|
<div class="colm side">
|
|
<h3 style="margin-bottom: 8dp;">Career</h3>
|
|
<div class="grid"><div class="stat" data-for="s : stats"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
|
|
<h3 style="margin-bottom: 8dp;">Kills</h3>
|
|
<div class="grid"><div class="stat" data-for="s : kills"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
|
|
</div>
|
|
<div class="colm">
|
|
<div data-if="!has_card" class="colm">
|
|
<h3 style="margin-bottom: 8dp;">Reputation</h3>
|
|
<div class="list">
|
|
<div class="hint" data-if="factions.size == 0">You have met no factions yet.</div>
|
|
<div class="faction" data-for="f : factions" data-class-own="f.own" data-class-selected="f.selected" data-action="faction" data-attr-data-arg="f.key">
|
|
<span class="n">{{ f.name }}</span>
|
|
<div class="rep">
|
|
<div class="half l"><div class="neg" data-style-width="(f.left * 2) + '%'"></div></div>
|
|
<div class="half"><div class="pos" data-style-width="(f.right * 2) + '%'"></div></div>
|
|
</div>
|
|
<span class="s">{{ f.standing }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-if="has_card" class="colm">
|
|
<div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp;"><h3>{{ card_title }}</h3><div class="btn" style="margin: 0 0 0 auto;" data-action="card-close">Back</div></div>
|
|
<div class="card">{{ card }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
|
|
</body>
|
|
</rml>
|