Added Open Graph Generator

2025-11-21 09:52:58 +03:00
parent 8ceb9e8781
commit 6b7b034d30
3 changed files with 193 additions and 2 deletions
--- a/og-preview-generator.html
+++ b/og-preview-generator.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OG Image Generator</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background: #f0f0f0;
+            font-family: Arial, sans-serif;
+        }
+        .preview-container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .og-image {
+            width: 1200px;
+            height: 630px;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        .bracket-left {
+            position: absolute;
+            left: 60px;
+            top: 50px;
+            font-family: 'Courier New', monospace;
+            font-size: 180px;
+            color: #0f4c75;
+            opacity: 0.2;
+            font-weight: bold;
+        }
+        .bracket-right {
+            position: absolute;
+            right: 60px;
+            bottom: 50px;
+            font-family: 'Courier New', monospace;
+            font-size: 180px;
+            color: #0f4c75;
+            opacity: 0.2;
+            font-weight: bold;
+        }
+        .content {
+            position: relative;
+            z-index: 2;
+            text-align: center;
+            padding-top: 150px;
+        }
+        .title {
+            font-size: 84px;
+            font-weight: bold;
+            color: #ffffff;
+            margin: 0;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+        }
+        .subtitle {
+            font-size: 42px;
+            color: #3282b8;
+            margin: 30px 0;
+        }
+        .features {
+            font-family: 'Courier New', monospace;
+            font-size: 32px;
+            color: #bbe1fa;
+            margin: 40px 0;
+        }
+        .url {
+            font-family: 'Courier New', monospace;
+            font-size: 28px;
+            color: #3282b8;
+            margin-top: 60px;
+        }
+        .instructions {
+            margin-top: 30px;
+            padding: 20px;
+            background: white;
+            border-radius: 8px;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .instructions h2 {
+            margin-top: 0;
+        }
+        .instructions code {
+            background: #f5f5f5;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-family: monospace;
+        }
+    </style>
+</head>
+<body>
+    <div class="preview-container">
+        <div class="og-image" id="ogImage">
+            <div class="bracket-left">{</div>
+            <div class="bracket-right">}</div>
+            <div class="content">
+                <h1 class="title">Code Formatter</h1>
+                <div class="subtitle">Форматирование JSON и SQL</div>
+                <div class="features">✓ Валидация   ✓ Подсветка   ✓ Минификация</div>
+                <div class="url">formatter.abaidulin.ru</div>
+            </div>
+        </div>
+
+        <div class="instructions">
+            <h2>Инструкция по созданию og-image.png:</h2>
+            <ol>
+                <li>Откройте эту страницу в браузере</li>
+                <li>Сделайте скриншот области выше (1200x630px)</li>
+                <li>Или используйте инструменты разработчика:
+                    <ul>
+                        <li>Откройте DevTools (F12)</li>
+                        <li>Введите в консоль команды ниже</li>
+                    </ul>
+                </li>
+                <li>Сохраните как <code>og-image.png</code></li>
+                <li>Поместите в папку <code>/Users/at/python/claude-example/formatter/public/</code></li>
+            </ol>
+
+            <h3>Автоматическая генерация через консоль браузера:</h3>
+            <pre><code>const element = document.getElementById('ogImage');
+html2canvas(element).then(canvas => {
+    const link = document.createElement('a');
+    link.download = 'og-image.png';
+    link.href = canvas.toDataURL();
+    link.click();
+});
+// Примечание: требуется библиотека html2canvas</code></pre>
+        </div>
+    </div>
+
+    <script>
+        console.log('Для автоматического сохранения можно использовать:');
+        console.log('1. Расширение браузера для скриншотов');
+        console.log('2. Онлайн сервисы: opengraph.xyz, og-image.vercel.app');
+        console.log('3. Команду: npm install -g pageres-cli && pageres og-preview-generator.html 1200x630 --filename=og-image');
+    </script>
+</body>
+</html>