Initial commit: Vanity on Tour Linktree landing page
- Static HTML/CSS Linktree-style landing page - Responsive design with dark theme - Project showcase (StaySense, Expense Logbook, Blog, RSS-Bot) - Social media links and contact information - GitHub Actions workflow for automated deployment - Complete documentation and setup instructions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
commit
1b5762a849
11 changed files with 764 additions and 0 deletions
10
.claude/settings.local.json
Normal file
10
.claude/settings.local.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(git init)",
|
||||||
|
"Bash(git add .)"
|
||||||
|
],
|
||||||
|
"deny": [],
|
||||||
|
"ask": []
|
||||||
|
}
|
||||||
|
}
|
||||||
29
.github/workflows/deploy.yml
vendored
Normal file
29
.github/workflows/deploy.yml
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
name: Deploy go.vanityontour.de
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [ "main" ]
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Install rsync
|
||||||
|
run: sudo apt-get update && sudo apt-get install -y rsync
|
||||||
|
|
||||||
|
- name: Setup SSH
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
mkdir -p ~/.ssh
|
||||||
|
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
|
||||||
|
chmod 600 ~/.ssh/id_ed25519
|
||||||
|
ssh-keyscan -p "${{ secrets.SSH_PORT }}" "${{ secrets.SSH_HOST }}" >> ~/.ssh/known_hosts
|
||||||
|
|
||||||
|
- name: Deploy via rsync
|
||||||
|
shell: bash
|
||||||
|
run: |
|
||||||
|
rsync -az --delete --exclude ".git/" --exclude ".github/" -e "ssh -p ${{ secrets.SSH_PORT }} -i ~/.ssh/id_ed25519" ./ "${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.DEPLOY_PATH }}"
|
||||||
1
CNAME
Normal file
1
CNAME
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
go.vanityontour.de
|
||||||
38
CODEX_NOTES.md
Normal file
38
CODEX_NOTES.md
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
# CODEX_NOTES.md – Deploy & Betrieb (Copy/Paste für Codex)
|
||||||
|
|
||||||
|
## Ziel
|
||||||
|
Statische Landingpage soll automatisch bei jedem Push auf `main` nach `go.vanityontour.de` deployed werden.
|
||||||
|
|
||||||
|
## Repo-Struktur
|
||||||
|
- `index.html`
|
||||||
|
- `assets/css/style.css`
|
||||||
|
- `assets/img/*`
|
||||||
|
- `.github/workflows/deploy.yml`
|
||||||
|
|
||||||
|
## Deployment-Mechanik
|
||||||
|
- GitHub Actions Workflow:
|
||||||
|
- Checkout Repo
|
||||||
|
- SSH-Key in Runner schreiben
|
||||||
|
- `rsync` der Dateien auf Server
|
||||||
|
- Optional: Berechtigungen setzen
|
||||||
|
|
||||||
|
## GitHub Secrets (Actions)
|
||||||
|
- `SSH_HOST`: Hostname oder IP
|
||||||
|
- `SSH_USER`: SSH-User
|
||||||
|
- `SSH_PORT`: SSH-Port (default 22)
|
||||||
|
- `SSH_PRIVATE_KEY`: Private Key (PEM/OPENSSH)
|
||||||
|
- `DEPLOY_PATH`: Zielpfad auf dem Server (CloudPanel: `/home/cloudpanel/htdocs/go.vanityontour.de/`)
|
||||||
|
|
||||||
|
## Server Anforderungen
|
||||||
|
- SSH aktiv
|
||||||
|
- `rsync` installiert
|
||||||
|
- Zielordner existiert und ist beschreibbar
|
||||||
|
- Webserver (Nginx/Apache) zeigt auf `DEPLOY_PATH`
|
||||||
|
|
||||||
|
## DNS
|
||||||
|
- `go.vanityontour.de` → A/AAAA auf Server-IP
|
||||||
|
- SSL via Let's Encrypt (CloudPanel kann das)
|
||||||
|
|
||||||
|
## Hinweise
|
||||||
|
- OpenGraph Bild: ersetze `assets/img/og.jpg` (1200x630)
|
||||||
|
- Links in `index.html` aktualisieren (App Store, GitHub Repo URLs, Social URLs)
|
||||||
54
DOMAINS.md
Normal file
54
DOMAINS.md
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
# Vanity on Tour – Domain Brainstorm
|
||||||
|
|
||||||
|
## Ultra Kurz (Branding-Level)
|
||||||
|
- vot.one
|
||||||
|
- vot.zone
|
||||||
|
- vot.page
|
||||||
|
- vot.run
|
||||||
|
- vot.tools
|
||||||
|
- vot.live
|
||||||
|
- vot.link
|
||||||
|
- vot.bio
|
||||||
|
- vot.to
|
||||||
|
- vot.app
|
||||||
|
|
||||||
|
## Mit Vanity im Fokus
|
||||||
|
- vanitygo.de
|
||||||
|
- vanityhub.de
|
||||||
|
- vanity.tools
|
||||||
|
- vanity.live
|
||||||
|
- vanity.page
|
||||||
|
- vanity.bio
|
||||||
|
- vanity.click
|
||||||
|
- vanity-now.de
|
||||||
|
- vanity.app
|
||||||
|
- vanity.run
|
||||||
|
|
||||||
|
## Vanlife + Tech Touch
|
||||||
|
- vanitytech.de
|
||||||
|
- vantech.life
|
||||||
|
- vanity.dev
|
||||||
|
- vanity.tools
|
||||||
|
- vot.dev
|
||||||
|
- vanity.digital
|
||||||
|
- vanity.systems
|
||||||
|
- vanity.space
|
||||||
|
- vanity.network
|
||||||
|
- vot.systems
|
||||||
|
|
||||||
|
## Persönlicher Ansatz
|
||||||
|
- olivergo.de
|
||||||
|
- go-oliver.de
|
||||||
|
- giertz.link
|
||||||
|
- giertz.tech
|
||||||
|
- giertz.dev
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Empfohlene Favoriten
|
||||||
|
|
||||||
|
1. vot.to
|
||||||
|
2. vanity.link
|
||||||
|
3. vot.app
|
||||||
|
4. vanity.tools
|
||||||
|
5. go.vanityontour.de
|
||||||
62
README.md
Normal file
62
README.md
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
# go.vanityontour.de – Static Landing
|
||||||
|
|
||||||
|
Diese Seite ist **komplett statisch** (HTML/CSS). Kein Build-Step, kein Node, kein Stress.
|
||||||
|
|
||||||
|
## Lokal testen
|
||||||
|
Einfach den Ordner öffnen – oder z.B. mit Python:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 -m http.server 8080
|
||||||
|
```
|
||||||
|
|
||||||
|
Dann im Browser: http://localhost:8080
|
||||||
|
|
||||||
|
## Links anpassen
|
||||||
|
In `index.html` sind ein paar **Platzhalter-Links** (z.B. GitHub Repo / App-Store). Ersetze sie durch deine echten URLs.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Deployment via GitHub Actions (SSH + rsync)
|
||||||
|
|
||||||
|
Die Workflow-Datei liegt hier:
|
||||||
|
`.github/workflows/deploy.yml`
|
||||||
|
|
||||||
|
## Voraussetzungen auf dem Server
|
||||||
|
- SSH-Zugriff
|
||||||
|
- Zielverzeichnis existiert (z.B. CloudPanel):
|
||||||
|
- `/home/cloudpanel/htdocs/go.vanityontour.de/` (häufig)
|
||||||
|
- oder dein eigener Pfad
|
||||||
|
|
||||||
|
- `rsync` installiert:
|
||||||
|
- Debian/Ubuntu: `sudo apt-get update && sudo apt-get install -y rsync`
|
||||||
|
|
||||||
|
## GitHub Secrets anlegen (Repo → Settings → Secrets and variables → Actions)
|
||||||
|
- `SSH_HOST` (z.B. `your-server.example`)
|
||||||
|
- `SSH_USER` (z.B. `root` oder `cloudpanel`)
|
||||||
|
- `SSH_PORT` (z.B. `22`)
|
||||||
|
- `SSH_PRIVATE_KEY` (private key für den Deploy-User)
|
||||||
|
- `DEPLOY_PATH` (z.B. `/home/cloudpanel/htdocs/go.vanityontour.de/`)
|
||||||
|
|
||||||
|
## DNS (go.vanityontour.de)
|
||||||
|
Setze einen **A-Record** (oder AAAA) auf die Server-IP.
|
||||||
|
Alternativ ein CNAME auf eine passende Ziel-Subdomain, wenn du das so betreibst.
|
||||||
|
|
||||||
|
## Nginx (Beispiel)
|
||||||
|
Wenn du Nginx selbst konfigurierst:
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
server_name go.vanityontour.de;
|
||||||
|
root /home/cloudpanel/htdocs/go.vanityontour.de;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ =404;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Danach:
|
||||||
|
```bash
|
||||||
|
sudo nginx -t && sudo systemctl reload nginx
|
||||||
|
```
|
||||||
284
assets/css/style.css
Normal file
284
assets/css/style.css
Normal file
|
|
@ -0,0 +1,284 @@
|
||||||
|
:root{
|
||||||
|
--bg:#0b0f14;
|
||||||
|
--panel:#0f1720;
|
||||||
|
--panel2:#0c141c;
|
||||||
|
--text:#e9eef6;
|
||||||
|
--muted:#a8b3c2;
|
||||||
|
--line:rgba(255,255,255,.10);
|
||||||
|
--accent:#ff9b54;
|
||||||
|
--accent2:#ffd29a;
|
||||||
|
--shadow: 0 18px 60px rgba(0,0,0,.45);
|
||||||
|
--radius:18px;
|
||||||
|
--max:1100px;
|
||||||
|
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
|
||||||
|
}
|
||||||
|
|
||||||
|
*{ box-sizing:border-box; }
|
||||||
|
html,body{ height:100%; }
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
font-family:var(--font);
|
||||||
|
background: radial-gradient(1200px 700px at 20% -10%, rgba(255,155,84,.18), transparent 65%),
|
||||||
|
radial-gradient(900px 600px at 85% 5%, rgba(255,210,154,.12), transparent 60%),
|
||||||
|
var(--bg);
|
||||||
|
color:var(--text);
|
||||||
|
line-height:1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{ color:inherit; text-decoration:none; }
|
||||||
|
a:hover{ text-decoration:underline; }
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width: min(var(--max), calc(100% - 40px));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip{
|
||||||
|
position:absolute; left:-999px; top:auto;
|
||||||
|
width:1px; height:1px; overflow:hidden;
|
||||||
|
}
|
||||||
|
.skip:focus{
|
||||||
|
left:20px; top:16px; width:auto; height:auto;
|
||||||
|
padding:10px 14px; border-radius:10px;
|
||||||
|
background:var(--panel); border:1px solid var(--line);
|
||||||
|
z-index:999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header{
|
||||||
|
position:sticky; top:0; z-index:50;
|
||||||
|
background: rgba(11,15,20,.75);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom:1px solid var(--line);
|
||||||
|
}
|
||||||
|
.header-inner{
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items:center;
|
||||||
|
padding: 14px 0;
|
||||||
|
gap:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand{ display:flex; align-items:center; gap:12px; }
|
||||||
|
.brand-mark{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
|
||||||
|
.brand-title{ font-weight:800; letter-spacing:.2px; }
|
||||||
|
.brand-sub{ font-size:.92rem; color:var(--muted); }
|
||||||
|
|
||||||
|
.top-nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
|
||||||
|
.nav-link{
|
||||||
|
padding:8px 10px;
|
||||||
|
border-radius:10px;
|
||||||
|
border:1px solid transparent;
|
||||||
|
color:var(--muted);
|
||||||
|
}
|
||||||
|
.nav-link:hover{
|
||||||
|
text-decoration:none;
|
||||||
|
color:var(--text);
|
||||||
|
border-color: var(--line);
|
||||||
|
background: rgba(255,255,255,.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero{ padding: 56px 0 36px; }
|
||||||
|
.hero-inner{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 1.2fr .8fr;
|
||||||
|
gap: 28px;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
.kicker{
|
||||||
|
display:inline-block;
|
||||||
|
padding:6px 10px;
|
||||||
|
border-radius:999px;
|
||||||
|
border:1px solid var(--line);
|
||||||
|
background: rgba(255,255,255,.03);
|
||||||
|
color:var(--muted);
|
||||||
|
margin:0 0 14px;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
margin:0 0 14px;
|
||||||
|
font-size: clamp(2.0rem, 3.4vw, 3.2rem);
|
||||||
|
line-height:1.1;
|
||||||
|
letter-spacing:-.6px;
|
||||||
|
}
|
||||||
|
.accent{ color: var(--accent2); }
|
||||||
|
.lead{
|
||||||
|
margin:0 0 18px;
|
||||||
|
color:var(--muted);
|
||||||
|
max-width: 52ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
|
||||||
|
.btn{
|
||||||
|
display:inline-flex; align-items:center; justify-content:center;
|
||||||
|
padding: 11px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border:1px solid var(--line);
|
||||||
|
background: rgba(255,255,255,.03);
|
||||||
|
box-shadow: 0 0 0 rgba(0,0,0,0);
|
||||||
|
font-weight:700;
|
||||||
|
transition: transform .12s ease, background .12s ease, border-color .12s ease;
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
.btn:hover{ text-decoration:none; transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
|
||||||
|
.btn.primary{
|
||||||
|
border-color: rgba(255,155,84,.55);
|
||||||
|
background: linear-gradient(180deg, rgba(255,155,84,.28), rgba(255,155,84,.10));
|
||||||
|
}
|
||||||
|
.btn.ghost{ color:var(--text); }
|
||||||
|
|
||||||
|
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; }
|
||||||
|
.badge{
|
||||||
|
font-size:.88rem;
|
||||||
|
padding:6px 10px;
|
||||||
|
border-radius:999px;
|
||||||
|
border:1px solid var(--line);
|
||||||
|
color:var(--muted);
|
||||||
|
background: rgba(255,255,255,.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-art{
|
||||||
|
color: var(--accent);
|
||||||
|
background: linear-gradient(180deg, rgba(255,155,84,.16), rgba(255,155,84,.05));
|
||||||
|
border: 1px solid rgba(255,255,255,.10);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
.hero-art svg{ width:100%; height:auto; display:block; }
|
||||||
|
|
||||||
|
.section{ padding: 44px 0; }
|
||||||
|
.section.alt{
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.section-head h2{
|
||||||
|
margin:0 0 6px;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
letter-spacing:-.2px;
|
||||||
|
}
|
||||||
|
.section-head p{ margin:0 0 18px; color:var(--muted); }
|
||||||
|
|
||||||
|
.grid{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0,1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
|
||||||
|
border:1px solid var(--line);
|
||||||
|
box-shadow: 0 10px 40px rgba(0,0,0,.25);
|
||||||
|
padding: 18px;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
justify-content:space-between;
|
||||||
|
min-height: 210px;
|
||||||
|
}
|
||||||
|
.card h3{ margin:8px 0 10px; font-size:1.25rem; }
|
||||||
|
.card p{ margin:0 0 14px; color:var(--muted); }
|
||||||
|
|
||||||
|
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }
|
||||||
|
.pill{
|
||||||
|
display:inline-flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255,155,84,.18);
|
||||||
|
border:1px solid rgba(255,155,84,.35);
|
||||||
|
font-size:.85rem;
|
||||||
|
font-weight:800;
|
||||||
|
color: var(--accent2);
|
||||||
|
}
|
||||||
|
.pill.subtle{
|
||||||
|
background: rgba(255,255,255,.05);
|
||||||
|
border-color: var(--line);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.note{
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-radius: 14px;
|
||||||
|
border:1px dashed rgba(255,255,255,.18);
|
||||||
|
background: rgba(255,255,255,.02);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.split{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap: 18px;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
.support-actions{ display:flex; gap:10px; flex-wrap:wrap; }
|
||||||
|
|
||||||
|
.social{
|
||||||
|
display:flex;
|
||||||
|
gap:10px;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.social-link{
|
||||||
|
border:1px solid var(--line);
|
||||||
|
background: rgba(255,255,255,.03);
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.social-link:hover{ text-decoration:none; transform: translateY(-1px); }
|
||||||
|
|
||||||
|
.contact{
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border:1px solid var(--line);
|
||||||
|
background: rgba(255,255,255,.02);
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.contact h3{ margin:0 0 8px; }
|
||||||
|
.fineprint{ margin:10px 0 0; color:var(--muted); font-size:.92rem; }
|
||||||
|
|
||||||
|
.faq{
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border:1px solid var(--line);
|
||||||
|
background: rgba(255,255,255,.02);
|
||||||
|
padding: 12px 14px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.faq summary{
|
||||||
|
cursor:pointer;
|
||||||
|
font-weight:800;
|
||||||
|
}
|
||||||
|
.faq-body{ color:var(--muted); padding-top: 10px; }
|
||||||
|
code{
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
font-size: .95em;
|
||||||
|
background: rgba(255,255,255,.06);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer{
|
||||||
|
padding: 22px 0;
|
||||||
|
border-top:1px solid var(--line);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.footer-inner{
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items:flex-start;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
.footer-links{ display:flex; gap:12px; flex-wrap:wrap; }
|
||||||
|
.footer-links a{ color: var(--muted); }
|
||||||
|
.footer-links a:hover{ color: var(--text); text-decoration:none; }
|
||||||
|
|
||||||
|
.muted{ color: var(--muted); }
|
||||||
|
|
||||||
|
@media (max-width: 900px){
|
||||||
|
.hero-inner{ grid-template-columns: 1fr; }
|
||||||
|
.hero-art{ order: -1; }
|
||||||
|
.grid{ grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
13
assets/img/favicon.svg
Normal file
13
assets/img/favicon.svg
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#ff9b54"/>
|
||||||
|
<stop offset="1" stop-color="#ffd29a"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="8" y="8" width="48" height="48" rx="14" fill="url(#g)" opacity="0.95"/>
|
||||||
|
<path d="M18 39h28c3 0 6 2 6 5v4H12v-4c0-3 3-5 6-5z" fill="#0b0f14" opacity="0.35"/>
|
||||||
|
<path d="M22 37l5-14h14l5 14" stroke="#0b0f14" stroke-opacity="0.55" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<circle cx="22" cy="48" r="4" fill="#0b0f14" opacity="0.55"/>
|
||||||
|
<circle cx="42" cy="48" r="4" fill="#0b0f14" opacity="0.55"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 668 B |
2
assets/img/og.jpg
Normal file
2
assets/img/og.jpg
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
This is a placeholder file. Replace it with a real OpenGraph image (recommended: 1200x630 JPG/PNG) at:
|
||||||
|
assets/img/og.jpg
|
||||||
7
assets/img/van.svg
Normal file
7
assets/img/van.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||||
|
<path d="M14 40h34c4 0 8 3 8 7v5H6v-5c0-4 4-7 8-7z" fill="#ff9b54" fill-opacity="0.22"/>
|
||||||
|
<path d="M20 38l6-16h20l6 16" stroke="#ffd29a" stroke-opacity="0.85" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<circle cx="20" cy="52" r="4.5" fill="#ffd29a" fill-opacity="0.9"/>
|
||||||
|
<circle cx="44" cy="52" r="4.5" fill="#ffd29a" fill-opacity="0.9"/>
|
||||||
|
<path d="M27 28h10" stroke="#ffd29a" stroke-opacity="0.85" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 527 B |
264
index.html
Normal file
264
index.html
Normal file
|
|
@ -0,0 +1,264 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<meta name="description" content="Vanity on Tour: Vanlife trifft Technik – Apps, Tools, Blog & Projekte." />
|
||||||
|
<title>Vanity on Tour – Go</title>
|
||||||
|
|
||||||
|
<!-- Open Graph -->
|
||||||
|
<meta property="og:title" content="Vanity on Tour – Go" />
|
||||||
|
<meta property="og:description" content="Vanlife trifft Technik – Apps, Tools, Blog & Projekte an einem Ort." />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://go.vanityontour.de/" />
|
||||||
|
<meta property="og:image" content="https://go.vanityontour.de/assets/img/og.jpg" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/style.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<a class="skip" href="#content">Zum Inhalt springen</a>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container header-inner">
|
||||||
|
<div class="brand">
|
||||||
|
<img class="brand-mark" src="/assets/img/van.svg" alt="" width="40" height="40" />
|
||||||
|
<div class="brand-text">
|
||||||
|
<div class="brand-title">Vanity on Tour</div>
|
||||||
|
<div class="brand-sub">Vanlife trifft Technik</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="top-nav" aria-label="Schnellzugriff">
|
||||||
|
<a class="nav-link" href="#projekte">Projekte</a>
|
||||||
|
<a class="nav-link" href="#support">Support</a>
|
||||||
|
<a class="nav-link" href="#social">Social</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="content">
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container hero-inner">
|
||||||
|
<div class="hero-copy">
|
||||||
|
<p class="kicker">🚐 unterwegs. technisch. ehrlich.</p>
|
||||||
|
<h1>Alles Wichtige von <span class="accent">Vanity on Tour</span> – an einem Ort.</h1>
|
||||||
|
<p class="lead">
|
||||||
|
Tools, Apps, Blog & Projekte – für Menschen, die lieber frei stehen als still sitzen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hero-cta">
|
||||||
|
<a class="btn primary" href="#projekte">Aktuelle Projekte</a>
|
||||||
|
<a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-badges" aria-label="Highlights">
|
||||||
|
<span class="badge">Schnell</span>
|
||||||
|
<span class="badge">Mobile‑first</span>
|
||||||
|
<span class="badge">DSGVO‑freundlich</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-art" aria-hidden="true">
|
||||||
|
<!-- Lightweight inline SVG (no external images required) -->
|
||||||
|
<svg viewBox="0 0 540 420" role="img" aria-label="">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0%" stop-color="currentColor" stop-opacity="0.35" />
|
||||||
|
<stop offset="100%" stop-color="currentColor" stop-opacity="0.05" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="b" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feGaussianBlur stdDeviation="18" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<rect x="40" y="40" width="460" height="300" rx="26" fill="url(#g)" />
|
||||||
|
<circle cx="390" cy="140" r="78" fill="currentColor" opacity="0.14" filter="url(#b)"/>
|
||||||
|
<circle cx="180" cy="260" r="96" fill="currentColor" opacity="0.10" filter="url(#b)"/>
|
||||||
|
<path d="M140 250h230c20 0 36 16 36 36v22H104v-22c0-20 16-36 36-36z" fill="currentColor" opacity="0.16"/>
|
||||||
|
<path d="M160 244l26-66h168l26 66" fill="none" stroke="currentColor" stroke-opacity="0.28" stroke-width="10" stroke-linecap="round" />
|
||||||
|
<circle cx="175" cy="324" r="22" fill="currentColor" opacity="0.22"/>
|
||||||
|
<circle cx="355" cy="324" r="22" fill="currentColor" opacity="0.22"/>
|
||||||
|
<path d="M220 196h100" stroke="currentColor" stroke-opacity="0.18" stroke-width="10" stroke-linecap="round"/>
|
||||||
|
<path d="M240 148h60" stroke="currentColor" stroke-opacity="0.18" stroke-width="10" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projekte" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2>Projekte</h2>
|
||||||
|
<p>Das Zeug, das wirklich klickt. (Und hoffentlich dein Vanlife leichter macht.)</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<article class="card">
|
||||||
|
<div class="card-top">
|
||||||
|
<span class="pill">Neu</span>
|
||||||
|
<h3>StaySense</h3>
|
||||||
|
<p>
|
||||||
|
Standort-Infos für Camper: Wetter‑Kontext, Umgebung & nützliche Hinweise –
|
||||||
|
direkt im Browser. <strong>Spots in der Nähe</strong> sind geplant (2026).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="btn primary" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">StaySense öffnen</a>
|
||||||
|
<a class="btn ghost" href="#faq">Was kann das?</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<div class="card-top">
|
||||||
|
<span class="pill subtle">App</span>
|
||||||
|
<h3>Vanity Expense Logbook</h3>
|
||||||
|
<p>
|
||||||
|
Ausgaben & Fahrten im Griff – fürs Leben unterwegs.
|
||||||
|
Ideal, wenn du wissen willst, wohin dein Geld fährt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Mehr erfahren</a>
|
||||||
|
<a class="btn ghost" href="#contact">Feedback geben</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<div class="card-top">
|
||||||
|
<span class="pill subtle">Blog</span>
|
||||||
|
<h3>Vanity on Tour</h3>
|
||||||
|
<p>
|
||||||
|
Produkttests, Stellplatz‑Tests, Technik‑Kram und gesellschaftliche Themen –
|
||||||
|
ohne Marketing-Zuckerguss.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a>
|
||||||
|
<a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Neueste Artikel</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<div class="card-top">
|
||||||
|
<span class="pill subtle">Tooling</span>
|
||||||
|
<h3>RSS‑News‑Bot</h3>
|
||||||
|
<p>
|
||||||
|
Automatisches Einlesen, Umformulieren, Tagging & Entwürfe für WordPress –
|
||||||
|
für News ohne Copy‑Paste‑Marathon.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<a class="btn primary" href="https://github.com/" target="_blank" rel="noopener">GitHub (Repo)</a>
|
||||||
|
<a class="btn ghost" href="#faq">Wie läuft das?</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="note">
|
||||||
|
<strong>Tipp:</strong> Ersetze „Mehr erfahren“ / „GitHub (Repo)“ durch deine finalen Links (App‑Store, Repo‑URL etc.).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="support" class="section alt">
|
||||||
|
<div class="container split">
|
||||||
|
<div>
|
||||||
|
<h2>Support</h2>
|
||||||
|
<p>
|
||||||
|
Wenn dir meine Tools, Tests oder Artikel helfen: Ein kleiner Support ist wie ein
|
||||||
|
Monster Energy – nicht zwingend gesund, aber sehr effektiv. 😄
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="support-actions">
|
||||||
|
<a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Support-Seite öffnen</a>
|
||||||
|
<a class="btn ghost" href="#contact">Kooperation anfragen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="social" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2>Social & Kontakt</h2>
|
||||||
|
<p>Such dir den Kanal aus – ich bin nicht wählerisch.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="social">
|
||||||
|
<a class="social-link" href="https://vanityontour.de" target="_blank" rel="noopener" aria-label="Website">🌐 Website</a>
|
||||||
|
<a class="social-link" href="https://github.com/" target="_blank" rel="noopener" aria-label="GitHub">💻 GitHub</a>
|
||||||
|
<a class="social-link" href="https://youtube.com" target="_blank" rel="noopener" aria-label="YouTube">▶️ YouTube</a>
|
||||||
|
<a class="social-link" href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram">📷 Instagram</a>
|
||||||
|
<a class="social-link" href="https://bsky.app" target="_blank" rel="noopener" aria-label="Bluesky">🦋 Bluesky</a>
|
||||||
|
<a class="social-link" href="https://x.com" target="_blank" rel="noopener" aria-label="X">𝕏 X</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="contact" class="contact">
|
||||||
|
<h3>Kontakt</h3>
|
||||||
|
<p>
|
||||||
|
Für Kooperationen, Presse oder „Kannst du mal eben…?“
|
||||||
|
<br />
|
||||||
|
<a href="mailto:kontakt@vanityontour.de">kontakt@vanityontour.de</a>
|
||||||
|
</p>
|
||||||
|
<p class="fineprint">
|
||||||
|
Hinweis: Diese Seite ist bewusst statisch & leichtgewichtig. Tracking nur, wenn du es aktiv einbaust.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="faq" class="section alt">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<h2>Mini‑FAQ</h2>
|
||||||
|
<p>Damit niemand raten muss, was Sache ist.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<details class="faq">
|
||||||
|
<summary>Ist StaySense eine App?</summary>
|
||||||
|
<div class="faq-body">
|
||||||
|
<p>
|
||||||
|
Eher eine Website, die sich wie eine App anfühlt. Du kannst sie überall nutzen –
|
||||||
|
ohne Store‑Download: <a href="https://staysense.vanityontour.de" target="_blank" rel="noopener">staysense.vanityontour.de</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="faq">
|
||||||
|
<summary>Warum keine Spots?</summary>
|
||||||
|
<div class="faq-body">
|
||||||
|
<p>
|
||||||
|
Fokus auf Standort‑Infos statt „hier ist ein Spot“. Spots in der Nähe sind geplant –
|
||||||
|
aber erst, wenn es sauber & sinnvoll umgesetzt ist.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="faq">
|
||||||
|
<summary>Kann ich das Layout schnell anpassen?</summary>
|
||||||
|
<div class="faq-body">
|
||||||
|
<p>
|
||||||
|
Ja: Links & Texte findest du in <code>index.html</code>. Styling in <code>assets/css/style.css</code>.
|
||||||
|
Kein Build‑Step, kein Framework, kein Drama.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container footer-inner">
|
||||||
|
<div>
|
||||||
|
<strong>Oliver / Vanity on Tour</strong><br/>
|
||||||
|
<span class="muted">Vanlife seit Jahren – Technik im Kopf, Staub an den Reifen.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="https://vanityontour.de" target="_blank" rel="noopener">Impressum</a>
|
||||||
|
<a href="https://vanityontour.de" target="_blank" rel="noopener">Datenschutz</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue