Store Image generator

browser-plugin/promo_assets/marp/.gitignore

@@ -0,0 +1 @@
+dest

browser-plugin/promo_assets/marp/Makefile

@@ -0,0 +1,26 @@
+PNGS := screenshot.png small_promo_tile.png marquee_promo_tile.png
+
+.PHONY: png
+
+all: png
+
+png: $(PNGS)
+
+screenshot.png: screenshot.md
+	mkdir -p dest
+	marp $< --images png --allow-local-files -o "dest/$@"
+
+small_promo_tile.png: small_promo_tile.md
+	mkdir -p dest
+	marp $< --image-scale 0.39 --images png --allow-local-files -o "dest/tmp.png"
+	convert "dest/tmp.001.png" -gravity center -extent 440x280 "dest/$@"
+	rm -f "dest/tmp.001.png"
+
+marquee_promo_tile.png: marquee_promo_tile.md
+	mkdir -p dest
+	marp $< --image-scale 1.1 --images png --allow-local-files -o "dest/tmp.png"
+	convert "dest/tmp.001.png" -gravity center -crop 1400x560+0+0 +repage "dest/$@"
+	rm -f "dest/tmp.001.png"
+
+clean:
+	rm -rf dest

browser-plugin/promo_assets/marp/marquee_promo_tile.md

@@ -0,0 +1,85 @@
+---
+marp: true
+theme: default
+size: 16:9
+style: |
+  /* --- LAYOUT CONTAINER --- */
+  section.small-layout {
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+    position: relative;
+    overflow: hidden;
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    color: #ffffff;
+  }
+
+  /* --- TEXT STYLING --- */
+  .text-content {
+    position: absolute;
+    left: 60px;
+    top: 25%;
+    width: 35%;
+    z-index: 10;
+  }
+
+  .text-content h1 {
+    font-size: 60px;
+    color: #ffffff;
+    margin-bottom: 20px;
+    line-height: 1.1;
+  }
+
+  .text-content p {
+    font-size: 32px;
+    color: #ffffff;
+    line-height: 1.4;
+  }
+
+  /* --- MAIN BROWSER IMAGE --- */
+  img.main-browser {
+    position: absolute;
+    right: -80px;
+    top: 80px;
+    width: 58%;
+    box-shadow: -10px 10px 30px rgba(0,0,0,0.15);
+    border-radius: 12px;
+    border: 1px solid rgba(0,0,0,0.1);
+    z-index: 1;
+  }
+
+  /* --- SMALL OVERLAY IMAGE --- */
+  img.small-overlay {
+    position: absolute;
+    bottom: 50px;
+    left: 34%;    /* Adjusted slightly left to balance width increase */
+    width: 34%;   /* LARGER (was 30%) */
+    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+    border-radius: 12px;
+    border: 3px solid #ffffff;
+    z-index: 5;
+  }
+
+  /* --- LOGO --- */
+  img.logo {
+    position: absolute;
+    bottom: 140px; /* LOWER (was 160px) - sits just above the crop line */
+    right: 40px;
+    height: 80px;
+    width: auto;
+    z-index: 10;
+  }
+
+---
+
+<!-- _class: small-layout -->
+
+<div class="text-content">
+
+# News Deframer
+
+Detect and avoid clickbait from your favorite news portal
+
+</div>
+
+<img src="assets/screenshot2.png" class="main-browser" />
+<img src="assets/screenshot1.png" class="small-overlay" />
+<img src="assets/logo.svg" class="logo" />

browser-plugin/promo_assets/marp/screenshot.md

@@ -0,0 +1,85 @@
+---
+marp: true
+theme: default
+size: 16:10
+style: |
+  /* Define the layout for the specific slide class 'showcase' */
+  section.showcase {
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); /* Dark blue gradient */
+    color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    position: relative;
+  }
+
+  /* Style the Main Title */
+  section.showcase h1 {
+    font-size: 48px;
+    font-weight: 600;
+    margin-bottom: 40px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  /* Style the Browser Screenshot */
+  /* This adds the rounded corners and the floating shadow effect */
+  section.showcase img.browser-shot {
+    width: 80%;
+    max-height: 65vh;
+    object-fit: contain;
+    border-radius: 12px;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+  }
+
+  /* Style the Logo in bottom right */
+  section.showcase img.logo {
+    position: absolute;
+    bottom: 30px;
+    right: 40px;
+    height: 100px; /* Adjust based on your logo aspect ratio */
+    width: auto;
+  }
+
+---
+
+<!-- _class: showcase -->
+
+# Works with any portal e.g. CNN, Fox, BBC, Tagesschau, ...
+
+<img src="assets/screenshot1.png" class="browser-shot" />
+
+<img src="assets/logo.svg" class="logo" />
+
+---
+
+<!-- _class: showcase -->
+
+# Detects and rates framing, clickbait, persuasive intent, hyper stimulus and speculations
+
+<img src="assets/screenshot2.png" class="browser-shot" />
+
+<img src="assets/logo.svg" class="logo" />
+
+---
+
+<!-- _class: showcase -->
+
+# See why an article is worth your attention before a clickbait title can hijack your brain
+
+<img src="assets/screenshot3.png" class="browser-shot" />
+
+<img src="assets/logo.svg" class="logo" />
+
+---
+
+<!-- _class: showcase -->
+
+# Full privacy. You can use your own server
+
+<img src="assets/screenshot4.png" class="browser-shot" />
+
+<img src="assets/logo.svg" class="logo" />
+

browser-plugin/promo_assets/marp/small_promo_tile.md

@@ -0,0 +1,99 @@
+---
+marp: true
+theme: default
+size: 16:10
+style: |
+  /* --- LAYOUT CONTAINER --- */
+  section.small-layout {
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
+    position: relative;
+    overflow: hidden;
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    color: #ffffff;
+    padding: 0;
+  }
+
+  /* --- TEXT BOX --- */
+  .text-box {
+    position: absolute;
+    left: 80px;
+    top: 40%;
+    transform: translateY(-50%);
+    width: 42%;
+
+    /* Glass Effect */
+    background: rgba(15, 23, 42, 0.85);
+    backdrop-filter: blur(8px);
+
+    padding: 40px;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+    z-index: 20; /* High Z-Index ensures text sits ON TOP of the large images */
+  }
+
+  .text-box h1 {
+    font-size: 48px;
+    font-weight: bold;
+    color: #ffffff;
+    margin: 0 0 20px 0;
+    line-height: 1.1;
+  }
+
+  .text-box p {
+    font-size: 26px;
+    color: #cbd5e1;
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  /* --- MAIN BROWSER IMAGE --- */
+  img.main-browser {
+    position: absolute;
+    right: -20px; /* Moved Left (closer to center) */
+    top: 80px;
+    width: 75%;   /* MUCH Larger (was 55%) */
+
+    box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
+    border-radius: 12px;
+    opacity: 0.9;
+    z-index: 1;   /* Sits behind text box */
+  }
+
+  /* --- SMALL OVERLAY IMAGE --- */
+  img.small-overlay {
+    position: absolute;
+    bottom: 40px;
+    left: 40%;    /* Moved Left (was 48%) */
+    width: 42%;   /* Larger (was 30%) */
+
+    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
+    border-radius: 12px;
+    border: 3px solid #ffffff;
+    z-index: 5;
+  }
+
+  /* --- LOGO --- */
+  img.logo {
+    position: absolute;
+    bottom: 40px;
+    right: 100px;
+    height: 70px;
+    width: auto;
+    z-index: 10;
+  }
+---
+
+<!-- _class: small-layout -->
+
+<div class="text-box">
+
+# News Deframer
+
+Detect and avoid clickbait from your favorite news portal
+
+</div>
+
+<img src="assets/screenshot2.png" class="main-browser" />
+<img src="assets/screenshot1.png" class="small-overlay" />
+<img src="assets/logo.svg" class="logo" />

browser-plugin/src/host/ui/Footer.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 const footerCss = `
   .page-footer-text {
     text-align: center;
     padding: 1.5em;
     color: var(--secondary-text);
-    font-size: 0.9em;
+    font-size: 14px;
     line-height: 1.5;
   }
   .page-footer-text a {