developer.reactivedrop.com/2024/interface-mockup-commanderprofile.html at gh-pages · ReactiveDrop/developer.reactivedrop.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reactive Drop 2024 Commander Profile Layout</title>
<link rel="stylesheet" href="interface-mockup-shared.css">
<style>
.commander-profile {
	left: calc(var(--yres) * 10);
	top: calc(var(--yres) * 40);
	width: calc(var(--yres) * 145);
	height: calc(var(--yres) * 72);
}
.commander-avatar {
	left: calc(var(--yres) * 2);
	top: calc(var(--yres) * 2);
	width: calc(var(--yres) * 32);
	height: calc(var(--yres) * 32);
}
.commander-name {
	left: calc(var(--yres) * 36);
	top: calc(var(--yres) * 2);
	width: calc(var(--yres) * 73);
	height: calc(var(--yres) * 24);
}
.commander-promotion {
	left: calc(var(--yres) * 115);
	top: calc(var(--yres) * 2);
	width: calc(var(--yres) * 24);
	height: calc(var(--yres) * 24);
}
.commander-lvl {
	left: calc(var(--yres) * 111);
	top: calc(var(--yres) * 24);
	width: calc(var(--yres) * 32);
	height: calc(var(--yres) * 10);
	z-index: 1;
}
.commander-xp {
	left: calc(var(--yres) * 36);
	top: calc(var(--yres) * 25);
	width: calc(var(--yres) * 73);
	height: calc(var(--yres) * 8);
}
.medal-1 {
	left: calc(var(--yres) * 2);
	top: calc(var(--yres) * 38);
	width: calc(var(--yres) * 32);
	height: calc(var(--yres) * 32);
}
.medal-2 {
	left: calc(var(--yres) * 36);
	top: calc(var(--yres) * 38);
	width: calc(var(--yres) * 32);
	height: calc(var(--yres) * 32);
}
.medal-3 {
	left: calc(var(--yres) * 70);
	top: calc(var(--yres) * 38);
	width: calc(var(--yres) * 32);
	height: calc(var(--yres) * 32);
}
.hoiaf-next-medal {
	left: calc(var(--yres) * 111);
	top: calc(var(--yres) * 38);
	width: calc(var(--yres) * 32);
	height: calc(var(--yres) * 32);
}
</style>
</head>
<body>
<div class="top-bar">
<a href="interface-mockup-settings-controls.html"><div class="settings-button" title="Settings button (gear icon)">Sett</div></a>
<a href="interface-redesign.html"><div class="quit-button" title="Quit button (power icon)">Quit</div></a>
<a href="interface-mockup-mainmenu.html"><div class="top-bar-logo">AS:RD Logo</div></a>
<a href="interface-mockup-loadout.html"><div class="loadout-button">Loadout</div></a>
<a href="interface-mockup-inventory.html"><div class="inventory-button">Inventory</div></a>
<a href="interface-mockup-recordings.html"><div class="recordings-button">Recordings</div></a>
<a href="interface-mockup-swarmopedia.html"><div class="swarmopedia-button">Swarmopedia</div></a>
<a href="interface-mockup-contracts.html"><div class="contracts-button">Contracts</div></a>
<a href="interface-mockup-workshop.html"><div class="workshop-button">Workshop</div></a>
</div>
<div class="commander-profile">
<div class="commander-avatar">Avatar</div>
<div class="commander-name">Commander Name</div>
<div class="commander-promotion">Promotion</div>
<div class="commander-xp">Commander XP Bar</div>
<div class="commander-lvl">Level 34</div>
<div class="medal-1">Medal 1</div>
<div class="medal-2">Medal 2</div>
<div class="medal-3">Medal 3</div>
<div class="hoiaf-next-medal">HoIAF Next Medal</div>
</div>
</body>
</html>