rafaelcamargo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://rsms.me/">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <title>Converting HTML to Image</title>
  <style>
    :root {
      font-family: Inter, sans-serif;
      font-feature-settings: 'liga' 1, 'calt' 1;
      font-weight: 500;
    }
    @supports (font-variation-settings: normal) {
      :root { font-family: InterVariable, sans-serif; }
    }
    html,
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      color: #29303D;
      font-size: 16px;
    }
    button {
      align-items: center;
      padding: 0 6px;
      min-width: 120px;
      height: 40px;
      background-color: transparent;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      text-align: center;
      border: 1px solid #29303D;
      border-radius: 20px;
      box-sizing: border-box;
      cursor: pointer;
      -webkit-appearance: none;
      outline: 0;
    }
    button:hover,
    button:focus {
      background-color: #F1F1F1;
    }
    .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1000px;
      padding: 40px;
      box-sizing: border-box;
    }
    .container form {
      min-width: 300px;
    }
    .container h1 {
      margin: 0 0 40px 0;
      color: #6D7078;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      word-spacing: 5px;
    }
    .container h2 {
      margin: 20px 0 5px 0;
      font-size: 1.75rem;
    }
    .container button[type="submit"] {
      margin: 20px 0 5px 0;
    }
    .preview {
      padding: 40px;
    }
    .card {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 500px;
      height: 300px;
      padding: 48px;
      color: #009980;
      font-size: 46px;
      font-weight: 800;
      line-height: .85;
      background: rgb(153,255,219);
      background: linear-gradient(-45deg, rgba(153,255,219,1) 0%, rgba(211,255,153,1) 100%);
      border-radius: 40px;
      box-sizing: border-box;
    }
    .card.is-dark {
      color: #FF99CC;
      background: rgb(119,0,179);
      background: linear-gradient(-45deg, rgba(119,0,179,1) 0%, rgba(72,0,159,1) 100%);
    }
    .card p {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="preview" id="preview">
      <div class="card" id="card">
        <p>Learn to love what's coming more than what's already past.</p>
      </div>
    </div>
    <form id="styleForm">
      <h1>Convert to image</h1>
      <h2>Select your style</h2>
      <label>
        <input type="radio" name="style" value="lemon" checked>
        Lemon
      </label>
      <label>
        <input type="radio" name="style" value="cherry">
        Cherry
      </label>
      <h2>Select an extension</h2>
      <label>
        <input type="radio" name="extension" value="png" checked>
        PNG
      </label>
      <label>
        <input type="radio" name="extension" value="jpg">
        JPG
      </label>
      <label>
        <input type="radio" name="extension" value="webp">
        WEBP
      </label>
      <div>
        <button type="submit">Download</button>
      </div>
    </form>
  </div>
  <script>
    (function () {
      function init() {
        document.querySelector('#styleForm').addEventListener('submit', evt => {
          evt.preventDefault();
          generateImage();
        });
        document.querySelectorAll('input[name="style"]').forEach(radio => {
          radio.addEventListener('change', updateCardStyle);
        });
      }

      function generateImage() {
        const style = getCheckedRadioValue('style');
        const extension = getCheckedRadioValue('extension');
        html2canvas(document.getElementById('preview')).then(canvas => {
          let img = canvas.toDataURL(`image/${extension}`);
          let link = document.createElement('a');
          link.href = img;
          link.download = `${style}.${extension}`;
          link.click();
        });
      }

      function updateCardStyle() {
        const card = document.getElementById('card');
        card.classList.remove('is-dark');
        if (getCheckedRadioValue('style') === 'cherry') card.classList.add('is-dark');
      }

      function getCheckedRadioValue(radioName){
        return document.querySelector(`input[name="${radioName}"]:checked`).value;
      }

      init();
    }());
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://rsms.me/">
	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<title>Converting HTML to Image</title>
	<style>
	:root {
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1;
	font-weight: 500;
	}
	@supports (font-variation-settings: normal) {
	:root { font-family: InterVariable, sans-serif; }
	}
	html,
	body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	color: #29303D;
	font-size: 16px;
	}
	button {
	align-items: center;
	padding: 0 6px;
	min-width: 120px;
	height: 40px;
	background-color: transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	border: 1px solid #29303D;
	border-radius: 20px;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-appearance: none;
	outline: 0;
	}
	button:hover,
	button:focus {
	background-color: #F1F1F1;
	}
	.container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	padding: 40px;
	box-sizing: border-box;
	}
	.container form {
	min-width: 300px;
	}
	.container h1 {
	margin: 0 0 40px 0;
	color: #6D7078;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	word-spacing: 5px;
	}
	.container h2 {
	margin: 20px 0 5px 0;
	font-size: 1.75rem;
	}
	.container button[type="submit"] {
	margin: 20px 0 5px 0;
	}
	.preview {
	padding: 40px;
	}
	.card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 500px;
	height: 300px;
	padding: 48px;
	color: #009980;
	font-size: 46px;
	font-weight: 800;
	line-height: .85;
	background: rgb(153,255,219);
	background: linear-gradient(-45deg, rgba(153,255,219,1) 0%, rgba(211,255,153,1) 100%);
	border-radius: 40px;
	box-sizing: border-box;
	}
	.card.is-dark {
	color: #FF99CC;
	background: rgb(119,0,179);
	background: linear-gradient(-45deg, rgba(119,0,179,1) 0%, rgba(72,0,159,1) 100%);
	}
	.card p {
	margin: 0;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="preview" id="preview">
	<div class="card" id="card">
	<p>Learn to love what's coming more than what's already past.</p>
	</div>
	</div>
	<form id="styleForm">
	<h1>Convert to image</h1>
	<h2>Select your style</h2>
	<label>
	<input type="radio" name="style" value="lemon" checked>
	Lemon
	</label>
	<label>
	<input type="radio" name="style" value="cherry">
	Cherry
	</label>
	<h2>Select an extension</h2>
	<label>
	<input type="radio" name="extension" value="png" checked>
	PNG
	</label>
	<label>
	<input type="radio" name="extension" value="jpg">
	JPG
	</label>
	<label>
	<input type="radio" name="extension" value="webp">
	WEBP
	</label>
	<div>
	<button type="submit">Download</button>
	</div>
	</form>
	</div>
	<script>
	(function () {
	function init() {
	document.querySelector('#styleForm').addEventListener('submit', evt => {
	evt.preventDefault();
	generateImage();
	});
	document.querySelectorAll('input[name="style"]').forEach(radio => {
	radio.addEventListener('change', updateCardStyle);
	});
	}

	function generateImage() {
	const style = getCheckedRadioValue('style');
	const extension = getCheckedRadioValue('extension');
	html2canvas(document.getElementById('preview')).then(canvas => {
	let img = canvas.toDataURL(`image/${extension}`);
	let link = document.createElement('a');
	link.href = img;
	link.download = `${style}.${extension}`;
	link.click();
	});
	}

	function updateCardStyle() {
	const card = document.getElementById('card');
	card.classList.remove('is-dark');
	if (getCheckedRadioValue('style') === 'cherry') card.classList.add('is-dark');
	}

	function getCheckedRadioValue(radioName){
	return document.querySelector(`input[name="${radioName}"]:checked`).value;
	}

	init();
	}());
	</script>
	</body>

	</html>