Skip to content

Commit c22e580

Browse files
egandroegandro
authored
Merge pull request #63 from egandro/preparation-store-publish-step3
Store Image generator
2 parents a2fe414 + bc7b3a0 commit c22e580

17 files changed

+394
-25
lines changed

‎browser-plugin/promo_assets/marp/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dest

‎browser-plugin/promo_assets/marp/Makefile‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
PNGS := screenshot.png small_promo_tile.png marquee_promo_tile.png
2+
3+
.PHONY: png
4+
5+
all: png
6+
7+
png: $(PNGS)
8+
9+
screenshot.png: screenshot.md
10+
mkdir -p dest
11+
marp $< --images png --allow-local-files -o "dest/$@"
12+
13+
small_promo_tile.png: small_promo_tile.md
14+
mkdir -p dest
15+
marp $< --image-scale 0.39 --images png --allow-local-files -o "dest/tmp.png"
16+
convert "dest/tmp.001.png" -gravity center -extent 440x280 "dest/$@"
17+
rm -f "dest/tmp.001.png"
18+
19+
marquee_promo_tile.png: marquee_promo_tile.md
20+
mkdir -p dest
21+
marp $< --image-scale 1.1 --images png --allow-local-files -o "dest/tmp.png"
22+
convert "dest/tmp.001.png" -gravity center -crop 1400x560+0+0 +repage "dest/$@"
23+
rm -f "dest/tmp.001.png"
24+
25+
clean:
26+
rm -rf dest

‎browser-plugin/promo_assets/marp/assets/logo.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎browser-plugin/promo_assets/marp/assets/screenshot1.png‎

2.36 MB
Loading

‎browser-plugin/promo_assets/marp/assets/screenshot2.png‎

4.02 MB
Loading

‎browser-plugin/promo_assets/marp/assets/screenshot3.png‎

278 KB
Loading

‎browser-plugin/promo_assets/marp/assets/screenshot4.png‎

74.9 KB
Loading

‎browser-plugin/promo_assets/marp/marquee_promo_tile.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
marp: true
3+
theme: default
4+
size: 16:9
5+
style: |
6+
/* --- LAYOUT CONTAINER --- */
7+
section.small-layout {
8+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
9+
position: relative;
10+
overflow: hidden;
11+
font-family: 'Helvetica', 'Arial', sans-serif;
12+
color: #ffffff;
13+
}
14+
15+
/* --- TEXT STYLING --- */
16+
.text-content {
17+
position: absolute;
18+
left: 60px;
19+
top: 25%;
20+
width: 35%;
21+
z-index: 10;
22+
}
23+
24+
.text-content h1 {
25+
font-size: 60px;
26+
color: #ffffff;
27+
margin-bottom: 20px;
28+
line-height: 1.1;
29+
}
30+
31+
.text-content p {
32+
font-size: 32px;
33+
color: #ffffff;
34+
line-height: 1.4;
35+
}
36+
37+
/* --- MAIN BROWSER IMAGE --- */
38+
img.main-browser {
39+
position: absolute;
40+
right: -80px;
41+
top: 80px;
42+
width: 58%;
43+
box-shadow: -10px 10px 30px rgba(0,0,0,0.15);
44+
border-radius: 12px;
45+
border: 1px solid rgba(0,0,0,0.1);
46+
z-index: 1;
47+
}
48+
49+
/* --- SMALL OVERLAY IMAGE --- */
50+
img.small-overlay {
51+
position: absolute;
52+
bottom: 50px;
53+
left: 34%; /* Adjusted slightly left to balance width increase */
54+
width: 34%; /* LARGER (was 30%) */
55+
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
56+
border-radius: 12px;
57+
border: 3px solid #ffffff;
58+
z-index: 5;
59+
}
60+
61+
/* --- LOGO --- */
62+
img.logo {
63+
position: absolute;
64+
bottom: 140px; /* LOWER (was 160px) - sits just above the crop line */
65+
right: 40px;
66+
height: 80px;
67+
width: auto;
68+
z-index: 10;
69+
}
70+
71+
---
72+
73+
<!-- _class: small-layout -->
74+
75+
<div class="text-content">
76+
77+
# News Deframer
78+
79+
Detect and avoid clickbait from your favorite news portal
80+
81+
</div>
82+
83+
<img src="assets/screenshot2.png" class="main-browser" />
84+
<img src="assets/screenshot1.png" class="small-overlay" />
85+
<img src="assets/logo.svg" class="logo" />

‎browser-plugin/promo_assets/marp/screenshot.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
marp: true
3+
theme: default
4+
size: 16:10
5+
style: |
6+
/* Define the layout for the specific slide class 'showcase' */
7+
section.showcase {
8+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); /* Dark blue gradient */
9+
color: #ffffff;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
font-family: 'Helvetica', 'Arial', sans-serif;
15+
position: relative;
16+
}
17+
18+
/* Style the Main Title */
19+
section.showcase h1 {
20+
font-size: 48px;
21+
font-weight: 600;
22+
margin-bottom: 40px;
23+
text-align: center;
24+
color: #ffffff;
25+
}
26+
27+
/* Style the Browser Screenshot */
28+
/* This adds the rounded corners and the floating shadow effect */
29+
section.showcase img.browser-shot {
30+
width: 80%;
31+
max-height: 65vh;
32+
object-fit: contain;
33+
border-radius: 12px;
34+
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
35+
}
36+
37+
/* Style the Logo in bottom right */
38+
section.showcase img.logo {
39+
position: absolute;
40+
bottom: 30px;
41+
right: 40px;
42+
height: 100px; /* Adjust based on your logo aspect ratio */
43+
width: auto;
44+
}
45+
46+
---
47+
48+
<!-- _class: showcase -->
49+
50+
# Works with any portal e.g. CNN, Fox, BBC, Tagesschau, ...
51+
52+
<img src="assets/screenshot1.png" class="browser-shot" />
53+
54+
<img src="assets/logo.svg" class="logo" />
55+
56+
---
57+
58+
<!-- _class: showcase -->
59+
60+
# Detects and rates framing, clickbait, persuasive intent, hyper stimulus and speculations
61+
62+
<img src="assets/screenshot2.png" class="browser-shot" />
63+
64+
<img src="assets/logo.svg" class="logo" />
65+
66+
---
67+
68+
<!-- _class: showcase -->
69+
70+
# See why an article is worth your attention before a clickbait title can hijack your brain
71+
72+
<img src="assets/screenshot3.png" class="browser-shot" />
73+
74+
<img src="assets/logo.svg" class="logo" />
75+
76+
---
77+
78+
<!-- _class: showcase -->
79+
80+
# Full privacy. You can use your own server
81+
82+
<img src="assets/screenshot4.png" class="browser-shot" />
83+
84+
<img src="assets/logo.svg" class="logo" />
85+

‎browser-plugin/promo_assets/marp/small_promo_tile.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
marp: true
3+
theme: default
4+
size: 16:10
5+
style: |
6+
/* --- LAYOUT CONTAINER --- */
7+
section.small-layout {
8+
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
9+
position: relative;
10+
overflow: hidden;
11+
font-family: 'Helvetica', 'Arial', sans-serif;
12+
color: #ffffff;
13+
padding: 0;
14+
}
15+
16+
/* --- TEXT BOX --- */
17+
.text-box {
18+
position: absolute;
19+
left: 80px;
20+
top: 40%;
21+
transform: translateY(-50%);
22+
width: 42%;
23+
24+
/* Glass Effect */
25+
background: rgba(15, 23, 42, 0.85);
26+
backdrop-filter: blur(8px);
27+
28+
padding: 40px;
29+
border-radius: 16px;
30+
border: 1px solid rgba(255, 255, 255, 0.1);
31+
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
32+
z-index: 20; /* High Z-Index ensures text sits ON TOP of the large images */
33+
}
34+
35+
.text-box h1 {
36+
font-size: 48px;
37+
font-weight: bold;
38+
color: #ffffff;
39+
margin: 0 0 20px 0;
40+
line-height: 1.1;
41+
}
42+
43+
.text-box p {
44+
font-size: 26px;
45+
color: #cbd5e1;
46+
margin: 0;
47+
line-height: 1.4;
48+
}
49+
50+
/* --- MAIN BROWSER IMAGE --- */
51+
img.main-browser {
52+
position: absolute;
53+
right: -20px; /* Moved Left (closer to center) */
54+
top: 80px;
55+
width: 75%; /* MUCH Larger (was 55%) */
56+
57+
box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
58+
border-radius: 12px;
59+
opacity: 0.9;
60+
z-index: 1; /* Sits behind text box */
61+
}
62+
63+
/* --- SMALL OVERLAY IMAGE --- */
64+
img.small-overlay {
65+
position: absolute;
66+
bottom: 40px;
67+
left: 40%; /* Moved Left (was 48%) */
68+
width: 42%; /* Larger (was 30%) */
69+
70+
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
71+
border-radius: 12px;
72+
border: 3px solid #ffffff;
73+
z-index: 5;
74+
}
75+
76+
/* --- LOGO --- */
77+
img.logo {
78+
position: absolute;
79+
bottom: 40px;
80+
right: 100px;
81+
height: 70px;
82+
width: auto;
83+
z-index: 10;
84+
}
85+
---
86+
87+
<!-- _class: small-layout -->
88+
89+
<div class="text-box">
90+
91+
# News Deframer
92+
93+
Detect and avoid clickbait from your favorite news portal
94+
95+
</div>
96+
97+
<img src="assets/screenshot2.png" class="main-browser" />
98+
<img src="assets/screenshot1.png" class="small-overlay" />
99+
<img src="assets/logo.svg" class="logo" />

0 commit comments

Comments
 (0)