Last active
July 3, 2024 22:38
-
-
Save Dan-Q/fc308a8a4aca2934312939f92eaa9d2e to your computer and use it in GitHub Desktop.
Hacky PHP to produce a "blank" web page which somehow has content when viewed in Firefox. Sample page at https://danq.me/wp-content/no-code-webpage/, explanation at https://danq.me/nocode
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// half-hearted CSS minification | |
$css = preg_replace( | |
array('/\s*(\w)\s*{\s*/','/\s*(\S*:)(\s*)([^;]*)(\s|\n)*;(\n|\s)*/','/\n/','/\s*}\s*/'), | |
array('$1{ ','$1$3;',"",'} '), | |
file_get_contents('linked.css') | |
); | |
// embed as a data: uri | |
$base64css = rtrim(strtr(base64_encode($css), '+/', '-_'), '='); | |
header("Link: <data:text/css;charset=utf-8;base64,${base64css}>; rel=\"stylesheet\""); | |
// no page content ;-) | |
?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-attachment: fixed; | |
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%230e009d' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%230700a4' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%230001ac' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23000ab3' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%230014BA' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%230024c8' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%230036d6' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23004ae4' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%230061f2' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%230179FF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); | |
background-size: cover; | |
color: white; | |
margin: 0; | |
} | |
html::before, html::after, body::before, body::after { | |
animation: appear 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; | |
color: white; | |
display: block; | |
font-family: sans-serif; | |
} | |
html::before { | |
animation-delay: 0.2s; | |
border-bottom: 4px dotted #f0b466; | |
content: '🤣 The Page With No Code 💻'; | |
font-size: 48px; | |
font-weight: bold; | |
margin: 24px 12px; | |
padding-bottom: 24px; | |
text-align: center; | |
} | |
body::before { | |
animation-delay: 0.5s; | |
content: "It all started when I saw You Don't Need HTML ( no-ht.ml ) by Terence Eden ( shkspr.mobi/blog/2022/12/you-dont-need-html ). The approach he'd used worked, certainly, but it wasn't any more convoluted than just serving a Unicode plain text file as an index document. Plus: what was with that hacky doctype header? Was it possible, I wondered, to come up with anything... even worse. This web page answers that question with a resounding: yes!"; | |
font-size: 18px; | |
line-height: 1.35; | |
margin: 24px 12px; | |
text-align: justify; | |
} | |
body::after { | |
content: "This web page has NO CODE WHATSOEVER*. Use 'View Source' in your browser to see for yourself, or try downloading a copy with curl, wget, or what-have-you. It doesn't work in most browsers - I guess that the developers behind Chrome and Safari don't see the value of this particular kind of hackery - but it works in Firefox and maybe others too."; animation-delay: 0.8s; | |
font-size: 18px; | |
line-height: 1.35; | |
margin: 24px 12px; | |
text-align: justify; | |
} | |
html::after { | |
animation-delay: 1.1s; | |
border-top: 4px dotted #f0b466; | |
color: #ddd; | |
content: "* Obviously there's some code somewhere. Have a look yourself, first, too see if you can find where it comes from. Then, for an explanation of what you're seeing, go to: danq.me/nocode (sorry that the links aren't clickable)."; | |
font-size: 14px; | |
line-height: 1.2; | |
margin: 24px 12px; | |
padding-top: 24px; | |
} | |
@keyframes appear { | |
0% { | |
filter: blur(40px); | |
opacity: 0; | |
transform-origin: 0% 50%; | |
transform: translateX(1000px) scaleX(2.5) scaleY(0.2); | |
} | |
100% { | |
filter: blur(0); | |
opacity: 1; | |
transform-origin: 50% 50%; | |
transform: translateX(0) scaleY(1) scaleX(1); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment