Hey Guys,
I only have very basic knowledge of HTML and CSS and am experimenting with the Urlbox integration to generate a PDF. I managed to get Docsautomator working which is a great nocode option but I would like to experiment with Urlbox and/or PDF Monkey to see which will give the best solution.
I have come up with the following code using ChatGPT and have replaced the [actual data] with data from my app using a template column. If you pop the code below into an HTML renderer you’ll see what I want it to look like.
The problem is I’m not sure how the HTML and CSS needs to be structured in the Glide integration because I keep getting errors 
Would much appreciate any help. Also, maybe the way the code is written isn’t actually optimal?
<!DOCTYPE html>
<html>
<head>
<title>Construction Timesheet</title>
<style>
body {
font-family: Arial, sans-serif;
}
header, section {
margin: 20px;
padding: 20px;
border-radius: 10px;
background-color: #f9f9f9;
}
header {
display: flex;
align-items: center;
}
header img {
margin-right: 20px;
}
header .project-number {
color: #FC7B01;
font-weight: bold;
}
header .date {
font-size: 1.5em;
font-weight: bold;
margin: 0;
}
section table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
section th, section td {
padding: 8px;
text-align: left;
}
section h2 {
margin-top: 0;
color: #FC7B01;
}
section div {
margin-bottom: 10px;
}
.footnote {
font-size: 0.8em;
color: #777;
border-top: 1px solid #ccc;
padding-top: 10px;
margin-top: 10px;
}
.align-right {
text-align: right;
}
.timesheet-row {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<!-- Title/Header -->
<header>
<img src="your-company-logo.png" alt="Company Logo" height="100">
<div>
<div class="project-number">Project Number: [Project Number]</div>
<div class="date">Date: [Date]</div>
<div>Project Address: [Project Address]</div>
</div>
</header>
<!-- Timesheet Details -->
<section>
<h2>Details.</h2>
<div class="timesheet-row">
<div>Client:</div>
<div class="align-right">[Client]</div>
</div>
<div class="timesheet-row">
<div>Surveyor:</div>
<div class="align-right">[Surveyor]</div>
</div>
<div class="timesheet-row">
<div>Assistant:</div>
<div class="align-right">[Assistant]</div>
</div>
<div class="timesheet-row">
<div>Start Time:</div>
<div class="align-right">[Start Time]</div>
</div>
</section>
<!-- Work Details -->
<section>
<h2>Work.</h2>
<table>
<thead>
<tr>
<th>Plans Used</th>
<th>Works Conducted</th>
<th>Issues & Resolutions</th>
</tr>
</thead>
<tbody>
<tr>
<td>[Plans Used]</td>
<td>[Works Conducted]</td>
<td>[Issues & Resolutions]</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</section>
<!-- Billable Time -->
<section>
<h2>Time.</h2>
<table>
<thead>
<tr>
<th>Billable Time</th>
<th>After Hours</th>
<th>Weekend</th>
</tr>
</thead>
<tbody>
<tr>
<td>[Billable Time]</td>
<td>[After Hours]</td>
<td>[Weekend]</td>
</tr>
</tbody>
</table>
<div class="footnote">
Additional charges may apply for work conducted after hours, on weekends, or with an assistant surveyor.
</div>
<div class="align-right"><br>
<div>Authorised By: [Authorizing Person]</div>
<div>[Signature]</div>
</div>
</section>
</body>
</html>