blockchain-sonar · thedetukov · Jul 25, 2022 · Apr 24, 2023 · Apr 26, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,24 @@
+{
+	"editor.detectIndentation": false,
+	"editor.insertSpaces": false,
+	"editor.lineNumbers": "on",
+	"editor.renderWhitespace": "all",
+	"editor.rulers": [
+		80,
+		160,
+		240,
+		320
+	],
+	"editor.trimAutoWhitespace": true,
+	"editor.useTabStops": true,
+	"editor.wordWrapColumn": 1024,
+	"files.autoSave": "afterDelay",
+	"files.autoSaveDelay": 5000,
+	"files.insertFinalNewline": true,
+	"files.encoding": "utf8",
+	"git.enabled": true,
+	"git.rebaseWhenSync": true,
+	"editor.guides.indentation": true,
+	"html.format.endWithNewline": false,
+	"html.format.wrapLineLength": 0
+}
diff --git a/address-1.css b/address-1.css
@@ -0,0 +1,136 @@
+* {
+  box-sizing: border-box;
+}
+
+@supports (grid-template-rows: masonry) {
+  .card-host {
+    display: grid;
+    /* same as margin is not masony card */
+    gap: 2px;
+    grid-template-columns: repeat(auto-fill, 300px);
+    grid-template-rows: masonry;
+    justify-content: center;
+  }
+}
+
+@supports not (grid-template-rows: masonry) {
+  .card-host {
+    display: block;
+    margin: 0 auto;
+  }
+  .card-host:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+  .card {
+    /* same as gap in masonry */
+    margin: 2px;
+  }
+}
+
+.header {
+  width: 100%;
+  height: 50px;
+  background: white;
+  /* border: solid; */
+  font-size: larger;
+  /* border-radius: 10px; */
+  text-align: center;
+  padding-top: 15px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+}
+
+.address_red {
+  color: red;
+}
+
+.footer {
+  display: inline-block;
+  position: block;
+  width: 100%;
+  height: auto;
+  left: 0;
+  bottom: 0;
+  border-top: solid rgb(18, 17, 17);
+  display: inline-block;
+  background: grey;
+}
+.support {
+  float: left;
+  display: block;
+}
+
+.developers {
+  padding-left: 20px;
+  float: left;
+  display: block;
+}
+
+.footer-link {
+  text-decoration: none;
+  color: gray;
+}
+
+.donations {
+  margin: 3%;
+  margin-top: 50px;
+  position: absolute;
+  right: 0;
+  color: grey;
+  text-decoration: none;
+}
+
+.card-host {
+  margin-bottom: 20px;
+  /* background: rgb(200, 0, 255); */
+}
+
+.donate-link {
+  text-decoration: none;
+  color: rgb(116, 206, 235);
+}
+
+.donate-link:hover {
+  color: red;
+}
+
+.donate-icon {
+  content: "\f004"; /* добавляем иконку дом */
+  font-family: FontAwesome;
+  color: red;
+}
+
+.card {
+  width: 300px;
+}
+.card-content {
+  /* margin-right: 20px; */
+  font-size: smaller;
+  word-wrap: break-word;
+  display: inline-block;
+  text-align: center;
+}
+ul {
+  /* background-color: azure; */
+  padding-left: 15px;
+}
+
+.circle-blockchain {
+  list-style-type: circle;
+}
+
+.currency-name {
+  display: inline-block;
+  text-align: center;
+}
+
+.currency-card {
+  /* height: 200px; */
+  /* background-color: red; */
+  border-radius: 15px;
+  border: solid;
+  padding: 5px;
+  background: white;
+}
diff --git a/address-1.html b/address-1.html
@@ -0,0 +1,114 @@
+<!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, height=device-height, initial-scale=1.0 maximum-scale=1.0"/>
+	<link href="/address-1.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+	<link href="/main.css" rel="stylesheet"/>
+	<link rel="icon" type="image/x-icon" href="/icons/assets/logo_icon.png">
+	<title>Address</title>
+</head>
+
+<header>
+	<div class="header">
+		{{# address }}
+		<span class="address_red">Address /</span> {{address}}
+		{{/ address }}
+	</div>
+</header>
+
+<body>
+	<div class="card-host">
+		<!-- addresses -->
+		<!-- <div class="card-sizer"></div> -->
+
+		{{# assets }}
+		{{# blockchains }}
+		<!-- <div class="card">{{ id }} {{ blockchains }} </div> -->
+
+		<div class="card currency-card">
+			<div class="card-content">
+				<img src="/icons/assets/ETH-56x56.png" />
+				<div class="currency-name">{{ id }}</div>
+				<div class="currency-explorer">{{ name }} </div>
+			</div>
+			<ul>
+
+				<li>
+					Blockchain: {{ blockchain }}
+				</li>
+
+			</ul>
+			{{ #alternatives }}
+			<ul class="circle-blockchain">
+				<li>
+					<a href={{ link }}>{{ name }}</a>
+				</li>
+			</ul>
+			{{ /alternatives }}
+
+			<div>Token: {{ token }}</div>
+			<span>Balance: {{ balance }}</span>
+		</div>
+		{{/ blockchains }}
+		{{/ assets }}
+	</div>
+
+	<footer>
+		<div class="footer"></div>
+		<div class="support">
+			<span>Support</span>
+			<dl>
+				<dt>
+					<a class="footer-link" href="https://">Product help</a>
+				<dt>
+					<a class="footer-link" href="https://">Report an issue</a>
+				</dt>
+			</dl>
+		</div>
+		<div class="developers">
+			<span>Developers</span>
+			<dl>
+				<dt>
+					<a class="footer-link" href="https://">Web technologies</a>
+				<dt>
+					<a class="footer-link" href="https://">Learn Web Development</a>
+				</dt>
+				<dt>
+					<a class="footer-link" href="https://">MDN Plus</a>
+				</dt>
+			</dl>
+		</div>
+		<div class="donations">
+			<p class="donate-text">Donations:
+				<a class="donate-link" href="https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7?a=0x2b6828f4f227953fb36f42bda830b457afdc1c5e">currency_address</a>
+				<i class=" donate-icon fa fa-heart fa-fw"></i>
+			</p>
+		</div>
+
+	</footer>
+
+	<script>
+		var cardHostElement = document.getElementsByClassName('card-host')[0];
+		var style = getComputedStyle(cardHostElement);
+		var cardHostDisplay = style.getPropertyValue('display');
+		if (cardHostDisplay === "block") {
+			// load js
+			var script = document.createElement('script');
+			script.onload = function () {
+				var msnry = new Masonry(cardHostElement, {
+					itemSelector: '.card',
+					// percentPosition: true,
+					fitWidth: true
+				});
+			};
+			script.src = "https://masonry.desandro.com/masonry.pkgd.js";
+			document.head.appendChild(script);
+		}
+	</script>
+</body>
+
+</html>