I need to send a ticket from a list of emails from a google spreadsheet but I want them to receive a ticket that is designed through html. The catch is that the ticket number should be based on what number is indicated in the spreadsheet cell and it should be sent to them through a trigger word in the sheet.
html
<!DOCTYPE html>
<html>
<head><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="-1"><style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Ubuntu&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
background: white;
color: black;
display: grid;
font-family: "Staatliches", cursive;
font-size: 14px;
height: 100vh;
letter-spacing: 0.1em;
}
.ticket {
background: white;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
display: flex;
margin: auto;
}
.left {
display: flex;
}
.image {
background-image: url("https://drive.google.com/uc?id=1eCyBxQSZy4XcdhsurTGYHmnhgq1vHfoe");
background-size: contain;
bottom:
height: 270px;
opacity: 0.85;
width: 250px;
}
.admit-one {
position: absolute;
color: darkgray;
height: 250px;
padding: 0 10px;
letter-spacing: 0.15em;
display: flex;
text-align: center;
justify-content: space-around;
writing-mode: vertical-rl;
transform: rotate(-180deg);
}
.admit-one span:nth-child(2) {
color: #737373;
font-weight: 700;
}
.left .ticket-number {
height: 250px;
width: 250px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 5px;
}
.ticket-info {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 30px;
text-align: center;
}
.date {
align-items: center;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
display: flex;
font-weight: 700;
justify-content: space-around;
padding: 5px 0;
}
.date span {
width: 100px;
}
.date span:first-child {
text-align: left;
}
.date span:last-child {
text-align: right;
}
.date .oct-21 {
color: #1F386E;
font-size: 15px;
}
.show-name {
color: #1F386E;
font-family: "Ubuntu";
font-size: 30px;
}
.show-name h1 {
color: #1F386E;
font-size: 48px;
font-weight: 700;
letter-spacing: 0.1em;
padding-bottom: 10px;
}
.time {
color: #1F386E;
display: flex;
flex-direction: column;
font-weight: 500;
padding: 10px 0;
text-align: center;
}
.time span {
color: gray;
font-weight: 400;
}
.left .time {
font-size: 16px;
}
.location {
align-items: center;
border-top: 1px solid gray;
display: flex;
justify-content: space-around;
padding-bottom: 20px;
padding-top: 8px;
width: 100%;
}
.location .separator {
font-size: 20px;
}
.right {
border-left: 5px dashed #404040;
width: 180px;
}
.right .admit-one {
color: darkgray;
}
.right .admit-one span:nth-child(2) {
color: gray;
}
.right .right-info-container {
display: flex;
flex-direction: column;
height: 250px;
justify-content: space-around;
padding: 25px 10px 10px 35px;
}
.right .show-name h1 {
font-size: 18px;
left: 0px;
line-height: 0px;
}
.rofi {
background-image: url("https://drive.google.com/uc?id=1YgqYUxv6NjciPZOLiP7sxVjTGLcJ9RDm");
background-repeat: no-repeat;
background-size: contain;
bottom: 40px;
height: 99px;
opacity: 0.85;
position: relative;
top: 0.5px;
width: 130px;
}
.right .ticket-number {
align-items: center;
bottom: 30px;
font-size: 14px;
left: 30px;
position: relative;
}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head><body><div class="ticket">
<div class="left">
<div class="image">
<p class="admit-one">
<span>ADMIT ONE</span>
<span>ADMIT ONE</span>
<span>ADMIT ONE</span>
</p>
</div>
<div class="ticket-info">
<p class="date">
<span>Friday</span>
<span class="oct-21">October 21st</span>
<span>2022</span>
</p>
<div class="show-name">
<h1>001</h1>
<h2>Ticket Number</h2>
</div>
<div class="time">
<p>7:00 AM <span>TO</span> 4:00 PM</p>
<p>Registration <span>@</span> 7:00 AM</p>
<p>Shotgun Tee-off <span>@</span> 8:00 AM</p>
</div>
<p class="location"><span>Mt. Malarayat Golf & Country Club Lipa Batangas</span>
</p></div>
</div>
<div class="right">
<p class="admit-one">
<span>ADMIT ONE</span>
<span>ADMIT ONE</span>
<span>ADMIT ONE</span>
</p>
<div class="right-info-container">
<div class="show-name">
<h1>For inquiries</h1>
</div>
<div class="time">
<p>Contact us at</p>
<p>09178804200 rofi@rayomar.com.ph</p>
</div>
<div class="rofi"></div>
</div>
<div class="ticket-number">
<p> Save this ticket and present at the booth</p>
</div>
</div>
</div><script>// Write JavaScript here </script></body>