typescript и handlebars
This commit is contained in:
grinikita
parent
1597b52310
commit
e53ae4858d
189
dist/index.html
vendored
189
dist/index.html
vendored
@ -1,189 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="index.js"></script></head>
|
||||
<body>
|
||||
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
<div class="top-nft">
|
||||
<h2 class="top-nft__title">Weakly - Top NFT</h2>
|
||||
<div class="nft-card-container">
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button btn-left">left</button>
|
||||
<button class="button btn-right">right</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
177
dist/style.css
vendored
177
dist/style.css
vendored
@ -1,177 +0,0 @@
|
||||
html {
|
||||
--color-dark: #141416;
|
||||
--text-dark: var(--color-dark);
|
||||
--text-light: #FFFFFF;
|
||||
|
||||
--font-poppins: "Poppins", sans-serif;
|
||||
--font-inter: "Inter", sans-serif;
|
||||
|
||||
font-family: var(--font-poppins);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 97px;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-family: var(--font-poppins);
|
||||
padding: 16px 24px;
|
||||
background-color: var(--color-dark);
|
||||
border-radius: 16px;
|
||||
color: var(--text-light);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
background: #94A3B8;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-inter);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-right: 57px;
|
||||
}
|
||||
|
||||
.header .button {
|
||||
margin-left: auto;
|
||||
font-family: var(--font-inter);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #606060;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
text-transform: uppercase;
|
||||
|
||||
display: flex;
|
||||
gap: 53px;
|
||||
}
|
||||
|
||||
.header a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.top-nft {
|
||||
padding: 70px 0 90px;
|
||||
background: #F1F1F1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-nft__title {
|
||||
font-weight: 600;
|
||||
font-size: 45px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0;
|
||||
color: #C5C5C5;
|
||||
text-align: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.nft-card {
|
||||
width: 282px;
|
||||
padding: 14px 14px 20px;
|
||||
box-shadow: 38.82px 11.76px 58.81px 0px #C7C7C799;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.nft-card__img {
|
||||
position: relative;
|
||||
border-radius: 24px;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: center / cover no-repeat url('https://s3-alpha-sig.figma.com/img/b82f/55d0/61c522d86567e3c5ea1f39ddf68ae4bc?Expires=1743379200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=UlO4-Fsc27zhQo9T9Tl8fhCSVyxM4GHu6DkUtWgi881ggrnY9uHKNdVvhg2GuSS7ItYldxw9FhYRjgcBrwKBvnf4XLjw8YjkZ8584NLVxfH-POsN8O2eh9gyxEBEgaF~AVwwnNmnRpPN2JFnfcRUIihkRrhZA7IjDRxNY1CbPHB5j~AP9wlWhI6P2TqaXaJj~8JRZPx1YBpGWfrSCgLfgQejNNi58FvkkX1Hkvm0aICdebCSqwFrq~sLI6Rbj5H-QgF~2AxU3EGiBzdaCvMXfBx3xpZIvHGkuSeYlhdlU-KFNmjF9u3VPg7c5S~IvPMIOmvWhwX-GguAGxPZe4tksw__'), #F8F8F8;
|
||||
}
|
||||
|
||||
.nft-card__content {
|
||||
padding: 0 4px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.nft-card__title {
|
||||
font-family: var(--font-poppins);
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
line-height: 140%;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.nft-card__footer {
|
||||
display: flex;
|
||||
}
|
||||
.nft-card__footer > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nft-card__description {
|
||||
color: #94A3B8;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.12px;
|
||||
vertical-align: middle;
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nft-card__price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
.nft-card__price {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.nft-card__time {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 9px;
|
||||
|
||||
background: #1C1D2059;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #1C1D2014;
|
||||
backdrop-filter: blur(4.7px);
|
||||
box-shadow: 0 4.71px 14.12px 0 #1C1D2014;
|
||||
|
||||
padding: 8px 14px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.12px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.nft-card-container {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
|
||||
transition: transform 0.3s linear;
|
||||
}
|
||||
|
||||
.nft-card-container .nft-card {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
337
package-lock.json
generated
337
package-lock.json
generated
@ -9,12 +9,15 @@
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"handlebars-loader": "^1.7.3",
|
||||
"webpack": "^5.98.0",
|
||||
"webpack-cli": "^6.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"html-webpack-plugin": "^5.6.3"
|
||||
"html-webpack-plugin": "^5.6.3",
|
||||
"ts-loader": "^9.5.2",
|
||||
"typescript": "^5.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@discoveryjs/json-ext": {
|
||||
@ -401,6 +404,37 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/async": {
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
|
||||
"integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
@ -408,6 +442,19 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/braces": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fill-range": "^7.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/browserslist": {
|
||||
"version": "4.24.4",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
|
||||
@ -477,6 +524,36 @@
|
||||
],
|
||||
"license": "CC-BY-4.0"
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/chalk/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/chrome-trace-event": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
|
||||
@ -513,6 +590,26 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/colorette": {
|
||||
"version": "2.0.20",
|
||||
"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
|
||||
@ -679,6 +776,15 @@
|
||||
"integrity": "sha512-refir3NlutEZqlKaBLK0tzlVLe5P2wDKS7UQt/3SpibizgsRAPOsqQC3ffw1nlv3ze5gjRQZYHoPymgVZkplFA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/emojis-list": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/enhanced-resolve": {
|
||||
"version": "5.18.1",
|
||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
|
||||
@ -812,6 +918,12 @@
|
||||
"node": ">= 4.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/fastparse": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
|
||||
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fdir": {
|
||||
"version": "6.4.3",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
|
||||
@ -827,6 +939,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/find-up": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
|
||||
@ -883,6 +1008,43 @@
|
||||
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/handlebars": {
|
||||
"version": "4.7.8",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
|
||||
"integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"minimist": "^1.2.5",
|
||||
"neo-async": "^2.6.2",
|
||||
"source-map": "^0.6.1",
|
||||
"wordwrap": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"handlebars": "bin/handlebars"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.7"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"uglify-js": "^3.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/handlebars-loader": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/handlebars-loader/-/handlebars-loader-1.7.3.tgz",
|
||||
"integrity": "sha512-dDb+8D51vE3OTSE2wuGPWRAegtsEuw8Mk8hCjtRu/pNcBfN5q+M8ZG3kVJxBuOeBrVElpFStipGmaxSBTRR1mQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"async": "^3.2.2",
|
||||
"fastparse": "^1.0.0",
|
||||
"loader-utils": "1.4.x",
|
||||
"object-assign": "^4.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"handlebars": ">= 1.3.0 < 5"
|
||||
}
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
@ -1065,6 +1227,16 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-number": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-plain-object": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
|
||||
@ -1118,6 +1290,18 @@
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/json5": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
|
||||
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"minimist": "^1.2.0"
|
||||
},
|
||||
"bin": {
|
||||
"json5": "lib/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/kind-of": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||
@ -1136,6 +1320,20 @@
|
||||
"node": ">=6.11.5"
|
||||
}
|
||||
},
|
||||
"node_modules/loader-utils": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
|
||||
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||
@ -1171,6 +1369,33 @@
|
||||
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"braces": "^3.0.3",
|
||||
"picomatch": "^2.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/micromatch/node_modules/picomatch": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
@ -1192,6 +1417,15 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimist": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
|
||||
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/neo-async": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
|
||||
@ -1238,6 +1472,15 @@
|
||||
"url": "https://github.com/fb55/nth-check?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/p-limit": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
|
||||
@ -1496,6 +1739,19 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.7.1",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
|
||||
"integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/serialize-javascript": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
|
||||
@ -1675,6 +1931,50 @@
|
||||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-loader": {
|
||||
"version": "9.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.2.tgz",
|
||||
"integrity": "sha512-Qo4piXvOTWcMGIgRiuFa6nHNm+54HbYaZCKqc9eeZCLRy3XqafQgwX2F7mofrbJG3g7EEb+lkiR+z2Lic2s3Zw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.0",
|
||||
"enhanced-resolve": "^5.0.0",
|
||||
"micromatch": "^4.0.0",
|
||||
"semver": "^7.3.4",
|
||||
"source-map": "^0.7.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "*",
|
||||
"webpack": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-loader/node_modules/source-map": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
|
||||
"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
@ -1682,6 +1982,34 @@
|
||||
"dev": true,
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.8.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
|
||||
"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/uglify-js": {
|
||||
"version": "3.19.3",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
|
||||
"integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
|
||||
"license": "BSD-2-Clause",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"uglifyjs": "bin/uglifyjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.20.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
|
||||
@ -1878,6 +2206,13 @@
|
||||
"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
|
||||
"integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/wordwrap": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
|
||||
"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "html",
|
||||
"version": "1.0.0",
|
||||
"main": "src/index.js",
|
||||
"main": "src/index.ts",
|
||||
"scripts": {
|
||||
"build": "webpack --mode=development",
|
||||
"dev": "webpack --mode=development --watch"
|
||||
@ -10,11 +10,14 @@
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"handlebars-loader": "^1.7.3",
|
||||
"webpack": "^5.98.0",
|
||||
"webpack-cli": "^6.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"html-webpack-plugin": "^5.6.3"
|
||||
"html-webpack-plugin": "^5.6.3",
|
||||
"ts-loader": "^9.5.2",
|
||||
"typescript": "^5.8.2"
|
||||
}
|
||||
}
|
||||
|
||||
37
src/components/carusel.ts
Normal file
37
src/components/carusel.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import './logger'
|
||||
|
||||
const moveContainer = (container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement, prevOffset: number, offset: number) => {
|
||||
const containerWidth = container.scrollWidth
|
||||
|
||||
let newOffset = prevOffset + offset
|
||||
const minOffset = (containerWidth - document.body.clientWidth) * -1
|
||||
const maxOffset = 0;
|
||||
newOffset = Math.min(Math.max(minOffset, newOffset), maxOffset);
|
||||
container.style.transform = `translateX(${newOffset}px)`
|
||||
|
||||
btnLeft.disabled = newOffset >= maxOffset;
|
||||
btnRight.disabled = newOffset <= minOffset;
|
||||
|
||||
return newOffset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Инициализация карусели
|
||||
* @param container html элемент
|
||||
* @param btnLeft
|
||||
* @param btnRight
|
||||
*/
|
||||
export function initCarusel(container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement) {
|
||||
let containerOffset = 0;
|
||||
|
||||
containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 0)
|
||||
|
||||
btnLeft.addEventListener('click', () => {
|
||||
containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 285)
|
||||
})
|
||||
|
||||
btnRight.addEventListener('click', () => {
|
||||
containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, -285)
|
||||
})
|
||||
}
|
||||
|
||||
1
src/components/logger.ts
Normal file
1
src/components/logger.ts
Normal file
@ -0,0 +1 @@
|
||||
console.log('hello world')
|
||||
24
src/index.hbs
Normal file
24
src/index.hbs
Normal file
@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{> views/header }}
|
||||
<main>
|
||||
{{> views/carusel }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
189
src/index.html
189
src/index.html
@ -1,189 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
<main>
|
||||
<div class="top-nft">
|
||||
<h2 class="top-nft__title">Weakly - Top NFT</h2>
|
||||
<div class="nft-card-container">
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">Sun-Glass</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
1.75
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button btn-left">left</button>
|
||||
<button class="button btn-right">right</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
34
src/index.js
34
src/index.js
@ -1,34 +0,0 @@
|
||||
const name = 'File'
|
||||
|
||||
import { name as name2 } from './index2.js'
|
||||
|
||||
console.log('From index.js log name', name2)
|
||||
|
||||
const btnLeft = document.querySelector('.top-nft .btn-left')
|
||||
const btnRight = document.querySelector('.top-nft .btn-right')
|
||||
const container = document.querySelector('.nft-card-container')
|
||||
|
||||
let containerOffset = 0;
|
||||
|
||||
const moveContainer = (offset) => {
|
||||
const containerWidth = container.scrollWidth
|
||||
|
||||
const newOffset = containerOffset + offset
|
||||
const minOffset = (containerWidth - document.body.clientWidth) * -1
|
||||
const maxOffset = 0;
|
||||
containerOffset = Math.min(Math.max(minOffset, newOffset), maxOffset);
|
||||
container.style.transform = `translateX(${containerOffset}px)`
|
||||
|
||||
btnLeft.disabled = containerOffset >= maxOffset ? true : null;
|
||||
btnRight.disabled = containerOffset <= minOffset;
|
||||
}
|
||||
|
||||
moveContainer(0)
|
||||
|
||||
btnLeft.addEventListener('click', () => {
|
||||
moveContainer(285)
|
||||
})
|
||||
|
||||
btnRight.addEventListener('click', () => {
|
||||
moveContainer(-285)
|
||||
})
|
||||
8
src/index.ts
Normal file
8
src/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { initCarusel } from './components/carusel'
|
||||
|
||||
const container = document.querySelector<HTMLElement>('.nft-card-container')
|
||||
const btnLeft = document.querySelector<HTMLButtonElement>('.top-nft .btn-left')
|
||||
const btnRight = document.querySelector<HTMLButtonElement>('.top-nft .btn-right')
|
||||
if (container && btnLeft && btnRight) {
|
||||
initCarusel(container, btnLeft, btnRight)
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export const name = "Vasya"
|
||||
16
src/views/carusel.hbs
Normal file
16
src/views/carusel.hbs
Normal file
@ -0,0 +1,16 @@
|
||||
<div class="top-nft">
|
||||
<h2 class="top-nft__title">Weakly - Top NFT</h2>
|
||||
<div class="nft-card-container nft-card-container-2">
|
||||
{{> nft-card title="Sun-Glass" price=1.75 }}
|
||||
{{> nft-card title="Sun-Glass2" price=5}}
|
||||
{{> nft-card title="Sun-Glass3" price=2.15}}
|
||||
{{> nft-card title="Sun-Glass4" price=1.1}}
|
||||
{{> nft-card title="Sun-Glass5" price=1.75}}
|
||||
{{> nft-card title="Sun-Glass6" price=1.75}}
|
||||
{{> nft-card title="Sun-Glass7" price=1.75}}
|
||||
</div>
|
||||
<div>
|
||||
<button class="button btn-left btn-2">left</button>
|
||||
<button class="button btn-right btn-2">right</button>
|
||||
</div>
|
||||
</div>
|
||||
12
src/views/header.hbs
Normal file
12
src/views/header.hbs
Normal file
@ -0,0 +1,12 @@
|
||||
<header class="header container">
|
||||
<a href="index.html"><img class="logo" src="../src/images/logo.svg" alt=""></a>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a href="../src/discover.html">Discover</a></li>
|
||||
<li><a href="../src/creators.html">creators</a></li>
|
||||
<li><a href="../src/creators.html">Sell</a></li>
|
||||
<li><a href="../src/creators.html">stats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="button">Connect Wallet</button>
|
||||
</header>
|
||||
24
src/views/nft-card.hbs
Normal file
24
src/views/nft-card.hbs
Normal file
@ -0,0 +1,24 @@
|
||||
<div class="nft-card">
|
||||
<div class="nft-card__img">
|
||||
<div class="nft-card__time">07h 09m 12s</div>
|
||||
</div>
|
||||
<div class="nft-card__content">
|
||||
<h3 class="nft-card__title">{{title}}</h3>
|
||||
<div class="nft-card__footer">
|
||||
<div>
|
||||
<p class="nft-card__description">Current bid</p>
|
||||
<div class="nft-card__price">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.376 1.63574L5.8623 10.8988L11.376 14.207L16.8897 10.8988L11.376 1.63574ZM5.8623 12.0015L11.376 19.7207L16.8897 12.0015L11.376 15.3098L5.8623 12.0015Z"
|
||||
fill="#141416"/>
|
||||
</svg>
|
||||
<div>
|
||||
{{ price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button">Place bid</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
114
tsconfig.json
Normal file
114
tsconfig.json
Normal file
@ -0,0 +1,114 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "ES2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||
// "libReplacement": true, /* Enable lib replacement. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||
|
||||
/* Modules */
|
||||
"module": "commonjs", /* Specify what module code is generated. */
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
||||
// "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
|
||||
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
||||
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
||||
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
||||
// "noUncheckedSideEffectImports": true, /* Check side effect imports. */
|
||||
// "resolveJsonModule": true, /* Enable importing .json files. */
|
||||
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
||||
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||
"outDir": "./dist", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
||||
// "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
|
||||
// "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@ -3,16 +3,27 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
entry: './src/index.ts',
|
||||
output: {
|
||||
filename: 'index.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
clean: true
|
||||
},
|
||||
module: {},
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{ test: /\.(ts|tsx)$/, loader: "ts-loader" },
|
||||
{
|
||||
test: /\.hbs$/,
|
||||
loader: 'handlebars-loader',
|
||||
},
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "./src/index.html"
|
||||
template: "./src/index.hbs"
|
||||
}),
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user