first commit

README.md

@@ -0,0 +1,39 @@
+# Documentation — Vault Warden (Bitwarden-compatible)
+
+Brief docs and quick-start for connecting Bitwarden clients and extensions to a self-hosted Vault Warden instance.
+
+**Live vault URL:** https://vault.depressionslair.com
+
+**Contents**
+- What this repo provides
+- How to preview locally
+- How to configure clients and extensions
+- Notes for contributors
+
+**What this repo provides**
+- A simple documentation web page (index.html) with step-by-step instructions for signing up, signing in, and pointing Bitwarden clients/extensions at your Vault Warden server.
+- Small illustrative SVG screenshots in `images/` used to show where to set the Server URL.
+
+**Preview locally**
+1. Open a terminal in this repository root.
+2. Start a quick HTTP server (Python 3):
+
+```bash
+python -m http.server 8000
+```
+
+3. Open http://localhost:8000 in your browser and view `index.html`.
+
+**Configure clients & extensions**
+- Browser extensions: install Bitwarden extension, open extension → Settings → set Server URL to `https://vault.depressionslair.com`, then sign in.
+- Desktop apps: open Bitwarden app → Settings → Advanced (or during login) set Server URL to `https://vault.depressionslair.com`.
+- Mobile apps: open Bitwarden app → Settings → Server (or Sync) → set Server URL and sign in.
+
+If you want to change the default vault URL shown on the page, edit `index.html` and update the `href` / displayed URL near the top.
+
+**Contributing**
+- Fix typos, improve instructions, or replace illustrative SVGs with real screenshots via pull requests.
+- Images live in `images/`.
+
+**License**
+This repository contains documentation and images; add a license file if you wish to apply one (e.g., MIT).

images/desktop-settings.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="420" viewBox="0 0 900 420">
+  <style>
+    .bg{fill:#071026}
+    .window{fill:#071a2a;stroke:#173447;stroke-width:2}
+    .panel{fill:#0b1220}
+    .highlight{fill:#072033;stroke:#6dd3f5;stroke-width:3}
+    .text{fill:#dff6ff;font-family:Arial, sans-serif;font-size:14px}
+    .muted{fill:#9aa4b2}
+  </style>
+  <rect width="100%" height="100%" class="bg"/>
+  <g transform="translate(40,30)">
+    <rect width="820" height="360" rx="10" class="window" />
+    <rect x="40" y="40" width="760" height="64" rx="6" class="panel" />
+    <text x="60" y="82" class="text">Settings › Advanced</text>
+    <rect x="60" y="120" width="640" height="48" rx="6" class="highlight" />
+    <text x="80" y="150" class="text">Server URL: https://vault.depressionslair.com</text>
+    <text x="60" y="200" class="muted">Desktop app &gt; Settings &gt; Advanced &gt; Server URL</text>
+  </g>
+</svg>

images/extension-settings.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="420" viewBox="0 0 900 420">
+  <style>
+    .bg{fill:#071026}
+    .window{fill:#071a2a;stroke:#173447;stroke-width:2}
+    .panel{fill:#0b1220}
+    .highlight{fill:#072033;stroke:#6dd3f5;stroke-width:3}
+    .text{fill:#dff6ff;font-family:Arial, sans-serif;font-size:14px}
+    .muted{fill:#9aa4b2}
+  </style>
+  <rect width="100%" height="100%" class="bg"/>
+  <g transform="translate(40,30)">
+    <rect width="820" height="360" rx="10" class="window" />
+    <rect x="18" y="18" width="240" height="320" rx="8" class="panel" />
+    <rect x="280" y="40" width="500" height="60" rx="6" class="highlight" />
+    <text x="300" y="75" class="text">Server URL</text>
+    <rect x="300" y="90" width="420" height="34" rx="6" fill="#091826" stroke="#23424f" />
+    <text x="310" y="112" class="text">https://vault.depressionslair.com</text>
+    <text x="300" y="150" class="muted">Open the extension &gt; Settings &gt; Server URL</text>
+  </g>
+</svg>

images/mobile-settings.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="760" viewBox="0 0 420 760">
+  <style>
+    .bg{fill:#071026}
+    .phone{fill:#071a2a;stroke:#173447;stroke-width:2}
+    .screen{fill:#0b1220}
+    .highlight{fill:#072033;stroke:#6dd3f5;stroke-width:3}
+    .text{fill:#dff6ff;font-family:Arial, sans-serif;font-size:12px}
+    .muted{fill:#9aa4b2}
+  </style>
+  <rect width="100%" height="100%" class="bg"/>
+  <g transform="translate(30,20)">
+    <rect x="0" y="0" width="360" height="720" rx="24" class="phone" />
+    <rect x="14" y="28" width="332" height="664" rx="12" class="screen" />
+    <rect x="40" y="80" width="260" height="36" rx="6" class="highlight" />
+    <text x="52" y="104" class="text">Server URL</text>
+    <text x="52" y="130" class="text">https://vault.depressionslair.com</text>
+    <text x="40" y="180" class="muted">Mobile app › Settings › Server</text>
+  </g>
+</svg>

index.html

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Documentation - Vault Warden</title>
+        <meta name="description" content="How to sign up and sign into Vault Warden using Bitwarden." />
+        <link rel="icon" href="favicon.ico" />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <header>
+            <div class="container">
+                <h1>Sign up & sign in — Vault Warden (Bitwarden-compatible)</h1>
+                <p class="subtitle">Your vault URL: <a id="vault-link" href="https://vault.depressionslair.com">https://vault.depressionslair.com</a> <button id="copy-url">Copy</button></p>
+            </div>
+        </header>
+
+        <main>
+            <div class="container">
+                <section class="hero">
+                    <h2>Welcome to your Vault Warden documentation</h2>
+                    <p>Follow the quick steps below to create an account, sign in, and connect Bitwarden clients and browser extensions to Vault Warden.</p>
+                </section>
+
+                <section class="card">
+                    <h3>1. Sign up (first time)</h3>
+                    <ol>
+                        <li>Open the vault URL in your browser: <a href="https://vault.depressionslair.com">https://vault.depressionslair.com</a></li>
+                        <li>Choose <strong>Create Account</strong> (or similar) on the web UI.</li>
+                        <li>Enter your email, a strong master password, and any required information. Save a secure backup of your recovery code if shown.</li>
+                    </ol>
+                </section>
+
+                <section class="card">
+                    <h3>2. Sign in</h3>
+                    <ol>
+                        <li>Open the vault URL and click <strong>Log in</strong>.</li>
+                        <li>Enter your email and master password.</li>
+                        <li>If your server requires it, enter a 2FA code (TOTP) or use your configured second factor.</li>
+                    </ol>
+                </section>
+
+                <section class="card">
+                    <h3>3. Browser Extensions</h3>
+                    <p>Install official Bitwarden extensions and point them to your vault.</p>
+                    <ul>
+                        <li><a href="https://bitwarden.com/download/">Chrome / Edge / Firefox / Safari extensions (official)</a></li>
+                        <li>After install: open extension &gt; Accessing: &gt; self hosted &mdash; set to <code>https://vault.depressionslair.com</code>.</li>
+                        <li>Sign in using your vault credentials from step 1.</li>
+                    </ul>
+                </section>
+
+                <section class="card">
+                    <h3>Browser extension — step-by-step</h3>
+                    <p>Below are step-by-step instructions for common browsers.</p> 
+                    <h4>Chrome / Edge</h4>
+                    <ol>
+                        <li>Install the Bitwarden extension from the Chrome Web Store / Edge Add-ons.</li>
+                        <li>Click the Bitwarden icon in your toolbar.</li>
+                        <li>Open <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
+                        <li>Find <strong>Server URL</strong> or <strong>Server</strong> field and enter <code>https://vault.depressionslair.com</code>.</li>
+                        <li>Save and sign in with your account.</li>
+                    </ol>
+                    <figure>
+                        <img src="images/bitwardenextension.svg" alt="Bitwarden browser extension settings showing Server URL field" />
+                        <img src="images/extension-settings.svg" alt="Extension settings showing Server URL field" />
+                        <figcaption>Example: Change the Server URL inside the extension settings.</figcaption>
+                    </figure>
+
+                    <h4>Firefox</h4>
+                    <ol>
+                        <li>Install the Bitwarden add-on from Mozilla Add-ons.</li>
+                        <li>Go to <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
+                        <li>Set the <strong>Server URL</strong> to <code>https://vault.depressionslair.com</code>, save, then sign in.</li>
+                    </ol>
+                </section>
+
+                <section class="card">
+                    <h3>Desktop apps — step-by-step</h3>
+                    <ol>
+                        <li>Download and install the Bitwarden desktop app for your OS from <a href="https://bitwarden.com/download/">Bitwarden Downloads</a>.</li>
+                        <li>Open the app, go to <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
+                        <li>Enter the <strong>Server URL</strong>: <code>https://vault.depressionslair.com</code>.</li>
+                        <li>Save and sign in using your email and master password.</li>
+                    </ol>
+                    <figure>
+                        <img src="images/bitwardenapp.svg" alt="Bitwarden desktop app login screen showing Server URL field" />
+                        <img src="images/desktop-settings.svg" alt="Desktop app settings showing Server URL field" />
+                        <figcaption>Example: Desktop app Advanced settings with Server URL highlighted.</figcaption>
+                    </figure>
+                </section>
+
+                <section class="card">
+                    <h3>Mobile apps — step-by-step (iOS & Android)</h3>
+                    <ol>
+                        <li>Install the Bitwarden app from the App Store (iOS) or Google Play (Android).</li>
+                        <li>Open the app, go to <strong>Accessing: </strong> &gt; <strong>self hosted</strong>.</li>
+                        <li>Set the <strong>Server URL</strong> to <code>https://vault.depressionslair.com</code> and save.</li>
+                        <li>Sign in with your credentials and enable biometrics if desired.</li>
+                    </ol>
+                    <figure>
+                        <img src="images/bitwardeniosapp.svg" alt="Bitwarden mobile app login screen showing Server URL field" />
+                        <img src="images/mobile-settings.svg" alt="Mobile app settings showing Server URL field" />
+                        <figcaption>Example: Mobile settings where you set the Server URL.</figcaption>
+                    </figure>
+                </section>
+
+                <section class="grid">
+                    <div class="card">
+                        <h3>Desktop Apps</h3>
+                        <p>Windows, macOS, Linux</p>
+                        <ul>
+                            <li>Download from <a href="https://bitwarden.com/download/">Bitwarden Downloads</a>.</li>
+                            <li>Open app &gt; <strong>Accessing: </strong> &gt; <strong>self hosted</strong> &gt; <strong>Server URL</strong>  set to <code>https://vault.depressionslair.com</code>.</li>
+                        </ul>
+                        <figure>
+                        <img src="images/bitwardenapp.svg" alt="Bitwarden desktop app login screen showing Server URL field" />
+                        <img src="images/desktop-settings.svg" alt="Desktop app settings showing Server URL field" />
+                        <figcaption>Example: Desktop app Advanced settings with Server URL highlighted.</figcaption>
+                    </figure>
+                    </div>
+
+                    <div class="card">
+                        <h3>Mobile Apps</h3>
+                        <p>iOS & Android</p>
+                        <ul>
+                            <li>Install from the App Store or Google Play via <a href="https://bitwarden.com/download/">Bitwarden Downloads</a>.</li>
+                            <li>Open app &gt; <strong>Accessing: </strong> &gt; <strong>self hosted</strong> &gt; <strong>Server URL</strong> &mdash; enter <code>https://vault.depressionslair.com</code> and sign in.</li>
+                        </ul>
+                    </div>
+                </section>
+
+                <section class="card">
+                    <h3>Troubleshooting & Tips</h3>
+                    <ul>
+                        <li>If the extension/app cannot connect, double-check the server URL and firewall rules.</li>
+                        <li>Use a strong, unique master password and enable 2FA for extra security.</li>
+                    </ul>
+                </section>
+
+                <footer class="card muted">
+                    <p>Need help? Contact your server administrator (EhChad).</p>
+                </footer>
+            </div>
+        </main>
+
+        <script src="index.js"></script>
+    </body>
+</html>

index.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', function(){
+	const copyBtn = document.getElementById('copy-url');
+	const vaultLink = document.getElementById('vault-link');
+	if(copyBtn && vaultLink){
+		copyBtn.addEventListener('click', async ()=>{
+			try{
+				await navigator.clipboard.writeText(vaultLink.href);
+				copyBtn.textContent = 'Copied!';
+				setTimeout(()=> copyBtn.textContent = 'Copy', 1800);
+			}catch(e){
+				const ta = document.createElement('textarea');
+				ta.value = vaultLink.href; document.body.appendChild(ta); ta.select();
+				try{ document.execCommand('copy'); copyBtn.textContent='Copied!'}catch(err){alert('Copy failed; please copy manually.')}
+				ta.remove(); setTimeout(()=> copyBtn.textContent = 'Copy',1800);
+			}
+		});
+	}
+});
+

style.css

@@ -0,0 +1,50 @@
+:root{
+	--bg:#0f1724;
+	--card:#0b1220;
+	--accent:#6dd3f5;
+	--muted:#9aa4b2;
+	--glass: rgba(255,255,255,0.03);
+}
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+	margin:0;
+	font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
+	background:linear-gradient(180deg,#071026 0%, #071a2a 60%);
+	color:#e6eef6;
+	-webkit-font-smoothing:antialiased;
+}
+.container{max-width:980px;margin:28px auto;padding:0 20px}
+header{padding:28px 0}
+header h1{margin:0;font-size:1.5rem}
+.subtitle{margin:6px 0 0;color:var(--muted);font-size:0.95rem}
+.subtitle a{color:var(--accent);text-decoration:underline}
+#copy-url{margin-left:10px;padding:6px 8px;border-radius:6px;border:0;background:var(--accent);color:#072033;cursor:pointer}
+.hero{background:linear-gradient(90deg, rgba(109,211,245,0.06), rgba(109,211,245,0.02));padding:18px;border-radius:10px;margin-bottom:18px}
+.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);padding:16px;border-radius:10px;margin-bottom:14px}
+.grid{display:grid;grid-template-columns:1fr;gap:14px}
+@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}
+h2{margin:0 0 8px}
+h3{margin:0 0 8px}
+ol,ul{margin:8px 0 0 20px;color:var(--muted)}
+code{background:var(--glass);padding:2px 6px;border-radius:6px;color:var(--accent)}
+.muted{opacity:0.95;font-size:0.95rem}
+footer.card{background:transparent;border:0;padding-top:6px}
+button{font:inherit}
+
+/* small utilities */
+.subtitle button{font-weight:600}
+
+/* link styles */
+a{color:var(--accent)}
+
+/* responsive tweaks */
+@media(max-width:520px){header h1{font-size:1.2rem}.container{padding:0 14px}}
+
+figure{margin:12px 0 0;border-radius:8px;overflow:hidden}
+figure img{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,0.04)}
+figcaption{font-size:0.9rem;color:var(--muted);margin-top:8px}
+
+.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+
+