ui(player): replace footer with About dialog + reclaim dead space

- Move colophon (credit/email/source link) from sticky footer into
  a dedicated About dialog, opened from a new header button
- Drop ~64px of bottom container padding now that the footer is gone
- Loosen vinyl-stage aspect-ratio (1:1 -> 1:0.85) so the disc no
  longer leaves a tall empty band below the sleeve
- Switch tonearm height: 36% to aspect-ratio: 1 to keep proportions
  consistent across the new stage ratio
- Add about.* / dialog.close i18n keys for EN and RU
- Add vinyl-variants-mockup.html as next design reference target

media_server/static/index.html

@@ -91,6 +91,9 @@
                 <a class="header-btn" href="/docs" target="_blank" title="API Documentation" aria-label="API Documentation">
                     <svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h5v7h7v9H6zm2-4h8v2H8v-2zm0-3h8v2H8v-2z"/></svg>
                 </a>
+                <button class="header-btn" onclick="showAboutDialog()" data-i18n-title="about.button_title" title="About" aria-label="About">
+                    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                </button>
                 <div class="accent-picker">
                     <button class="header-btn" onclick="toggleAccentPicker()" title="Accent color" aria-label="Accent color">
                         <span class="accent-dot" id="accentDot"></span>
@@ -788,16 +791,31 @@
     <!-- Toast Notifications -->
     <div class="toast-container" id="toast-container"></div>
 
-    <!-- Footer -->
-    <footer>
-        <div>
-            <span data-i18n="footer.created_by">Created by</span> <strong>Alexei Dolgolyov</strong>
-            <span class="separator">•</span>
-            <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
-            <span class="separator">•</span>
-            <a href="https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server" target="_blank" rel="noopener noreferrer" data-i18n="footer.source_code">Source Code</a>
+    <!-- About Dialog -->
+    <dialog id="aboutDialog" class="about-dialog">
+        <div class="dialog-header">
+            <h3 data-i18n="about.title">About</h3>
         </div>
-    </footer>
+        <div class="dialog-body">
+            <p class="about-credit">
+                <span data-i18n="about.created_by">Created by</span>
+                <strong>Alexei Dolgolyov</strong>
+            </p>
+            <ul class="about-links">
+                <li>
+                    <span class="about-links-label" data-i18n="about.email">Email</span>
+                    <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
+                </li>
+                <li>
+                    <span class="about-links-label" data-i18n="about.repository">Repository</span>
+                    <a href="https://git.dolgolyov-family.by/alexei.dolgolyov/media-player-server" target="_blank" rel="noopener noreferrer" data-i18n="about.source_code">Source Code</a>
+                </li>
+            </ul>
+        </div>
+        <div class="dialog-footer">
+            <button type="button" class="btn-secondary" onclick="closeAboutDialog()" data-i18n="dialog.close">Close</button>
+        </div>
+    </dialog>
 
     <script src="/static/dist/app.bundle.js"></script>
 </body>