Skip to content

Instantly share code, notes, and snippets.

@HarshKapadia2

HarshKapadia2/label-with-title-and-name.html

Last active January 12, 2024 19:57
Show Gist options
  • Save HarshKapadia2/2d9124127954592552a5f6ba01e6c4f2 to your computer and use it in GitHub Desktop.
Save HarshKapadia2/2d9124127954592552a5f6ba01e6c4f2 to your computer and use it in GitHub Desktop.
Download ZIP
To print on labels and A4 pages. Code by Kartik Soneji (https://github.com/KartikSoneji) and Harsh Kapadia (https://harshkapadia.me).
Raw
label-with-title-and-name.html
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "Anaktoria";
src: url("https://ourtech.community/static/fonts/anaktoria.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
body{
display: grid;
place-content: center;
margin: 0;
padding: 0;
}
@media print{
body{
display: block;
}
}
main{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.a4{
--width: 210mm;
--height: 297mm;
width: var(--width);
height: var(--height);
}
@media print{
@page{
size: a4 portrait;
}
}
@media not print{
.a4{
border: 1px solid black;
}
}
.sheet{
--margin-x: 0;
--margin-y: 0;
padding: var(--margin-y) var(--margin-x);
box-sizing: border-box;
}
.sheet label{
display: inline-grid;
align-content: start;
position: relative;
width: calc((var(--width) - 2 * var(--margin-x))/3);
height: calc((var(--height) - 2 * var(--margin-y))/9);
box-sizing: border-box;
border: 0px solid black;
}
@media not print{
.sheet label{
border-right-width: 1px;
border-bottom-width: 1px;
}
.sheet label:is(:nth-child(1), :nth-child(2), :nth-child(3)){
border-top-width: 1px;
}
.sheet label:nth-child(3n + 1){
border-left-width: 1px;
}
}
.sheet label span{
display: inline-block;
padding: 0.3rem 0.2rem;
text-align: center;
box-sizing: border-box;
font-family: "Anaktoria";
}
.sheet label span.title {
margin-top: 0.5rem;
font-size: 1.75rem;
}
.sheet label span.name {
margin-top: 0.25rem;
font-size: 2.25rem;
font-weight: bold;
letter-spacing: 2px;
}
#code-background{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #eee;
transform: rotateZ(-45deg);
z-index: -1;
}
</style>
<script>
let ATTENDEES = ["Siddharth kaduskar",
"Saket Thota",
"Raghav Rathi",
"Anas Khan",
"Darshit Suratwala",
"Hrishikesh Omprakash Yadav",
"Pranil Mandar Chitre",
"Hariprasad Sakhare",
"Prathamesh Pitale",
"Tuba Khan",
"Meet Nayak",
"Pratap Parui",
"Ashutosh Tiwari",
"Sagar Gupta",
"Ninad Naik",
"Wilfred Almeida",
"Ayub ali khan",
"Shubham Sah",
"Sarah Khan",
"Aditya R. Sonavane",
"Atharv Velhal",
"Yogesh Singh",
"Priyanshu Sondhiya",
"Vinayak Kesharwani",
"Gagan Nagu Vadamala",
"Badimi Prabodh",
"Jithendra Bathala",
"Adarsh Vinod Kesharwani",
"Dyavanapelli Sujal Prabhakar",
"Prathmesh Eknath Thakare",
"Muskan Chhabria",
"Siddhi Sharma",
"Kalyani jha",
"Rishit Kurup",
"Parth Todankar",
"Mihir Amin",
"Jay Oza",
"Jatin Shihora",
"Omkar saroj",
"Yuvraj Umesh Pawar",
"Bhavesh Kailash Kukreja",
"Dhanush Reddy",
"Ruchi Singh",
"Harsh Haresh Shah",
"Aashish Indulkar",
"Dhruv Dedhia",
"Vinay Kondabathula",
"Vatsal Shah",
"Hamza Shaikh",
"Deepti Singh",
"Hamza Shaikh",
"Gaurav Jha",
"Pooja Srivastava",
"swati tiwari",
"Patil Raj Vijay",
"Kartik Jolapara",
"Prerna Pal",
"Pratik Thakare",
"Snehil Seenu",
"Prathik Shetty",
"Atul Torne",
"Jaden Furtado",
"Abhigyan Bafna",
"Aniket Chavan",
"Aditya Apandkar",
"Chirag B",
"Sainath Poojary",
"Shashank Anil Gupta",
"Jai Parmani",
"Mustansir Sazid Godhrawala",
"Yashas Khot",
"Rahul Hanmandllu Gandla",
"Amol Kondiba Gawade",
"Yashkumar Dubey",
"Nabeel Parkar",
"Zaeem ul huda Ansari",
"Suraj Rajbhar",
"Advait Rabde",
"Mehul Aswar",
"Saurav Singh",
"Suraj Ramesh Mahato",
"Aditya Rajauria",
"Khushabu Sharma",
"Kamran Khan",
"Nishith Savla",
"Sujal Yadav Gaykar",
"Vansh Baghel",
"Yash Kamlesh Chauhan",
"Piush Chandranath Paul",
"Shreyas Maruti Bhalekar",
"Aditya shankar jambhale",
"Siddiqui Danish Ahmed Waliullah",
"Ashish Mishra",
"Shivam Gupta",
"Keshav Dhomase",
"Pradip Dubaria",
"Suraj Sahu",
"Iqra Miyaji",
"Anas Khan",
"Kamalika Ghora",
"Uma Iyer",
"Om Rajesh Hinge",
"Anam Ansari",
"Sreekesh Iyer",
"Saifuddin Kuresh Saifee",
"Pratik Tanaji Pol",
"Khalique Syed",
"Nikunj Arvind Jadhav",
"Maaz Orawala",
"Tanay Kamath",
"Ajaykumar Maurya",
"Aryan Pathak",
"Mihika Bodke",
"Dipin Sonwani",
"Aman Jain",
"Samruddhi Sangale",
"Shifa Khan",
"Manisha",
"Ankit Tripathi",
"Mamta Gupta",
"Saad Ansari",
"Siddharth Bhatia",
"Darshan Rajpurohit",
"Hardik Maheshwari",
"Khushal Ghathalia",
];
window.addEventListener("load", () => {
ATTENDEES = ATTENDEES
.map((name) =>
name
.split(/\s+/)
.map((n) => n[0].toUpperCase() + n.substring(1).toLowerCase())[0]
)
.sort();
ATTENDEES.push(
"Kartik",
"Harsh",
"Darshan",
"Dheeraj",
"Pranav",
"Tushar"
);
let page = parseInt(new URLSearchParams(location.search).get("page") ?? '0');
let labelTemplate = document.querySelector("#label-template");
let container = document.querySelector("main");
for(let i = 0; i < 27; i++){
let label = labelTemplate.cloneNode(true);
label.querySelector(".name").innerText = ATTENDEES[page * 27 + i] ?? "\u00a0";
container.append(label);
}
labelTemplate.remove();
});
</script>
</head>
<body>
<main class="a4 sheet">
<label id="label-template">
<span class="title">OTC MeetUp #4</span>
<span class="name">Qwerty Uiop</span>
</label>
</main>
</body>
</html>
Raw
label-with-title.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: grid;
place-content: center;
margin: 0;
padding: 0;
}
@media print{
body{
display: block;
}
}
main{
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 3mm;
}
.a4{
width: 210mm;
height: 297mm;
}
@media print{
@page{
size: a4 landscape;
}
}
@media not print{
.a4{
border: 1px solid black;
}
}
.sheet{
padding: 13mm 5.75mm;
box-sizing: border-box;
}
.sheet label{
display: inline-grid;
align-content: start;
position: relative;
width: 64mm;
height: 34.2mm;
}
@media not print{
.sheet label{
border-radius: 3mm;
border: 1px solid black;
box-sizing: border-box;
}
}
.sheet label span{
display: inline-block;
padding: 0.3rem 0.2rem;
text-align: center;
box-sizing: border-box;
font-size: 1.75rem;
font-weight: bold;
font-family: Monospace;
}
</style>
<script>
window.addEventListener("load", () => {
let label = document.querySelector("label");
for(let i = 0; i < 23; i++)
console.log(label.parentElement.append(label.cloneNode(true)));
});
</script>
</head>
<body>
<main class="a4 sheet">
<label>
<span>OTC MeetUp #1</span>
</label>
</main>
</body>
</html>
Raw
qr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<style>
@font-face {
font-family: "Anaktoria";
src: url("https://ourtech.community/static/fonts/anaktoria.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h1 {
font-family: "Anaktoria";
font-size: 5em;
/* font-size: 15em; */
}
img {
width: 80vw;
margin: 3em 0;
}
div {
font-family: "Montserrat";
font-size: 30px;
}
</style>
<title>OTC MeetUp #4</title>
</head>
<body>
<h1>OTC</h1>
<img src="./otc-links-qr.png" /> <!-- QR code from: https://www.the-qrcode-generator.com -->
<div>https://links.ourtech.community</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment