developer.reactivedrop.com/2024/interface-mockup-loadout.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reactive Drop 2024 Loadout Layout</title>
<link rel="stylesheet" href="interface-mockup-shared.css">
<style>
.loadout-list {
	left: calc(var(--xhalf) - var(--yres) * 300);
	top: calc(var(--yres) * 40);
	width: calc(var(--yres) * 155);
	height: calc(var(--yres) * 415);
}
.loadout-medals-label {
	left: calc(var(--xhalf) - var(--yres) * 100);
	top: calc(var(--yres) * 320);
	width: calc(var(--yres) * 375);
	height: calc(var(--yres) * 20);
	text-align: center;
}
.loadout-medal {
	top: calc(var(--yres) * 345);
	width: calc(var(--yres) * 75);
	height: calc(var(--yres) * 75);
}
.loadout-medal-label {
	top: calc(var(--yres) * 425);
	width: calc(var(--yres) * 75);
	height: calc(var(--yres) * 24);
	text-align: center;
}
.loadout-medal-0 {
	left: calc(var(--xhalf) - var(--yres) * 80);
}
.loadout-medal-1 {
	left: calc(var(--xhalf) + var(--yres) * 0);
}
.loadout-medal-2 {
	left: calc(var(--xhalf) + var(--yres) * 80);
}
.loadout-medal-promo {
	left: calc(var(--xhalf) + var(--yres) * 175);
}
.loadout-marines-label {
	left: calc(var(--xhalf) - var(--yres) * 100);
	top: calc(var(--yres) * 40);
	width: calc(var(--yres) * 375);
	height: calc(var(--yres) * 20);
	text-align: center;
}
.loadout-marine {
	width: calc(var(--yres) * 75);
	height: calc(var(--yres) * 75);
}
.loadout-marine-label {
	width: calc(var(--yres) * 75);
	height: calc(var(--yres) * 12);
	text-align: center;
}
.loadout-marine-row1 {
	top: calc(var(--yres) * 100);
}
.loadout-marine-label-row1 {
	top: calc(var(--yres) * 177);
}
.loadout-marine-row2 {
	top: calc(var(--yres) * 200);
}
.loadout-marine-label-row2 {
	top: calc(var(--yres) * 277);
}
.loadout-marine-officer {
	left: calc(var(--xhalf) - var(--yres) * 100);
}
.loadout-marine-specialweapons {
	left: calc(var(--xhalf) + var(--yres) * 0);
}
.loadout-marine-medic {
	left: calc(var(--xhalf) + var(--yres) * 100);
}
.loadout-marine-tech {
	left: calc(var(--xhalf) + var(--yres) * 200);
}
</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="loadout-list">Loadout List</div>
<div class="loadout-medals-label">Medals</div>
<div class="loadout-medal loadout-medal-0">Medal 0</div>
<div class="loadout-medal-label loadout-medal-0">Name</div>
<div class="loadout-medal loadout-medal-1">Medal 1</div>
<div class="loadout-medal-label loadout-medal-1">Name</div>
<div class="loadout-medal loadout-medal-2">Medal 2</div>
<div class="loadout-medal-label loadout-medal-2">Name</div>
<div class="loadout-medal loadout-medal-promo">Promotion Medal</div>
<div class="loadout-medal-label loadout-medal-promo">Name</div>
<div class="loadout-marines-label">Marines</div>
<div class="loadout-marine loadout-marine-officer loadout-marine-row1">Sarge</div>
<div class="loadout-marine-label loadout-marine-officer loadout-marine-label-row1">Name</div>
<div class="loadout-marine loadout-marine-specialweapons loadout-marine-row1">Wildcat</div>
<div class="loadout-marine-label loadout-marine-specialweapons loadout-marine-label-row1">Name</div>
<div class="loadout-marine loadout-marine-medic loadout-marine-row1">Faith</div>
<div class="loadout-marine-label loadout-marine-medic loadout-marine-label-row1">Name</div>
<div class="loadout-marine loadout-marine-tech loadout-marine-row1">Crash</div>
<div class="loadout-marine-label loadout-marine-tech loadout-marine-label-row1">Name</div>
<div class="loadout-marine loadout-marine-officer loadout-marine-row2">Jaeger</div>
<div class="loadout-marine-label loadout-marine-officer loadout-marine-label-row2">Name</div>
<div class="loadout-marine loadout-marine-specialweapons loadout-marine-row2">Wolfe</div>
<div class="loadout-marine-label loadout-marine-specialweapons loadout-marine-label-row2">Name</div>
<div class="loadout-marine loadout-marine-medic loadout-marine-row2">Bastille</div>
<div class="loadout-marine-label loadout-marine-medic loadout-marine-label-row2">Name</div>
<div class="loadout-marine loadout-marine-tech loadout-marine-row2">Vegas</div>
<div class="loadout-marine-label loadout-marine-tech loadout-marine-label-row2">Name</div>
</body>
</html>