385 lines
22 KiB
HTML
385 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SVG Layout Generator</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
/* background-color: #334173; */
|
|
color: white;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="svgContainer"></div>
|
|
|
|
<script>
|
|
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;
|
|
const paper_size = "A3";
|
|
|
|
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;
|
|
}
|
|
|
|
function createSVG() {
|
|
const svgNS = "http://www.w3.org/2000/svg";
|
|
|
|
// Create the SVG element
|
|
const svg = document.createElementNS(svgNS, "svg");
|
|
svg.setAttribute("width", width);
|
|
svg.setAttribute("height", height);
|
|
svg.setAttribute("viewBox", "0 0 " + width + " " + height);
|
|
|
|
|
|
const backgroundRect = document.createElementNS(svgNS, "rect");
|
|
backgroundRect.setAttribute("x", "0");
|
|
backgroundRect.setAttribute("y", "0");
|
|
backgroundRect.setAttribute("width", width);
|
|
backgroundRect.setAttribute("height", height);
|
|
backgroundRect.setAttribute("fill", "#334173");
|
|
svg.appendChild(backgroundRect);
|
|
|
|
// Header
|
|
const headerHeight = height * 0.07;
|
|
const path_width = width * 0.5;
|
|
const headerGroup = document.createElementNS(svgNS, "g");
|
|
|
|
const headerPath = document.createElementNS(svgNS, "path");
|
|
const pathData = `
|
|
M 0 0
|
|
H ${path_width}
|
|
C ${path_width * 0.75} 0 ${path_width * 0.75} ${headerHeight} ${path_width * 0.6} ${headerHeight * 0.95}
|
|
H 0
|
|
Z
|
|
`;
|
|
headerPath.setAttribute("d", pathData);
|
|
headerPath.setAttribute("fill", "#ffffff");
|
|
|
|
// Header text inside the path
|
|
const headerTextInside = document.createElementNS(svgNS, "text");
|
|
headerTextInside.setAttribute("x", `${path_width * 0.07}`);
|
|
headerTextInside.setAttribute("y", `${headerHeight * 0.6}`);
|
|
headerTextInside.setAttribute("fill", "#000");
|
|
headerTextInside.setAttribute("font-size", `${headerHeight * 0.38}`);
|
|
headerTextInside.textContent = "PVV fadderuke";
|
|
|
|
// Header text outside the path, tilted
|
|
const headerTextOutside = document.createElementNS(svgNS, "text");
|
|
headerTextOutside.setAttribute("x", `${path_width * 0.9}`);
|
|
headerTextOutside.setAttribute("y", `${headerHeight * 0.7}`);
|
|
headerTextOutside.setAttribute("fill", "#fff");
|
|
headerTextOutside.setAttribute("font-size", `${headerHeight * 0.3}`);
|
|
headerTextOutside.textContent = "Åpent for alle!";
|
|
const textCenterX = path_width * 0.8;
|
|
const textCenterY = headerHeight * 1.1;
|
|
headerTextOutside.setAttribute("transform", `rotate(-7 ${textCenterX},${textCenterY})`);
|
|
|
|
// Year text
|
|
const yearText = document.createElementNS(svgNS, "text");
|
|
yearText.setAttribute("x", `${width - headerHeight * 3}`);
|
|
yearText.setAttribute("y", `${headerHeight * 0.7}`);
|
|
yearText.setAttribute("fill", "#fff");
|
|
yearText.setAttribute("font-size", `${headerHeight * 0.56}`);
|
|
yearText.textContent = "2024";
|
|
|
|
// Invert the colors of the logo filter
|
|
const filter = document.createElementNS(svgNS, "filter");
|
|
filter.setAttribute("id", "invert");
|
|
const feColorMatrix = document.createElementNS(svgNS, "feColorMatrix");
|
|
feColorMatrix.setAttribute("type", "matrix");
|
|
feColorMatrix.setAttribute("values", "-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0");
|
|
filter.appendChild(feColorMatrix);
|
|
svg.appendChild(filter);
|
|
|
|
const headerLogo = document.createElementNS(svgNS, "image");
|
|
headerLogo.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "logo_black_thicc.svg");
|
|
headerLogo.setAttribute("x", `${width - headerHeight * 1.2}`);
|
|
headerLogo.setAttribute("y", "0");
|
|
headerLogo.setAttribute("width", `${headerHeight}`);
|
|
headerLogo.setAttribute("height", `${headerHeight}`);
|
|
headerLogo.setAttribute("filter", "url(#invert)");
|
|
|
|
// Append elements to the header group
|
|
headerGroup.appendChild(headerPath);
|
|
headerGroup.appendChild(headerTextInside);
|
|
headerGroup.appendChild(headerTextOutside);
|
|
headerGroup.appendChild(yearText);
|
|
headerGroup.appendChild(headerLogo);
|
|
|
|
svg.appendChild(headerGroup);
|
|
|
|
//Start of middle Event part.
|
|
// Constants for layout and styling
|
|
const eventBoxPadding = width * 0.03;
|
|
const eventBoxWidth = width * (1-(2*0.03));
|
|
const eventBoxHeight = height * 0.36;
|
|
const logoMargin = 10; // Margin between the border and the logo
|
|
const eventSpacing = eventBoxHeight * 0.015;
|
|
const lineColor = "#334173"; // Background color for the lines
|
|
const logoSize = eventBoxHeight / 10;
|
|
|
|
// Event descriptions with additional attributes
|
|
const eventsStartDate = 12;
|
|
const weekdays = ["Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag", "Søndag"];
|
|
const eventDescriptions = [
|
|
{ date: "Mandag 12.08", name: "Åpen dag", description: "Kom og møt oss! Utforsk lokalene våre, slå av en prat, og bli kjent med flotte folk!", time: "Hele dagen", location: "", icon: "åpendag.svg", signup: false },
|
|
{ date: "Tirsdag 13.08", name: "Åpen dag / Brettspill", description: "Kom og møt oss, slå av en prat, og spill brettspill fra vår store kollekjon!", time: "Hele dagen", location: "", icon: "brettspill.svg", signup: false },
|
|
{ date: "Onsdag 16.08", name: "Filmkveld", description: "Vi ser film som gjerne relaterer til PVVs interesseområder.", time: "kl. 17-22", location: "", icon: "movie.svg", signup: true },
|
|
{ date: "Torsdag 17.08", name: "Hackekveld", description: "Vi jobber med artige proggeprosjekter sammen!", time: "kl. 17-22", location: "", icon: "hackekveld.svg", signup: true },
|
|
{ date: "Fredag 18.08", name: "AbeLAN", description: "Vi samarbeider med AbelLAN om å holde det feteste LANet i hele fadderperioden!", time: "kl. 17-24", location: "Realfagsbygget, R2", icon: "abellan.svg", signup: true },
|
|
{ date: "Lørdag 19.08", name: "Anime", description: "Bli med på PVVs faste animekveld, der vi viser sesongens nyeste anime!", time: "kl. 19-23", location: "", icon: "anime.svg", signup: false },
|
|
{ date: "Søndag 20.08", name: "Guide & Grilling", description: "Omvisning rundt Gløshaugen, etterfulgt av grilling i Høgskoleparken!", time: "kl. 14-20", location: "", icon: "grill3.svg", signup: false },
|
|
{ date: "Mandag 21.08", name: "Quiz", description: "Konkurrér med og mot andre studenter, og test dine trivia-kunnskaper!", time: "kl. 18-21", location: "", icon: "quiz.svg", signup: false },
|
|
{ date: "Tirsdag 22.08", name: "Brettspill", description: "Vi spiller brettspill fra vår store in-house kollekjon.", time: "kl. 16-21", location: "", icon: "brettspill2.svg", signup: false },
|
|
{ date: "Onsdag 23.08", name: "Anime", description: "PVV går sammen med AnimeNTNU om å vise gamle anime-klassikere.", time: "kl. 19-22", location: "", icon: "anime2.svg", signup: false },
|
|
{ date: "Torsdag 24.08", name: "Bowling", description: "Vi drar til Centrum Bowling for å bowle!", time: "kl. 17:30-21", location: "Centrum Bowling", icon: "bowling.jpg", signup: true },
|
|
{ date: "Fredag 25.08", name: "Dungeons & Dragons", description: "Vi arrangerer en D&D oneshot for nye og gamle spillere.", time: "kl. 15:30-21", location: "", icon: "dnd.svg", signup: true },
|
|
{ date: "Lørdag 26.08", name: "Hackekveld / Skaperfest", description: "Vi jobber med proggeprosjekter og drar til Skaperfest sammen!", time: "kl. 17-22 /\n kl. 14:30-NaN", location: "Torget/PVV", icon: "hackekveld.svg", signup: true },
|
|
{ date: "Søndag 27.08", name: "Avslutning", description: "Avslutt fadderperioden med hygge, sosialt, og gratis pizza!", time: "kl. 16-21", location: "", icon: "avslutning.svg", signup: false }
|
|
];
|
|
|
|
// Function to create an event group
|
|
function createEventGroup(events, offsetY) {
|
|
const group = document.createElementNS(svgNS, "g");
|
|
const groupHeight = eventBoxHeight + eventSpacing * (events.length - 1);
|
|
|
|
// Create rounded rectangle for the group
|
|
const groupRect = document.createElementNS(svgNS, "rect");
|
|
groupRect.setAttribute("x", eventBoxPadding);
|
|
groupRect.setAttribute("y", offsetY);
|
|
groupRect.setAttribute("width", eventBoxWidth);
|
|
groupRect.setAttribute("height", groupHeight);
|
|
groupRect.setAttribute("rx", 20);
|
|
groupRect.setAttribute("ry", 20);
|
|
groupRect.setAttribute("fill", "#ffffff");
|
|
groupRect.setAttribute("stroke", "#334173");
|
|
groupRect.setAttribute("stroke-width", 3);
|
|
group.appendChild(groupRect);
|
|
|
|
events.forEach((event, index) => {
|
|
const boxGroup = document.createElementNS(svgNS, "g");
|
|
const boxX = eventBoxPadding + logoMargin;
|
|
const boxY = offsetY + index * (eventBoxHeight / 7 + eventSpacing);
|
|
|
|
// Logo image (actual icon)
|
|
const logoImage = document.createElementNS(svgNS, "image");
|
|
logoImage.setAttribute("href", `ikoner/${event.icon}`);
|
|
logoImage.setAttribute("x", boxX);
|
|
logoImage.setAttribute("y", boxY + logoMargin);
|
|
logoImage.setAttribute("width", logoSize);
|
|
logoImage.setAttribute("height", logoSize);
|
|
|
|
// Event header (title, location, date, time)
|
|
const headerX = boxX + logoSize + logoMargin * 2;
|
|
const headerY = boxY + logoMargin + logoSize / 2;
|
|
|
|
const eventHeaderText = document.createElementNS(svgNS, "text");
|
|
eventHeaderText.setAttribute("x", headerX);
|
|
eventHeaderText.setAttribute("y", headerY);
|
|
eventHeaderText.setAttribute("fill", "#000");
|
|
eventHeaderText.setAttribute("font-size", (eventBoxHeight / 14) * 0.8);
|
|
eventHeaderText.setAttribute("font-weight", "bold");
|
|
eventHeaderText.textContent = event.name;
|
|
const eventDateText = document.createElementNS(svgNS, "text");
|
|
if (event.location.length > 2) {
|
|
eventDateText.textContent = `${event.location} ${weekdays[(eventsStartDate + index +2) % 7]} ${eventsStartDate + index} ${event.time}`;
|
|
} else {
|
|
eventDateText.textContent = `${weekdays[(eventsStartDate + index +2) % 7]} ${eventsStartDate + index} ${event.time}`;
|
|
}
|
|
eventDateTextWidth = eventDateText.getComputedTextLength();
|
|
eventDateText.setAttribute("x", width - eventDateTextWidth - eventBoxPadding - logoMargin * 6);
|
|
eventDateText.setAttribute("y", headerY);
|
|
eventDateText.setAttribute("fill", "#545454");
|
|
eventDateText.setAttribute("text-anchor", "end"); // Right-align the text
|
|
eventDateText.setAttribute("font-size", (eventBoxHeight / 16) * 0.8);
|
|
|
|
const eventDateLines = eventDateText.textContent.split('\n');
|
|
eventDateText.textContent = ''; // Clear the textContent to append tspans
|
|
|
|
eventDateLines.forEach((line, index) => {
|
|
const tspan = document.createElementNS(svgNS, "tspan");
|
|
tspan.setAttribute("x", width - eventDateTextWidth - eventBoxPadding - logoMargin * 6);
|
|
tspan.setAttribute("dy", index === 0 ? 0 : "1.2em"); // Adjust dy for subsequent lines
|
|
tspan.textContent = line;
|
|
eventDateText.appendChild(tspan);
|
|
});
|
|
|
|
|
|
// Event description as body
|
|
const eventDescriptionText = document.createElementNS(svgNS, "text");
|
|
eventDescriptionText.setAttribute("x", headerX);
|
|
eventDescriptionText.setAttribute("y", headerY + logoSize/2);
|
|
eventDescriptionText.setAttribute("fill", "#000");
|
|
eventDescriptionText.setAttribute("font-size", (eventBoxHeight / 11.5) * 0.5);
|
|
eventDescriptionText.textContent = event.description;
|
|
|
|
// Padlock icon if signup is required
|
|
if (event.signup) {
|
|
const padlockImage = document.createElementNS(svgNS, "image");
|
|
padlockImage.setAttribute("href", "ikoner/lock.svg");
|
|
padlockImage.setAttribute("x", boxX + eventBoxWidth - logoSize / 1.5 - logoMargin * 2);
|
|
padlockImage.setAttribute("y", boxY + eventBoxHeight / 7 - logoSize / 1.5 - logoMargin);
|
|
padlockImage.setAttribute("width", logoSize / 1.5);
|
|
padlockImage.setAttribute("height", logoSize / 1.5);
|
|
boxGroup.appendChild(padlockImage);
|
|
}
|
|
|
|
// Line separator
|
|
if (index < events.length - 1) {
|
|
const line = document.createElementNS(svgNS, "line");
|
|
line.setAttribute("x1", boxX);
|
|
line.setAttribute("y1", boxY + eventBoxHeight / 7 + eventSpacing / 2);
|
|
line.setAttribute("x2", boxX + eventBoxWidth - logoMargin * 2);
|
|
line.setAttribute("y2", boxY + eventBoxHeight / 7 + eventSpacing / 2);
|
|
line.setAttribute("stroke", lineColor);
|
|
line.setAttribute("stroke-width", 2);
|
|
boxGroup.appendChild(line);
|
|
}
|
|
|
|
boxGroup.appendChild(logoImage);
|
|
boxGroup.appendChild(eventHeaderText);
|
|
boxGroup.appendChild(eventDateText);
|
|
boxGroup.appendChild(eventDescriptionText);
|
|
|
|
group.appendChild(boxGroup);
|
|
});
|
|
|
|
return group;
|
|
}
|
|
|
|
// Adding the two event groups
|
|
const firstGroup = createEventGroup(eventDescriptions.slice(0, 7), headerHeight + eventBoxPadding/3);
|
|
const secondGroup = createEventGroup(eventDescriptions.slice(7), headerHeight + eventBoxPadding/3 + eventBoxHeight + eventSpacing * 7);
|
|
|
|
// Add a small information textbox on the bottom of the event boxes right aligned, describing what the padlock icon means
|
|
const infoEventPadlockText = document.createElementNS(svgNS, "text");
|
|
infoEventPadlockText.setAttribute("x", width - eventBoxPadding);
|
|
infoEventPadlockText.setAttribute("y", headerHeight + eventBoxPadding + eventBoxHeight + eventSpacing * 14 + eventBoxHeight + eventSpacing);
|
|
infoEventPadlockText.setAttribute("fill", "#fff");
|
|
infoEventPadlockText.setAttribute("font-size", `${eventBoxHeight * 0.05}`);
|
|
infoEventPadlockText.setAttribute("text-anchor", "end");
|
|
infoEventPadlockText.textContent = " = krever påmelding\n på pvv.ntnu.no.";
|
|
|
|
// Calculate the approximate width of the text using character count and font size
|
|
const textLength = infoEventPadlockText.textContent.length;
|
|
const fontSize = eventBoxHeight * 0.05;
|
|
const approxTextWidth = textLength * (fontSize * 0.45); // Approximate width calculation
|
|
|
|
const padlockEventTextImage = document.createElementNS(svgNS, "image");
|
|
padlockEventTextImage.setAttribute("href", "ikoner/lock.svg");
|
|
padlockEventTextImage.setAttribute("x", width - eventBoxPadding - approxTextWidth - (logoSize / 1.5) - 5); // Adjust position to the left of the text
|
|
padlockEventTextImage.setAttribute("y", headerHeight + eventBoxPadding + eventBoxHeight + eventSpacing * 14 + eventBoxHeight + eventSpacing - (logoSize / 3)); // Adjust position to align with the text
|
|
padlockEventTextImage.setAttribute("width", logoSize / 1.5);
|
|
padlockEventTextImage.setAttribute("height", logoSize / 1.5);
|
|
padlockEventTextImage.setAttribute("filter", "url(#invert)");
|
|
|
|
// Append elements to the SVG
|
|
svg.appendChild(padlockEventTextImage);
|
|
svg.appendChild(infoEventPadlockText);
|
|
svg.appendChild(firstGroup);
|
|
svg.appendChild(secondGroup);
|
|
|
|
|
|
|
|
|
|
// Footer
|
|
const footerHeight = height * 0.1;
|
|
const footerHeightPadding = height * 0.02;
|
|
const footerHeightStart = height - footerHeight;
|
|
|
|
const footerGroup = document.createElementNS(svgNS, "g");
|
|
const footerRect = document.createElementNS(svgNS, "rect");
|
|
footerRect.setAttribute("x", "0");
|
|
footerRect.setAttribute("y", footerHeightStart);
|
|
footerRect.setAttribute("width", width);
|
|
footerRect.setAttribute("height", footerHeight);
|
|
footerRect.setAttribute("fill", "#334173");
|
|
|
|
footerGroup.appendChild(footerRect);
|
|
|
|
const qrCodeDiscord = document.createElementNS(svgNS, "image");
|
|
qrCodeDiscord.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "ikoner/discord-qr-code.svg");
|
|
qrCodeDiscord.setAttribute("x", footerHeight * 0.1);
|
|
qrCodeDiscord.setAttribute("y", footerHeightStart);
|
|
qrCodeDiscord.setAttribute("width", footerHeight * 0.9);
|
|
qrCodeDiscord.setAttribute("height", footerHeight * 0.9);
|
|
|
|
const qrCodeMap = document.createElementNS(svgNS, "image");
|
|
qrCodeMap.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "ikoner/mazemap-qr-code.svg");
|
|
qrCodeMap.setAttribute("x", footerHeight * 1.1);
|
|
qrCodeMap.setAttribute("y", footerHeightStart);
|
|
qrCodeMap.setAttribute("width", footerHeight * 0.9);
|
|
qrCodeMap.setAttribute("height", footerHeight * 0.9);
|
|
|
|
// Location text
|
|
const locationText = document.createElementNS(svgNS, "text");
|
|
locationText.setAttribute("x", width * 0.6);
|
|
locationText.setAttribute("y", footerHeightStart + footerHeightPadding );
|
|
locationText.setAttribute("fill", "#ffffff");
|
|
locationText.setAttribute("font-size", `${footerHeight * 0.2}`);
|
|
locationText.setAttribute("text-anchor", "start");
|
|
const locationLines = "Oppmøte:\nOppredningen\nRom 247".split('\n');
|
|
locationLines.forEach((line, index) => {
|
|
const tspan = document.createElementNS(svgNS, "tspan");
|
|
tspan.setAttribute("x", width * 0.3);
|
|
tspan.setAttribute("dy", index === 0 ? 0 : "1.2em"); // Adjust dy for subsequent lines
|
|
tspan.textContent = line;
|
|
locationText.appendChild(tspan);
|
|
});
|
|
footerGroup.appendChild(locationText);
|
|
|
|
// English/Norwegian info text
|
|
const infoText = document.createElementNS(svgNS, "text");
|
|
infoText.setAttribute("x", width * 0.6);
|
|
infoText.setAttribute("y", footerHeightStart + footerHeight * 0.5);
|
|
infoText.setAttribute("fill", "#ffffff");
|
|
infoText.setAttribute("font-size", `${footerHeight * 0.2}`);
|
|
infoText.setAttribute("text-anchor", "middle");
|
|
const infoLines = "Mer info på /\nMore info at".split('\n');
|
|
infoLines.forEach((line, index) => {
|
|
const tspan = document.createElementNS(svgNS, "tspan");
|
|
tspan.setAttribute("x", width * 0.6);
|
|
tspan.setAttribute("dy", index === 0 ? 0 : "1.2em"); // Adjust dy for subsequent lines
|
|
tspan.textContent = line;
|
|
infoText.appendChild(tspan);
|
|
});
|
|
|
|
footerGroup.appendChild(infoText);
|
|
|
|
// URL text
|
|
const urlText = document.createElementNS(svgNS, "text");
|
|
urlText.setAttribute("x", width * 0.7);
|
|
urlText.setAttribute("y", footerHeightStart + footerHeight * 0.65);
|
|
urlText.setAttribute("fill", "#ffffff");
|
|
urlText.setAttribute("font-size", `${footerHeight * 0.4}`);
|
|
urlText.textContent = "pvv.ntnu.no";
|
|
footerGroup.appendChild(urlText);
|
|
|
|
footerGroup.appendChild(qrCodeDiscord);
|
|
footerGroup.appendChild(qrCodeMap);
|
|
// footerGroup.appendChild(footerText);
|
|
|
|
svg.appendChild(footerGroup);
|
|
|
|
document.getElementById("svgContainer").appendChild(svg);
|
|
}
|
|
|
|
// Call the function to create the SVG
|
|
createSVG();
|
|
</script>
|
|
</body>
|
|
</html>
|