main

分支 (8)

管理

管理

main

feature/1110-safe

v2.0.3

v201/range

v2.0.1

v2.0

v1.3

v1.2

notion
/
quote-EN.html

<!--
 * @Author: httishere
 * @Date: 2021-08-20 22:57:16
 * @LastEditTime: 2022-01-12 09:57:43
 * @LastEditors: Please set LastEditors
 * @Description: 引用块，简约
 * @FilePath: /notion/quote.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quote</title>
  <script src="./lib/global.js?v=20240313"></script>
  <script src="./lib/crypto-js.min.js"></script>
  <style>
    body,
    html {
      background-color: #ffffff;
      margin: 0;
      padding: 0;
    }

    @font-face {
      font-family: 'IndieFlower';
      src: url('./fonts/Indie_Flower/IndieFlower-Regular.ttf');
    }

    .quote-box {
      width: 100%;
      margin: 0 auto;
      height: 100vh;
      background: #ffffff;
      box-sizing: border-box;
      padding: 40px
    }

    .icon {
      position: absolute;
    }

    .icon.icon-top {
      top: -30px;
      left: -30px;
    }

    .icon.icon-bottom {
      bottom: -30px;
      right: -20px;
      transform: rotate(180deg);
    }

    .quote-box__inner {
      font-size: 18px;
      position: relative;
      line-height: 1.8;
    }

    #text {
      font-family: 'IndieFlower';
      font-size: 22px;
      margin: 0;
      box-sizing: border-box;
      padding: 5px 20px;
    }

    html[theme="dark"],
    html[theme="dark"] body,
    html[theme="dark"] .quote-box {
      background-color: #191919;
      color: #ffffff;
    }
  </style>
</head>

<body>
  <div class="quote-box" id="quote-box">
    <div class="quote-box__inner">
      <img class="icon icon-top" src="https://img.icons8.com/doodle/48/000000/quote-left.png" />
      <p id="text"></p>
      <img class="icon icon-bottom" src="https://img.icons8.com/doodle/48/000000/quote-left.png" />
    </div>
  </div>
</body>
<script>
  const params = getAllParams(CryptoJS);
  handleDarkMode(params);
  window.onload = function () {
    let _quote_content =
      getQueryString("text") || params.content || "HTTISHERE";
    document.getElementById("text").innerHTML = _quote_content;
    document.getElementById("quote-box").style.color = params.font_color;
  };
</script>

</html>