opensim-stack.github.io/share-it.html at main · opensim-stack/opensim-stack.github.io · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Share It — OpenSim AI Stack</title>
  <meta name="description" content="Share your OpenSim AI Stack grid with others. Ports and hypergrid basics.">
  <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=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            dark: { 900: '#0a0a12', 800: '#12121f', 700: '#1a1a2e', 600: '#252542' },
            neon: { primary: '#8b5cf6', secondary: '#d946ef', accent: '#06b6d4' }
          }
        }
      }
    }
  </script>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="min-h-screen bg-dark-900 text-gray-100">
  <canvas id="code-rain"></canvas>
  <div class="cyber-grid"></div>
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>

  <nav class="navbar fixed top-0 left-0 right-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <a href="index.html" class="flex items-center gap-3 group">
        <img src="opensim-stack.png" alt="OpenSim AI Stack" class="h-10 w-auto drop-shadow-lg group-hover:drop-shadow-[0_0_10px_rgba(139,92,246,0.8)] transition-all">
        <span class="text-xl font-bold gradient-text">OpenSim AI Stack</span>
      </a>
      <div class="hidden md:flex items-center gap-1">
        <a href="index.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Home</a>
        <a href="the-bots.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">The Bots</a>
        <a href="get-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Get It</a>
        <a href="play-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Play It</a>
        <a href="extend-it.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Extend It</a>
        <a href="share-it.html" class="px-3 py-2 rounded-lg text-neon-primary transition-colors">Share It</a>
        <a href="docs/index.html" class="px-3 py-2 rounded-lg text-gray-100 hover:text-neon-primary transition-colors">Docs</a>
        <a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="ml-2 px-4 py-2 rounded-lg bg-neon-primary text-white font-medium hover:bg-violet-500 transition-colors btn-glow">GitHub</a>
      </div>
      <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg text-gray-100 hover:bg-dark-700 transition-colors" aria-label="Toggle menu">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
    <div id="mobile-menu" class="mobile-menu md:hidden border-t border-neon-primary/20 bg-dark-900/95 backdrop-blur">
      <div class="container mx-auto px-4 py-4 flex flex-col gap-2">
        <a href="index.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Home</a>
        <a href="the-bots.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">The Bots</a>
        <a href="get-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Get It</a>
        <a href="play-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Play It</a>
        <a href="extend-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Extend It</a>
        <a href="share-it.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Share It</a>
        <a href="docs/index.html" class="px-4 py-2 rounded-lg text-gray-100 hover:bg-dark-700">Docs</a>
        <a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg bg-neon-primary text-white text-center">GitHub</a>
      </div>
    </div>
  </nav>

  <main class="pt-20">
    <section class="container mx-auto px-4 py-16 lg:py-24">
      <div class="max-w-4xl mx-auto">
        <div class="text-center mb-12 animate-on-scroll">
          <h1 class="text-4xl lg:text-6xl font-extrabold mb-4 text-white">Share <span class="gradient-text neon-text">It</span></h1>
          <p class="text-lg text-gray-400">Open your grid to friends and the wider metaverse.</p>
        </div>

        <div class="flex items-start gap-3 mb-4 p-4 rounded-lg border border-red-500/30 bg-red-500/10 text-gray-100 mt-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <span><strong>Don't do this</strong>. Not yet. No really, We are not quite ready to say this is as safe as it can be.</span>
          </div>

        <div class="bg-dark-800/80 backdrop-blur border border-neon-primary/20 p-6 lg:p-8 rounded-xl mb-8 animate-on-scroll">
          <h2 class="text-2xl font-bold mb-6 flex items-center gap-3 text-white">
            <span class="w-8 h-8 rounded-lg bg-neon-primary/20 flex items-center justify-center text-neon-primary text-sm">1</span>
            Open Ports
          </h2>
          <p class="text-gray-300 mb-4">By default the stack exposes the following ports on your host. Forward them through your firewall/router if you want others to connect.</p>
          <div class="overflow-x-auto">
            <table class="data-table text-sm">
              <thead>
                <tr><th>Port</th><th>Protocol</th><th>Service</th><th>Purpose</th></tr>
              </thead>
              <tbody>
                <tr><td><code>9000</code></td><td>TCP &amp; UDP</td><td>OpenSimulator</td><td>Region simulator HTTP and UDP traffic.</td></tr>
              </tbody>
            </table>
          </div>
          <div class="flex items-start gap-3 p-4 rounded-lg border border-orange-500/30 bg-orange-500/10 text-gray-100 mt-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <span>Default passwords are intentionally lax for local use. Change all credentials to strong passwords and/or bearer tokens where required. Note, the stack automatically uses strong passwords for the bots and opencode instances.</span>
          </div>
        </div>

        <div class="bg-dark-800/80 backdrop-blur border border-neon-secondary/20 p-6 lg:p-8 rounded-xl animate-on-scroll">
          <h2 class="text-2xl font-bold mb-6 flex items-center gap-3 text-white">
            <span class="w-8 h-8 rounded-lg bg-neon-secondary/20 flex items-center justify-center text-neon-secondary text-sm">2</span>
            Join the Hypergrid
          </h2>
          <div class="space-y-6">
            <p class="text-gray-300">OpenSimulator supports the <strong class="text-white">Hypergrid</strong>, a protocol that lets avatars teleport between independent grids as if they were one big metaverse. Once your grid is reachable on a public hostname, other users can visit by teleporting to a hypergrid address like:</p>
            <div class="relative">
              <pre id="code-hg"><code>&lt;OPENSIM_HOSTNAME&gt;:9000:Region Name</code></pre>
              <button class="copy-btn absolute top-2 right-2 px-3 py-1 rounded bg-dark-700 text-gray-300 text-xs hover:bg-dark-600 transition-colors" data-target="#code-hg">Copy</button>
            </div>
            <p class="text-gray-300">To travel from your grid to another, open the world map in your viewer and enter the destination hypergrid address.</p>
            <div class="grid md:grid-cols-2 gap-4">
              <a href="http://opensimulator.org/wiki/Hypergrid" target="_blank" rel="noopener" class="bg-dark-700/50 p-4 rounded-lg border border-neon-secondary/10 hover:border-neon-secondary/50 transition-colors group">
                <h3 class="font-semibold text-neon-secondary mb-1">Hypergrid on OpenSimulator Wiki</h3>
                <p class="text-sm text-gray-400">Official overview of how hypergrid linking works.</p>
              </a>
              <a href="http://opensimulator.org/wiki/Configuring_Hypergrid" target="_blank" rel="noopener" class="bg-dark-700/50 p-4 rounded-lg border border-neon-secondary/10 hover:border-neon-secondary/50 transition-colors group">
                <h3 class="font-semibold text-neon-secondary mb-1">Configuring Hypergrid</h3>
                <p class="text-sm text-gray-400">Detailed setup and troubleshooting guide.</p>
              </a>
            </div>
            <div class="flex items-start gap-3 p-4 rounded-lg border border-cyan-500/30 bg-cyan-500/10 text-gray-100">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>Specific hypergrid coordinates and grid registration steps will be added here once this project has its own public grid presence.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="border-t border-neon-primary/20 bg-dark-800/50 backdrop-blur mt-12">
    <div class="container mx-auto px-4 py-8">
      <div class="flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img src="opensim-stack.png" alt="OpenSim AI Stack" class="h-8 w-auto">
          <span class="font-bold gradient-text">OpenSim AI Stack</span>
        </div>
        <div class="flex gap-6 text-sm text-gray-400">
          <a href="https://github.com/opensim-stack/opensim-ai-docker" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">GitHub</a>
          <a href="https://hub.docker.com/repository/docker/bithatch/opensim-ai-standalone/general" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">Docker Hub</a>
          <a href="https://opensimulator.org/" target="_blank" rel="noopener" class="hover:text-neon-primary transition-colors">OpenSimulator</a>
        </div>
        <p class="text-sm text-gray-500">Experimental work in progress.</p>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>