Skip to content

Commit d5ec8ec

Browse files
dooly123dooly123
committed
update index
1 parent 002204c commit d5ec8ec

1 file changed

Lines changed: 199 additions & 43 deletions

File tree

‎index.html‎

Lines changed: 199 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,206 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="scroll-smooth">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>BasisVR</title>
7-
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>BasisVR — Open-Source Social & Networked VR</title>
7+
8+
<meta name="description" content="Basis lets you set up your own Social VR and Networked VR games with ease. MIT-licensed, open development, optional mods, and tools to equip VR creators." />
9+
<meta property="og:title" content="BasisVR — Open-Source Social & Networked VR" />
10+
<meta property="og:description" content="Set up your own Social VR and Networked VR games with ease." />
11+
<meta property="og:image" content="https://raw.githubusercontent.com/BasisVR/basisvr.github.io/main/Images/basisdiscord2.png" />
12+
<meta name="theme-color" content="#ef1237" media="(prefers-color-scheme: light)">
13+
<meta name="theme-color" content="#100f27" media="(prefers-color-scheme: dark)">
14+
<meta name="color-scheme" content="light dark" />
15+
16+
<link rel="preconnect" href="https://fonts.bunny.net" />
17+
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700" rel="stylesheet" />
18+
19+
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
20+
<script>
21+
tailwind.config = {
22+
theme: {
23+
extend: {
24+
fontFamily: { sans: ['Inter','ui-sans-serif','system-ui'] },
25+
colors: {
26+
brand: {
27+
DEFAULT: '#ef1237',
28+
100: '#ffd6de',
29+
300: '#ff5775',
30+
500: '#ef1237',
31+
700: '#950a24'
32+
},
33+
basisbg: '#100f27'
34+
}
35+
}
36+
},
37+
darkMode: 'class'
38+
};
39+
(function(){
40+
const stored = localStorage.getItem('theme');
41+
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
42+
const theme = stored || (systemDark ? 'dark':'light');
43+
if(theme==='dark') document.documentElement.classList.add('dark');
44+
})();
45+
</script>
46+
47+
<style>
48+
::selection{background:rgba(239,18,55,0.25);}
49+
</style>
850
</head>
9-
<body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
10-
<div class="container mx-auto px-4 py-8">
11-
<header class="text-left mb-12">
12-
<h1 class="text-center text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6">BasisVR</h1>
13-
<div class="max-w-2xl mx-auto">
14-
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-8">
15-
<strong>Basis lets you set up your own Social VR and Networked VR games with ease.</strong><br>
16-
We are a MIT-Licensed Open-Source project with a focus on
17-
open development and full access to any optional
18-
modification desired or required. Our goal is to help
19-
equip VR Creators, so we can accelerate the growth of
20-
VR.
21-
</p>
51+
<body class="bg-white text-gray-800 dark:bg-basisbg dark:text-gray-100 antialiased">
52+
53+
<!-- Decorative background -->
54+
<div aria-hidden="true" class="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
55+
<div class="absolute -top-24 left-1/2 -translate-x-1/2 h-[50rem] w-[50rem] rounded-full bg-gradient-to-br from-brand/30 via-pink-500/20 to-purple-600/20 blur-3xl"></div>
56+
<svg class="absolute bottom-[-20%] right-[-10%] h-[40rem] w-[40rem] opacity-20 dark:opacity-10" viewBox="0 0 100 100" fill="none">
57+
<defs><linearGradient id="g" x1="0" y1="0" x2="100" y2="100">
58+
<stop offset="0%" stop-color="#ef1237"/><stop offset="100%" stop-color="#9333ea"/>
59+
</linearGradient></defs>
60+
<circle cx="50" cy="50" r="46" stroke="url(#g)" stroke-width="1.5"/>
61+
</svg>
62+
</div>
63+
64+
<div class="mx-auto max-w-7xl px-6 py-8 sm:py-12">
65+
66+
<!-- Top bar -->
67+
<div class="flex items-center justify-between">
68+
<a href="/" class="inline-flex items-center gap-3">
69+
<img src="https://raw.githubusercontent.com/BasisVR/basisvr.github.io/main/Images/BasisLogoN.png"
70+
alt="BasisVR Logo"
71+
class="h-10 w-10 rounded-lg ring-1 ring-gray-200 dark:ring-white/10"/>
72+
<span class="font-semibold text-lg">BasisVR</span>
73+
</a>
74+
<a href="https://docs.basisvr.org" target="_blank" class="hidden sm:inline text-sm text-gray-600 dark:text-gray-300 hover:text-brand">Docs</a>
75+
</div>
76+
77+
<!-- Hero -->
78+
<header class="mt-12 text-center">
79+
<h1 class="text-4xl font-extrabold sm:text-6xl">
80+
Build Social & Networked <span class="bg-gradient-to-r from-brand to-purple-600 bg-clip-text text-transparent">VR experiences</span> fast.
81+
</h1>
82+
<p class="mt-5 max-w-2xl mx-auto text-base text-gray-600 dark:text-gray-300">
83+
<strong>BasisVR</strong> lets you set up your own Social VR and Networked VR games with ease. MIT-licensed, open-source, and designed for creators.
84+
</p>
85+
<div class="mt-8 flex flex-wrap justify-center gap-3">
86+
<a href="https://github.com/BasisVR/basis" target="_blank"
87+
class="inline-flex items-center gap-2 rounded-2xl bg-gray-900 px-5 py-3 text-sm font-semibold text-white shadow hover:shadow-lg hover:ring-2 hover:ring-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-brand">
88+
GitHub
89+
</a>
90+
<a href="https://docs.basisvr.org" target="_blank"
91+
class="inline-flex items-center gap-2 rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-gray-900 shadow ring-1 ring-gray-200 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10">
92+
Read the docs
93+
</a>
94+
<a href="https://github.com/BasisVR/Basis/blob/developer/PHILOSOPHY.md" target="_blank"
95+
class="inline-flex items-center gap-2 rounded-2xl bg-white/70 px-5 py-3 text-sm font-semibold text-gray-800 shadow ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-white/10 dark:text-gray-100 dark:ring-white/10">
96+
Philosophy
97+
</a>
98+
</div>
99+
</header>
100+
101+
<!-- Banner -->
102+
<section class="mx-auto mt-14 max-w-5xl">
103+
<div class="relative overflow-hidden rounded-2xl ring-1 ring-black/10 dark:ring-white/10">
104+
<img src="https://raw.githubusercontent.com/BasisVR/basisvr.github.io/main/Images/basisdiscord2.png"
105+
alt="BasisVR Banner"
106+
class="w-full object-cover"/>
107+
<div class="absolute inset-0 bg-gradient-to-t from-basisbg/70 to-transparent"></div>
108+
</div>
109+
</section>
110+
111+
<!-- Showcase -->
112+
<section class="mx-auto mt-20 max-w-5xl text-center">
113+
<h2 class="text-3xl font-bold sm:text-4xl">Mass Load Test Showcase</h2>
114+
<p class="mt-3 text-gray-600 dark:text-gray-400">Our latest scale test with thousands of connected nameplates in VR.</p>
115+
<div class="mt-8 rounded-2xl overflow-hidden shadow-xl ring-1 ring-black/10 dark:ring-white/10">
116+
<img src="https://raw.githubusercontent.com/BasisVR/basisvr.github.io/main/Images/NameplateMassAmount.png"
117+
alt="BasisVR Mass Load Test"
118+
class="w-full object-cover aspect-video"/>
119+
</div>
120+
<figcaption class="mt-3 text-sm text-gray-500 dark:text-gray-400">
121+
Join us weekly for our <strong>Talk & Test</strong> sessions — connect, create, and stress-test VR together.
122+
</figcaption>
123+
</section>
124+
125+
<!-- Project Links -->
126+
<section class="mx-auto mt-16 max-w-4xl">
127+
<h2 class="text-2xl font-semibold">Project Links</h2>
128+
<ul class="mt-6 grid gap-4 sm:grid-cols-2">
129+
<li>
130+
<a href="https://github.com/BasisVR/basis" class="group block rounded-2xl border border-gray-200 bg-white/70 p-4 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-white/10 dark:bg-white/5">
131+
<div class="flex items-center gap-3">
132+
<div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-gray-900 text-white">💻</div>
133+
<div class="min-w-0">
134+
<h3 class="font-semibold">GitHub Repository</h3>
135+
<p class="text-sm text-gray-600 dark:text-gray-400">Source, issues, PRs, and discussions.</p>
136+
</div>
22137
</div>
23-
</header>
24-
25-
<section class="max-w-lg mx-auto">
26-
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Project Links</h2>
27-
<div class="space-y-4">
28-
<a href="https://github.com/BasisVR/basis" class="block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
29-
<span class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">💻 Github Repository</span>
30-
</a>
31-
<a href="https://docs.basisvr.org" class="block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
32-
<span class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">💻 Documentation</span>
33-
</a>
34-
<a href="https://bsky.app/profile/basisvr.org" class="block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
35-
<span class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">🦋 Bluesky</span>
36-
</a>
37-
<a href="https://x.com/BasisVR" class="block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
38-
<span class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">𝕏 Twitter</span>
39-
</a>
40-
<a href="https://discord.gg/v6ve6WT562" class="block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
41-
<span class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">Basis Discord</span>
42-
</a>
43-
<a href="https://opencollective.com/basis" class="block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
44-
<span class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">💰 Open Collective</span>
45-
</a>
138+
</a>
139+
</li>
140+
<li>
141+
<a href="https://docs.basisvr.org" class="group block rounded-2xl border border-gray-200 bg-white/70 p-4 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-white/10 dark:bg-white/5">
142+
<div class="flex items-center gap-3">
143+
<div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand text-white">📘</div>
144+
<div class="min-w-0">
145+
<h3 class="font-semibold">Documentation</h3>
146+
<p class="text-sm text-gray-600 dark:text-gray-400">Get started, API, guides & examples.</p>
147+
</div>
46148
</div>
47-
</section>
48-
</div>
149+
</a>
150+
</li>
151+
<li>
152+
<a href="https://bsky.app/profile/basisvr.org" class="group block rounded-2xl border border-gray-200 bg-white/70 p-4 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-white/10 dark:bg-white/5">
153+
<div class="flex items-center gap-3">
154+
<div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-sky-500 text-white">🦋</div>
155+
<div class="min-w-0">
156+
<h3 class="font-semibold">Bluesky</h3>
157+
<p class="text-sm text-gray-600 dark:text-gray-400">Updates and community posts.</p>
158+
</div>
159+
</div>
160+
</a>
161+
</li>
162+
<li>
163+
<a href="https://x.com/BasisVR" class="group block rounded-2xl border border-gray-200 bg-white/70 p-4 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-white/10 dark:bg-white/5">
164+
<div class="flex items-center gap-3">
165+
<div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-gray-900 text-white">𝕏</div>
166+
<div class="min-w-0">
167+
<h3 class="font-semibold">Twitter</h3>
168+
<p class="text-sm text-gray-600 dark:text-gray-400">Short news & release notes.</p>
169+
</div>
170+
</div>
171+
</a>
172+
</li>
173+
<li class="sm:col-span-2">
174+
<a href="https://discord.gg/v6ve6WT562" class="group block rounded-2xl border border-gray-200 bg-white/70 p-5 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-white/10 dark:bg-white/5">
175+
<div class="flex items-center gap-3">
176+
<div class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-600 text-white">💬</div>
177+
<div class="min-w-0">
178+
<h3 class="font-semibold">Join the Basis Discord</h3>
179+
<p class="text-sm text-gray-600 dark:text-gray-400">Hang out with other VR creators, ask questions, and share what you’re building.</p>
180+
</div>
181+
</div>
182+
</a>
183+
</li>
184+
<li>
185+
<a href="https://opencollective.com/basis" class="group block rounded-2xl border border-gray-200 bg-white/70 p-4 shadow-sm backdrop-blur transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-white/10 dark:bg-white/5">
186+
<div class="flex items-center gap-3">
187+
<div class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500 text-white">💰</div>
188+
<div class="min-w-0">
189+
<h3 class="font-semibold">Open Collective</h3>
190+
<p class="text-sm text-gray-600 dark:text-gray-400">Support development and hosting.</p>
191+
</div>
192+
</div>
193+
</a>
194+
</li>
195+
</ul>
196+
</section>
197+
198+
<!-- Footer -->
199+
<footer class="mx-auto mt-16 max-w-7xl border-t border-gray-200 pt-6 text-sm text-gray-500 dark:border-white/10 dark:text-gray-400 text-center">
200+
<p>&copy; <span id="year"></span> BasisVR. MIT Licensed.</p>
201+
</footer>
202+
</div>
203+
204+
<script>document.getElementById('year').textContent=new Date().getFullYear();</script>
49205
</body>
50206
</html>

0 commit comments

Comments
 (0)