summaryrefslogtreecommitdiffstats
path: root/web/gui/ilove.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-05 11:19:16 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-05 12:07:37 +0000
commitb485aab7e71c1625cfc27e0f92c9509f42378458 (patch)
treeae9abe108601079d1679194de237c9a435ae5b55 /web/gui/ilove.html
parentAdding upstream version 1.44.3. (diff)
downloadnetdata-b485aab7e71c1625cfc27e0f92c9509f42378458.tar.xz
netdata-b485aab7e71c1625cfc27e0f92c9509f42378458.zip
Adding upstream version 1.45.3+dfsg.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web/gui/ilove.html')
-rw-r--r--web/gui/ilove.html302
1 files changed, 0 insertions, 302 deletions
diff --git a/web/gui/ilove.html b/web/gui/ilove.html
deleted file mode 100644
index f82b1cfd3..000000000
--- a/web/gui/ilove.html
+++ /dev/null
@@ -1,302 +0,0 @@
-<!DOCTYPE html>
-<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>I Love SVG</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- body {
- background-color: gray;
- font-family: 'Arial', sans-serif;
- display: flex;
- flex-direction: column;
- height: 100vh;
- padding: 20px;
- }
-
- .svg-container {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- margin-bottom: 20px;
- }
-
- .svg-container img {
- height: 75px;
- cursor: pointer;
- }
-
- .input-wrapper {
- display: flex;
- align-items: center;
- justify-content: center; /* Centers the items horizontally */
- flex-wrap: wrap; /* Allow the items to wrap if there isn't enough horizontal space */
- gap: 10px; /* Gap between the items */
- }
-
- .input-wrapper #labelInput {
- font-family: 'IBM Plex Sans', sans-serif;
- font-weight: bold;
- font-size: 24px;
- color: white;
- background-color: gray;
- border: none;
- cursor: default;
- padding: 10px 15px;
- margin-right: 10px;
- text-align: right;
- width: 135px;
- }
-
- .string-input input {
- font-family: 'IBM Plex Sans', sans-serif;
- font-weight: bold;
- font-size: 24px;
- background-color: black;
- color: white;
- border: none;
- border-radius: 8px;
- padding: 10px 15px;
- width: 100%;
- box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
- outline: none;
- }
-
- .string-input input:focus {
- box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
- }
-
- .big-svg-container {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- }
-
- .big-svg {
- max-width: 100%;
- max-height: 95%;
- object-fit: contain;
- }
-
- .input-wrapper button {
- background-color: darkgray;
- color: white;
- border: none;
- border-radius: 8px;
- padding: 5px 10px;
- margin-left: 10px; /* Space between buttons */
- cursor: pointer;
- transition: background-color 0.3s; /* Smooth transition for hover effect */
- }
-
- .input-wrapper button:hover {
- background-color: #555; /* Darker shade on hover */
- }
-
- /* Style for the dropdown */
- #resolutionSelect {
- background-color: darkgray; /* Same as button background */
- color: white; /* Text color */
- border: none; /* Remove border */
- border-radius: 8px; /* Rounded corners, same as buttons */
- padding: 5px 10px; /* Some padding for aesthetics */
- margin-left: 10px; /* Space between dropdown and adjacent elements */
- font-family: "IBM Plex Sans", sans-serif; /* Font from SVG */
- font-weight: bold; /* Bold font */
- font-size: 16px; /* Font size consistent with text box */
- cursor: pointer; /* Hand cursor for better UX */
- appearance: none; /* Remove default styling on some browsers */
- -webkit-appearance: none; /* Remove default styling on WebKit browsers */
- -moz-appearance: none; /* Remove default styling on Firefox */
-
- padding: 10px 20px; /* Increase padding for more height */
- line-height: 1.5; /* Increase line height for a taller dropdown */
-
- /* Arrow for the dropdown */
- background: darkgray url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192l121.5 121.5c4.7 4.7 12.3 4.7 17 0L291.3 192c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L160 273.9 68.3 152c-4.7-4.7-12.3-4.7-17 0L28.7 174.5c-4.7 4.7-4.7 12.3 0 17.1z" fill="white"/></svg>') no-repeat right 10px center;
- padding-right: 40px; /* Add padding to prevent text from overlapping the arrow */
- }
-
- /* Hover effect for the dropdown, similar to buttons */
- #resolutionSelect:hover {
- background-color: #555; /* Darker shade on hover */
- }
-
- /* Arrow for the dropdown (this is a bit of a hack, but it works for adding a custom arrow) */
- #resolutionSelect::-ms-expand {
- display: none; /* Hide default arrow for IE/Edge */
- }
- #resolutionSelect::after {
- content: '\25BC'; /* Down arrow symbol */
- position: absolute;
- top: 50%;
- right: 10px;
- transform: translateY(-50%);
- pointer-events: none; /* Ensure dropdown still works when clicking arrow */
- }
- </style>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-</head>
-<body>
-<div class="svg-container">
- <!-- SVG examples will be loaded here -->
-</div>
-
-<div class="input-wrapper">
- <input type="text" value="You Love" id="labelInput" readonly>
- <div class="string-input">
- <input type="text" id="stringInput" placeholder="Enter your STRING here">
- </div>
- <select id="resolutionSelect">
- <option value="360">360p</option>
- <option value="720">720p</option>
- <option value="1080">1080p</option>
- <option value="4k">4k</option>
- <option value="8k">8k</option>
- </select>
- <button id="copyUrl"><i class="fas fa-copy"></i><br/>URL</button>
- <button id="downloadSvg"><i class="fas fa-download"></i><br/>SVG</button>
- <button id="downloadPng"><i class="fas fa-image"></i><br/>PNG</button>
- <button id="downloadWebp"><i class="fas fa-file-image"></i><br/>WEBP</button>
-</div>
-
-<div class="big-svg-container">
- <img src="" alt="Big SVG Image" id="bigSvg" class="big-svg">
-</div>
-
-<script>
- document.addEventListener('DOMContentLoaded', function() {
- const examples = ["TROUBLE", "3AM", "BUGS", "ML", "AI", "CODE", "DEV", "DevOps", "Observability", "Telemetry", "Dashboards", "Automation", "K8s", "Docker", "PostgreSQL", "NightShifts", "OnCall", "Linux", "Debian", "Ubuntu", "Arch", "Manjaro", "CentOS", "AWS"];
- const svgContainer = document.querySelector('.svg-container');
- const bigSvg = document.getElementById('bigSvg');
- const stringInput = document.getElementById('stringInput');
-
- // Calculate the API endpoint
- const currentUrl = new URL(window.location.href);
- const apiEndpoint = `${currentUrl.origin}${currentUrl.pathname.replace('ilove.html', '')}api/v2/ilove.svg?love=`;
-
- // Load examples
- examples.forEach(example => {
- const img = document.createElement('img');
- img.src = `${apiEndpoint}${example}`;
- img.addEventListener('click', function() {
- stringInput.value = example;
- updateBigSvg();
- });
- svgContainer.appendChild(img);
- });
-
- // Set the default value of the text box to the first word from the examples
- stringInput.value = examples[0];
- updateBigSvg();
-
- // Update the big SVG when the input changes
- stringInput.addEventListener('input', updateBigSvg);
-
- function updateBigSvg() {
- const encodedValue = encodeURIComponent(stringInput.value);
- bigSvg.src = `${apiEndpoint}${encodedValue}`;
- }
-
- // Copy URL functionality
- document.getElementById('copyUrl').addEventListener('click', function() {
- const tempTextArea = document.createElement('textarea');
- tempTextArea.value = bigSvg.src;
- document.body.appendChild(tempTextArea);
- tempTextArea.select();
- document.execCommand('copy');
- document.body.removeChild(tempTextArea);
-
- // Update button icon and text temporarily
- const btn = this; // 'this' refers to the clicked element (in this case, the 'copyUrl' button)
- const originalIcon = btn.querySelector('i');
- const breakElement = btn.querySelector('br');
-
- // Replace the icon and text
- originalIcon.className = "fas fa-check"; // Change to checkmark icon
- btn.textContent = ''; // Clear the button text
- btn.appendChild(originalIcon); // Add the checkmark icon
- btn.appendChild(breakElement); // Add the break element
- btn.appendChild(document.createTextNode('Copied')); // Add the "Copied" text
-
- setTimeout(() => {
- originalIcon.className = "fas fa-copy"; // Revert back to copy icon
- btn.textContent = ''; // Clear the button text
- btn.appendChild(originalIcon); // Add the copy icon
- btn.appendChild(breakElement); // Add the break element
- btn.appendChild(document.createTextNode('URL')); // Add the "URL" text
- }, 2000); // Revert back after 2 seconds
- });
-
- // Download SVG
- document.getElementById('downloadSvg').addEventListener('click', function() {
- const filename = `I love ${stringInput.value}.svg`;
- triggerDownload(bigSvg.src, filename);
- });
-
- // Download PNG
- document.getElementById('downloadPng').addEventListener('click', function() {
- convertSvgToImage('png');
- });
-
- // Download WEBP
- document.getElementById('downloadWebp').addEventListener('click', function() {
- convertSvgToImage('webp');
- });
-
- function convertSvgToImage(format) {
- const image = new Image();
- image.src = bigSvg.src;
- image.onload = function() {
- const resolution = getResolutionDimensions();
-
- // Calculate the scaling factor based on the resolution width
- const scaleFactor = resolution.width / image.width;
-
- // Set canvas dimensions based on SVG's aspect ratio
- const canvas = document.createElement('canvas');
- canvas.width = image.width * scaleFactor;
- canvas.height = image.height * scaleFactor;
-
- const ctx = canvas.getContext('2d');
- ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-
- const filename = `I love ${stringInput.value}.${format}`;
- triggerDownload(canvas.toDataURL(`image/${format}`), filename);
- };
- }
-
- function getResolutionDimensions() {
- const resolution = document.getElementById('resolutionSelect').value;
- switch(resolution) {
- case "360": return { width: 640, height: 360 };
- case "720": return { width: 1280, height: 720 };
- case "1080": return { width: 1920, height: 1080 };
- case "4k": return { width: 3840, height: 2160 };
- case "8k": return { width: 7680, height: 4320 };
- default: return { width: 640, height: 360 }; // Default to 360p
- }
- }
-
- function triggerDownload(url, filename) {
- const downloadLink = document.createElement('a');
- downloadLink.href = url;
- downloadLink.download = filename;
- document.body.appendChild(downloadLink);
- downloadLink.click();
- document.body.removeChild(downloadLink);
- }
-
- });
-</script>
-</body>
-</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-16 06:03:54 +0000