-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsoftware.html
More file actions
269 lines (251 loc) · 16.3 KB
/
Copy pathsoftware.html
File metadata and controls
269 lines (251 loc) · 16.3 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>VectorBridge Software – Tuner & Mouse&Keyboard Feeder</title>
<meta name="description" content="See the value of VectorBridge software: the Tuner that writes your settings to VectorBridge’s on-board storage and the Mouse&Keyboard Feeder for near launch-and-play FPS support." />
<link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root{ --vb-red:#D36063; --vb-blue:#223F77; --vb-space:#0B0E11; --vb-cyan:#7AD1FF; --vb-ink:#0F1320 }
.sb{ box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.nebula{ background: radial-gradient(120% 120% at 20% 20%, rgba(211,96,99,.35) 0%, transparent 45%),
radial-gradient(120% 120% at 80% 80%, rgba(34,63,119,.35) 0%, transparent 45%),
linear-gradient(135deg, #D36063 0%, #223F77 100%); }
</style>
</head>
<body class="bg-slate-50 text-[color:var(--vb-ink)]">
<header class="sticky top-0 z-40 bg-white/85 backdrop-blur border-b border-slate-200">
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<a href="/" class="flex items-center gap-3">
<img src="sphere360_icon.png" width="56" height="56" alt="VectorBridge crest" class="rounded sb"/>
<span class="font-semibold tracking-tight">VectorBridge</span>
</a>
<nav class="hidden md:flex items-center gap-6 text-sm">
<a href="/#features" class="hover:opacity-80">Features</a>
<a href="/#devices" class="hover:opacity-80">Devices</a>
<a href="/#videos" class="hover:opacity-80">Videos</a>
<a href="/#faq" class="hover:opacity-80">FAQ</a>
<a href="/software" class="hover:opacity-80">Software</a>
<a href="/about" class="hover:opacity-80">About</a>
<a class="inline-flex items-center px-3 py-1.5 rounded-xl text-white hover:opacity-90" style="background:var(--vb-space)" href="https://www.etsy.com/shop/CosmicLayersStore" target="_blank" rel="noopener">Get VectorBridge</a>
</nav>
<!-- Mobile hamburger -->
<button id="menuBtn" class="md:hidden inline-flex items-center justify-center p-2 rounded-lg border border-slate-300"
aria-controls="mobileNav" aria-expanded="false" aria-label="Open menu">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
</div>
<!-- Mobile menu -->
<div id="mobileNav" class="md:hidden hidden border-t border-slate-200 bg-white">
<div class="max-w-6xl mx-auto px-4 py-3 grid gap-3 text-sm">
<a href="/#features" class="py-1 hover:opacity-80">Features</a>
<a href="/#devices" class="py-1 hover:opacity-80">Devices</a>
<a href="/#videos" class="py-1 hover:opacity-80">Videos</a>
<a href="/#faq" class="py-1 hover:opacity-80">FAQ</a>
<a href="/software" class="py-1 hover:opacity-80">Software</a>
<a href="/about" class="py-1 hover:opacity-80">About</a>
<a class="inline-flex items-center justify-center px-3 py-2 rounded-xl text-white"
style="background:var(--vb-space)" href="https://www.etsy.com/shop/CosmicLayersStore"
target="_blank" rel="noopener">Get VectorBridge</a>
</div>
</div>
</header>
<main>
<!-- Page hero -->
<section class="bg-white">
<div class="max-w-6xl mx-auto px-4 py-10">
<h1 class="text-4xl font-extrabold tracking-tight">VectorBridge Software</h1>
<p class="mt-3 text-lg text-slate-700 max-w-3xl">Two included apps show the real value of VectorBridge: the <strong>Tuner</strong> that writes your settings to the VectorBridge’s onboard storage, and the <strong>Mouse&Keyboard Feeder</strong> that makes classic 6-DoF controllers feel at home in modern games.</p>
</div>
</section>
<!-- Tabs -->
<section class="py-2">
<div class="max-w-6xl mx-auto px-4">
<div class="inline-flex rounded-xl border border-slate-200 bg-white sb overflow-hidden">
<button id="tabTuner" class="px-4 py-2 text-sm font-medium bg-[color:var(--vb-space)] text-white">Tuner</button>
<button id="tabFeeder" class="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Mouse&Keyboard Feeder</button>
</div>
</div>
</section>
<!-- Tuner panel -->
<section id="panelTuner" class="py-8">
<div class="max-w-6xl mx-auto px-4 grid md:grid-cols-5 gap-8 items-start">
<div class="md:col-span-3">
<div class="rounded-2xl border border-slate-200 bg-white sb overflow-hidden">
<div id="panelTunerHeader" class="px-4 py-3 border-b border-slate-200 bg-slate-50 text-sm font-medium">Tuner — Device selection (SpaceOrb 360)</div>
<img id="panelTunerHero" src="tuner_device_selection.png" alt="VectorBridge Tuner showing device selection with SpaceOrb 360 chosen" class="w-full h-auto" />
</div>
<div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4" role="list">
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelTuner" data-src="tuner_device_selection.png" data-title="Device selection (SpaceOrb 360)" data-alt="VectorBridge Tuner showing device selection with SpaceOrb 360 chosen" aria-pressed="true" tabindex="0">
<img src="tuner_device_selection.png" alt="VectorBridge Tuner showing device selection with SpaceOrb 360 chosen" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Device selection (SpaceOrb 360)</div>
</button>
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelTuner" data-src="tuner_sliders.png" data-title="Sensitivity, dead-zones, curves" data-alt="VectorBridge Tuner sliders for sensitivity, dead-zone, response curve" aria-pressed="false" tabindex="0">
<img src="tuner_sliders.png" alt="VectorBridge Tuner sliders for sensitivity, dead-zone, response curve" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Sensitivity, dead-zones, curves</div>
</button>
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelTuner" data-src="tuner_write_to_device.png" data-title="Write to VectorBridge’s onboard storage" data-alt="VectorBridge Tuner control to write settings to onboard storage" aria-pressed="false" tabindex="0">
<img src="tuner_write_to_device.png" alt="VectorBridge Tuner control to write settings to onboard storage" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Write to VectorBridge’s onboard storage</div>
</button>
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelTuner" data-src="tuner_starter_profiles.png" data-title="3-Starter presets, save & load 4-custom presets" data-alt="VectorBridge Tuner starter profiles dropdown" aria-pressed="false" tabindex="0">
<img src="tuner_starter_profiles.png" alt="VectorBridge Tuner starter profiles dropdown" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Built-in starter profiles</div>
</button>
</div>
</div>
<div class="md:col-span-2">
<h2 class="text-2xl font-bold">Tuner highlights</h2>
<ul class="mt-3 space-y-2 text-slate-700">
<li>Choose from supported devices (e.g., <strong>SpaceOrb 360, SpaceBall series, Magellan Classic/Plus)</strong> </li>
<li>Adjust <strong>sensitivity</strong>, <strong>dead-zones</strong>, and <strong>response curves</strong></li>
<li><strong>Writes to VectorBridge’s onboard storage</strong> — settings travel with your VectorBridge</li>
<li><strong>3-Starter presets</strong> let you begin quickly </li>
<li><strong>4-Custom profiles</strong> let you save, and load your own Presets </li>
<li><strong>JOY Mode</strong> for VectorBridge's Joystick HID output </li>
<li><strong>CAD Mode</strong> for VectorBridge's NDOF output (Linux only at this time, via Spacenavd) </li>
<li><strong>Rapid tweaking</strong> make adjustments without the need of reboot, or restart </li>
<li>Windows <strong>10/11</strong>, and Linux versions</li>
</ul>
</div>
</div>
</section>
<!-- Feeder panel -->
<section id="panelFeeder" class="py-8 hidden">
<div class="max-w-6xl mx-auto px-4 grid md:grid-cols-5 gap-8 items-start">
<div class="md:col-span-3">
<div class="rounded-2xl border border-slate-200 bg-white sb overflow-hidden">
<div id="panelFeederHeader" class="px-4 py-3 border-b border-slate-200 bg-slate-50 text-sm font-medium">Mouse&Keyboard Feeder — Axis mapping</div>
<img id="panelFeederHero" src="feeder_main.png" alt="Feeder main window showing mappings overview" class="w-full h-auto" />
</div>
<div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4" role="list">
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelFeeder" data-src="feeder_main.png" data-title="Mappings overview" data-alt="Feeder main window showing mappings overview" aria-pressed="true" tabindex="0">
<img src="feeder_main.png" alt="Feeder main window showing mappings overview" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Mappings overview</div>
</button>
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelFeeder" data-src="feeder_mapping.png" data-title="Axis/button → key/mouse" data-alt="Feeder mapping UI for axis/button to key/mouse" aria-pressed="false" tabindex="0">
<img src="feeder_mapping.png" alt="Feeder mapping UI for axis/button to key/mouse" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Axis/button → key/mouse</div>
</button>
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelFeeder" data-src="feeder_profiles.png" data-title="Save / Load / Import / Export" data-alt="Feeder profiles save, load, import, export" aria-pressed="false" tabindex="0">
<img src="feeder_profiles.png" alt="Feeder profiles save, load, import, export" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Save / Load / Import / Export Profiles</div>
</button>
<button class="group rounded-xl overflow-hidden border border-slate-200 bg-white sb focus:outline-none focus:ring-2 focus:ring-slate-400"
data-gallery="panelFeeder" data-src="feeder_mouselook.png" data-title="Optimize mouse look" data-alt="Feeder mouse look tuning for FPS games" aria-pressed="false" tabindex="0">
<img src="feeder_mouselook.png" alt="Feeder mouse look tuning for FPS games" class="w-full h-auto pointer-events-none" />
<div class="px-3 py-2 text-xs text-slate-600 text-left">Optimized mouse look</div>
</button>
</div>
</div>
<div class="md:col-span-2">
<h2 class="text-2xl font-bold">Feeder highlights</h2>
<ul class="mt-3 space-y-2 text-slate-700">
<li><strong>Play virtually any FPS</strong> — maps to standard mouse/keyboard conventions</li>
<li>Map axes and buttons to <strong>any key or mouse function</strong></li>
<li><strong>Save / Load / Import / Export</strong> profiles; easy sharing</li>
<li>Windows <strong>10/11</strong>, and Linux</li>
</ul>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-10">
<div class="max-w-6xl mx-auto px-4">
<div class="p-6 md:p-8 text-white rounded-2xl sb grid md:grid-cols-2 gap-6 items-center" style="background:var(--vb-space)">
<div>
<h3 class="text-2xl font-bold">Included with every VectorBridge</h3>
<p class="mt-2 opacity-90">Tuner and Mouse&Keyboard Feeder are part of the package — no extra purchase required.</p>
</div>
<div class="md:text-right">
<a class="inline-flex items-center justify-center px-5 py-3 rounded-2xl bg-white text-[color:var(--vb-space)] hover:bg-slate-100" href="https://www.etsy.com/shop/CosmicLayersStore" target="_blank" rel="noopener">Get VectorBridge</a>
</div>
</div>
</div>
</section>
</main>
<script>
// Simple tabs
const tabTuner = document.getElementById('tabTuner');
const tabFeeder = document.getElementById('tabFeeder');
const panelTuner = document.getElementById('panelTuner');
const panelFeeder = document.getElementById('panelFeeder');
function show(which){
if(which==='tuner'){
tabTuner.classList.add('bg-[color:var(--vb-space)]','text-white');
tabFeeder.classList.remove('bg-[color:var(--vb-space)]','text-white');
panelTuner.classList.remove('hidden'); panelFeeder.classList.add('hidden');
}else{
tabFeeder.classList.add('bg-[color:var(--vb-space)]','text-white');
tabTuner.classList.remove('bg-[color:var(--vb-space)]','text-white');
panelFeeder.classList.remove('hidden'); panelTuner.classList.add('hidden');
}
}
tabTuner.addEventListener('click',()=>show('tuner'));
tabFeeder.addEventListener('click',()=>show('feeder'));
</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
function setupGallery(panelId){
const header = document.getElementById(panelId + 'Header');
const hero = document.getElementById(panelId + 'Hero');
const thumbs = document.querySelectorAll('[data-gallery="' + panelId + '"]');
function baseTitle(){
return panelId === 'panelTuner' ? 'Tuner' : 'Mouse&Keyboard Feeder';
}
function select(btn){
thumbs.forEach(t => t.setAttribute('aria-pressed', 'false'));
btn.setAttribute('aria-pressed', 'true');
const src = btn.getAttribute('data-src');
const title = btn.getAttribute('data-title') || '';
const alt = btn.getAttribute('data-alt') || '';
hero.src = src;
hero.alt = alt;
if(header) header.textContent = baseTitle() + ' — ' + title;
}
thumbs.forEach(btn => {
btn.addEventListener('click', () => select(btn));
btn.addEventListener('keydown', (e) => {
if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); select(btn); }
});
});
}
setupGallery('panelTuner');
setupGallery('panelFeeder');
});
</script>
<script>
(function () {
var btn = document.getElementById('menuBtn');
var menu = document.getElementById('mobileNav');
if (!btn || !menu) return;
btn.addEventListener('click', function(){
var isHidden = menu.classList.contains('hidden');
menu.classList.toggle('hidden');
btn.setAttribute('aria-expanded', String(isHidden));
});
menu.querySelectorAll('a').forEach(function(a){
a.addEventListener('click', function(){
if (!menu.classList.contains('hidden')) {
menu.classList.add('hidden');
btn.setAttribute('aria-expanded', 'false');
}
});
});
})();
</script>
</body>
</html>