index.html

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

<head>
  <meta charset="utf-8" />
  <!--
MIT License

Copyright (c) 2021-2022 Leo Baschy

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
  -->
  <!--
Initial coding by Leo Baschy at https://github.com/srguiwiz/inflation/ .
After modifications by others, original author names still w/sh/could be here,
possibly and plausibly without their knowledge of later modifications.
A tool morphing may be a phenomenon that is complex to fully grasp.
We all and each of us should act sensibly, trustworthily, compassionately.
  -->
  <!--
For help with internationalization and localization, for education, training,
consulting, development, automation, and testing, write to i18n at infl dot at.
  -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="icon" type="image/svg+xml" href="inflation.svg">
  <link rel="apple-touch-icon" sizes="512x512" href="inflation-512x512.png">
  <link rel="apple-touch-icon" sizes="256x256" href="inflation-256x256.png">
  <link rel="apple-touch-icon" sizes="128x128" href="inflation-128x128.png">
  <link rel="apple-touch-icon" sizes="96x96" href="inflation-96x96.png">
  <link rel="apple-touch-icon" sizes="72x72" href="inflation-72x72.png">
  <link rel="apple-touch-icon" sizes="48x48" href="inflation-48x48.png">
  <style>
    html {
      width: 100%;
      height: 100%;
      height: -webkit-fill-available;
      overflow: hidden;
      position: fixed;
    }

    body {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
      position: fixed;
      --container-max-width: 35rem;
      --container-padding-x: 5rem;
      --container-width: calc(var(--container-max-width) + 2 * var(--container-padding-x));
      --container-lesser-width: min(var(--container-width), var(--container-max-width));
      --container-padding: 0.75em;
      --sidebar-width: auto;
      --page-overflow-x: hidden;
    }

    @media (max-width: 60rem) {
      body {
        --container-width: 100vw;
        --container-padding-x: max(var(--container-padding), calc((100vw - var(--container-lesser-width)) / 2));
        --sidebar-width: 100vw;
        --page-overflow-x: auto;
      }

      div.page>div.sidebar {
        flex-grow: 0;
        flex-shrink: 0;
        /* */
        width: 0px;
        min-width: 0px;
        padding: 0px;
      }
    }

    div.page {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow-y: hidden;
      overflow-x: hidden;
      /* */
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      scroll-snap-type: x mandatory;
      scroll-behavior: auto;
    }

    div.container {
      box-sizing: border-box;
      width: var(--container-width);
      max-width: 100%;
      min-width: 12rem;
      margin: 0px;
      flex-grow: 0;
      flex-shrink: 0;
      height: 100%;
      overflow: hidden;
      /* */
      display: grid;
      grid-template-columns: repeat(1, auto);
      grid-template-rows: repeat(3, auto) minmax(2rem, 1fr);
      --column-gap: 1rem;
      --row-gap: 1rem;
      column-gap: var(--column-gap);
      row-gap: var(--row-gap);
      padding: var(--container-padding) var(--container-padding-x);
      --padding-start: 0.5em;
    }

    @media (max-width: 500px) {
      div.container {
        --column-gap: 0.5rem;
        --padding-start: 0.25em;
      }
    }

    @media (max-width: 320px) {
      div.container {
        --column-gap: 0.25rem;
      }
    }

    div.sidebar {
      box-sizing: border-box;
      width: var(--sidebar-width);
      max-width: 100%;
      min-width: 7rem;
      margin: 0px;
      flex-grow: 1;
      flex-shrink: 1;
      height: 100%;
      overflow: hidden;
      /* */
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      gap: 1rem;
      padding: var(--container-padding);
    }

    @media (max-height: 600px) {
      div.container {
        --row-gap: 0.75rem;
      }
    }

    @media (max-height: 500px) {
      div.container {
        --row-gap: 0.5rem;
      }
    }

    @media (max-height: 400px) {
      div.container {
        --row-gap: 0.25rem;
      }
    }

    div.heading {
      grid-column: 1 / 2;
      font-family: sans-serif;
      font-size: larger;
    }

    div.heading h1 {
      all: unset;
    }

    div.container * {
      align-self: baseline;
    }

    div.explanation {
      grid-column: 1 / 2;
    }

    div.explanation:empty {
      max-height: 0px;
    }

    p {
      margin-block-start: var(--row-gap);
      margin-block-end: var(--row-gap);
    }

    p:first-child {
      margin-block-start: 0px;
    }

    p:last-child {
      margin-block-end: 0px;
    }

    p.installable,
    p.mention-phones {
      margin-block-start: 0px;
      margin-block-end: 0px;
    }

    .minimal-tall {
      display: none;
    }

    @media (max-height: 360px) {
      .normal-tall {
        display: none;
      }

      .minimal-tall {
        display: unset;
      }
    }

    div.explanation.list.list-of-calculators {
      height: 100%;
      overflow-y: auto;
    }

    div.explanation.list ul {
      margin: 0.3em;
      padding-inline-start: 1em;
      ;
    }

    div.explanation.list ul li {
      list-style-type: none;
      padding: 0.3em;
    }

    div.explanation.list ul li * {
      vertical-align: baseline;
      font-family: sans-serif;
      text-decoration: none;
    }

    div.explanation.list ul li img {
      width: 24px;
      height: 24px;
      transform: translateY(0.2em);
      margin-inline-end: 0.2em;
    }

    div.explanation.list ul li svg.search-icon {
      min-width: 24px;
      height: 24px;
      max-height: min(24px, 1em);
      vertical-align: middle;
      margin-inline-end: 0.2em;
    }

    div.explanation.list ul li.search {
      display: flex;
      align-items: center;
    }

    div.explanation.list ul li.search * {
      vertical-align: middle;
      align-self: center;
    }

    div.explanation.list ul li input[type='search'] {
      flex-grow: 1;
    }

    div.explanation.list ul li.hide {
      display: none;
    }

    @media (display-mode: standalone) {
      .installable {
        display: none;
        visibility: hidden;
        max-height: 0px;
        opacity: 0;
      }
    }

    @media not screen and (hover: none) and (pointer: coarse) {
      .installable {
        display: none;
        visibility: hidden;
        max-height: 0px;
        opacity: 0;
      }
    }

    .mention-phones {
      font-size: smaller;
      display: none;
    }

    @media screen and (hover: hover) and (pointer: fine) {
      .mention-phones {
        display: unset;
      }
    }

    .add {
      font-size: smaller;
    }

    * {
      user-select: none;
    }

    .email-address {
      user-select: text;
      white-space: nowrap;
    }

    .link {
      user-select: text;
      overflow-wrap: anywhere;
    }

    svg.search-icon {
      cursor: pointer;
    }

    .privacy {
      font-size: smaller;
    }

    .abbreviated {
      display: none;
    }

    @media (max-width: 500px) {
      .unabbreviated {
        display: none;
      }

      .abbreviated {
        display: unset;
      }
    }

    p.purpose {
      line-height: 120%;
      padding-inline-start: 20%;
      padding-inline-end: 20%;
      padding-bottom: 1em;
      text-align: justify;
    }

    div.purpose {
      padding-bottom: max(5em, 20%);
    }

    div.pale {
      opacity: 0.25;
    }

    @media (min-width: 60rem) {
      div.heading+div.explanation p {
        text-align: justify;
      }
    }

    div.too-old {
      box-sizing: border-box;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100vw;
      height: 100vh;
      text-align: center;
      padding: 2rem;
      z-index: 999;
      background-color: white;
      animation: delayed-fade-in 4s;
    }

    @keyframes delayed-fade-in {
      0% {
        opacity: 0;
      }

      25% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>
  <meta name="description" content="Several inflation calculators, international.">
  <title>Inflation Calculators</title>
</head>

<body>
  <div class="page" style="opacity: 0;">
    <div class="container">
      <div class="heading">
        <h1>Inflation Calculators</h1>
      </div>
      <div class="explanation">
        <p>
          Select a country.
        </p>
        <p class="installable">
          <span class="normal-tall">
            Each of these
            <span class="number-of-calculators"></span>
            calculators runs here.
            But also, when opened, each one by itself can be installed from the browser
            to an icon on your home screen, for offline use like any app.
          </span>
          <span class="minimal-tall">
            Each of the
            <span class="number-of-calculators"></span>
            calcs runs here.
            Or, when opened, each can be installed to an icon.
          </span>
        </p>
        <p class="mention-phones">These
          <span class="number-of-calculators"></span>
          calculators work great on phones too.
        </p>
      </div>
      <div class="explanation list search">
        <ul>
          <li class="search">
            <svg class="search-icon" viewBox="0 0 24 24">
              <rect x="0" y="0" width="24" height="24" rx="2" ry="2" stroke="none" fill="none" />
              <circle r="6" cx="8" cy="8" stroke="#444" stroke-width="2" fill="none" />
              <line x1="13" y1="13" x2="22" y2="22" stroke="#444" stroke-width="2" stroke-linecap="round" />
            </svg>
            <input type="search" placeholder="search by country or currency — or scroll" autofocus />
          </li>
        </ul>
      </div>
      <div class="explanation list list-of-calculators">
        <ul>
          <li data-keys="us, United States of America, USA, United States dollar, $, USD" lang="en-US">
            <a href="./us/"><img src="./us/inflation-us.svg" /> United States</a>
          </li>
          <li data-keys="ca, Canada, Canadian dollar, $, CAD" lang="en-CA">
            <a href="./ca/"><img src="./ca/inflation-ca.svg" /> Canada</a>
          </li>
          <li data-keys="de, Deutschland, Germany, Euro, Deutsche Mark, €, DM" lang="de-DE">
            <a href="./de/"><img src="./de/inflation-de.svg" /> Deutschland</a>
          </li>
          <li data-keys="uk, United Kingdom, Great Britain, England, pound sterling, £, GBP" lang="en-GB">
            <a href="./uk/"><img src="./uk/inflation-uk.svg" /> United Kingdom</a>
          </li>
          <li data-keys="fr, France, euro, French franc, €, F" lang="fr-FR">
            <a href="./fr/"><img src="./fr/inflation-fr.svg" /> France</a>
          </li>
          <li
            data-keys="ch, Schweiz, Suisse, Svizzera, Helvetia, Switzerland, Schweizer Franken, franc suisse, franco svizzero, Fr., CHF"
            lang="de-CH">
            <a href="./ch/"><img src="./ch/inflation-ch.svg" /> Schweiz</a>
          </li>
          <li data-keys="at, Österreich, Austria, Euro, Schilling, €, ÖS" lang="de-AT">
            <a href="./at/"><img src="./at/inflation-at.svg" /> Österreich</a>
          </li>
          <li data-keys="in, India, Indian rupee, ₹, ₨, INR" lang="en-IN">
            <a href="./in/"><img src="./in/inflation-in.svg" /> India</a>
          </li>
          <li data-keys="jp, 日本, Japan, Japanese yen, 円, ¥, JPY" lang="ja-JP">
            <a href="./jp/"><img src="./jp/inflation-jp.svg" /> 日本</a>
          </li>
          <li data-keys="il, שראל, Israel, shekel, ₪, ש, ILS" lang="he-IL">
            <a href="./il/"><img src="./il/inflation-il.svg" /> ישראל</a>
          </li>
          <li data-keys="qa, قطر, Qatar, Qatari riyal, ر.ق, QAR" lang="ar-QA">
            <a href="./qa/"><img src="./qa/inflation-qa.svg" /> قطر</a>
          </li>
          <li data-keys="ph, Philippines, Pilipinas, Filipinas, Philippine peso, ₱, PHP" lang="en-PH">
            <a href="./ph/"><img src="./ph/inflation-ph.svg" /> Philippines</a>
          </li>
          <li data-keys="cl, Chile, Chilean peso, escudo, $, Eº, CLP" lang="es-CL">
            <a href="./cl/"><img src="./cl/inflation-cl.svg" /> Chile</a>
          </li>
          <li data-keys="bw, Botswana, Botswana pula, P, BWP" lang="en-BW">
            <a href="./bw/"><img src="./bw/inflation-bw.svg" /> Botswana</a>
          </li>
          <li data-keys="id, Indonesia, Indonesian rupiah, Rp, IDR" lang="id-ID">
            <a href="./id/"><img src="./id/inflation-id.svg" /> Indonesia</a>
          </li>
          <li data-keys="pk, پاکستان, Pakistan, روپیہ, Pakistani rupee, ₨, PKR" lang="ur-PK">
            <a href="./pk/"><img src="./pk/inflation-pk.svg" /> پاکستان</a>
          </li>
          <li data-keys="lb, لبنان, Liban, Lebanon, ليرة لبنانية, livre libanaise, Lebanese pound, ل.ل., LBP"
            lang="ar-LB">
            <a href="./lb/"><img src="./lb/inflation-lb.svg" /> لبنان</a>
          </li>
          <li data-keys="cn, 中国, China, Chinese yuan, 人民币, renminbi, 元, ￥, ¥, CNY, CN¥, RMB" lang="zh-CN">
            <a href="./cn/"><img src="./cn/inflation-cn.svg" /> 中国</a>
          </li>
          <li data-keys="br, Brasil, Brazil, real, reais, cruzeiro, cruzado, R$, Cr$, Cz$, BRL" lang="pt-BR">
            <a href="./br/"><img src="./br/inflation-br.svg" /> Brasil</a>
          </li>
          <li data-keys="ng, Nigeria, naira, Nigerian pound, ₦, £, NGN" lang="en-NG">
            <a href="./ng/"><img src="./ng/inflation-ng.svg" /> Nigeria</a>
          </li>
          <li data-keys="bd, বিডি, বাংলাদেশ, Bangladesh, টাকা, Bangladeshi taka, ৳, Tk, BDT" lang="bn-BD">
            <a href="./bd/"><img src="./bd/inflation-bd.svg" /> বাংলাদেশ</a>
          </li>
          <li data-keys="au, Australia, Australian dollar, Australian pound, $, £, AUD" lang="en-AU">
            <a href="./au/"><img src="./au/inflation-au.svg" /> Australia</a>
          </li>
        </ul>
        <p class="add">
          To ask us to make one more country for you,
          write to <span class="email-address">calc at infl dot at</span> .
        </p>
        <p class="add">
          Software developers could try adding a country with a pull request at
          <span class="link">https://github.com/srguiwiz/inflation</span> .
        </p>
      </div>
      <div class="explanation privacy normal-tall pale" style="display: none;">
        <!-- forks if hosted elsewhere automatically would not display this privacy note -->
        No cookies<span class="unabbreviated"> here</span>.
        This site <span class="abbreviated">was</span>
        <span class="unabbreviated">has been</span> made as an exercise.
      </div>
    </div>
    <div class="sidebar">
      <div class="heading">
        &emsp;
      </div>
      <div class="purpose pale">
        <p class="purpose">Help make sense of each other's stories across generations.</p>
        <p class="purpose">What does it mean grandpa worked for so little pay?</p>
        <p class="purpose">Do kids really spend more now?</p>
      </div>
    </div>
  </div>
  <div class="too-old">incompatible with older browser<br />—<br />no budget to maintain that too</div>
  <script>
    const numberOfCalcuators = document.querySelectorAll(".list-of-calculators a img").length;
    document.querySelectorAll(".number-of-calculators").forEach(element =>
      element.textContent = numberOfCalcuators);
    //
    const nLanguage = navigator.language;
    const language = nLanguage.match(/^([a-z]{2})\b/i)?.[1]?.toLowerCase();
    const region = nLanguage.match(/^.+?-([A-Z]{2})\b/i)?.[1]?.toUpperCase();
    switch (language) {
      case "en":
        switch (region) {
          case "US":
            moveUp("us");
            break;
          case "CA":
            moveUp("ca");
            break;
          case "GB":
            moveUp("uk");
            break;
          case "IN":
            moveUp("in");
            break;
          case "PH":
            moveUp("ph");
            break;
          case "BW":
            moveUp("bw");
            break;
          case "PK":
            moveUp("pk");
            break;
          case "NG":
            moveUp("ng");
            break;
          case "AU":
            moveUp("au");
            break;
        }
        break;
      case "de":
        switch (region) {
          case "AT":
            moveUp("at,de,ch");
            break;
          case "CH":
            moveUp("ch,de,at");
            break;
          case "DE":
          default:
            moveUp("de,ch,at");
        }
        break;
      case "fr":
        switch (region) {
          case "FR":
            moveUp("fr");
            break;
          case "CA":
            moveUp("ca");
            break;
          case "CH":
            moveUp("ch");
            break;
          case "LB":
            moveUp("lb");
            break;
          default:
            moveUp("fr,ca,ch,lb");
        }
        break;
      case "ja":
        moveUp("jp");
        break;
      case "he":
        moveUp("il");
        break;
      case "ar":
        switch (region) {
          case "QA":
            moveUp("qa");
            break;
          case "LB":
            moveUp("lb");
            break;
        }
        break;
      case "es":
        switch (region) {
          case "CL":
            moveUp("cl");
            break;
        }
        break;
      case "id":
        moveUp("id");
        break;
      case "ur":
        switch (region) {
          case "PK":
            moveUp("pk");
            break;
        }
        break;
      case "pt":
        switch (region) {
          case "BR":
            moveUp("br");
            break;
        }
        break;
      case "bn":
        switch (region) {
          case "BD":
            moveUp("bd");
            break;
        }
        break;
      //
      case "hi":
        moveUp("in");
        break;
    }
    function moveUp(countries) {
      countries = countries.split(",").map(c => c.trim(c));
      const ul = document.querySelector(".list-of-calculators ul");
      const firstLi = document.querySelector(".list-of-calculators li");
      countries.forEach(alpha2 => {
        const li = document.querySelector(`.list-of-calculators li a[href*='${alpha2}']`)?.closest("li");
        if (li) ul.insertBefore(li, firstLi);
      });
    }
    //
    const keysByLi = new Map();
    document.querySelectorAll(".list-of-calculators li").forEach(li => {
      const keys = `${li.dataset?.keys ?? ""} ${li.textContent}`;
      keysByLi.set(li, keys);
    });
    const searchElement = document.querySelector("input[type='search'");
    function regesc(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }
    function search() {
      const searchRegExps = searchElement.value.trim().split(/\s+/).map(s => new RegExp(regesc(s), "i"));
      const lis = new Set();
      keysByLi.forEach((keys, li) => {
        if (searchRegExps.every(r => r.test(keys))) lis.add(li);
      });
      document.querySelectorAll(".list-of-calculators li").forEach(li => {
        if (lis.has(li)) li.classList.toggle("hide", false);
        else li.classList.toggle("hide", true);
      });
    }
    searchElement.addEventListener("input", search);
    window.addEventListener("load", () => {
      searchElement.value = "";
      document.querySelectorAll(".list-of-calculators li").forEach(li => {
        li.classList.toggle("hide", false);
      });
    });
    //
    document.querySelector("svg.search-icon").addEventListener("click", () => {
      searchElement.focus();
      search();
    });
    //
    function searchKeyListener(event) {
      switch (event.key) {
        case "Enter": { // Enter key
          const lisNotHidden = document.querySelectorAll(".list-of-calculators li:not(.hide)");
          if (lisNotHidden.length === 1) {
            lisNotHidden[0].querySelector("a").click();
            event.preventDefault();
          }
          break;
        }
      }
    }
    searchElement.addEventListener("keydown", searchKeyListener);
    searchElement.addEventListener("keypress", searchKeyListener);
    //
    const privacy =
      // to show a privacy note, optionally, a developer of a fork may want to adjust this
      ({ "srguiwiz.github.io": 1, "inflation.cmprh.com": 1, "infl.at": 1 })[document.location.hostname];
    document.querySelectorAll(".privacy").forEach(element => {
      if (privacy) element.style.display = "";
      else element.remove(); // avoid forks showing another developer's privacy note
    });
    //
    const purposeDiv = document.querySelector("div.purpose");
    const privacyDiv = document.querySelector("div.privacy");
    function updatePaleness(event) {
      const eventType = event.type;
      const currentTarget = event.currentTarget;
      switch (eventType) {
        case "mouseleave":
        case "touchend":
        case "touchcancel":
          currentTarget.classList.toggle("pale", true);
          break;
        case "mouseenter":
        case "touchstart":
          currentTarget.classList.toggle("pale", false);
          break;
      }
    }
    [purposeDiv, privacyDiv].forEach(div =>
      ["mouseenter", "mouseleave",
        "touchstart", "touchend", "touchcancel"].forEach(eventType =>
          div?.addEventListener(eventType, updatePaleness, { passive: true })));
    //
    null ?? document.querySelector?.("div.too-old").remove(); // feature test
    document.querySelector("div.page").removeAttribute("style"); // show
  </script>
</body>

</html>