Is there a way to apply CSS similar to the image below to a one-page QR ticket generated by Java? I've tried altering the current CSS without much success. desired output
This is the existing code for the function:
function openQRCodeWindow(registrationId) {
var qrCodeImage = generatedQRCode._el.firstChild.toDataURL("image/png");
var firstName = document.getElementById("first-name").value;
var lastName = document.getElementById("last-name").value;
var email = document.getElementById("email").value;
var contactNumber = document.getElementById("contact-number").value;
var seatNumber = document.getElementById("seat-number").textContent;
var newWindow = window.open();
newWindow.document.write('<style>');
newWindow.document.write('body { display: flex; flex-direction: column; align-items: center; background-image: url("megapolis background.png"); background-size: cover; }');
newWindow.document.write('.container { display: flex; justify-content: space-between; align-items: center; padding: 50px; border: 2px solid #ccc; border-radius: 10px; width: 400px; }');
newWindow.document.write('.qr-container { margin-right: 20px; }');
newWindow.document.write('.details-container { text-align: right; }');
newWindow.document.write('.button-container { margin-top: 20px; text-align: center; }');
newWindow.document.write('.button-container button { margin: 0 5px; }');
newWindow.document.write('</style>');
newWindow.document.write('<h2>QR Code</h2>'); // Place the QR code title here
newWindow.document.write('<div class="container" id="form-container">');
newWindow.document.write('<div class="qr-container">');
newWindow.document.write('<img src="' + qrCodeImage + '">');
newWindow.document.write('</div>');
newWindow.document.write('<div class="details-container">');
newWindow.document.write('<h3>Details</h3>');
newWindow.document.write('<p>Registration ID: ' + registrationId + '</p>'); // Display the Firebase-generated ID
newWindow.document.write('<p>First Name: ' + firstName + '</p>');
newWindow.document.write('<p>Last Name: ' + lastName + '</p>');
newWindow.document.write('<p>Email: ' + email + '</p>');
newWindow.document.write('<p>Contact Number: ' + contactNumber + '</p>');
newWindow.document.write('<p>' + seatNumber + '</p>');
newWindow.document.write('</div>');
newWindow.document.write('</div>');
newWindow.document.write('<div class="button-container">');
newWindow.document.write('<button id="save-image-btn">Save Image</button>');
newWindow.document.write('<button id="email-btn">Email</button>');
newWindow.document.write('</div>');
newWindow.document.close();
I attempted to use inline styles in the JavaScript function, but it didn't produce the desired results. I'm unsure of how to properly add CSS to JavaScript functions.