Skip to content

Commit 668ad48

Browse files
committed
Fruit Jam greeting card maker
1 parent 53133c0 commit 668ad48

File tree

6 files changed

+1165
-0
lines changed

6 files changed

+1165
-0
lines changed
-3.02 KB
Binary file not shown.
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!-- SPDX-FileCopyrightText: 2025 Tim Cocks for Adafruit Industries -->
2+
<!-- SPDX-License-Identifier: MIT -->
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>Card</title>
8+
<style>
9+
:root {
10+
--fold-line-size: 1px;
11+
--fold-line-color: #f5f5f5;
12+
}
13+
14+
.sheet {
15+
height: 11in;
16+
width: 8.5in;
17+
display: grid;
18+
grid-template-columns: 1fr 1fr;
19+
grid-template-rows: 1fr 1fr;
20+
}
21+
22+
p, h1, h3 {
23+
text-align: center;
24+
font-family: sans-serif;
25+
}
26+
27+
#inside-left, #outside-back {
28+
border-right: var(--fold-line-size) dashed var(--fold-line-color);
29+
}
30+
#outside-front, #inside-right {
31+
border-left: var(--fold-line-size) dashed var(--fold-line-color);
32+
}
33+
34+
#outside-back, #outside-front {
35+
border-top: var(--fold-line-size) dashed var(--fold-line-color);
36+
transform: scaleY(-1) scaleX(-1);
37+
}
38+
39+
#inside-left, #inside-right {
40+
border-top: var(--fold-line-size) dashed var(--fold-line-color);
41+
}
42+
43+
#outside-back h3{
44+
font-size: 1.6em;
45+
text-align: center;
46+
margin-bottom: 10px;
47+
margin-top: 200px;
48+
}
49+
50+
img{
51+
display: block;
52+
margin:auto;
53+
}
54+
55+
#outside-front img{
56+
max-width: 317px;
57+
max-height: 360px;
58+
margin-top: 40px;
59+
}
60+
#outside-front h1{
61+
margin-top: 30px;
62+
}
63+
#inside-right{
64+
padding: 160px 30px;
65+
font-size: 1.7em;
66+
}
67+
68+
</style>
69+
</head>
70+
<body>
71+
<div class="sheet">
72+
<div class="quadrant" id="outside-front">
73+
<h1>{% autoescape off %}{{ context["outside_message"] }}{% autoescape on %}</h1>
74+
<img src="{{ context['front_img'] }}?timestamp={{ context['timestamp'] }}">
75+
</div>
76+
<div class="quadrant" id="outside-back">
77+
<h3>made with</h3>
78+
<img src="https://github.com/adafruit/Adafruit_Learning_System_Guides/raw/refs/heads/main/Fruit_Jam/Fruit_Jam_Card_Maker/remote_assets/fruit_jam_logo_invert.png" alt="Adafruit Fruit Jam">
79+
</div>
80+
<div class="quadrant" id="inside-left">
81+
82+
</div>
83+
<div class="quadrant" id="inside-right">
84+
<p>{{ context["inside_message"] }}</p>
85+
</div>
86+
</div>
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)