@scottlogic/tech-carbon-estimator
Version:
The tech carbon estimator is a web component that allow you to estimate, at high level, your carbon emissions
18 lines (17 loc) • 6.99 kB
HTML
<html lang="en" data-beasties-container>
<head><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<meta charset="utf-8">
<title>Technology Carbon Estimator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>@font-face{font-family:'Material Icons Outlined';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');}.material-icons-outlined{font-family:'Material Icons Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>
<style>@layer properties;@layer theme,base,components,utilities;@layer theme{:root{--tce-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--tce-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--tce-color-red-600:oklch(57.7% .245 27.325);--tce-color-sky-200:oklch(90.1% .058 230.902);--tce-color-sky-400:oklch(74.6% .16 232.661);--tce-color-sky-800:oklch(44.3% .11 240.79);--tce-color-sky-900:oklch(39.1% .09 240.876);--tce-color-slate-50:oklch(98.4% .003 247.858);--tce-color-slate-100:oklch(96.8% .007 247.896);--tce-color-slate-200:oklch(92.9% .013 255.508);--tce-color-slate-300:oklch(86.9% .022 252.894);--tce-color-slate-400:oklch(70.4% .04 256.788);--tce-color-slate-600:oklch(44.6% .043 257.281);--tce-color-slate-800:oklch(27.9% .041 260.031);--tce-color-slate-950:oklch(12.9% .042 264.695);--tce-color-gray-200:oklch(92.8% .006 264.531);--tce-color-white:#fff;--tce-spacing:.25rem;--tce-text-sm:.875rem;--tce-text-sm--line-height:calc(1.25 / .875);--tce-text-base:1rem;--tce-text-base--line-height:1.5 ;--tce-text-lg:1.125rem;--tce-text-lg--line-height:calc(1.75 / 1.125);--tce-text-xl:1.25rem;--tce-text-xl--line-height:calc(1.75 / 1.25);--tce-text-2xl:1.5rem;--tce-text-2xl--line-height:calc(2 / 1.5);--tce-text-3xl:1.875rem;--tce-text-3xl--line-height:1.2 ;--tce-font-weight-medium:500;--tce-font-weight-bold:700;--tce-radius-sm:.25rem;--tce-default-font-family:var(--tce-font-sans);--tce-default-mono-font-family:var(--tce-font-mono)}}@layer base{*,:after,:before{box-sizing:border-box;margin:0;padding:0;border:0 solid}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--tce-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--tce-default-font-feature-settings, normal);font-variation-settings:var(--tce-default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}}@layer utilities{.tce\:m-0{margin:calc(var(--tce-spacing) * 0)}.tce\:p-5{padding:calc(var(--tce-spacing) * 5)}@media (prefers-color-scheme: dark){.tce\:dark\:bg-slate-800{background-color:var(--tce-color-slate-800)}}@media (prefers-color-scheme: dark){.tce\:dark\:bg-slate-950{background-color:var(--tce-color-slate-950)}}@media (prefers-color-scheme: dark){.tce\:dark\:text-slate-50{color:var(--tce-color-slate-50)}}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after{--tw-border-style:solid;--tw-font-weight:initial}}}@layer properties;@layer theme,base,components,utilities;@layer theme{:root{--tce-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--tce-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--tce-color-red-700:oklch(50.5% .213 27.518);--tce-color-slate-50:oklch(98.4% .003 247.858);--tce-color-slate-100:oklch(96.8% .007 247.896);--tce-color-slate-200:oklch(92.9% .013 255.508);--tce-color-slate-300:oklch(86.9% .022 252.894);--tce-color-slate-400:oklch(70.4% .04 256.788);--tce-color-slate-600:oklch(44.6% .043 257.281);--tce-color-slate-800:oklch(27.9% .041 260.031);--tce-color-slate-950:oklch(12.9% .042 264.695);--tce-color-gray-200:oklch(92.8% .006 264.531);--tce-color-white:#fff;--tce-spacing:.25rem;--tce-text-sm:.875rem;--tce-text-sm--line-height:calc(1.25 / .875);--tce-text-base:1rem;--tce-text-base--line-height:1.5 ;--tce-text-lg:1.125rem;--tce-text-lg--line-height:calc(1.75 / 1.125);--tce-text-xl:1.25rem;--tce-text-xl--line-height:calc(1.75 / 1.25);--tce-text-2xl:1.5rem;--tce-text-2xl--line-height:calc(2 / 1.5);--tce-text-3xl:1.875rem;--tce-text-3xl--line-height:1.2 ;--tce-font-weight-medium:500;--tce-font-weight-bold:700;--tce-radius-sm:.25rem;--tce-default-font-family:var(--tce-font-sans);--tce-default-mono-font-family:var(--tce-font-mono)}}@layer base{*,:after,:before{box-sizing:border-box;margin:0;padding:0;border:0 solid}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--tce-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--tce-default-font-feature-settings, normal);font-variation-settings:var(--tce-default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}}@layer utilities{.tce\:m-0{margin:calc(var(--tce-spacing) * 0)}.tce\:p-5{padding:calc(var(--tce-spacing) * 5)}@media (prefers-color-scheme: dark){.tce\:dark\:bg-slate-800{background-color:var(--tce-color-slate-800)}}@media (prefers-color-scheme: dark){.tce\:dark\:bg-slate-950{background-color:var(--tce-color-slate-950)}}@media (prefers-color-scheme: dark){.tce\:dark\:text-slate-50{color:var(--tce-color-slate-50)}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid;}@property --tw-font-weight{syntax:"*";inherits:false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after{--tw-border-style:solid;--tw-font-weight:initial}}}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
<body class="tce:m-0 tce:dark:bg-slate-800 tce:dark:text-slate-50">
<main>
<noscript>Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript>
<tech-carbon-estimator></tech-carbon-estimator>
<footer class="tce:p-5 tce:bg-slate:800 tce:dark:text-slate-50 tce:dark:bg-slate-950">© Copyright Scott Logic</footer>
</main>
<link rel="modulepreload" href="chunk-65MYOLBY.js"><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>