Skip to content

Commit da449aa

Browse files
carlospolopcarlospolop
committed
Add summer discount popup
1 parent f34f2a0 commit da449aa

4 files changed

Lines changed: 507 additions & 1 deletion

File tree

‎book.toml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@ command = "python3 ./hacktricks-preprocessor.py"
1515
env = "prod"
1616

1717
[output.html]
18-
additional-css = ["theme/tabs.css", "theme/pagetoc.css"]
18+
additional-css = ["theme/tabs.css", "theme/pagetoc.css", "theme/discount.css"]
1919
additional-js = [
2020
"theme/tabs.js",
2121
"theme/pagetoc.js",
2222
"theme/ht_searcher.js",
2323
"theme/sponsor.js",
24+
"theme/discount.js",
2425
"theme/motion.js",
2526
"theme/ai.js"
2627
]

‎src/images/hacktricks-summer-discount-2026.png‎

1.26 MB
Loading

‎theme/discount.css‎

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
.ht-discount-overlay,
2+
.ht-discount-overlay * {
3+
box-sizing: border-box;
4+
}
5+
6+
.ht-discount-overlay {
7+
position: fixed;
8+
inset: 0;
9+
z-index: 100000;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
padding: 18px;
14+
background: rgba(2, 6, 16, 0.66);
15+
backdrop-filter: blur(8px);
16+
opacity: 0;
17+
visibility: hidden;
18+
transition: opacity 0.2s ease, visibility 0.2s ease;
19+
}
20+
21+
.ht-discount-overlay.ht-discount-overlay--visible {
22+
opacity: 1;
23+
visibility: visible;
24+
}
25+
26+
.ht-discount-card {
27+
--discount-accent: #2f7dff;
28+
--discount-accent-2: #ff3b4e;
29+
--discount-rx: 0deg;
30+
--discount-ry: 0deg;
31+
--discount-lift: 0px;
32+
--discount-scale: 1;
33+
--discount-img-x: 0px;
34+
--discount-img-y: 0px;
35+
position: relative;
36+
width: min(92vw, 520px);
37+
max-height: min(92vh, 760px);
38+
isolation: isolate;
39+
overflow: hidden;
40+
border-radius: 16px;
41+
padding: 12px;
42+
background: transparent;
43+
color: #eef4ff;
44+
font-family: "Chakra Petch", "Open Sans", system-ui, sans-serif;
45+
box-shadow: 0 26px 70px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(120, 150, 255, 0.1);
46+
transform: perspective(1000px) rotateX(var(--discount-rx)) rotateY(var(--discount-ry)) translateY(var(--discount-lift)) scale(var(--discount-scale));
47+
transform-style: preserve-3d;
48+
transition: transform 0.18s cubic-bezier(.2, .7, .3, 1);
49+
}
50+
51+
.ht-discount-card::before {
52+
content: "";
53+
position: absolute;
54+
inset: 1px;
55+
z-index: -2;
56+
border-radius: 15px;
57+
background: linear-gradient(162deg, #0a1016, #0c0910);
58+
}
59+
60+
.ht-discount-grid {
61+
position: absolute;
62+
inset: -1px;
63+
z-index: -3;
64+
border-radius: 17px;
65+
overflow: hidden;
66+
pointer-events: none;
67+
}
68+
69+
.ht-discount-grid::before {
70+
content: "";
71+
position: absolute;
72+
top: 50%;
73+
left: 50%;
74+
width: 760px;
75+
height: 760px;
76+
margin: -380px 0 0 -380px;
77+
background: conic-gradient(from 0deg, transparent 0deg, var(--discount-accent) 58deg, transparent 128deg, var(--discount-accent-2) 208deg, transparent 300deg);
78+
opacity: 0.58;
79+
animation: sc-spin 5s linear infinite;
80+
}
81+
82+
.ht-discount-scan {
83+
position: absolute;
84+
inset: 1px;
85+
z-index: -1;
86+
border-radius: 15px;
87+
overflow: hidden;
88+
pointer-events: none;
89+
opacity: 0.52;
90+
}
91+
92+
.ht-discount-scan::before {
93+
content: "";
94+
position: absolute;
95+
left: 0;
96+
right: 0;
97+
height: 120px;
98+
background: linear-gradient(180deg, transparent, rgba(47, 125, 255, 0.16), transparent);
99+
animation: sc-scan 3.7s linear infinite;
100+
}
101+
102+
.ht-discount-corners {
103+
position: absolute;
104+
inset: 1px;
105+
z-index: -1;
106+
border-radius: 15px;
107+
pointer-events: none;
108+
background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px);
109+
mix-blend-mode: overlay;
110+
opacity: 0.42;
111+
}
112+
113+
.ht-discount-kicker {
114+
position: absolute;
115+
top: 11px;
116+
left: 14px;
117+
z-index: 2;
118+
display: inline-flex;
119+
align-items: center;
120+
gap: 5px;
121+
max-width: calc(100% - 78px);
122+
padding: 4px 7px;
123+
border: 1px solid rgba(47, 125, 255, 0.38);
124+
border-radius: 4px;
125+
background: rgba(4, 10, 20, 0.72);
126+
color: var(--discount-accent);
127+
font-family: "JetBrains Mono", monospace;
128+
font-size: 8px;
129+
font-weight: 700;
130+
letter-spacing: 0.18em;
131+
line-height: 1.2;
132+
text-transform: uppercase;
133+
backdrop-filter: blur(8px);
134+
}
135+
136+
.ht-discount-kicker::before {
137+
content: "";
138+
width: 5px;
139+
height: 5px;
140+
flex: 0 0 auto;
141+
border-radius: 50%;
142+
background: var(--discount-accent);
143+
box-shadow: 0 0 8px var(--discount-accent);
144+
animation: sc-blink 1.6s ease-in-out infinite;
145+
}
146+
147+
.ht-discount-close {
148+
position: absolute;
149+
top: 10px;
150+
right: 15px;
151+
z-index: 3;
152+
width: 34px;
153+
height: 34px;
154+
display: inline-flex;
155+
align-items: center;
156+
justify-content: center;
157+
border: 1px solid rgba(255, 255, 255, 0.26);
158+
border-radius: 50%;
159+
background: rgba(4, 10, 20, 0.7);
160+
color: #eef4ff;
161+
cursor: pointer;
162+
font-family: "JetBrains Mono", monospace;
163+
font-size: 18px;
164+
line-height: 1;
165+
backdrop-filter: blur(8px);
166+
}
167+
168+
.ht-discount-close:hover,
169+
.ht-discount-close:focus-visible {
170+
border-color: rgba(255, 59, 78, 0.7);
171+
color: #fff;
172+
outline: none;
173+
}
174+
175+
.ht-discount-link {
176+
position: relative;
177+
display: block;
178+
overflow: hidden;
179+
border: 1px solid rgba(47, 125, 255, 0.28);
180+
border-radius: 12px;
181+
background: #08101a;
182+
text-decoration: none;
183+
}
184+
185+
.ht-discount-link::after {
186+
content: "";
187+
position: absolute;
188+
inset: 0;
189+
pointer-events: none;
190+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 26%, transparent 72%, rgba(47, 125, 255, 0.18));
191+
mix-blend-mode: screen;
192+
}
193+
194+
.ht-discount-image {
195+
display: block;
196+
width: 100%;
197+
aspect-ratio: 1 / 1;
198+
object-fit: cover;
199+
transform: translate3d(var(--discount-img-x), var(--discount-img-y), 0) scale(1.025);
200+
transition: transform 0.18s cubic-bezier(.2, .7, .3, 1);
201+
}
202+
203+
.ht-discount-actions {
204+
display: grid;
205+
grid-template-columns: minmax(0, 1fr) auto;
206+
gap: 10px;
207+
align-items: center;
208+
padding-top: 12px;
209+
}
210+
211+
.ht-discount-primary,
212+
.ht-discount-delay {
213+
min-height: 40px;
214+
display: inline-flex;
215+
align-items: center;
216+
justify-content: center;
217+
border-radius: 9px;
218+
font-family: "JetBrains Mono", monospace;
219+
font-size: 12px;
220+
font-weight: 700;
221+
letter-spacing: 0.08em;
222+
line-height: 1.2;
223+
text-align: center;
224+
text-transform: uppercase;
225+
}
226+
227+
.ht-discount-primary {
228+
border: 1px solid rgba(47, 125, 255, 0.42);
229+
background: rgba(47, 125, 255, 0.1);
230+
color: var(--discount-accent);
231+
text-decoration: none;
232+
}
233+
234+
.ht-discount-primary::after {
235+
content: "->";
236+
margin-left: 9px;
237+
animation: sc-arrow 1.4s ease-in-out infinite;
238+
}
239+
240+
.ht-discount-delay {
241+
border: 1px solid rgba(255, 255, 255, 0.2);
242+
background: rgba(255, 255, 255, 0.06);
243+
color: rgba(238, 244, 255, 0.84);
244+
cursor: pointer;
245+
padding: 0 12px;
246+
}
247+
248+
.ht-discount-primary:hover,
249+
.ht-discount-primary:focus-visible,
250+
.ht-discount-delay:hover,
251+
.ht-discount-delay:focus-visible {
252+
border-color: rgba(255, 59, 78, 0.7);
253+
color: #fff;
254+
outline: none;
255+
}
256+
257+
@media (max-width: 560px) {
258+
.ht-discount-overlay {
259+
padding: 10px;
260+
align-items: flex-end;
261+
}
262+
263+
.ht-discount-card {
264+
width: min(100%, 430px);
265+
padding: 9px;
266+
border-radius: 14px;
267+
}
268+
269+
.ht-discount-actions {
270+
grid-template-columns: 1fr;
271+
}
272+
273+
.ht-discount-kicker {
274+
top: 10px;
275+
left: 11px;
276+
font-size: 8px;
277+
letter-spacing: 0.14em;
278+
}
279+
280+
.ht-discount-close {
281+
top: 8px;
282+
right: 11px;
283+
}
284+
}
285+
286+
@media (prefers-reduced-motion: reduce) {
287+
.ht-discount-overlay,
288+
.ht-discount-card,
289+
.ht-discount-image {
290+
transition: none;
291+
}
292+
293+
.ht-discount-grid::before,
294+
.ht-discount-scan::before,
295+
.ht-discount-kicker::before,
296+
.ht-discount-primary::after {
297+
animation: none;
298+
}
299+
}

0 commit comments

Comments
 (0)