import live www.sillylaird.ca webrootHEADmain

4 files changed, 306 insertions, 0 deletions

diff --git a/vibe.php b/vibe.php
new file mode 100644
index 0000000..42fa14b
--- /dev/null
+++ b/vibe.php
@@ -0,0 +1,9 @@
+<?php
+// vibe.php — current vibe config, edited via /admin.php
+// Do not edit manually unless you know what you're doing.
+
+return array (
+  'description' => 'My Current Vibe',
+  'url' => 'https://www.youtube.com/watch?v=pEN1eeyXsTU',
+  'updated' => '2026-05-29',
+);
diff --git a/vibe/admin.php b/vibe/admin.php
new file mode 100644
index 0000000..b418ef4
--- /dev/null
+++ b/vibe/admin.php
@@ -0,0 +1 @@
+<?php header("Location: /admin.php?section=vibe", true, 302); exit;
diff --git a/vibe/admin_vibe.php b/vibe/admin_vibe.php
new file mode 100644
index 0000000..b418ef4
--- /dev/null
+++ b/vibe/admin_vibe.php
@@ -0,0 +1 @@
+<?php header("Location: /admin.php?section=vibe", true, 302); exit;
diff --git a/vibe/index.php b/vibe/index.php
new file mode 100644
index 0000000..7128a7a
--- /dev/null
+++ b/vibe/index.php
@@ -0,0 +1,295 @@
+<?php
+$vibe = file_exists(__DIR__ . '/../vibe.php')
+    ? require __DIR__ . '/../vibe.php'
+    : ['description' => '', 'url' => '', 'updated' => ''];
+
+$desc    = htmlspecialchars($vibe['description'] ?? '', ENT_QUOTES, 'UTF-8');
+$url     = $vibe['url'] ?? '';
+$updated = htmlspecialchars($vibe['updated'] ?? '', ENT_QUOTES, 'UTF-8');
+$safe    = htmlspecialchars($url, ENT_QUOTES, 'UTF-8');
+
+function vibe_page_type(string $u): string {
+    if (empty($u)) return 'none';
+    $p   = strtolower(parse_url($u, PHP_URL_PATH) ?? '');
+    $ext = pathinfo($p, PATHINFO_EXTENSION);
+    if (in_array($ext, ['jpg','jpeg','png','gif','webp','bmp','svg','avif'])) return 'image';
+    if (in_array($ext, ['mp4','webm','ogv','mov'])) return 'video';
+    if (in_array($ext, ['mp3','flac','wav','ogg','aac','opus','m4a'])) return 'audio';
+    if (preg_match('/(?:youtube\.com\/watch\?.*v=|youtu\.be\/)([A-Za-z0-9_-]{11})/', $u, $m)) return 'youtube:' . $m[1];
+    if (preg_match('/vimeo\.com\/(\d+)/', $u, $m)) return 'vimeo:' . $m[1];
+    return 'link';
+}
+
+$type = vibe_page_type($url);
+?>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Current Vibe — SillyLaird</title>
+<?php
+  // Share card names this page. No _jp/_zh twins exist, so every hreflang
+  // alternate points back here rather than at files that 404.
+  $meta = [
+    'lang'      => 'en',
+    'title'     => 'Current Vibe — SillyLaird',
+    'desc'      => ($vibe['description'] ?? '') !== '' ? $vibe['description'] : "What I'm vibing with right now.",
+    'base'      => 'vibe/index',
+    'self_url'  => 'https://www.sillylaird.ca/vibe/',
+    'en_url'    => 'https://www.sillylaird.ca/vibe/',
+    'ja_url'    => 'https://www.sillylaird.ca/vibe/',
+    'zh_url'    => 'https://www.sillylaird.ca/vibe/',
+    'x_default' => 'https://www.sillylaird.ca/vibe/',
+  ];
+  include __DIR__ . '/../partials/head_meta.php';
+?>
+  <link rel="icon" href="/assets/img/lain.png" />
+  <link rel="stylesheet" href="/assets/css/fonts.css" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg: #000;
+      --surface: #0a0a0a;
+      --border: #1a0000;
+      --ink: #c44;
+      --muted: #663333;
+      --accent: #a00;
+    }
+
+    body {
+      font-family: "Inter", system-ui, -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--ink);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem 1rem;
+    }
+
+    a { color: var(--accent); text-decoration: none; transition: color .15s; }
+    a:hover { color: #e55; background: none; }
+
+    /* ── card ── */
+    .vibe-card {
+      width: 100%;
+      max-width: 640px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: var(--surface);
+      overflow: hidden;
+    }
+
+    /* ── header bar ── */
+    .vibe-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .vibe-label {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--muted);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .vibe-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--accent);
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: .4; }
+      50% { opacity: 1; }
+    }
+
+    .vibe-date {
+      font-size: 0.7rem;
+      font-family: monospace;
+      color: var(--muted);
+    }
+
+    /* ── media area ── */
+    .vibe-media {
+      position: relative;
+      background: #050505;
+    }
+
+    .vibe-media img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+
+    .vibe-media video {
+      width: 100%;
+      display: block;
+    }
+
+    .vibe-media audio {
+      width: 100%;
+      display: block;
+      padding: 1.5rem 1rem;
+    }
+
+    .ratio-16x9 {
+      position: relative;
+      padding-top: 56.25%;
+    }
+
+    .ratio-16x9 iframe {
+      position: absolute;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      border: 0;
+    }
+
+    .vibe-link-block {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 3rem 1.5rem;
+      text-align: center;
+    }
+
+    .vibe-link-block a {
+      font-family: monospace;
+      font-size: 0.9rem;
+      word-break: break-all;
+      color: var(--accent);
+      border-bottom: 1px dashed var(--border);
+      padding-bottom: 2px;
+    }
+
+    .vibe-link-block a:hover {
+      border-bottom-color: var(--accent);
+    }
+
+    /* ── description ── */
+    .vibe-body {
+      padding: 1rem;
+      border-top: 1px solid var(--border);
+    }
+
+    .vibe-desc {
+      font-size: 0.9rem;
+      line-height: 1.6;
+      color: var(--ink);
+    }
+
+    .vibe-url-small {
+      margin-top: 0.5rem;
+      font-size: 0.72rem;
+      font-family: monospace;
+      color: var(--muted);
+      word-break: break-all;
+    }
+
+    .vibe-url-small a { color: var(--muted); }
+    .vibe-url-small a:hover { color: var(--accent); }
+
+    /* ── empty state ── */
+    .vibe-empty {
+      padding: 3rem 1.5rem;
+      text-align: center;
+      color: var(--muted);
+      font-family: monospace;
+      font-size: 0.85rem;
+    }
+
+    /* ── back link ── */
+    .vibe-back {
+      margin-top: 1.5rem;
+      font-size: 0.75rem;
+      color: var(--muted);
+    }
+
+    .vibe-back a { color: var(--muted); }
+    .vibe-back a:hover { color: var(--accent); }
+
+    /* ── responsive ── */
+    @media (max-width: 480px) {
+      body { padding: 1rem 0.5rem; }
+      .vibe-card { border-radius: 6px; }
+    }
+  </style>
+</head>
+<body>
+
+<div class="vibe-card">
+  <div class="vibe-header">
+    <span class="vibe-label"><span class="vibe-dot"></span> current vibe</span>
+    <?php if ($updated): ?>
+      <time class="vibe-date" datetime="<?= $updated ?>"><?= $updated ?></time>
+    <?php endif; ?>
+  </div>
+
+  <?php if (empty($url)): ?>
+    <div class="vibe-empty">// nothing set</div>
+  <?php else: ?>
+
+    <div class="vibe-media">
+      <?php if ($type === 'image'): ?>
+        <a href="<?= $safe ?>" target="_blank" rel="noopener noreferrer">
+          <img src="<?= $safe ?>" alt="<?= $desc ?: 'Current vibe' ?>" loading="lazy" decoding="async" />
+        </a>
+
+      <?php elseif ($type === 'video'): ?>
+        <video controls preload="metadata">
+          <source src="<?= $safe ?>" />
+        </video>
+
+      <?php elseif ($type === 'audio'): ?>
+        <audio controls preload="metadata" style="width:100%;">
+          <source src="<?= $safe ?>" />
+        </audio>
+
+      <?php elseif (str_starts_with($type, 'youtube:')): ?>
+        <div class="ratio-16x9">
+          <iframe src="https://www.youtube.com/embed/<?= htmlspecialchars(substr($type, 8)) ?>"
+                  allowfullscreen loading="lazy" title="Current vibe"></iframe>
+        </div>
+
+      <?php elseif (str_starts_with($type, 'vimeo:')): ?>
+        <div class="ratio-16x9">
+          <iframe src="https://player.vimeo.com/video/<?= htmlspecialchars(substr($type, 6)) ?>"
+                  allowfullscreen loading="lazy" title="Current vibe"></iframe>
+        </div>
+
+      <?php else: ?>
+        <div class="vibe-link-block">
+          <a href="<?= $safe ?>" target="_blank" rel="noopener noreferrer"><?= $safe ?></a>
+        </div>
+      <?php endif; ?>
+    </div>
+
+    <?php if ($desc || $type !== 'link'): ?>
+      <div class="vibe-body">
+        <?php if ($desc): ?>
+          <p class="vibe-desc"><?= $desc ?></p>
+        <?php endif; ?>
+        <?php if ($type !== 'link' && $type !== 'none'): ?>
+          <p class="vibe-url-small"><a href="<?= $safe ?>" target="_blank" rel="noopener noreferrer"><?= $safe ?></a></p>
+        <?php endif; ?>
+      </div>
+    <?php endif; ?>
+
+  <?php endif; ?>
+</div>
+
+<p class="vibe-back"><a href="/">&larr; sillylaird.ca</a></p>
+
+</body>
+</html>