Dream4ever/soul_card_template.html

## soul_card_template.html
<html>

<head>
  <title>SoulCard@<%= @addr%></title>
  <style>
    /* 重置浏览器自定义的样式 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 本页作为 iframe 嵌入到别的页面
      要和父页面宽度相同 */
    body {
      width: 600px;
    }

    /* 顶部的按钮组 */
    .actions {
      display: flex;
      align-items: center;
    }

    .actions .button {
      background: linear-gradient(to right, #79D5A8, #D5F97D);
      border-radius: 4px;
      border: 0;
      padding: 4px 6px;
      font-size: 12px;
    }

    .button:first-child {
      margin-right: 8px;
    }

    /* namecard */
    #container {
      width: 100%;
      height: 270px;
      overflow: hidden;
      margin-top: 8px;
      position: relative;
    }

    /* namecard 通用背景 */
    #container .bg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #container .bg .bg-img {
      width: 100%;
      filter: blur(15px);
    }

    #container .bg .bg-mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(255, 255, 255, 0.9);
    }

    /* namecard 第一页 */
    #namecard {
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }

    #namecard .left {
      width: 40%;
      height: 100%;
      box-sizing: border-box;
      padding-right: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    #namecard .left .upper {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #namecard .left .upper .avatar {
      width: 70%;
      height: auto;
      border-radius: 50%;
    }

    #namecard .left .upper .name {
      font-size: 20px;
      margin-top: 10px;
      font-weight: bold;
    }

    #namecard .right {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
    }

    #namecard .right .para:not(:first-child) {
      margin-top: 5px;
    }

    #namecard .right .lower {
      width: 100%;
      color: rgba(51, 51, 51, .5);
    }

    #namecard .right .social {
      display: flex;
      gap: 30px;
    }

    #namecard .right .social .twitter {
      display: flex;
      align-items: center;
    }

    #namecard .right .social .twitter .icon {
      width: 14px;
      height: auto;
    }

    #namecard .right .social .twitter .text {
      margin-left: 8px;
    }

    #namecard .right .speed-run {
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    #namecard .right .speed-run .icon {
      width: 14px;
      height: auto;
    }

    #namecard .right .speed-run .value {
      color: #fc9a29;
      font-weight: bold;
    }

    /* namecard 第二页 */
    #namecard2 {
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
      flex-direction: column;
      color: #333;
    }

    #namecard2 .title {
      width: 100%;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    #namecard2 .header {
      margin-top: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    #namecard2 .para {
      margin-top: 10px;
      font-size: 13px;
    }

    #namecard2 .screen-shot {
      margin-top: 10px;
      width: 100%;
      height: auto;
    }

    /* namecard 第三页 */
    #namecard3 {
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }

    #namecard3 .dao {
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    #namecard3 .dao .logo {
      width: 150px;
      height: auto;
      border-radius: 4px;
    }

    #namecard3 .dao .lower {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: #333;
    }

    #namecard3 .dao .purple-button {
      width: 150px;
      padding: 6px 12px;
    }

    #namecard3 .nfts {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    #namecard3 .nfts .header {
      font-weight: bold;
      background: -webkit-linear-gradient(#A112BB, #4214b6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #namecard3 .nfts .imgs {
      width: 100%;
      display: flex;
      gap: 6px;
    }

    #namecard3 .nfts .imgs .col {
      width: 33%;
      height: 100%;
      overflow: hidden;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #namecard3 .nfts .imgs .col:last-child {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }

    #namecard3 .nfts img {
      border-radius: 4px;
    }

    /* 设置所有链接的通用样式 */
    a:link {
      color: white;
      text-decoration: none;
    }

    a:visited {
      color: white;
      text-decoration: none;
    }

    a:hover {
      color: white;
      text-decoration: none;
    }

    /* 通用的 tag 样式 */
    #namecard .right .tags {
      margin-top: 16px;
    }

    #namecard2 .tags {
      margin-top: 10px;
    }

    .tags {
      display: flex;
      gap: 6px;
      font-size: 12px;
    }

    .tags .tag {
      box-sizing: border-box;
      background-color: #fc9a29;
      border-radius: 6px;
      padding: 4px 12px;
      color: #fff;
    }

    /* 通用的紫色渐变背景按钮 */
    .purple-button {
      background: linear-gradient(to right, #A112BB, #4214b6);
      box-shadow: 5px 5px 10px rgb(66 20 182 / 30%);
      box-sizing: border-box;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      color: #fff;
    }

    .purple-button .icon {
      width: 20px;
      height: auto;
    }

    .purple-button .text {
      font-size: 13px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="actions">
    <button class="button" onclick="copy()">copy as html!</button>
    <button class="button" onclick="flip()">flip page!</button>
  </div>

  <div id="container">
    <!-- namecard background -->
    <div class="bg">
      <img class="bg-img" src="./avatar.png" alt="">
      <div class="bg-mask"></div>
    </div>
    <!-- page 0x01 -->
    <div id="namecard" class="card" style="display: none;">
      <div class="left">
        <div class="upper" onclick="copy()">
          <img class="avatar" src='./avatar.png'>
          <span class="name">Tom Stern</span>
        </div>
        <div class="lower">
          <a class="homepage purple-button" target="_blank" href="#">
            <img class="icon" src="./homepage.png" alt="homepage">
            <span class="text">My Homepage</span>
          </a>
        </div>
      </div>
      <div class="right">
        <div class="upper">
          <div class="intro">
            <div class="para">Have more than 6 years of Digital Proudct Design experience.</div>
            <div class="para">Passionate about learning technology and exploring new possibilities.
              Believe a well-design UI/UX is the key to a successful product.</div>
          </div>
          <div class="tags">
            <span class="tag">Web3.0</span>
            <span class="tag">Blockchain</span>
            <span class="tag">NFT</span>
          </div>
        </div>
        <div class="lower">
          <div class="social">
            <div class="twitter">
              <img class="icon" src="./tw.png" alt="twitter">
              <span class="text">XXXXXXXX</span>
            </div>
            <div class="address">California, US</div>
          </div>
          <div class="speed-run">
            <img class="icon" src="./run.png" alt="">
            <span class="source">source:<span class="value">ng</span></span>
            <span class="level">level:<span class="value">1</span></span>
          </div>
        </div>
      </div>
    </div>

    <!--page 0x02 -->
    <div id="namecard2" class="card" style="display: none;">
      <div class="title">My Profile</div>
      <div class="header">LinkedIn Is No Longer</div>
      <div class="para">Here’s what it is now — It’s Monday morning. I grab a cup of coffee and log in to LinkedIn. It’s not long before I am rolling my eyes. It’s not a professional networking site anymore. LinkedIn is now primarily a salesHere’s …</div>
      <img class="screen-shot" src="./screenshot.png" alt="">
      <div class="tags">
        <span class="tag">Web3.0</span>
      </div>
    </div>

    <!--page 0x03 -->
    <div id="namecard3" class="card" style="display: flex;">
      <div class="dao">
        <img class="logo" src="./dao.png" alt="dao">
        <div class="lower">
          <span class="position">POSITION</span>
          <div class="purple-button">Dao Name</div>
        </div>
      </div>
      <div class="nfts">
        <div class="header">NFTs</div>
        <div class="imgs">
          <div class="col">
            <img src="./nft1.png" alt="nft">
          </div>
          <div class="col">
            <img src="./nft2.png" alt="nft">
          </div>
          <div class="col">
            <img src="./nft3.png" alt="nft">
            <img src="./nft4.png" alt="nft">
            <img src="./nft5.png" alt="nft">
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function copy() {
      var payload = document.documentElement.innerHTML;
      let index = payload.indexOf("<title>");
      let copyBtn = "<button onclick='copy()'>copy as html!</button>"
      full_html = "<html><head>" + payload.slice(index).replace() + "</html>";

      navigator.clipboard.writeText(full_html);
    }

    // 函数能够正常运行的前提：
    // 最初只有一个 .card 元素的 display 是 flex
    // 其余都是 none
    function flip() {
      var face = document.querySelectorAll('.card')

      for (var i = 0; i < face.length; i++) {

        // 找到当前显示的那个 namecard 的序号
        if (face[i].style.display === 'flex') {

          // 记录下一个 namecard 的序号
          var j = (i + 1) % face.length

          // 设置下一个 namecard 的 display 为 flex
          // 其余的都设置为 none
          for (var k = 0; k < face.length; k++) {
            if (k === j) {
              face[k].style.display = 'flex'
            } else {
              face[k].style.display = 'none'
            }
          }

          // 设置完毕，结束循环
          return
        }
      }
    }
  </script>

  <iframe hidden="" height="0" width="0" src="/phoenix/live_reload/frame"></iframe>
</body>

</html>
	<html>

	<head>
	<title>SoulCard@<%= @addr%></title>
	<style>
	/* 重置浏览器自定义的样式 */
	* {
	margin: 0;
	padding: 0;
	}

	/* 本页作为 iframe 嵌入到别的页面
	要和父页面宽度相同 */
	body {
	width: 600px;
	}

	/* 顶部的按钮组 */
	.actions {
	display: flex;
	align-items: center;
	}

	.actions .button {
	background: linear-gradient(to right, #79D5A8, #D5F97D);
	border-radius: 4px;
	border: 0;
	padding: 4px 6px;
	font-size: 12px;
	}

	.button:first-child {
	margin-right: 8px;
	}

	/* namecard */
	#container {
	width: 100%;
	height: 270px;
	overflow: hidden;
	margin-top: 8px;
	position: relative;
	}

	/* namecard 通用背景 */
	#container .bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	#container .bg .bg-img {
	width: 100%;
	filter: blur(15px);
	}

	#container .bg .bg-mask {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.9);
	}

	/* namecard 第一页 */
	#namecard {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20px;
	}

	#namecard .left {
	width: 40%;
	height: 100%;
	box-sizing: border-box;
	padding-right: 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	}

	#namecard .left .upper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	#namecard .left .upper .avatar {
	width: 70%;
	height: auto;
	border-radius: 50%;
	}

	#namecard .left .upper .name {
	font-size: 20px;
	margin-top: 10px;
	font-weight: bold;
	}

	#namecard .right {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	}

	#namecard .right .para:not(:first-child) {
	margin-top: 5px;
	}

	#namecard .right .lower {
	width: 100%;
	color: rgba(51, 51, 51, .5);
	}

	#namecard .right .social {
	display: flex;
	gap: 30px;
	}

	#namecard .right .social .twitter {
	display: flex;
	align-items: center;
	}

	#namecard .right .social .twitter .icon {
	width: 14px;
	height: auto;
	}

	#namecard .right .social .twitter .text {
	margin-left: 8px;
	}

	#namecard .right .speed-run {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 15px;
	}

	#namecard .right .speed-run .icon {
	width: 14px;
	height: auto;
	}

	#namecard .right .speed-run .value {
	color: #fc9a29;
	font-weight: bold;
	}

	/* namecard 第二页 */
	#namecard2 {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20px;
	flex-direction: column;
	color: #333;
	}

	#namecard2 .title {
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	}

	#namecard2 .header {
	margin-top: 10px;
	font-size: 16px;
	font-weight: bold;
	}

	#namecard2 .para {
	margin-top: 10px;
	font-size: 13px;
	}

	#namecard2 .screen-shot {
	margin-top: 10px;
	width: 100%;
	height: auto;
	}

	/* namecard 第三页 */
	#namecard3 {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 20px;
	}

	#namecard3 .dao {
	width: 40%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	}

	#namecard3 .dao .logo {
	width: 150px;
	height: auto;
	border-radius: 4px;
	}

	#namecard3 .dao .lower {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #333;
	}

	#namecard3 .dao .purple-button {
	width: 150px;
	padding: 6px 12px;
	}

	#namecard3 .nfts {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	}

	#namecard3 .nfts .header {
	font-weight: bold;
	background: -webkit-linear-gradient(#A112BB, #4214b6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	#namecard3 .nfts .imgs {
	width: 100%;
	display: flex;
	gap: 6px;
	}

	#namecard3 .nfts .imgs .col {
	width: 33%;
	height: 100%;
	overflow: hidden;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	#namecard3 .nfts .imgs .col:last-child {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	}

	#namecard3 .nfts img {
	border-radius: 4px;
	}

	/* 设置所有链接的通用样式 */
	a:link {
	color: white;
	text-decoration: none;
	}

	a:visited {
	color: white;
	text-decoration: none;
	}

	a:hover {
	color: white;
	text-decoration: none;
	}

	/* 通用的 tag 样式 */
	#namecard .right .tags {
	margin-top: 16px;
	}

	#namecard2 .tags {
	margin-top: 10px;
	}

	.tags {
	display: flex;
	gap: 6px;
	font-size: 12px;
	}

	.tags .tag {
	box-sizing: border-box;
	background-color: #fc9a29;
	border-radius: 6px;
	padding: 4px 12px;
	color: #fff;
	}

	/* 通用的紫色渐变背景按钮 */
	.purple-button {
	background: linear-gradient(to right, #A112BB, #4214b6);
	box-shadow: 5px 5px 10px rgb(66 20 182 / 30%);
	box-sizing: border-box;
	border-radius: 10px;
	padding: 10px 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	color: #fff;
	}

	.purple-button .icon {
	width: 20px;
	height: auto;
	}

	.purple-button .text {
	font-size: 13px;
	font-weight: bold;
	}
	</style>
	</head>

	<body>
	<div class="actions">
	<button class="button" onclick="copy()">copy as html!</button>
	<button class="button" onclick="flip()">flip page!</button>
	</div>

	<div id="container">
	<!-- namecard background -->
	<div class="bg">
	<img class="bg-img" src="./avatar.png" alt="">
	<div class="bg-mask"></div>
	</div>
	<!-- page 0x01 -->
	<div id="namecard" class="card" style="display: none;">
	<div class="left">
	<div class="upper" onclick="copy()">
	<img class="avatar" src='./avatar.png'>
	<span class="name">Tom Stern</span>
	</div>
	<div class="lower">
	<a class="homepage purple-button" target="_blank" href="#">
	<img class="icon" src="./homepage.png" alt="homepage">
	<span class="text">My Homepage</span>
	</a>
	</div>
	</div>
	<div class="right">
	<div class="upper">
	<div class="intro">
	<div class="para">Have more than 6 years of Digital Proudct Design experience.</div>
	<div class="para">Passionate about learning technology and exploring new possibilities.
	Believe a well-design UI/UX is the key to a successful product.</div>
	</div>
	<div class="tags">
	<span class="tag">Web3.0</span>
	<span class="tag">Blockchain</span>
	<span class="tag">NFT</span>
	</div>
	</div>
	<div class="lower">
	<div class="social">
	<div class="twitter">
	<img class="icon" src="./tw.png" alt="twitter">
	<span class="text">XXXXXXXX</span>
	</div>
	<div class="address">California, US</div>
	</div>
	<div class="speed-run">
	<img class="icon" src="./run.png" alt="">
	<span class="source">source:<span class="value">ng</span></span>
	<span class="level">level:<span class="value">1</span></span>
	</div>
	</div>
	</div>
	</div>

	<!--page 0x02 -->
	<div id="namecard2" class="card" style="display: none;">
	<div class="title">My Profile</div>
	<div class="header">LinkedIn Is No Longer</div>
	<div class="para">Here’s what it is now — It’s Monday morning. I grab a cup of coffee and log in to LinkedIn. It’s not long before I am rolling my eyes. It’s not a professional networking site anymore. LinkedIn is now primarily a salesHere’s …</div>
	<img class="screen-shot" src="./screenshot.png" alt="">
	<div class="tags">
	<span class="tag">Web3.0</span>
	</div>
	</div>

	<!--page 0x03 -->
	<div id="namecard3" class="card" style="display: flex;">
	<div class="dao">
	<img class="logo" src="./dao.png" alt="dao">
	<div class="lower">
	<span class="position">POSITION</span>
	<div class="purple-button">Dao Name</div>
	</div>
	</div>
	<div class="nfts">
	<div class="header">NFTs</div>
	<div class="imgs">
	<div class="col">
	<img src="./nft1.png" alt="nft">
	</div>
	<div class="col">
	<img src="./nft2.png" alt="nft">
	</div>
	<div class="col">
	<img src="./nft3.png" alt="nft">
	<img src="./nft4.png" alt="nft">
	<img src="./nft5.png" alt="nft">
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	function copy() {
	var payload = document.documentElement.innerHTML;
	let index = payload.indexOf("<title>");
	let copyBtn = "<button onclick='copy()'>copy as html!</button>"
	full_html = "<html><head>" + payload.slice(index).replace() + "</html>";

	navigator.clipboard.writeText(full_html);
	}

	// 函数能够正常运行的前提：
	// 最初只有一个 .card 元素的 display 是 flex
	// 其余都是 none
	function flip() {
	var face = document.querySelectorAll('.card')

	for (var i = 0; i < face.length; i++) {

	// 找到当前显示的那个 namecard 的序号
	if (face[i].style.display === 'flex') {

	// 记录下一个 namecard 的序号
	var j = (i + 1) % face.length

	// 设置下一个 namecard 的 display 为 flex
	// 其余的都设置为 none
	for (var k = 0; k < face.length; k++) {
	if (k === j) {
	face[k].style.display = 'flex'
	} else {
	face[k].style.display = 'none'
	}
	}

	// 设置完毕，结束循环
	return
	}
	}
	}
	</script>

	<iframe hidden="" height="0" width="0" src="/phoenix/live_reload/frame"></iframe>
	</body>

	</html>