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