adriangl/plakatgenerator-v2
1
1
Fork 0
Code Issues 1 Pull Requests Releases Activity
main
plakatgenerator-v2/generator.html

912 lines
73 KiB
HTML
Raw Permalink Normal View History

init
2024-08-05 19:45:11 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<div style="display: flex; align-items: center;">
<img alt="" style="width: 4em; height: 4%; filter: invert(1);" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjAwbW0iCiAgIGhlaWdodD0iMjAwbW0iCiAgIHZpZXdCb3g9IjAgMCAyMDAgMjAwIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMiAoYjhlMjViZTgzMywgMjAyMi0wMi0wNSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvZ29fYmxhY2tfdGhpY2Muc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9IkM6XFVzZXJzXGFsM3hrXE9uZURyaXZlIC0gTlROVVxQVlZcR29nc1xQUlxsb2dvZXJcbG9nb19ibGFja190aGljYy5wbmciCiAgIGlua3NjYXBlOmV4cG9ydC14ZHBpPSI0ODAiCiAgIGlua3NjYXBlOmV4cG9ydC15ZHBpPSI0ODAiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXc3IgogICAgIHBhZ2Vjb2xvcj0iIzUwNTA1MCIKICAgICBib3JkZXJjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjAuNTgyNzI3NCIKICAgICBpbmtzY2FwZTpjeD0iMzU3LjgwMDIzIgogICAgIGlua3NjYXBlOmN5PSI0ODIuMjE1MTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwNTciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9Imc5OCIKICAgICB3aWR0aD0iMjAwbW0iIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIGlkPSJnOTgiCiAgICAgICB0cmFuc2Zvcm09InNjYWxlKDAuMjUpIj4KICAgICAgPGcKICAgICAgICAgaWQ9IkxheWVyXzQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyODM2ODE7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjguMjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgICA8bGluZQogICAgICAgICAgIGNsYXNzPSJzdDEiCiAgICAgICAgICAgeDE9IjQ3OC4zOTk5OSIKICAgICAgICAgICB5MT0iNzIwLjI5OTk5IgogICAgICAgICAgIHgyPSIzMTMuMjAwMDEiCiAgICAgICAgICAgeTI9IjcyMC4yOTk5OSIKICAgICAgICAgICBpZD0ibGluZTkiCiAgICAgICAgICAgc3R5bGU9ImZpbGw6IzI4MzY4MTtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6OC4yO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgICBjbGFzcz0ic3QxIgogICAgICAgICAgIGQ9Ik0gNDc4LjQsNzIwLjMiCiAgICAgICAgICAgaWQ9InBhdGgxMSIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgICA8cG9seWxpbmUKICAgICAgICAgICBjbGFzcz0ic3QyIgogICAgICAgICAgIHBvaW50cz0iNzE3LjEsMjIzLjMgNzE3LjEsNzIwLjMgNDk3LjMsNzIwLjMgICIKICAgICAgICAgICBpZD0icG9seWxpbmUxMyIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgICA8cGF0aAogICAgICAgICAgIGNsYXNzPSJzdDIiCiAgICAgICAgICAgZD0ibSA0OTguMzk4ODgsNzIwLjMgYyAwLC01LjYgLTQuNSwtMTAuMSAtMTAuMSwtMTAuMSAtNS42LDAgLTEwLjEsNC41IC0xMC4xLDEwLjEgaCAtMTYzLjggYyAwLC01LjYgLTQuNSwtMTAuMSAtMTAuMSwtMTAuMSAtNS42LDAgLTEwLjEsNC41IC0xMC4xLDEwLjEgLTY5Ljc1OTIsMCAtMTQ1LjY4NDE3LDAgLTIxNy41OTk5OTYsMCBWIDc5LjcgSCA3MTcuMDk4ODggdiAxMjAgMCBoIC0xNy4zIHYgMjQuOCBoIDE3LjMiCiAgICAgICAgICAgaWQ9InBhdGgxNSIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjc2Njc2NjY2NjY2NjYyIgLz4KICAgICAgPC9nPgogICAgICA8ZwogICAgICAgICBpZD0iTGF5ZXJfMyIKICAgICAgICAgc3R5bGU9ImZpbGw6IzI4MzY4MTtmaWxsLW9wY
<h1 style="margin: 0; flex: 1;"> Kurs Plakatgenerator:</h1>
</div>
<div class="row">
<div class="col">
<label for="title">Title:</label><br>
<input type="text" id="title" name="title"><br>
</div>
<div class="col">
<label for="subtitle">Subtitle:</label><br>
<input type="text" id="subtitle" name="subtitle"><br>
</div>
</div>
<div class="col">
<label for="description">Description:</label><br>
<textarea id="description" name="description"></textarea><br>
</div>
<div style="margin-top: 2%;"><b>Image URL:</b></div>
<input type="file" id="imageFile" name="imageFile"><br>
<div class="row">
<div class="col">
<label for="time">Time:</label>
<input type="time" id="time" name="time" step="60" value="18:15"><br>
</div>
<div class="col">
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br>
</div>
</div>
<div class="row">
<div class="col">
<label for="location">Location:</label>
<input type="text" id="location" name="location" value="B1"><br>
</div>
<div class="col">
<label for="varighet">Duration (hours):</label>
<input type="number" id="varighet" name="varighet" value="2"><br>
</div>
</div>
<div class="row">
<div class="col">
<label for="language">Språk:</label>
<select id="language" name="language">
<option value="no" >Norwegian</option>
<option value="en" selected>English</option>
</select><br>
</div>
<div class="col">
<label for="paper_size">Paper Size:</label>
<select id="paper_size" name="paper_size">
<option value="A3" selected>A3</option>
<option value="A4">A4</option>
</select><br>
</div>
<div class="col">
<label for="ppi">PPI:</label>
<select id="ppi" name="ppi">
<option value="Auto" selected>Auto</option>
<option value="72">72 PPI</option>
<option value="96">96 PPI</option>
<option value="150">150 PPI</option>
<option value="300">300 PPI</option>
<option value="600">600 PPI</option>
</select><br>
</div>
</div>
<div class="row" style="margin-top: 1em; margin-bottom: 2em; font-size: 0.5em; ">
<label for="enable_advanced">Enable Advanced Options:</label>
<input type="checkbox" id="enable_advanced" name="enable_advanced"><br>
</div>
<div id="advanced-options" class="col" style="width: 48.5%;">
<div style="margin-top: 1em; font-size: 1.5em;">Advanced options:</div>
<div class="row" style="width: 100%;">
<label style="width: 30%;" for="image_size">Image Size:</label>
<input style="width: 30%;" type="number" id="image_size" name="image_size" placeholder="25"><br>
<label style="width: 30%;" for="image_size">Image X:</label>
<input style="width: 30%;" type="number" id="image_x" name="image_y" placeholder="75"><br>
<label style="width: 30%;" for="image_size">Image Y:</label>
<input style="width: 30%;" type="number" id="image_y" name="image_y" placeholder="40"><br>
</div>
<div class="row" style="width: 100%;">
<label style="width: 30%;" for="heading_size">Heading Size:</label>
<input style="width: 30%;" type="number" id="heading_size" name="heading_size" placeholder="100"><br>
<label style="width: 30%;" for="subheading_size">Subheading Size:</label>
<input style="width: 30%;" type="number" id="subheading_size" name="subheading_size" placeholder="50"><br>
<label style="width: 30%;" for="heading_width">Heading Width:</label>
<input style="width: 30%;" type="number" id="heading_width" name="heading_width" placeholder="100"><br>
</div>
<div class="row" style="width: 100%;">
<label style="width: 30%;" for="text_size">Text Size:</label>
<input style="width: 30%;" type="number" id="text_size" name="text_size" placeholder="1.1" step="0.1"><br>
<label style="width: 30%;" for="text_font" >Text Font:</label>
<input style="width: 30%;" type="text" id="text_font" name="text_font" placeholder="OCR A Extended"><br>
<label style="width: 30%;" for="text_width">Text Width:</label>
<input style="width: 30%;" type="number" id="text_width" name="text_width" placeholder="40"><br>
</div>
<div class="row" style="width: 100%;">
<label style="width: 50%;" for="number_of_notes">Notes:</label>
<input style="width: 50%;" type="number" id="number_of_notes" name="number_of_notes" placeholder="0"><br>
<label style="width: 50%;" for="number_of_notes">Notes X:</label>
<input style="width: 50%;" type="number" id="notes_x" name="notes_x" placeholder="50"><br>
</div>
</div>
<div class="row" style="width: 48.5%;">
<button type="button" onclick="generateSvg()">Generate SVG</button>
<button type="button" onclick="saveSvg()">Save SVG</button>
<button type="button" onclick="savePdf()">Save PDF</button>
</div>
</form>
<div class="container">
<svg id="svg"></svg>
<canvas id="canvas"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/pdfkit@0.10.0/js/pdfkit.standalone.js"></script>
<script src="https://bundle.run/blob-stream@0.1.3"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-to-pdfkit@0.1.8/source.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.9/umd.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js"> </script> -->
<script>
window.onload = function() {
const checkbox = document.getElementById("enable_advanced");
const advancedOptions = document.getElementById("advanced-options");
if (checkbox.checked) {
advancedOptions.style.display = "block";
} else {
advancedOptions.style.display = "none";
}
checkbox.addEventListener("change", function() {
if (this.checked) {
advancedOptions.style.display = "block";
} else {
advancedOptions.style.display = "none";
}
});
const fontcustom = document.getElementById("text_font");
document.body.style.fontFamily = '"'+fontcustom.value + '", "OCR A Extended", "Comic Sans MS", "Papyrus", "Brush Script MT", "Chalkduster", sans-serif';
fontcustom.addEventListener("change", function() {
document.body.style.fontFamily = '"'+this.value + '", "OCR A Extended", "Comic Sans MS", "Papyrus", "Brush Script MT", "Chalkduster", sans-serif';
});
}
function savePdf() {
const SVGElement = document.getElementById("svg");
const svg = new XMLSerializer().serializeToString(SVGElement);
const css = document.querySelector("style").innerText;
const newWindow = window.open("", "SVG Popup", "resizable,scrollbars,width=800,height=600");
newWindow.document.write(`<style>${css}</style><svg width="100%" height="100%" viewBox="0 0 100% 100%">${svg}</svg>`);
newWindow.document.close();
newWindow.focus();
newWindow.print();
newWindow.close();
}
function savePdf_old() {
const SVGElement = document.getElementById("svg");
const svg = new XMLSerializer().serializeToString(SVGElement);
const doc = new PDFDocument({ compress: false });
const width = doc.page.width;
const height = doc.page.height;
// Register font
doc.registerFont('MyFont', 'Roboto-Regular.ttf');
// Embed images
const imgData = canvas.toDataURL();
const img = doc.openImage(imgData);
//embed logo from innside svg with href logo_black_thicc.svg
const img2 = doc.openImage("logo_black_thicc.svg");
// Scale svg to fit page
const scalew = width / SVGElement.width.baseVal.value
const scaleh = height / SVGElement.height.baseVal.value
doc.scale(scalew, scaleh);
SVGtoPDF(doc, svg, 0, 0, {
assumePt: true,
fontCallback: (family, bold, italic, fontOptions) => 'MyFont',
useCSS: true,
// imageCallback: (url, x, y, width, height) => img,
colorCallback: (color) => color
});
const stream = doc.pipe(blobStream());
stream.on("finish", () => {
const blob = stream.toBlob("application/pdf");
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "pvv-plakat-" + document.getElementById("date").value + ".pdf";
link.click();
});
doc.end();
}
function saveSvg() {
const svg = document.getElementById("svg");
const svgData = new XMLSerializer().serializeToString(svg);
// Inject CSS into the SVG
// const style = document.querySelector("style");
// svg.insertBefore(style, svg.firstChild);
const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "pvv-plakat-" + document.getElementById("title").value + "-" + document.getElementById("date").value + ".svg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function generateSvg() {
const title = document.getElementById("title").value;
const subtitle = document.getElementById("subtitle").value;
const description = document.getElementById("description").value;
const imageUrl = document.getElementById("imageFile").files[0];
const time = document.getElementById("time").value;
const date = document.getElementById("date").value;
const location = document.getElementById("location").value;
const varighet = document.getElementById("varighet").value;
const language = document.getElementById("language").value;
// Advanced options
var imageSize = 0;
var imageX = 0;
var imageY = 0;
var headingSize = 0;
var subheadingSize = 0;
var headingWidth = 0;
var textSize = 0;
var textFont = "";
var textWidth = 0;
var numberOfNotes = 0;
var notesX = 0;
enabledAdvanced = document.getElementById("enable_advanced").checked;
if (enabledAdvanced) {
console.log("Advanced options enabled");
imageSize = Number(document.getElementById("image_size").value);
imageX = Number(document.getElementById("image_x").value);
imageY = Number(document.getElementById("image_y").value);
headingSize = Number(document.getElementById("heading_size").value);
subheadingSize = Number(document.getElementById("subheading_size").value);
headingWidth = Number(document.getElementById("heading_width").value);
textSize = Number(document.getElementById("text_size").value);
textWidth = Number(document.getElementById("text_width").value);
textFont = document.getElementById("text_font").value;
numberOfNotes = Number(document.getElementById("number_of_notes").value);
notesX = Number(document.getElementById("notes_x").value);
}
//get size and ppi and calculate width and height
const paper_size = document.getElementById("paper_size").value;
const ppi = document.getElementById("ppi").value;
let width = 0;
let height = 0;
//calculate width and height
if (ppi != "Auto") {
if (paper_size == "A4") {
width = 210 * ppi / 25.4;
height = 297 * ppi / 25.4;
} else if (paper_size == "A3") {
width = 297 * ppi / 25.4;
height = 420 * ppi / 25.4;
}
}
//set width and height to auto
//set width and height to auto
else {
const screenWidth = screen.width || window.innerWidth || document.documentElement.clientWidth;
const screenHeight = screen.height || window.innerHeight || document.documentElement.clientHeight;
const screenPpi = Math.sqrt(screenWidth * screenWidth + screenHeight * screenHeight) / Math.sqrt(screen.width * screen.width + screen.height * screen.height) * 96;
if (paper_size == "A4") {
width = 210 * screenPpi / 25.4;
height = 297 * screenPpi / 25.4;
} else if (paper_size == "A3") {
width = 297 * screenPpi / 25.4;
height = 420 * screenPpi / 25.4;
}
}
width = parseInt(width);
height = parseInt(height);
const reader = new FileReader();
if (imageUrl) {
reader.onload = function(event) {
const imgData = event.target.result;
genSvg("svg", title, subtitle, description, imgData, time, date, location, varighet, width, height, language, imageSize, imageX, imageY, headingSize, subheadingSize, headingWidth, textSize, textFont, textWidth, numberOfNotes, notesX);
};
reader.readAsDataURL(imageUrl);
} else {
const defaultSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjAwbW0iCiAgIGhlaWdodD0iMjAwbW0iCiAgIHZpZXdCb3g9IjAgMCAyMDAgMjAwIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMiAoYjhlMjViZTgzMywgMjAyMi0wMi0wNSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvZ29fYmxhY2tfdGhpY2Muc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9IkM6XFVzZXJzXGFsM3hrXE9uZURyaXZlIC0gTlROVVxQVlZcR29nc1xQUlxsb2dvZXJcbG9nb19ibGFja190aGljYy5wbmciCiAgIGlua3NjYXBlOmV4cG9ydC14ZHBpPSI0ODAiCiAgIGlua3NjYXBlOmV4cG9ydC15ZHBpPSI0ODAiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXc3IgogICAgIHBhZ2Vjb2xvcj0iIzUwNTA1MCIKICAgICBib3JkZXJjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjAuNTgyNzI3NCIKICAgICBpbmtzY2FwZTpjeD0iMzU3LjgwMDIzIgogICAgIGlua3NjYXBlOmN5PSI0ODIuMjE1MTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwNTciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9Imc5OCIKICAgICB3aWR0aD0iMjAwbW0iIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIGlkPSJnOTgiCiAgICAgICB0cmFuc2Zvcm09InNjYWxlKDAuMjUpIj4KICAgICAgPGcKICAgICAgICAgaWQ9IkxheWVyXzQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyODM2ODE7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjguMjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgICA8bGluZQogICAgICAgICAgIGNsYXNzPSJzdDEiCiAgICAgICAgICAgeDE9IjQ3OC4zOTk5OSIKICAgICAgICAgICB5MT0iNzIwLjI5OTk5IgogICAgICAgICAgIHgyPSIzMTMuMjAwMDEiCiAgICAgICAgICAgeTI9IjcyMC4yOTk5OSIKICAgICAgICAgICBpZD0ibGluZTkiCiAgICAgICAgICAgc3R5bGU9ImZpbGw6IzI4MzY4MTtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6OC4yO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgICBjbGFzcz0ic3QxIgogICAgICAgICAgIGQ9Ik0gNDc4LjQsNzIwLjMiCiAgICAgICAgICAgaWQ9InBhdGgxMSIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgICA8cG9seWxpbmUKICAgICAgICAgICBjbGFzcz0ic3QyIgogICAgICAgICAgIHBvaW50cz0iNzE3LjEsMjIzLjMgNzE3LjEsNzIwLjMgNDk3LjMsNzIwLjMgICIKICAgICAgICAgICBpZD0icG9seWxpbmUxMyIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgICA8cGF0aAogICAgICAgICAgIGNsYXNzPSJzdDIiCiAgICAgICAgICAgZD0ibSA0OTguMzk4ODgsNzIwLjMgYyAwLC01LjYgLTQuNSwtMTAuMSAtMTAuMSwtMTAuMSAtNS42LDAgLTEwLjEsNC41IC0xMC4xLDEwLjEgaCAtMTYzLjggYyAwLC01LjYgLTQuNSwtMTAuMSAtMTAuMSwtMTAuMSAtNS42LDAgLTEwLjEsNC41IC0xMC4xLDEwLjEgLTY5Ljc1OTIsMCAtMTQ1LjY4NDE3LDAgLTIxNy41OTk5OTYsMCBWIDc5LjcgSCA3MTcuMDk4ODggdiAxMjAgMCBoIC0xNy4zIHYgMjQuOCBoIDE3LjMiCiAgICAgICAgICAgaWQ9InBhdGgxNSIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjc2Njc2NjY2NjY2NjYyIgLz4KICAgICAgPC9nPgogICAgICA8ZwogICAgICAgICBpZD0iTGF5ZXJfMyIKICAgICAgICAgc3R5bGU9ImZpbGw6IzI4MzY4MTtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6OC4yO
genSvg("svg", title, subtitle, description, defaultSvg, time, date, location, varighet, width, height, language, imageSize, imageX, imageY, headingSize, subheadingSize, headingWidth, textSize, textFont, textWidth, numberOfNotes, notesX);
}
}
function genSvg(element, title_inp, subtitle_inp, description_inp, image_data_inp, time_inp, date_inp, location_inp, varighet_inp, width_inp, height_inp, language_inp, imageSize, imageX, imageY, headingSize, subheadingSize, headingWidth, textSize, textFont, textWidth, numberOfNotes, notesX) {
console.log("genSvg");
console.log("title: " + title_inp + ", subtitle: " + subtitle_inp + ", description: " + description_inp + ", time: " + time_inp + ", date: " + date_inp + ", location: " + location_inp + ", varighet: " + varighet_inp + ", width: " + width_inp + ", height: " + height_inp + ", language: " + language_inp + ", imageSize: " + imageSize + ", headingSize: " + headingSize + ", subheadingSize: " + subheadingSize + ", headingWidth: " + headingWidth + ", textSize: " + textSize + ", textFont: " + textFont + ", textWidth: " + textWidth + ", numberOfNotes: " + numberOfNotes);
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
//A4 96ppi
// svg.setAttribute("width", "794");
// svg.setAttribute("height", "1123");
svg.setAttribute("width", width_inp);
svg.setAttribute("height", height_inp);
//get width and height of svg
const svgWidth = parseInt(svg.getAttribute("width"));
const svgHeight = parseInt(svg.getAttribute("height"));
// calculate a font size scaling
var font_size_scaling_factor = parseInt(Math.min(svgWidth / 100, svgHeight / 100))
if (textSize != 0) {
var font_size_scaling_factor = parseInt(font_size_scaling_factor * textSize)
console.log("textSize: " + font_size_scaling_factor)
}
console.log(font_size_scaling_factor)
const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
filter.setAttribute("id", "shadow");
filter.setAttribute("x", "0%");
filter.setAttribute("y", "0%");
filter.setAttribute("width", "140%");
filter.setAttribute("height", "140%");
const feOffset = document.createElementNS("http://www.w3.org/2000/svg", "feOffset");
feOffset.setAttribute("result", "offOut");
feOffset.setAttribute("in", "SourceAlpha");
feOffset.setAttribute("dx", "5");
feOffset.setAttribute("dy", "5");
const feGaussianBlur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
feGaussianBlur.setAttribute("result", "blurOut");
feGaussianBlur.setAttribute("in", "offOut");
feGaussianBlur.setAttribute("stdDeviation", "3");
const feBlend = document.createElementNS("http://www.w3.org/2000/svg", "feBlend");
feBlend.setAttribute("in", "SourceGraphic");
feBlend.setAttribute("in2", "blurOut");
feBlend.setAttribute("mode", "normal");
filter.appendChild(feOffset);
filter.appendChild(feGaussianBlur);
filter.appendChild(feBlend);
defs.appendChild(filter);
svg.appendChild(defs);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("width", "100%");
rect.setAttribute("height", "100%");
rect.setAttribute("fill", "#283681");
svg.appendChild(rect);
const pathScale = 1.7;
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
const pathString = "M 0 0 H " + parseInt(0.8 * svgWidth * pathScale) + " C " + parseInt(0.9 * svgWidth * pathScale) + " 0 " + parseInt(0.9 * svgWidth * pathScale) + " " + parseInt(0.2 * svgHeight * pathScale) + " " + parseInt(0.8 * svgWidth * pathScale) + " " + parseInt(0.2 * svgHeight * pathScale) + " H " + parseInt(0.2 * svgWidth * pathScale) + " Q 0 " + parseInt(0.2 * svgHeight * pathScale) + " 0 " + parseInt(0.4 * svgHeight * pathScale) + " Z";
console.log(pathString);
path.setAttribute("d", pathString);
path.setAttribute("fill", "#fff");
path.setAttribute("opacity", "2");
path.setAttribute("filter", "url(#shadow)");
path.setAttribute("transform", "scale(0.6)");
svg.appendChild(path);
//heading
const title = document.createElementNS("http://www.w3.org/2000/svg", "text");
title.setAttribute("x", "45%");
if (headingWidth != 0){
console.log("headingWidth: " + headingWidth);
title.setAttribute("x", headingWidth/2 + "%");
}
title.setAttribute("y", "9%");
title.setAttribute("dominant-baseline", "middle");
title.setAttribute("text-anchor", "middle");
title.setAttribute("font-size", font_size_scaling_factor*10);
if (headingSize != 0){
console.log("headingSize: " + headingSize);
title.setAttribute("font-size", headingSize);
}
title.setAttribute("font-weight", "normal");
title.setAttribute("lengthAdjust", "spacing");
// title.setAttribute("textLength", "65%");
title.setAttribute("style", "max-width: 300px"); // Add max-width property
if (headingWidth != 0){
console.log("headingWidth: " + headingWidth);
title.setAttribute("style", "max-width: " + headingWidth + "px"); // Add max-width property
}
title.textContent = "{title}";
svg.appendChild(title);
const subtitle = document.createElementNS("http://www.w3.org/2000/svg", "text");
subtitle.setAttribute("x", "45%");
if (headingWidth != 0){
console.log("headingWidth: " + headingWidth);
subtitle.setAttribute("x", headingWidth/2 + "%");
}
subtitle.setAttribute("y", "15%");
subtitle.setAttribute("dominant-baseline", "middle");
subtitle.setAttribute("text-anchor", "middle");
subtitle.setAttribute("font-size", font_size_scaling_factor*4);
if (subheadingSize != 0){
console.log("subheadingSize: " + subheadingSize);
subtitle.setAttribute("font-size", subheadingSize);
}
subtitle.setAttribute("font-weight", "normal");
subtitle.setAttribute("lengthAdjust", "spacing");
// subtitle.setAttribute("textLength", "65%");
subtitle.setAttribute("style", "max-width: 300px"); // Add max-width property
if (headingWidth != 0){
console.log("headingWidth: " + headingWidth);
//set the width of the heading to headingWidth% of the svg width
subtitle.setAttribute("style", "max-width: " + headingWidth + "px"); // Add max-width property
}
subtitle.textContent = "{subtitle}";
svg.appendChild(subtitle);
// const descriptionTitle = document.createElementNS("http://www.w3.org/2000/svg", "text");
// descriptionTitle.setAttribute("x", "10%");
// descriptionTitle.setAttribute("y", "30%");
// descriptionTitle.setAttribute("dominant-baseline", "middle");
// descriptionTitle.setAttribute("text-anchor", "left");
// descriptionTitle.setAttribute("font-size", "14");
// descriptionTitle.setAttribute("font-weight", "bold");
// descriptionTitle.setAttribute("fill", "#fff");
// descriptionTitle.textContent = "{descriptionTitle}";
// svg.appendChild(descriptionTitle);
const descriptionText = description_inp;
const description = document.createElementNS("http://www.w3.org/2000/svg", "text");
description.setAttribute("x", "10%");
description.setAttribute("y", "26%");
description.setAttribute("dominant-baseline", "middle");
description.setAttribute("text-anchor", "left");
description.setAttribute("font-size", font_size_scaling_factor * 3);
description.setAttribute("fill", "#fff");
const lines = descriptionText.split("\n");
var maxChars = 40;
if (textWidth != 0){
console.log("textWidth: " + textWidth);
maxChars = textWidth;
}
const maxLines = 16;
for (let i = 0; i < Math.min(lines.length, maxLines); i++) {
const words = lines[i].split(" ");
let line = "";
for (let j = 0; j < words.length; j++) {
const testLine = line + words[j] + " ";
if (testLine.length > maxChars) {
const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan.setAttribute("x", "10%");
tspan.setAttribute("dy", "1.2em");
tspan.textContent = line;
description.appendChild(tspan);
line = words[j] + " ";
} else {
line = testLine;
}
}
const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan.setAttribute("x", "10%");
tspan.setAttribute("dy", "1.2em");
tspan.textContent = line;
description.appendChild(tspan);
}
if (description.childNodes.length > maxLines){
alert("Too many lines in description. \n Max lines: " + maxLines + ". Lines in description: " + description.childNodes.length + ".");
}
svg.appendChild(description);
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", "20%");
line.setAttribute("y1", "90%");
line.setAttribute("x2", "80%");
line.setAttribute("y2", "55%");
line.setAttribute("stroke", "#fff");
line.setAttribute("stroke-width", "0.7%");
svg.appendChild(line);
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "87.5%");
circle.setAttribute("cy", "52.5%");
circle.setAttribute("r", "15%");
circle.setAttribute("fill", "#fff");
svg.appendChild(circle);
const image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute("x", "74%");
if (imageX != 0){
console.log("imageX: " + imageX);
//set the image x position to imageX% of the svg width
image.setAttribute("x", imageX + "%");
}
image.setAttribute("y", "39.5%");
if (imageY != 0){
console.log("imageY: " + imageY);
//set the image y position to imageY% of the svg height
image.setAttribute("y", imageY + "%");
}
image.setAttribute("width", "25%");
image.setAttribute("height", "25%");
if (imageSize != 0){
console.log("imageSize: " + imageSize);
//set the image size to imageSize% of the svg width
image.setAttribute("width", imageSize + "%");
image.setAttribute("height", imageSize + "%");
}
image.setAttributeNS("http://www.w3.org/1999/xlink", "href", image_data_inp);
svg.appendChild(image);
const rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect2.setAttribute("x", "0");
rect2.setAttribute("y", "75%");
rect2.setAttribute("width", "100%");
rect2.setAttribute("height", "10%");
rect2.setAttribute("fill", "#fff");
rect2.setAttribute("filter", "url(#shadow)");
svg.appendChild(rect2);
const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", "50%");
text.setAttribute("y", "78%");
// text.setAttribute("textLength", "85%");
text.setAttribute("dominant-baseline", "middle");
text.setAttribute("text-anchor", "middle");
text.setAttribute("font-size", font_size_scaling_factor*3);
text.setAttribute("fill", "#323232");
text.setAttribute("font-weight", "bold");
console.log(language_inp + " language " + language_inp == "no");
var tspan1;
var tspan2;
var tspan3;
var tspan4;
var tspan5;
var tspan6;
if (language_inp == "no"){
tspan1 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan1.setAttribute("font-weight", "normal");
tspan1.textContent = "Tid:";
tspan2 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan2.setAttribute("font-weight", "bold");
tspan2.textContent = "{time}";
//custom postit notes under the date
//custom postit notes under the date
if (numberOfNotes != 0){
const rect3 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect3.setAttribute("x", notesX + "%");
rect3.setAttribute("y", "76%");
rect3.setAttribute("width", "17%");
rect3.setAttribute("height", "3%");
rect3.setAttribute("fill", "#FFFF00");
rect3.setAttribute("filter", "url(#shadow)");
svg.appendChild(rect3);
}
tspan3 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan3.setAttribute("font-weight", "normal");
tspan3.textContent = " Dato:";
tspan4 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan4.setAttribute("font-weight", "bold");
tspan4.textContent = "{date}";
tspan5 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan5.setAttribute("font-weight", "normal");
tspan5.textContent = " Sted:";
tspan6 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan6.setAttribute("font-weight", "bold");
tspan6.textContent = "{location}";
} else if (language_inp == "en"){
tspan1 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan1.setAttribute("font-weight", "normal");
tspan1.textContent = "Time:";
tspan2 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan2.setAttribute("font-weight", "bold");
tspan2.textContent = "{time}";
//custom postit notes under the date
if (numberOfNotes != 0){
const rect3 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect3.setAttribute("x", notesX + "%");
rect3.setAttribute("y", "76%");
rect3.setAttribute("width", "17%");
rect3.setAttribute("height", "3%");
rect3.setAttribute("fill", "#FFFF00");
rect3.setAttribute("filter", "url(#shadow)");
svg.appendChild(rect3);
}
tspan3 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan3.setAttribute("font-weight", "normal");
tspan3.textContent = " Date:";
tspan4 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan4.setAttribute("font-weight", "bold");
tspan4.textContent = "{date}";
tspan5 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan5.setAttribute("font-weight", "normal");
tspan5.textContent = " Location:";
tspan6 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan6.setAttribute("font-weight", "bold");
tspan6.textContent = "{location}";
}
text.appendChild(tspan1);
text.appendChild(tspan2);
text.appendChild(tspan3);
text.appendChild(tspan4);
text.appendChild(tspan5);
text.appendChild(tspan6);
// text.setAttribute("textLength", "70%");
svg.appendChild(text);
const text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text2.setAttribute("x", "50%");
text2.setAttribute("y", "81%");
// text2.setAttribute("textLength", "70%");
text2.setAttribute("dominant-baseline", "middle");
text2.setAttribute("text-anchor", "middle");
text2.setAttribute("font-size", font_size_scaling_factor*2);
text2.setAttribute("fill", "#424242");
var tspan7;
var tspan8;
if (language_inp == "no"){
tspan7 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan7.setAttribute("font-weight", "bold");
tspan7.textContent = "gratis";
tspan8 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan8.setAttribute("font-weight", "bold");
tspan8.textContent = "alle";
text2.textContent = "Kurset er ";
text2.appendChild(tspan7);
text2.textContent += " og åpent for ";
text2.appendChild(tspan8);
text2.textContent += ". Ingen påmelding nødvendig.";
} else if (language_inp == "en"){
tspan7 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan7.setAttribute("font-weight", "bold");
tspan7.textContent = " free ";
tspan8 = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
tspan8.setAttribute("font-weight", "bold");
tspan8.textContent = "everyone";
text2.textContent = "The course is ";
text2.appendChild(tspan7);
text2.textContent += " and open for ";
text2.appendChild(tspan8);
text2.textContent += ". No registration required. ";
}
svg.appendChild(text2);
const text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text3.setAttribute("x", "50%");
text3.setAttribute("y", "83.5%");
// text3.setAttribute("textLength", "35%");
text3.setAttribute("dominant-baseline", "middle");
text3.setAttribute("text-anchor", "middle");
text3.setAttribute("font-size", font_size_scaling_factor*2);
text3.setAttribute("fill", "#424242");
if (language_inp == "no"){
text3.textContent = "Kurset varer i ca.{varighet} timer";
} else if (language_inp == "en"){
text3.textContent = "The course lasts for about {varighet} hours";
}
svg.appendChild(text3);
const circle2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle2.setAttribute("cx", "18%");
circle2.setAttribute("cy", "92%");
circle2.setAttribute("r", "6.5%");
circle2.setAttribute("fill", "#fff");
svg.appendChild(circle2);
const image2 = document.createElementNS("http://www.w3.org/2000/svg", "image");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = document.createElement("img");
img.innerHTML = '<img id="logo_top" src="./logo_black_thicc.svg" width="250" heigth="250" style="width: 4em; height: 4%; filter: invert(1);" crossOrigin="Anonymous">'
canvas.width = 250;
canvas.height = 250;
ctx.drawImage(img, 0, 0);
//set origin-clean to false to allow svg to be drawn on canvas
const dataURL = canvas.toDataURL();
console.log(dataURL);
image2.setAttribute("x", "12%");
image2.setAttribute("y", "86%");
image2.setAttribute("width", "12%");
image2.setAttribute("height", "12%");
image2.setAttribute("href", "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjAwbW0iCiAgIGhlaWdodD0iMjAwbW0iCiAgIHZpZXdCb3g9IjAgMCAyMDAgMjAwIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMiAoYjhlMjViZTgzMywgMjAyMi0wMi0wNSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImxvZ29fYmxhY2tfdGhpY2Muc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9IkM6XFVzZXJzXGFsM3hrXE9uZURyaXZlIC0gTlROVVxQVlZcR29nc1xQUlxsb2dvZXJcbG9nb19ibGFja190aGljYy5wbmciCiAgIGlua3NjYXBlOmV4cG9ydC14ZHBpPSI0ODAiCiAgIGlua3NjYXBlOmV4cG9ydC15ZHBpPSI0ODAiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXc3IgogICAgIHBhZ2Vjb2xvcj0iIzUwNTA1MCIKICAgICBib3JkZXJjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMSIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjAuNTgyNzI3NCIKICAgICBpbmtzY2FwZTpjeD0iMzU3LjgwMDIzIgogICAgIGlua3NjYXBlOmN5PSI0ODIuMjE1MTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwNTciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9Imc5OCIKICAgICB3aWR0aD0iMjAwbW0iIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIGlkPSJnOTgiCiAgICAgICB0cmFuc2Zvcm09InNjYWxlKDAuMjUpIj4KICAgICAgPGcKICAgICAgICAgaWQ9IkxheWVyXzQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMyODM2ODE7ZmlsbC1vcGFjaXR5OjA7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjguMjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgICA8bGluZQogICAgICAgICAgIGNsYXNzPSJzdDEiCiAgICAgICAgICAgeDE9IjQ3OC4zOTk5OSIKICAgICAgICAgICB5MT0iNzIwLjI5OTk5IgogICAgICAgICAgIHgyPSIzMTMuMjAwMDEiCiAgICAgICAgICAgeTI9IjcyMC4yOTk5OSIKICAgICAgICAgICBpZD0ibGluZTkiCiAgICAgICAgICAgc3R5bGU9ImZpbGw6IzI4MzY4MTtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6OC4yO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgICBjbGFzcz0ic3QxIgogICAgICAgICAgIGQ9Ik0gNDc4LjQsNzIwLjMiCiAgICAgICAgICAgaWQ9InBhdGgxMSIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgICA8cG9seWxpbmUKICAgICAgICAgICBjbGFzcz0ic3QyIgogICAgICAgICAgIHBvaW50cz0iNzE3LjEsMjIzLjMgNzE3LjEsNzIwLjMgNDk3LjMsNzIwLjMgICIKICAgICAgICAgICBpZD0icG9seWxpbmUxMyIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgICAgICA8cGF0aAogICAgICAgICAgIGNsYXNzPSJzdDIiCiAgICAgICAgICAgZD0ibSA0OTguMzk4ODgsNzIwLjMgYyAwLC01LjYgLTQuNSwtMTAuMSAtMTAuMSwtMTAuMSAtNS42LDAgLTEwLjEsNC41IC0xMC4xLDEwLjEgaCAtMTYzLjggYyAwLC01LjYgLTQuNSwtMTAuMSAtMTAuMSwtMTAuMSAtNS42LDAgLTEwLjEsNC41IC0xMC4xLDEwLjEgLTY5Ljc1OTIsMCAtMTQ1LjY4NDE3LDAgLTIxNy41OTk5OTYsMCBWIDc5LjcgSCA3MTcuMDk4ODggdiAxMjAgMCBoIC0xNy4zIHYgMjQuOCBoIDE3LjMiCiAgICAgICAgICAgaWQ9InBhdGgxNSIKICAgICAgICAgICBzdHlsZT0iZmlsbDojMjgzNjgxO2ZpbGwtb3BhY2l0eTowO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo4LjI7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjc2Njc2NjY2NjY2NjYyIgLz4KICAgICAgPC9nPgogICAgICA8ZwogICAgICAgICBpZD0iTGF5ZXJfMyIKICAgICAgICAgc3R5bGU9ImZpbGw6IzI4MzY4MTtmaWxsLW9wYWNpdHk6MDtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6
svg.appendChild(image2);
const text4 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text4.setAttribute("x", "90%");
text4.setAttribute("y", "90%");
text4.setAttribute("dominant-baseline", "middle");
text4.setAttribute("text-anchor", "end");
text4.setAttribute("font-size", font_size_scaling_factor*3);
text4.setAttribute("fill", "#fff");
text4.setAttribute("font-weight", "bold");
if (language_inp == "no"){
text4.textContent = "Programvareverkstedet";
} else if (language_inp == "en"){
text4.textContent = "The Software Workshop (PVV)";
}
svg.appendChild(text4);
const text5 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text5.setAttribute("x", "90%");
text5.setAttribute("y", "93%");
text5.setAttribute("dominant-baseline", "middle");
text5.setAttribute("text-anchor", "end");
text5.setAttribute("font-size", font_size_scaling_factor*3);
text5.setAttribute("fill", "#fff");
text5.setAttribute("font-weight", "bold");
text5.textContent = "pvv.ntnu.no";
svg.appendChild(text5);
//get font style form css body element
const fonts = window.getComputedStyle(document.body).getPropertyValue('font-family');
console.log(fonts);
//add font style to svg
svg.style.fontFamily = fonts;
// Replace placeholders with values
svg.innerHTML = svg.innerHTML
.replace("{title}", title_inp)
.replace("{subtitle}", subtitle_inp)
.replace("{description}", description_inp)
.replace("{time}", time_inp)
.replace("{date}", date_inp)
.replace("{location}", location_inp)
.replace("{varighet}", varighet_inp);
//add id to svg
svg.setAttribute("id", "svg");
// // Add SVG to the document
// document.body.appendChild(svg);
//replace the element with the svg
document.getElementById(element).replaceWith(svg);
}
</script>
<style>
body {
background-color: #222;
color: #fff;
font-family: "OCR A Extended", "Comic Sans MS", "Papyrus", "Brush Script MT", "Chalkduster", sans-serif;
}
.row {
display: flex;
flex-direction: row;
justify-content:space-between;
width: 50%;
}
.col {
display: flex;
flex-direction: column;
width: 100%;
}
form{
width: 100%;
margin-left: 25%;
}
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
select {
background-color: #2b2b2b;
border: none;
border-radius: 3px;
color: #fff;
font-size: 1.5em;
margin-bottom: 10px;
padding: 10px;
width: 90%;
max-width: 50em;
}
textarea {
background-color: #2b2b2b;
border: none;
border-radius: 3px;
color: #fff;
font-size: 1.5em;
margin-bottom: 10px;
padding: 10px;
resize: vertical;
width: 47.5%;
max-width: 50%;
max-height: 80em;
}
label {
/* display: block; */
font-size: 1.5em;
margin-top: 10px;
}
input[type="file"] {
margin-bottom: 10px;
}
button {
background-color: #4d4d4d;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 1.5em;
margin-bottom: 10px;
width: 30%;
padding: 10px;
}
button:hover {
background-color: #666;
}
.container {
display: flex;
justify-content: center;
width: 112.5%;
}
</style>
</html>
Reference in New Issue Copy Permalink