diff --git a/index.html b/index.html index 90a49dd..1f9d95d 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,31 @@ - + - Code Formatter + + + Code Formatter - Форматирование JSON и SQL + + + + + + + + + + + + + + + + + + + diff --git a/og-preview-generator.html b/og-preview-generator.html new file mode 100644 index 0000000..60aa8c1 --- /dev/null +++ b/og-preview-generator.html @@ -0,0 +1,143 @@ + + + + + + OG Image Generator + + + +
+
+
{
+
}
+
+

Code Formatter

+
Форматирование JSON и SQL
+
✓ Валидация ✓ Подсветка ✓ Минификация
+
formatter.abaidulin.ru
+
+
+ +
+

Инструкция по созданию og-image.png:

+
    +
  1. Откройте эту страницу в браузере
    2. +
  2. Сделайте скриншот области выше (1200x630px)
    3. +
  3. Или используйте инструменты разработчика: +
      +
    • Откройте DevTools (F12)
      • +
    • Введите в консоль команды ниже
      • +
    +
    4. +
  4. Сохраните как og-image.png
    5. +
  5. Поместите в папку /Users/at/python/claude-example/formatter/public/
    6. +
+ +

Автоматическая генерация через консоль браузера:

+ 
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
+
+
+ + + + diff --git a/public/og-image.svg b/public/og-image.svg new file mode 100644 index 0000000..20410f0 --- /dev/null +++ b/public/og-image.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + { + } + + + Code Formatter + + + Форматирование JSON и SQL + + + ✓ Валидация ✓ Подсветка синтаксиса ✓ Минификация + + + formatter.abaidulin.ru +