Skip to content

Commit 11475c2

Browse files
lnykrynlnykryn
committed
Add symbols for the fourth stage of the blackout
1 parent 51ce654 commit 11475c2

1 file changed

Lines changed: 232 additions & 0 deletions

File tree

‎04_blackout/targets.html‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<!DOCTYPE html>
2+
<html lang="cs">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>TISK - Stage 04: Slepá evoluce</title>
7+
<style>
8+
/* --- NÁHLED NA OBRAZOVCE --- */
9+
body {
10+
font-family: 'Courier New', Courier, monospace;
11+
background-color: #111;
12+
color: #fff;
13+
margin: 0;
14+
padding: 20px;
15+
text-align: center;
16+
}
17+
18+
.no-print {
19+
margin-bottom: 30px;
20+
padding: 20px;
21+
border: 2px dashed #39ff14;
22+
background: #000;
23+
display: inline-block;
24+
}
25+
26+
.no-print h1 { color: #39ff14; margin-top: 0; }
27+
28+
button {
29+
background-color: #39ff14;
30+
color: #000;
31+
border: none;
32+
padding: 15px 30px;
33+
font-size: 1.2em;
34+
font-weight: bold;
35+
cursor: pointer;
36+
text-transform: uppercase;
37+
letter-spacing: 2px;
38+
transition: 0.2s;
39+
}
40+
41+
button:hover { background-color: #fff; }
42+
43+
/* Pomocné ohraničení stránek na obrazovce */
44+
.page-preview {
45+
background: #fff;
46+
color: #000;
47+
width: 210mm;
48+
height: 297mm;
49+
margin: 0 auto 30px auto;
50+
box-shadow: 0 0 20px rgba(0,0,0,0.8);
51+
position: relative;
52+
overflow: hidden;
53+
}
54+
55+
/* --- STYLY PRO TISK --- */
56+
@media print {
57+
@page {
58+
size: A4;
59+
margin: 0; /* Bez okrajů prohlížeče */
60+
}
61+
body {
62+
background: #fff !important;
63+
padding: 0;
64+
margin: 0;
65+
}
66+
.no-print {
67+
display: none !important;
68+
}
69+
.page-preview {
70+
box-shadow: none;
71+
margin: 0;
72+
page-break-after: always; /* Každý blok je nová stránka */
73+
}
74+
/* Poslední stránka nesmí mít page-break, aby nevznikla prázdná stránka navíc */
75+
.page-preview:last-child {
76+
page-break-after: auto;
77+
}
78+
}
79+
80+
/* --- OBSAH STRÁNEK --- */
81+
.target-page {
82+
display: flex;
83+
flex-direction: column;
84+
align-items: center;
85+
justify-content: center;
86+
height: 100%;
87+
border: 5px solid #000;
88+
box-sizing: border-box;
89+
padding: 20mm;
90+
}
91+
92+
.flavor-text {
93+
position: absolute;
94+
top: 20mm;
95+
left: 20mm;
96+
font-size: 14px;
97+
font-weight: bold;
98+
color: #000;
99+
text-transform: uppercase;
100+
letter-spacing: 2px;
101+
text-align: left;
102+
}
103+
104+
.flavor-bottom {
105+
position: absolute;
106+
bottom: 20mm;
107+
right: 20mm;
108+
font-size: 14px;
109+
font-weight: bold;
110+
color: #000;
111+
text-transform: uppercase;
112+
letter-spacing: 2px;
113+
text-align: right;
114+
}
115+
116+
.symbol-large {
117+
width: 150mm;
118+
height: 150mm;
119+
}
120+
121+
/* Kartičky na losování */
122+
.cards-page {
123+
display: grid;
124+
grid-template-columns: 1fr 1fr;
125+
grid-template-rows: 1fr 1fr;
126+
height: 100%;
127+
box-sizing: border-box;
128+
}
129+
130+
.card-item {
131+
border: 2px dashed #000; /* Střihací čáry */
132+
display: flex;
133+
flex-direction: column;
134+
align-items: center;
135+
justify-content: center;
136+
position: relative;
137+
}
138+
139+
.card-symbol {
140+
width: 60mm;
141+
height: 60mm;
142+
}
143+
144+
.card-text {
145+
margin-top: 15px;
146+
font-size: 16px;
147+
font-weight: bold;
148+
letter-spacing: 1px;
149+
border-top: 2px solid #000;
150+
padding-top: 5px;
151+
}
152+
</style>
153+
</head>
154+
<body>
155+
156+
<div class="no-print">
157+
<h1>TISK MATERIÁLŮ: STAGE 04</h1>
158+
<p>1. Stránka: <strong>A4 Terč Trojúhelník</strong></p>
159+
<p>2. Stránka: <strong>A4 Terč Kruh</strong></p>
160+
<p>3. Stránka: <strong>A4 Terč Kříž (X)</strong></p>
161+
<p>4. Stránka: <strong>A4 Terč Čtverec</strong></p>
162+
<p>5. Stránka: <strong>1x A4 k rozstřižení na 4 losovací karty</strong></p>
163+
<button onclick="window.print()">Vytisknout materiály</button>
164+
</div>
165+
166+
<div class="page-preview target-page">
167+
<div class="flavor-text">DIAGNOSTIC SENSOR ID: T-1<br>STATUS: UNKNOWN</div>
168+
<svg viewBox="0 0 100 100" class="symbol-large">
169+
<polygon points="50,10 95,85 5,85" fill="#000" />
170+
</svg>
171+
<div class="flavor-bottom">PATHOGEN PROTOCOL<br>SECTOR 7</div>
172+
</div>
173+
174+
<div class="page-preview target-page">
175+
<div class="flavor-text">DIAGNOSTIC SENSOR ID: C-2<br>STATUS: UNKNOWN</div>
176+
<svg viewBox="0 0 100 100" class="symbol-large">
177+
<circle cx="50" cy="50" r="42" fill="#000" />
178+
</svg>
179+
<div class="flavor-bottom">PATHOGEN PROTOCOL<br>SECTOR 7</div>
180+
</div>
181+
182+
<div class="page-preview target-page">
183+
<div class="flavor-text">DIAGNOSTIC SENSOR ID: X-3<br>STATUS: UNKNOWN</div>
184+
<svg viewBox="0 0 100 100" class="symbol-large">
185+
<g transform="rotate(45 50 50)">
186+
<rect x="35" y="5" width="30" height="90" rx="3" fill="#000" />
187+
<rect x="5" y="35" width="90" height="30" rx="3" fill="#000" />
188+
</g>
189+
</svg>
190+
<div class="flavor-bottom">PATHOGEN PROTOCOL<br>SECTOR 7</div>
191+
</div>
192+
193+
<div class="page-preview target-page">
194+
<div class="flavor-text">DIAGNOSTIC SENSOR ID: S-4<br>STATUS: UNKNOWN</div>
195+
<svg viewBox="0 0 100 100" class="symbol-large">
196+
<rect x="10" y="10" width="80" height="80" fill="#000" rx="5" />
197+
</svg>
198+
<div class="flavor-bottom">PATHOGEN PROTOCOL<br>SECTOR 7</div>
199+
</div>
200+
201+
<div class="page-preview cards-page">
202+
<div class="card-item">
203+
<svg viewBox="0 0 100 100" class="card-symbol">
204+
<polygon points="50,10 95,85 5,85" fill="#000" />
205+
</svg>
206+
<div class="card-text">IMMUNE SUBJECT (NO-SHOOT)</div>
207+
</div>
208+
<div class="card-item">
209+
<svg viewBox="0 0 100 100" class="card-symbol">
210+
<circle cx="50" cy="50" r="42" fill="#000" />
211+
</svg>
212+
<div class="card-text">IMMUNE SUBJECT (NO-SHOOT)</div>
213+
</div>
214+
<div class="card-item">
215+
<svg viewBox="0 0 100 100" class="card-symbol">
216+
<g transform="rotate(45 50 50)">
217+
<rect x="35" y="5" width="30" height="90" rx="3" fill="#000" />
218+
<rect x="5" y="35" width="90" height="30" rx="3" fill="#000" />
219+
</g>
220+
</svg>
221+
<div class="card-text">IMMUNE SUBJECT (NO-SHOOT)</div>
222+
</div>
223+
<div class="card-item">
224+
<svg viewBox="0 0 100 100" class="card-symbol">
225+
<rect x="10" y="10" width="80" height="80" fill="#000" rx="5" />
226+
</svg>
227+
<div class="card-text">IMMUNE SUBJECT (NO-SHOOT)</div>
228+
</div>
229+
</div>
230+
231+
</body>
232+
</html>

0 commit comments

Comments
 (0)