Created
January 18, 2026 11:42
-
-
Save batica81/dae4145054b6c69854ed35a1dea7a615 to your computer and use it in GitHub Desktop.
Template for printing envelope addresses
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Envelope Address</title> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| font-family: Arial, sans-serif; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| align-items: center; | |
| background-color: cornsilk; | |
| } | |
| #addressBox { | |
| margin-bottom: 40px; | |
| text-align: center; | |
| } | |
| #addressBox input { | |
| display: block; | |
| margin: 6px 0; | |
| border: none; | |
| outline: none; | |
| text-align: center; | |
| width: 400px; | |
| background: transparent; | |
| } | |
| /* Individual styling per line */ | |
| #line1 { font-size: 25px; font-weight: 700; } | |
| #line2 { font-size: 25px; font-weight: 400; } | |
| #line3 { font-size: 25px; font-weight: 400; } | |
| #line4 { font-size: 25px; font-weight: 400; } | |
| #line5 { font-size: 25px; font-weight: 700; } | |
| button { | |
| margin: 20px; | |
| padding: 8px 20px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| } | |
| .printButon { | |
| font-size: 18px; | |
| font-weight: 700; | |
| } | |
| @media print { | |
| @page { | |
| size: 210mm 297mm; /* A4 portrait */ | |
| margin: 0; | |
| } | |
| body { | |
| transform: rotate(180deg); | |
| transform-origin: center; | |
| } | |
| button { | |
| display: none; | |
| } | |
| #addressBox input { | |
| border: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="buttonWrapper"> | |
| <button onclick="fillSase()">SASE</button> | |
| <button class="printButon" onclick="window.print()">Print</button> | |
| <button onclick="clearFields()">Clear</button> | |
| </div> | |
| <div id="addressBox"> | |
| <input class="inputBox" id="line1" placeholder="Full Name"> | |
| <input class="inputBox" id="line2" placeholder="Street and Number"> | |
| <input class="inputBox" id="line3" placeholder="ZIP / CITY"> | |
| <input class="inputBox" id="line4" > | |
| <input class="inputBox" id="line5" placeholder="Country"> | |
| </div> | |
| <script> | |
| function clearFields() { | |
| const inputs = document.getElementsByClassName('inputBox'); | |
| for (let i = 0; i < inputs.length; i++) { | |
| inputs[i].value = ''; | |
| } | |
| } | |
| function fillSase() { | |
| document.getElementById('line1').value = 'Vojislav Ristivojević' | |
| document.getElementById('line2').value = 'Ilije Stojadinovića 53/7' | |
| document.getElementById('line3').value = 'PAK 173886' | |
| document.getElementById('line4').value = '11000 Belgrade' | |
| document.getElementById('line5').value = 'Serbia' | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment