-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsiteStyleOptions.html
More file actions
160 lines (160 loc) · 6.09 KB
/
Copy pathsiteStyleOptions.html
File metadata and controls
160 lines (160 loc) · 6.09 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flasher.cloud style options</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style-options.css" />
</head>
<body class="gallery">
<header>
<p class="eyebrow">Design review</p>
<h1>flasher.cloud style options</h1>
<p>
The current website remains at <a href="./">the main app</a>. These five separate mockups reuse the same
product content and logo so you can compare visual direction, density, and tone.
</p>
</header>
<section class="option-grid" aria-label="Site style options">
<a class="option-card" href="./style-option-command.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Command Center</h2>
<p>Dark operational UI close to the current direction, but tighter and more tool-focused.</p>
</div>
<span>Open option 1</span>
</a>
<a class="option-card" href="./style-option-lab.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Clean Lab</h2>
<p>Bright engineering workspace with calm panels and a documentation-friendly feel.</p>
</div>
<span>Open option 2</span>
</a>
<a class="option-card" href="./style-option-terminal.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Terminal Green</h2>
<p>CLI-inspired layout for a sharper hacker-tool personality.</p>
</div>
<span>Open option 3</span>
</a>
<a class="option-card" href="./style-option-industrial.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Industrial Bench</h2>
<p>Rugged workshop styling with amber controls and stronger hardware cues.</p>
</div>
<span>Open option 4</span>
</a>
<a class="option-card" href="./style-option-glass.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Neon Glass</h2>
<p>More polished and dimensional, with glass panels and a productized SaaS feel.</p>
</div>
<span>Open option 5</span>
</a>
<a class="option-card" href="./style-option-docs.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Docs Portal</h2>
<p>Reference-first structure with a left contents rail and readable utility documentation.</p>
</div>
<span>Open option 6</span>
</a>
<a class="option-card" href="./style-option-mobile.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Mobile Console</h2>
<p>App-like layout with bottom navigation, compact status, and thumb-friendly controls.</p>
</div>
<span>Open option 7</span>
</a>
<a class="option-card" href="./style-option-cyber.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Cyber Grid</h2>
<p>High-energy neon command deck with angled panels and strong visual personality.</p>
</div>
<span>Open option 8</span>
</a>
<a class="option-card" href="./style-option-retro.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Retro Desktop</h2>
<p>Windowed utility feel inspired by classic desktop tooling and serial programs.</p>
</div>
<span>Open option 9</span>
</a>
<a class="option-card" href="./style-option-editorial.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Editorial</h2>
<p>Big story-led composition with bold typography and product sections below.</p>
</div>
<span>Open option 10</span>
</a>
<a class="option-card" href="./style-option-schematic.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Schematic Map</h2>
<p>Circuit-board inspired canvas with utilities placed as connected nodes.</p>
</div>
<span>Open option 11</span>
</a>
<a class="option-card" href="./style-option-mission.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Mission Control</h2>
<p>Operational dashboard with live capability status, task queue, and active flasher panel.</p>
</div>
<span>Open option 12</span>
</a>
<a class="option-card" href="./style-option-wizard.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Guided Wizard</h2>
<p>A step-by-step device-first flow for less technical firmware installs.</p>
</div>
<span>Open option 13</span>
</a>
<a class="option-card" href="./style-option-matrix.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Device Matrix</h2>
<p>Board compatibility table as the primary experience, useful for a broad device catalog.</p>
</div>
<span>Open option 14</span>
</a>
<a class="option-card" href="./style-option-product.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Product Hero</h2>
<p>Big brand-first presentation with utilities as polished product modules below.</p>
</div>
<span>Open option 15</span>
</a>
<a class="option-card" href="./style-option-split.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Split Console</h2>
<p>Documentation and terminal side-by-side for advanced workflows and troubleshooting.</p>
</div>
<span>Open option 16</span>
</a>
<a class="option-card" href="./style-option-pro.html">
<div>
<img src="./logo.svg" alt="" />
<h2>Pro Dense</h2>
<p>Compact professional tool UI with high information density and minimal decoration.</p>
</div>
<span>Open option 17</span>
</a>
</section>
</body>
</html>