diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..5301da1707 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + // Is git enabled + "git.enabled": true, + + // Path to the git executable + "git.path": "C:\\git.exe", + "liveServer.settings.port": 5501 +} diff --git a/backend/.env.example b/backend/.env.example deleted file mode 100644 index eb5d486056..0000000000 --- a/backend/.env.example +++ /dev/null @@ -1 +0,0 @@ -NFTPORT_API_KEY= \ No newline at end of file diff --git a/backend/layers/Background/#1.png b/backend/layers/Background/#1.png new file mode 100644 index 0000000000..8683185e9d Binary files /dev/null and b/backend/layers/Background/#1.png differ diff --git a/backend/layers/Background/#2.png b/backend/layers/Background/#2.png new file mode 100644 index 0000000000..4209f86afa Binary files /dev/null and b/backend/layers/Background/#2.png differ diff --git a/backend/layers/Background/#3.png b/backend/layers/Background/#3.png new file mode 100644 index 0000000000..3b236fbe2d Binary files /dev/null and b/backend/layers/Background/#3.png differ diff --git a/backend/layers/Background/#4.png b/backend/layers/Background/#4.png new file mode 100644 index 0000000000..5dc05a9573 Binary files /dev/null and b/backend/layers/Background/#4.png differ diff --git a/backend/layers/Background/#5.png b/backend/layers/Background/#5.png new file mode 100644 index 0000000000..6a9ba0ddc3 Binary files /dev/null and b/backend/layers/Background/#5.png differ diff --git a/backend/layers/Background/Black.png b/backend/layers/Background/Black.png deleted file mode 100644 index c7dc38f3a6..0000000000 Binary files a/backend/layers/Background/Black.png and /dev/null differ diff --git a/backend/layers/Background/Blue.png b/backend/layers/Background/Blue.png deleted file mode 100644 index 20d3ee566e..0000000000 Binary files a/backend/layers/Background/Blue.png and /dev/null differ diff --git a/backend/layers/Background/Orange.png b/backend/layers/Background/Orange.png deleted file mode 100644 index 0c5c437715..0000000000 Binary files a/backend/layers/Background/Orange.png and /dev/null differ diff --git a/backend/layers/Background/Yellow.png b/backend/layers/Background/Yellow.png deleted file mode 100644 index 58a71a30e8..0000000000 Binary files a/backend/layers/Background/Yellow.png and /dev/null differ diff --git a/backend/layers/Body/#1.png b/backend/layers/Body/#1.png new file mode 100644 index 0000000000..75cbc53bdd Binary files /dev/null and b/backend/layers/Body/#1.png differ diff --git a/backend/layers/Body/#2.png b/backend/layers/Body/#2.png new file mode 100644 index 0000000000..27da84b540 Binary files /dev/null and b/backend/layers/Body/#2.png differ diff --git a/backend/layers/Body/#3.png b/backend/layers/Body/#3.png new file mode 100644 index 0000000000..8b785049bd Binary files /dev/null and b/backend/layers/Body/#3.png differ diff --git a/backend/layers/Body/#4.png b/backend/layers/Body/#4.png new file mode 100644 index 0000000000..67533f82cc Binary files /dev/null and b/backend/layers/Body/#4.png differ diff --git a/backend/layers/Body/#5.png b/backend/layers/Body/#5.png new file mode 100644 index 0000000000..6bdd312e0d Binary files /dev/null and b/backend/layers/Body/#5.png differ diff --git a/backend/layers/Bottom lid/High High #20.png b/backend/layers/Bottom lid/High High #20.png deleted file mode 100644 index 9aeb645766..0000000000 Binary files a/backend/layers/Bottom lid/High High #20.png and /dev/null differ diff --git a/backend/layers/Bottom lid/Low#40.png b/backend/layers/Bottom lid/Low#40.png deleted file mode 100644 index aac391c251..0000000000 Binary files a/backend/layers/Bottom lid/Low#40.png and /dev/null differ diff --git a/backend/layers/Bottom lid/Middle#40.png b/backend/layers/Bottom lid/Middle#40.png deleted file mode 100644 index ae887bc482..0000000000 Binary files a/backend/layers/Bottom lid/Middle#40.png and /dev/null differ diff --git a/backend/layers/Eye color/Cyan#1.png b/backend/layers/Eye color/Cyan#1.png deleted file mode 100644 index 3ea45612ea..0000000000 Binary files a/backend/layers/Eye color/Cyan#1.png and /dev/null differ diff --git a/backend/layers/Eye color/Green#1.png b/backend/layers/Eye color/Green#1.png deleted file mode 100644 index 20555e54b0..0000000000 Binary files a/backend/layers/Eye color/Green#1.png and /dev/null differ diff --git a/backend/layers/Eye color/Pink#1.png b/backend/layers/Eye color/Pink#1.png deleted file mode 100644 index 7b6d2bd2cc..0000000000 Binary files a/backend/layers/Eye color/Pink#1.png and /dev/null differ diff --git a/backend/layers/Eye color/Purple#1.png b/backend/layers/Eye color/Purple#1.png deleted file mode 100644 index 65ea574f55..0000000000 Binary files a/backend/layers/Eye color/Purple#1.png and /dev/null differ diff --git a/backend/layers/Eye color/Red#1.png b/backend/layers/Eye color/Red#1.png deleted file mode 100644 index d56e337fe0..0000000000 Binary files a/backend/layers/Eye color/Red#1.png and /dev/null differ diff --git a/backend/layers/Eye color/Yellow#10.png b/backend/layers/Eye color/Yellow#10.png deleted file mode 100644 index e2b62a565c..0000000000 Binary files a/backend/layers/Eye color/Yellow#10.png and /dev/null differ diff --git a/backend/layers/Eyeball/Red#50.png b/backend/layers/Eyeball/Red#50.png deleted file mode 100644 index 4abb0a8d20..0000000000 Binary files a/backend/layers/Eyeball/Red#50.png and /dev/null differ diff --git a/backend/layers/Eyeball/White#50.png b/backend/layers/Eyeball/White#50.png deleted file mode 100644 index 6a89d197d1..0000000000 Binary files a/backend/layers/Eyeball/White#50.png and /dev/null differ diff --git a/backend/layers/Eyes/#1.png b/backend/layers/Eyes/#1.png new file mode 100644 index 0000000000..14c7bbd0b1 Binary files /dev/null and b/backend/layers/Eyes/#1.png differ diff --git a/backend/layers/Eyes/#2.png b/backend/layers/Eyes/#2.png new file mode 100644 index 0000000000..58ccf5b972 Binary files /dev/null and b/backend/layers/Eyes/#2.png differ diff --git a/backend/layers/Eyes/#3.png b/backend/layers/Eyes/#3.png new file mode 100644 index 0000000000..84e6088fc0 Binary files /dev/null and b/backend/layers/Eyes/#3.png differ diff --git a/backend/layers/Eyes/#4.png b/backend/layers/Eyes/#4.png new file mode 100644 index 0000000000..d2f2439ad5 Binary files /dev/null and b/backend/layers/Eyes/#4.png differ diff --git a/backend/layers/Eyes/#5.png b/backend/layers/Eyes/#5.png new file mode 100644 index 0000000000..38306287ab Binary files /dev/null and b/backend/layers/Eyes/#5.png differ diff --git a/backend/layers/Goo/Green#1.png b/backend/layers/Goo/Green#1.png deleted file mode 100644 index 56013ac213..0000000000 Binary files a/backend/layers/Goo/Green#1.png and /dev/null differ diff --git a/backend/layers/Hair/#1.png b/backend/layers/Hair/#1.png new file mode 100644 index 0000000000..3c69480959 Binary files /dev/null and b/backend/layers/Hair/#1.png differ diff --git a/backend/layers/Hair/#2.png b/backend/layers/Hair/#2.png new file mode 100644 index 0000000000..739083cfed Binary files /dev/null and b/backend/layers/Hair/#2.png differ diff --git a/backend/layers/Hair/#3.png b/backend/layers/Hair/#3.png new file mode 100644 index 0000000000..242e0f1460 Binary files /dev/null and b/backend/layers/Hair/#3.png differ diff --git a/backend/layers/Hair/#4.png b/backend/layers/Hair/#4.png new file mode 100644 index 0000000000..5236be1ff6 Binary files /dev/null and b/backend/layers/Hair/#4.png differ diff --git a/backend/layers/Hair/#5.png b/backend/layers/Hair/#5.png new file mode 100644 index 0000000000..07d28d71d7 Binary files /dev/null and b/backend/layers/Hair/#5.png differ diff --git a/backend/layers/Iris/Large#20.png b/backend/layers/Iris/Large#20.png deleted file mode 100644 index b17ee6f6ae..0000000000 Binary files a/backend/layers/Iris/Large#20.png and /dev/null differ diff --git a/backend/layers/Iris/Medium#20.png b/backend/layers/Iris/Medium#20.png deleted file mode 100644 index f1b109d9ba..0000000000 Binary files a/backend/layers/Iris/Medium#20.png and /dev/null differ diff --git a/backend/layers/Iris/Small#60.png b/backend/layers/Iris/Small#60.png deleted file mode 100644 index e8893913b5..0000000000 Binary files a/backend/layers/Iris/Small#60.png and /dev/null differ diff --git a/backend/layers/Nose/#1.png b/backend/layers/Nose/#1.png new file mode 100644 index 0000000000..f3a5730792 Binary files /dev/null and b/backend/layers/Nose/#1.png differ diff --git a/backend/layers/Nose/#2.png b/backend/layers/Nose/#2.png new file mode 100644 index 0000000000..4ffcd06119 Binary files /dev/null and b/backend/layers/Nose/#2.png differ diff --git a/backend/layers/Nose/#3.png b/backend/layers/Nose/#3.png new file mode 100644 index 0000000000..94f501e67d Binary files /dev/null and b/backend/layers/Nose/#3.png differ diff --git a/backend/layers/Nose/#4.png b/backend/layers/Nose/#4.png new file mode 100644 index 0000000000..612e95051a Binary files /dev/null and b/backend/layers/Nose/#4.png differ diff --git a/backend/layers/Nose/#5.png b/backend/layers/Nose/#5.png new file mode 100644 index 0000000000..01d2bac743 Binary files /dev/null and b/backend/layers/Nose/#5.png differ diff --git a/backend/layers/Shine/Shapes#100.png b/backend/layers/Shine/Shapes#100.png deleted file mode 100644 index a75ca598bf..0000000000 Binary files a/backend/layers/Shine/Shapes#100.png and /dev/null differ diff --git a/backend/layers/Top lid/High#30.png b/backend/layers/Top lid/High#30.png deleted file mode 100644 index b2bc29cf22..0000000000 Binary files a/backend/layers/Top lid/High#30.png and /dev/null differ diff --git a/backend/layers/Top lid/Low#20.png b/backend/layers/Top lid/Low#20.png deleted file mode 100644 index 950cc1f9bb..0000000000 Binary files a/backend/layers/Top lid/Low#20.png and /dev/null differ diff --git a/backend/layers/Top lid/Middle#50.png b/backend/layers/Top lid/Middle#50.png deleted file mode 100644 index 29524bff70..0000000000 Binary files a/backend/layers/Top lid/Middle#50.png and /dev/null differ diff --git a/backend/src/config.js b/backend/src/config.js index 79cc89ea19..4a2bd0ec3c 100644 --- a/backend/src/config.js +++ b/backend/src/config.js @@ -1,43 +1,42 @@ -require('dotenv').config(); +require("dotenv").config(); const basePath = process.cwd(); const fs = require("fs"); const { MODE } = require(`${basePath}/constants/blend_mode.js`); const { NETWORK } = require(`${basePath}/constants/network.js`); -const network = NETWORK.eth; +const network = NETWORK.rinkeby; // General metadata for Ethereum -const namePrefix = "YOUR COLLECTION NAME"; -const description = "Remember to replace this description"; +const namePrefix = "Centurion"; +const description = + "The CENTURION NFT is a collection of 3,333 unique NFTs on the Polygon Blockchain. A centurionβ€”an officer who was leading the ancient Roman army-inspired these NFT concepts. We combine the centurion and his horse in one frame to solidify their comradeship."; const baseUri = "ipfs://NewUriToReplace"; // This will be replaced automatically const layerConfigurations = [ { - growEditionSizeTo: 5, + growEditionSizeTo: 20, layersOrder: [ { name: "Background" }, - { name: "Eyeball" }, - { name: "Eye color" }, - { name: "Iris" }, - { name: "Shine" }, - { name: "Bottom lid" }, - { name: "Top lid" }, + { name: "Body" }, + { name: "Eyes" }, + { name: "Hair" }, + { name: "Nose" }, ], }, ]; -const shuffleLayerConfigurations = true; +const shuffleLayerConfigurations = false; const debugLogs = false; const format = { - width: 512, - height: 512, + width: 840, + height: 640, smoothing: false, }; const extraMetadata = { - external_url: "https://codecats.xyz", // Replace with your website or remove this line if you do not have one. + external_url: "", // Replace with your website or remove this line if you do not have one. }; // NFTPort Info @@ -45,28 +44,30 @@ const extraMetadata = { // ** REQUIRED ** const AUTH = process.env.NFTPORT_API_KEY; // Set this in the .env file to prevent exposing your API key when pushing to Github const LIMIT = 2; // Your API key rate limit -const CHAIN = 'rinkeby'; // only rinkeby, polygon, or ethereum +const CHAIN = "rinkeby"; // only rinkeby, polygon, or ethereum // REQUIRED CONTRACT DETAILS THAT CANNOT BE UPDATED LATER! -const CONTRACT_NAME = 'CRYPTOPUNKS'; -const CONTRACT_SYMBOL = 'CP'; +const CONTRACT_NAME = "Centurion"; +const CONTRACT_SYMBOL = "CTN"; const METADATA_UPDATABLE = true; // set to false if you don't want to allow metadata updates after minting -const OWNER_ADDRESS = 'YOUR WALLET ADDRESS HERE'; -const TREASURY_ADDRESS = 'YOUR WALLET ADDRESS HERE'; -const MAX_SUPPLY = 5000; // The maximum number of NFTs that can be minted. CANNOT BE UPDATED! -const MINT_PRICE = 0.01; // Minting price per NFT. Rinkeby = ETH, Ethereum = ETH, Polygon = MATIC. CANNOT BE UPDATED! +const OWNER_ADDRESS = "0x7E5BfEe47F306cBA07E8DbAeb44aa1465c1c00C2"; +const TREASURY_ADDRESS = "0x7E5BfEe47F306cBA07E8DbAeb44aa1465c1c00C2"; +const MAX_SUPPLY = 20; // The maximum number of NFTs that can be minted. CANNOT BE UPDATED! +const MINT_PRICE = 0.001; // Minting price per NFT. Rinkeby = ETH, Ethereum = ETH, Polygon = MATIC. CANNOT BE UPDATED! const TOKENS_PER_MINT = 10; // maximum number of NFTs a user can mint in a single transaction. CANNOT BE UPDATED! // REQUIRED CONTRACT DETAILS THAT CAN BE UPDATED LATER. -const PUBLIC_MINT_START_DATE = "2022-03-20T11:30:48+00:00"; // This is required. Eg: 2022-02-08T11:30:48+00:00 +const PUBLIC_MINT_START_DATE = "2022-08-05T11:30:48+00:00"; // This is required. Eg: 2022-02-08T11:30:48+00:00 // OPTIONAL CONTRACT DETAILS THAT CAN BE UPDATED LATER. -const PRESALE_MINT_START_DATE = null; // Optional. Eg: 2022-02-08T11:30:48+00:00 -const ROYALTY_SHARE = 1000; // Percentage of the token price that goes to the royalty address. 100 bps = 1% -const ROYALTY_ADDRESS = "0xd8B808A887326F45B2D0cd999709Aa6264CeF919"; // Address that will receive the royalty +const PRESALE_MINT_START_DATE = "2022-07-01T11:30:48+00:00"; // Optional. Eg: 2022-02-08T11:30:48+00:00 +const ROYALTY_SHARE = 100; // Percentage of the token price that goes to the royalty address. 100 bps = 1% +const ROYALTY_ADDRESS = "0x7E5BfEe47F306cBA07E8DbAeb44aa1465c1c00C2"; // Address that will receive the royalty const BASE_URI = null; // only update if you want to manually set the base uri const PREREVEAL_TOKEN_URI = null; // only update if you want to manually set the prereveal token uri -const PRESALE_WHITELISTED_ADDRESSES = []; // only update if you want to manually set the whitelisted addresses +const PRESALE_WHITELISTED_ADDRESSES = [ + "0x6311260610f37dc84E579CE8eE483856F2C75bc9", +]; // only update if you want to manually set the whitelisted addresses // ** OPTIONAL ** let CONTRACT_ADDRESS = "YOUR CONTRACT ADDRESS"; // If you want to manually include it @@ -74,8 +75,9 @@ let CONTRACT_ADDRESS = "YOUR CONTRACT ADDRESS"; // If you want to manually inclu // Generic Metadata is optional if you want to reveal your NFTs const GENERIC = true; // Set to true if you want to upload generic metas and reveal the real NFTs in the future const GENERIC_TITLE = CONTRACT_NAME; // Replace with what you want the generic titles to say if you want it to be different from the contract name. -const GENERIC_DESCRIPTION = "REPLACE THIS"; // Replace with what you want the generic descriptions to say. -const GENERIC_IMAGE = "https://ipfs.io/ipfs/QmUf9tDbkqnfHkQaMdFWSGAeXwVXWA61pFED7ypx4hcsfh"; // Replace with your generic image that will display for all NFTs pre-reveal. +const GENERIC_DESCRIPTION = "NFT reveal soon"; // Replace with what you want the generic descriptions to say. +const GENERIC_IMAGE = + "https://ipfs.io/ipfs/bafkreiea3gvhop37yi2747iz3xxkjyatwocmrrpgujfcvpruvpux7znv4i"; // Replace with your generic image that will display for all NFTs pre-reveal. // Automatically set contract address if deployed using the deployContract.js script try { @@ -93,7 +95,7 @@ try { const solanaMetadata = { symbol: "YC", - seller_fee_basis_points: 1000, // Define how much % you want from secondary market sales 1000 = 10% + seller_fee_basis_points: 100, // Define how much % you want from secondary market sales 1000 = 10% external_url: "https://www.youtube.com/c/hashlipsnft", creators: [ { @@ -195,5 +197,5 @@ module.exports = { PUBLIC_MINT_START_DATE, BASE_URI, PREREVEAL_TOKEN_URI, - PRESALE_WHITELISTED_ADDRESSES + PRESALE_WHITELISTED_ADDRESSES, }; diff --git a/frontend/.htaccess b/frontend/.htaccess new file mode 100644 index 0000000000..3965ba3221 --- /dev/null +++ b/frontend/.htaccess @@ -0,0 +1,7 @@ + + + +RewriteEngine on +RewriteCond %{REQUEST_FILENAME} !-d +RewriteCond %{REQUEST_FILENAME}\.html -f +RewriteRule ^(.*)$ $1.html [NC,L] \ No newline at end of file diff --git a/frontend/contact.html b/frontend/contact.html new file mode 100644 index 0000000000..2128f63d35 --- /dev/null +++ b/frontend/contact.html @@ -0,0 +1,73 @@ + + + + + + + + + + + Centurion-Contact Us + + +
+
+
+

We love to hear from you.

+

+ Please use the form to reach out and share your comments and + suggestions. +

+
+
+ +

Contact Us

+
+ + + + + +
+
+
+
+ + + + diff --git a/frontend/css/contact-style.css b/frontend/css/contact-style.css new file mode 100644 index 0000000000..fe440d99c0 --- /dev/null +++ b/frontend/css/contact-style.css @@ -0,0 +1,193 @@ +:root { + --font-primary: "Poppins", sans-serif; + --font-secondary: "Arvo", serif; + --font-code: "Roboto", monospace; + --bg-color: #00b4d8; + --bg-color-transparent: #00163f80; + --font-color: #ffffff; + --line-color: #4adede; + --btn-bg-color: #0a3056; + --accent-color: #0f3056; + --cornering: #616464; + --button-hov: #1528ce; + --header-shadow: #000 0px 0px 5px; + --card-shadow: var(--accent-color) 0px 0px 20px; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Quicksand", sans-serif; +} + +body { + height: 100vh; + width: 100%; +} + +.container { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 20px 100px; +} + +.container:after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: url(/images/header/bg2.png); + background-size: cover; + filter: blur(20px); + z-index: -1; +} +.contact-box { + max-width: 850px; + display: grid; + grid-template-columns: repeat(2, 1fr); + justify-content: center; + align-items: center; + text-align: center; + background-color: #fff; + box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19); +} + +.left { + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.8) 50%, + rgba(0, 0, 0, 0.5) 80% + ), + url(/images/team/1.jpg); + background-size: cover; + background-position: center; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.left h1 { + color: var(--bg-color); + font-family: "Lucida Sans Unicode"; + font-size: 50px; + text-shadow: 1px 1px #f1eded; +} +.left h3 { + color: #fff; +} + +.right { + padding: 25px 40px; +} + +h2 { + position: relative; + padding: 0 0 10px; + margin-bottom: 10px; +} + +h2:after { + content: ""; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + height: 4px; + width: 50px; + border-radius: 2px; + background-color: var(--line-color); +} + +.field { + width: 100%; + border: 2px solid rgba(0, 0, 0, 0); + outline: none; + background-color: rgba(230, 230, 230, 0.6); + padding: 0.5rem 1rem; + font-size: 1.1rem; + margin-bottom: 22px; + transition: 0.3s; +} + +.field:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +textarea { + min-height: 150px; +} + +.btn { + width: 100%; + padding: 0.5rem 1rem; + background-color: var(--line-color); + color: #fff; + font-size: 1.1rem; + border: none; + outline: none; + cursor: pointer; + transition: 0.3s; +} + +.btn:hover { + background-color: var(--btn-bg-color); +} + +.field:focus { + border: 2px solid rgba(30, 85, 250, 0.47); + background-color: #fff; +} +.fa { + display: block; + color: #000; + cursor: pointer; + font-size: 30px; + float: right; + margin-top: -20px; + margin-right: -30px; +} + +@media screen and (max-width: 763px) { + .container { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 30px 20px; + } + + .contact-box { + max-width: 1000px; + grid-template-columns: 1fr; + justify-content: center; + align-items: center; + text-align: center; + background-color: #fff; + box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19); + } + .left { + height: 200px; + } + .left h1 { + font-size: 30px; + line-height: 25px; + margin-top: 30px; + text-shadow: 1px 1px #f1eded; + } + .left h3 { + font-size: 18px; + } + .right { + width: 100%; + } +} diff --git a/frontend/css/partners.css b/frontend/css/partners.css new file mode 100644 index 0000000000..e66f456158 --- /dev/null +++ b/frontend/css/partners.css @@ -0,0 +1,216 @@ +:root { + --font-primary: "Poppins", sans-serif; + --font-secondary: "Arvo", serif; + --font-code: "Roboto", monospace; + --bg-color: #00b4d8; + --bg-color-transparent: #00163f80; + --font-color: #ffffff; + --line-color: #4adede; + --btn-bg-color: #0a3056; + --accent-color: #0f3056; + --cornering: #616464; + --button-hov: #1528ce; + --header-shadow: #000 0px 0px 5px; + --card-shadow: var(--accent-color) 0px 0px 20px; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Quicksand", sans-serif; +} + +body { + height: 100vh; + width: 100%; +} + +.container { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 20px 100px; +} + +.container:after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: url(/images/header/bg2.png); + background-size: cover; + filter: blur(20px); + z-index: -1; +} +.contact-box { + max-width: 1000px; + display: grid; + grid-template-columns: repeat(2, 1fr); + justify-content: center; + align-items: center; + text-align: center; + background-color: #fff; + box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19); +} + +.left { + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.8) 50%, + rgba(0, 0, 0, 0.5) 80% + ), + url(/images/team/5.jpg); + background-size: cover; + background-position: center; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.left h1 { + color: var(--bg-color); + font-family: "Lucida Sans Unicode"; + font-size: 40px; + text-shadow: 1px 1px #f1eded; +} +.left h3 { + color: #fff; +} + +.right { + padding: 25px 40px; +} + +h2 { + position: relative; + padding: 0 0 10px; + margin-bottom: 10px; +} + +h2:after { + content: ""; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + height: 4px; + width: 50px; + border-radius: 2px; + background-color: var(--line-color); +} +p { + float: left; + font-size: 20px; +} + +.field { + width: 100%; + border: 2px solid rgba(0, 0, 0, 0); + outline: none; + background-color: rgba(230, 230, 230, 0.6); + padding: 0.5rem 1rem; + font-size: 1.1rem; + margin-bottom: 22px; + transition: 0.3s; +} + +.field:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +textarea { + min-height: 150px; +} + +.btn { + width: 100%; + padding: 0.5rem 1rem; + background-color: var(--line-color); + color: #000; + font-size: 1.1rem; + border: none; + outline: none; + cursor: pointer; + transition: 0.3s; +} + +.btn:hover { + background-color: var(--btn-bg-color); + color: #fff; +} + +.field:focus { + border: 2px solid rgba(30, 85, 250, 0.47); + background-color: #fff; +} +.fa { + display: block; + color: #000; + cursor: pointer; + font-size: 30px; + float: right; + margin-top: -20px; + margin-right: -30px; +} + +@media screen and (max-width: 763px) { + .container { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 0 20px; + } + + .contact-box { + max-width: 1000px; + grid-template-columns: 1fr; + justify-content: center; + align-items: center; + text-align: center; + background-color: #fff; + box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19); + } + .left { + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.8) 50%, + rgba(0, 0, 0, 0.5) 80% + ), + url(/images/team/5.jpg); + background-size: cover; + background-position: center; + height: 400px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + } + + .left h1 { + font-size: 30px; + line-height: 25px; + margin-bottom: 20px; + text-shadow: 1px 1px #f1eded; + } + .left h3 { + font-size: 18px; + margin-bottom: 10px; + } + .right { + width: 100%; + } + p { + float: left; + font-size: 18px; + } +} diff --git a/frontend/css/style.css b/frontend/css/style.css index 8455785888..f552d8b11f 100644 --- a/frontend/css/style.css +++ b/frontend/css/style.css @@ -8,12 +8,15 @@ --font-primary: "Poppins", sans-serif; --font-secondary: "Arvo", serif; --font-code: "Roboto", monospace; - --bg-color: #00163f; + --bg-color: #00b4d8; --bg-color-transparent: #00163f80; --font-color: #ffffff; - --btn-bg-color: #ffffff; - --accent-color: #be7efe; - --header-shadow: var(--accent-color) 0px 0px 5px; + --line-color: #4adede; + --btn-bg-color: #0a3056; + --accent-color: #0f3056; + --cornering: #616464; + --button-hov: #1528ce; + --header-shadow: #000 0px 0px 5px; --card-shadow: var(--accent-color) 0px 0px 20px; } @@ -22,12 +25,19 @@ margin: 0; box-sizing: border-box; } - +.dot-spin { + display: none; +} +html { + scroll-behavior: smooth; +} body { - background-color: var(--bg-color); - display: flex; - flex-flow: column; - height: 100vh; + background-color: #0f1d32; + background-image: linear-gradient(315deg, #12100e 0%, #0f1d32 74%); + + /* display: flex; */ + /* flex-flow: column; */ + /* height: 100vh; */ color: var(--font-color); font-family: var(--font-primary); } @@ -35,40 +45,145 @@ body { .container { display: flex; flex-direction: column; - max-width: 960px; + max-width: 950px; margin: 0 auto; padding: 1rem 2rem; justify-content: center; overflow: hidden; + margin-top: -50%; +} + +.logo img { + width: 50px; + margin-right: 70px; } /* HEADER */ header { - background-color: var(--bg-color); + background-color: rgba(21, 18, 14, 1); box-shadow: var(--header-shadow); + padding: 10px 0; + width: 100%; + height: 80px; + position: fixed; + z-index: 3; } -header .container { - flex-direction: row; - justify-content: space-between; +header .navbar { + display: flex; + justify-content: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 30px; +} + +.menu ul { align-items: center; + justify-content: center; + list-style-type: none; + float: right; + margin: 0; + padding: 0; +} +.menu ul li { + list-style-type: none; + display: inline-block; + margin: 0; + padding: 0; +} + +.menu ul li a { + color: var(--line-color); + font-size: 20px; + font-family: "Quicksand", sans-serif; + padding: 10px 20px; + margin: 0; + display: block; + font-weight: bold; + text-transform: uppercase; + text-decoration: none; +} + +.menu ul li a:hover { + color: var(--font-color); +} +.navbar .fa { + display: none; } -.menu { +.home { + min-height: 100vh; display: flex; - gap: 2rem; + justify-content: center; align-items: center; + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.5) 50%, + rgba(0, 0, 0, 0.5) 50% + ), + url(/images/header/bg2.png); + background-size: cover; +} + +.particles-js { + height: 100%; + position: absolute; +} +.not-connected .pdf p { + margin-top: 20px; + font-size: 18px; + font-family: var(--font-secondary); + font-style: italic; + margin-left: -40%; +} + +.whitepaper { + display: inline-block; + padding: 0.5rem 2rem; + background: var(--bg-color); + color: #000; + font-family: var(--font-secondary); + font-style: italic; + font-weight: bold; + font-size: 1rem; + text-align: center; + text-transform: capitalize; + transition: all 0.5s ease; + box-shadow: var(--header-shadow); + cursor: pointer; + border-radius: 30px; + position: relative; + text-decoration: none; + outline: none; +} + +.whitepaper:hover { + box-shadow: var(--header-shadow); + background-color: var(--cornering); + color: #fff; +} + +.not-connected .twitter-follow { + margin: 30px; + transform: translateY(30px); +} +.not-connected .twitter-follow p { + font-size: 18px; +} +.not-connected .twitter-follow .twitter-follow-button { + font-size: 30px; } /* NOT CONNECTED */ .not-connected { + margin: auto; + display: flex; align-items: center; + justify-content: center; height: 100%; text-align: center; - margin: 0 auto 0 35vw; - opacity: 0; - transform: translateY(10vh); + transform: translateY(2vh); transition: all 0.5s ease-in-out; } @@ -81,13 +196,14 @@ header .container { text-shadow: 2px 2px 0 var(--accent-color); font-style: italic; margin: 2rem 0; - font-size: 3.5rem; + font-size: 65px; } .not-connected p { - font-size: 1.1rem; + font-size: 30px; font-family: var(--font-secondary); line-height: 1.8; + text-align: justify; } .not-connected a { @@ -99,11 +215,37 @@ header .container { /* BUTTONS */ +/* .temp-conn { + display: inline-block; + padding: 1rem 2rem; + background: var(--line-color); + color: var(--cornering); + font-family: var(--font-secondary); + font-style: italic; + font-weight: bold; + font-size: 1rem; + text-align: center; + text-transform: capitalize; + transition: all 0.3s ease; + box-shadow: var(--header-shadow); + border-radius: 30px; + cursor: pointer; + position: relative; + text-decoration: none; + outline: none; +} + +.temp-conn:hover { + box-shadow: var(--header-shadow); + background-color: var(--cornering); + color: var(--font-color); +} */ + .btn { display: inline-block; padding: 1rem 2rem; - background: var(--btn-bg-color); - color: var(--accent-color); + background: var(--line-color); + color: var(--cornering); font-family: var(--font-secondary); font-style: italic; font-weight: bold; @@ -118,16 +260,19 @@ header .container { outline: none; } .btn:hover { - box-shadow: none; + box-shadow: var(--header-shadow); + background-color: var(--cornering); + color: var(--font-color); } .btn:disabled { cursor: default; } .wallet-btn { - border-radius: 5rem; + border-radius: 3rem; margin-left: 2rem; border-color: transparent; + /* display: none; */ } .hero-btn { @@ -140,12 +285,14 @@ header .container { .card { position: relative; - background-color: var(--bg-color); - border-radius: 5px; + background-color: var(--accent-color); + border-radius: 30px; border: 3px solid var(--accent-color); box-shadow: var(--card-shadow); - padding: 5rem; + padding: 1rem; + margin-top: 120px; margin-bottom: 2rem; + padding-top: 20px; opacity: 0; transform: translateX(100vw); transition: all 0.5s ease-in-out; @@ -156,6 +303,12 @@ header .container { transform: translateX(0); } +/* welcome */ + +.not-connected h2 { + color: var(--bg-color); + font-size: 30px; +} /* COUNTDOWN SECTION */ section { @@ -184,7 +337,7 @@ section { height: auto; } .countdown .clock-item .count-number { - background: var(--accent-color); + background: var(#54472c); color: var(--font-color); font-size: 2rem; font-weight: 700; @@ -197,7 +350,7 @@ section { border-radius: 4px 4px 0 0; } .countdown .clock-item .count-text { - background: var(--btn-bg-color); + background: var(#54472c); font-family: var(--font-secondary); font-size: 1.1rem; color: var(--bg-color); @@ -314,37 +467,21 @@ section { margin: 1rem 0; } -/* SLIDDER */ - -.splide { - position: absolute; - top: 90px; - left: 5rem; - z-index: -1; -} - -.splide__slide { - border: var(--accent-color) solid; - border-width: 5px 10px; -} - -.splide__slide img { - width: 100%; -} - -/* SPINNER */ -.dot-spin { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(3); -} - /* MEDIA QUERIES */ +@media screen and (max-width: 1200px) { + .wallet-btn { + padding: 0px; + font-size: 1rem; + width: 100px; + } +} @media screen and (max-width: 768px) { - .menu { - gap: 1rem; + .home { + background-position-x: center; + } + .container { + margin-top: -500px; } .wallet-btn { margin-left: 0; @@ -352,10 +489,9 @@ section { max-width: 8rem; } .not-connected { - background-color: var(--bg-color-transparent); border-radius: 5px; padding: 2rem; - margin: 0 auto; + margin-top: 20px; } .countdown ul { display: grid; @@ -387,6 +523,109 @@ section { padding: 1rem; font-size: 13px; } + + /* navbar */ + header { + background-position: center; + height: fit-content; + background-color: rgba(21, 18, 14, 0.9); + box-shadow: none; + } + + .navbar { + align-items: center; + gap: 10rem; + width: 100%; + } + + .menu ul li { + display: block; + } + .menu { + position: absolute; + background: rgb(105, 105, 105); + height: 100vh; + width: 200px; + top: 0; + right: -200px; + text-align: left; + gap: 1rem; + z-index: 2; + transition: 0.2s; + } + .navbar .fa { + display: block; + color: #fff; + margin: 10px; + font-size: 22px; + cursor: pointer; + } + + .navbar .fa { + font-size: 20px; + color: #fff; + /* margin: 20px; */ + } + .menu ul { + padding-left: 5px; + float: left; + } + .logo img { + width: 40px; + } + .not-connected h1 { + font-size: 40px; + } + .not-connected h2 { + font-size: 20px; + /* margin-top: -30px; */ + } + .not-connected p { + font-size: 18px; + line-height: 30px; + text-align: center; + } + .not-connected .pdf { + text-align: center; + transform: translateX(30%); + } + .not-connected .pdf p { + margin-top: 20px; + font-size: 10px; + font-family: var(--font-secondary); + font-style: italic; + margin-left: -50%; + } + + .whitepaper { + display: inline-block; + padding: 0.5rem 2rem; + background: var(--bg-color); + color: #000; + font-family: var(--font-secondary); + font-style: italic; + font-weight: bold; + font-size: 0.5rem; + text-align: center; + text-transform: capitalize; + transition: all 0.5s ease; + box-shadow: var(--header-shadow); + cursor: pointer; + border-radius: 30px; + position: relative; + text-decoration: none; + outline: none; + } + + .whitepaper:hover { + box-shadow: var(--header-shadow); + background-color: var(--cornering); + color: #fff; + } + .particles-js { + height: 100%; + position: absolute; + } } /* UTILITIES */ @@ -394,3 +633,1170 @@ section { .hidden { display: none; } + +/* nft section */ + +.nft { + text-align: center; + margin-top: 25%; +} + +.nft h1 { + font-size: 50px; + font-weight: 400px; + color: var(--font-color); + padding-bottom: 30px; +} + +.nft p { + width: 60%; + font-size: 25px; + font-weight: 300; + line-height: 1.8; + color: #fff; + text-align: center; + display: inline-block; + padding-bottom: 50px; +} + +.rotating-img { + height: 60vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.slider { + position: relative; + width: 200px; + height: 200px; + transform-style: preserve-3d; + animation: rotate 30s linear infinite; +} + +@keyframes rotate { + 0% { + transform: perspective(1000px) rotateY(0deg); + } + 100% { + transform: perspective(1000px) rotateY(360deg); + } +} + +.slider span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-origin: center; + transform-style: preserve-3d; + transform: rotateY(calc(var(--i) * 45deg)) translateZ(350px); +} + +.slider span img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; + object-fit: cover; + transition: 2s; +} + +.slider span:hover img { + transform: translateZ(-50px) scale(1.5); +} +.nft .container { + margin: auto; + text-align: center; + height: 100%; +} + +.nft .container p { + width: 80%; + font-size: 20px; + font-weight: 300; + line-height: 1.8; + padding: 10px; + padding-bottom: 100px; + text-align: justify; +} +.nft .row { + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: space-around; + color: #fff; +} + +.nft .col-2 { + flex-basis: 50%; + min-width: 400px; +} +.nft .container .col-2 img { + align-items: center; + /* margin-top: -100px; */ +} + +.nft .container .col-2 .percent { + margin-left: 20%; + justify-content: center; + display: flex; + flex-direction: column; + gap: 40px; +} + +.nft .container .percent .bead1 { + height: 1rem; + width: 1rem; + background-color: rgb(48, 111, 150); +} +.nft .container .percent .bead2 { + height: 1rem; + width: 1rem; + background-color: rgb(163, 81, 51); +} +.nft .container .percent .bead3 { + height: 1rem; + width: 1rem; + background-color: rgb(68, 121, 54); +} +.nft .container .percent .bead4 { + height: 1rem; + width: 1rem; + background-color: rgb(145, 53, 203); +} +.nft .container .col-2 .percent p { + text-align: justify; + width: 500px; + margin-left: 10px; +} + +/* media quiry */ + +@media screen and (max-width: 768px) { + .nft .container .col-2 .percent { + margin-bottom: 10px; + } + .nft p { + width: 90%; + } + .rotating-img { + height: 50vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .slider { + position: relative; + width: 130px; + height: 130px; + transform-style: preserve-3d; + animation: rotate 30s linear infinite; + } + @keyframes rotate { + 0% { + transform: perspective(1000px) rotateY(0deg); + } + 100% { + transform: perspective(1000px) rotateY(360deg); + } + } + .slider span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-origin: center; + transform-style: preserve-3d; + transform: rotateY(calc(var(--i) * 45deg)) translateZ(200px); + } + .nft .col-2 img { + width: 300px; + } +} + +/* capital section */ + +.capital { + margin-top: 200px; + text-align: center; +} + +.capital h1 { + font-size: 50px; + font-weight: 400px; + color: var(--font-color); + padding-bottom: 30px; +} + +.capital p { + width: 60%; + font-size: 25px; + font-weight: 300; + line-height: 1.5; + color: #fff; + text-align: center; + display: inline-block; + padding-bottom: 50px; +} + +.capital .container { + /* width: 80%; */ + margin: auto; + text-align: center; + /* height: 600px; */ +} + +.capital .container .col-2 p { + width: 80%; + font-size: 20px; + font-weight: 300; + line-height: 1.5; + padding: 10px; + padding-bottom: 100px; + text-align: justify; +} +.capital .row { + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: space-around; + color: #fff; +} + +.capital .col-2 { + flex-basis: 50%; + min-width: 400px; +} + +.capital .container .col-2 .percent { + margin-left: 20%; + justify-content: center; + display: flex; + flex-direction: column; + gap: 40px; +} + +.capital .container .percent .bead1 { + height: 1rem; + width: 1rem; + background-color: rgb(48, 111, 150); +} +.capital .container .percent .bead2 { + height: 1rem; + width: 1rem; + background-color: rgb(163, 81, 51); +} +.capital .container .percent .bead3 { + height: 1rem; + width: 1rem; + background-color: rgb(68, 121, 54); +} +.capital .container .percent .bead4 { + height: 1rem; + width: 1rem; + background-color: rgb(70, 45, 105); +} + +.capital .container .col-2 .percent p { + text-align: justify; + width: 500px; + margin-left: 10px; +} + +.more { + font-style: italic; + font-weight: lighter; + font-size: 15px; +} + +/* Media Quiry */ +@media screen and (max-width: 768px) { + .capital p { + font-size: 18px; + width: 90%; + } + .capital .col-2 img { + width: 300px; + } + .capital .container p { + font-size: 18px; + width: 90%; + } + .capital .col-2 .percent { + transform: translateX(-18%); + margin-bottom: 10px; + } +} + +/* Roadmap */ + +.roadmap { + margin: 0; + margin-bottom: -300px; + padding-bottom: 0; + line-height: 1.5; + font-weight: 400; + color: white; + overflow-x: hidden; +} + +.roadmap .container { + padding: 2rem; + padding-bottom: 400px; + margin: 0 auto; + max-width: 800px; +} + +.roadmap .top-section { + text-align: center; + padding: 4rem 0; + max-width: 600px; + margin: 0 auto; +} + +.roadmap .timeline { + position: relative; + min-height: 150px; +} +.line { + position: absolute; + z-index: 1; + left: calc(50% - 1px); + width: 6px; + top: -50px; + bottom: -50px; + background-color: var(--line-color); + display: none; +} + +.line:before, +.line:after { + position: absolute; + display: block; + content: ""; + height: 1rem; + width: 1rem; + border-radius: 50%; + background-color: var(--line-color); + left: 50%; + transform: translateX(-50%); +} + +.line:after { + bottom: 0; +} + +.roadmap .section { + display: flex; + opacity: 0; + transform: translateX(-100%); + transition: 600ms ease; + position: relative; + z-index: 1; + margin: 50px 0; + padding: 1rem; + border-radius: 1rem; + align-items: center; + min-height: 300px; +} + +.roadmap .section:nth-child(odd) { + flex-direction: row-reverse; + transform: translateX(100%); +} + +.bead { + position: absolute; + display: block; + height: 3rem; + width: 3rem; + border-radius: 50%; + background-color: var(--line-color); + left: 50%; + top: 20%; + transform: translateX(-50%); +} +.bead i { + color: var(--btn-bg-color); + /* font-family: sans-serif; */ + font-size: 30px; + display: flex; + justify-content: center; + align-items: center; +} + +.roadmap .content { + width: calc(50% - 2rem); +} + +.roadmap .show-me:nth-child(n) { + transform: none; + opacity: 1; +} + +.roadmap h1 { + font-size: 50px; + padding: 35px; +} + +.roadmap img { + width: 40px; + align-items: center; +} + +.roadmap p { + font-size: 25px; + line-height: 1.8; +} +.roadmap b { + font-size: 30px; + color: var(--button-hov); +} +.roadmap .bottom-section { + text-align: center; + padding: 4rem 0; + max-width: 600px; + margin: 0 auto; +} + +/* media query */ + +@media screen and (max-width: 768px) { + .roadmap p { + font-size: 18px; + } + + .roadmap .timeline p { + font-size: 15px; + line-height: 20px; + } +} + +/* ----TEAM section---- */ + +.team { + text-align: center; + margin: 100px auto 50px; + padding-top: -20px; +} + +.team h1 { + font-family: "Techno Hideo", sans-serif; + font-size: 50px; + font-weight: 600; + padding-top: 20px; + padding-bottom: 30px; + color: var(--font-color); +} + +.team .int { + width: 60%; + font-size: 25px; + font-weight: 300; + line-height: 1.8; + color: #fff; + text-align: center; + display: inline-block; + padding-bottom: 20px; +} +.profile-box { + width: 270px; + height: 370px; + background: var(--accent-color); + border-radius: 8px; + margin-bottom: 30px; + box-shadow: 3px 5px 5px 5px rgba(5, 137, 149, 0.4); + margin-top: 60px; + padding-left: 3px; + padding-right: 3px; + position: relative; +} + +.profile-box img { + position: absolute; + top: -70px; + left: 50%; + transform: translateX(-50%); + width: 130px; + height: 130px; + border-radius: 50%; + background-color: var(--line-color); + transition: 0.5s; +} +.profile-box img:hover { + transform: translateX(-60px) scale(1.5); +} +.profile-box h4 { + margin-top: 50px; + margin-bottom: 5px; + color: #fff; + text-align: center; + font-size: 23px; + padding-top: 10px; +} + +.profile-box h5 { + font-size: 18px; + padding-bottom: 10px; + color: #616464; +} +.profile-box p { + text-align: center; + line-height: 24px; + color: #fff; +} + +.team-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 85%; + margin: auto; + padding-top: 80px; +} + +/* Media Quiry */ +@media screen and (max-width: 768px) { + .team { + width: 100%; + } + .team h1 { + font-size: 50px; + font-weight: 600; + padding-top: 20px; + padding-bottom: 30px; + color: var(--font-color); + } + .team .int { + width: 90%; + font-size: 18px; + font-weight: 300; + line-height: 22px; + color: #fff; + text-align: justify; + display: inline-block; + padding-bottom: 20px; + } + + .team .team-row { + width: 90%; + /* justify-content: space-between; */ + + gap: 0.5rem; + } + .profile-box { + width: 150px; + height: 290px; + background: var(--accent-color); + border-radius: 8px; + margin-bottom: 30px; + box-shadow: 2px 4px 2px 5px rgba(10, 122, 147, 0.4); + margin-top: 60px; + padding-left: 3px; + padding-right: 3px; + position: relative; + gap: 5rem; + } + + .profile-box img { + position: absolute; + top: -50px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 80px; + border-radius: 50%; + background-color: var(--line-color); + transition: 0.5s; + } + .profile-box img:hover { + transform: translateX(-35px) scale(1.5); + } + .profile-box h4 { + margin-top: 16px; + margin-bottom: 2px; + color: #fff; + text-align: center; + font-size: 18px; + padding-top: 10px; + } + + .profile-box h5 { + font-size: 13px; + padding-bottom: 3px; + color: #616464; + } + .profile-box p { + font-size: 10px; + text-align: center; + line-height: 20px; + color: #fff; + } + + .team-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 80%; + margin: auto; + padding-top: 80px; + } +} +/* partners */ + +.partners { + text-align: center; + margin-top: 100px; + height: 600px; + border: 2px solid #098fb1; + border-radius: 10px; +} + +.partners h1 { + font-size: 50px; + font-weight: 400px; + color: var(--font-color); + padding-bottom: 10px; +} + +.partners p { + width: 60%; + font-size: 20px; + font-weight: 300; + line-height: 1.8; + color: #fff; + text-align: center; + display: inline-block; + padding-bottom: 30px; +} + +.partners { + align-items: center; + justify-content: center; +} +.partners .wrapper { + width: 100vw; + /* height: 100vh; */ + display: flex; + align-items: center; + justify-content: center; +} + +.partners .logo-slider { + width: 100%; + height: 200px; + position: relative; + display: flex; + overflow: hidden; +} +.partners .logo-slider .slide { + animation: slideshow 15s linear infinite; + display: flex; + align-items: center; + height: 200px; +} +.partners .logo-slider .slide img { + height: 150px; + width: 300px; + padding: 0 30px 0 30px; +} +@keyframes slideshow { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-100%); + } +} + +.partners .logo-slider::before, +.logo-slider::after { + height: 200px; + width: 200px; + position: absolute; + content: ""; + background: linear-gradient(to right, black 0%, rgb(255, 255, 255, 0) 100%); + z-index: 2; +} +.partners .logo-slider::before { + left: 0; + top: 0; +} +.partners .logo-slider::after { + right: 0; + top: 0; + transform: rotateZ(180deg); +} +.partners .logo-slider img { + margin: 50px; + transition: 0.3s; +} +.partners .logo-slider img:hover { + transform: translateZ(-60px) scale(1.3); +} + +.partners .apply { + margin-top: 100px; + float: left; + margin-left: 20px; +} + +h3 { + font-size: 25px; +} +.partners .apply a { + display: inline-block; + padding: 0.5rem 2rem; + background: var(--bg-color); + color: #000; + font-family: var(--font-secondary); + font-style: italicno; + font-weight: bold; + font-size: 1rem; + text-align: center; + text-transform: capitalize; + transition: all 0.5s ease; + box-shadow: var(--header-shadow); + cursor: pointer; + border-radius: 10px; + position: relative; + text-decoration: none; + outline: none; + margin: 10px 0; +} + +.partners .apply a:hover { + box-shadow: var(--header-shadow); + background-color: var(--cornering); + color: #fff; +} + +@media screen and (max-width: 768px) { + .partners { + height: 500px; + text-align: center; + margin-top: 100px; + } + .partners .wrapper { + width: 100vw; + /* height: 100vh; */ + display: flex; + align-items: center; + justify-content: center; + } + + .partners .logo-slider { + width: 100%; + height: 100px; + position: relative; + display: flex; + overflow: hidden; + } + .partners .logo-slider .slide { + animation: slideshow 15s linear infinite; + display: flex; + align-items: center; + height: 100px; + } + .partners .logo-slider .slide img { + height: 60px; + width: 120px; + padding: 0 1px 0 1px; + margin-right: 1px; + } + @keyframes slideshow { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-100%); + } + } + + .partners .logo-slider::before, + .logo-slider::after { + height: 100px; + width: 50px; + position: absolute; + content: ""; + background: linear-gradient(to right, black 0%, rgb(255, 255, 255, 0) 100%); + z-index: 2; + } + .partners .logo-slider::before { + left: 0; + top: 0; + } + .partners .logo-slider::after { + right: 0; + top: 0; + transform: rotateZ(180deg); + } + + .partners p { + font-size: 15px; + margin-bottom: 30px; + } + .partners .apply { + margin-top: 100px; + float: none; + } + h3 { + font-size: 18px; + } + .partners .apply a { + padding: 0.5rem 2rem; + background: var(--bg-color); + color: #000; + font-family: var(--font-secondary); + font-weight: bold; + font-size: 0.8rem; + text-align: center; + text-transform: capitalize; + transition: all 0.5s ease; + box-shadow: var(--header-shadow); + cursor: pointer; + border-radius: 10px; + position: relative; + text-decoration: none; + outline: none; + margin: 10px 0; + } + + .partners .apply a:hover { + box-shadow: var(--header-shadow); + background-color: var(--cornering); + color: #fff; + } +} + +/* ----faq section---- */ + +@import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); + +.faqm h2 { + /* font-family: "Techno Hideo", sans-serif; */ + font-size: 50px; + font-weight: 600; + padding-top: 20px; + padding-bottom: 30px; + color: var(--font-color); + text-align: center; +} + +.faqm p { + color: #000000; +} + +.faq-container { + max-width: 600px; + margin: 0 auto; +} + +.faq { + background-color: var(--accent-color); + border: 1px solid #9fa4a8; + border-radius: 10px; + margin: 20px 0; + padding: 30px; + position: relative; + overflow: hidden; + transition: 0.3s ease; +} + +.faq.active { + background-color: var(--cornering); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.faq.active::before, +.faq.active::after { + content: "\f075"; + font-family: "Font Awesome 5 Free"; + color: var(--btn-bg-color); + font-size: 7rem; + position: absolute; + opacity: 0.2; + top: 20px; + left: 20px; + z-index: 0; +} + +.faq.active::before { + color: var(--font-color); + top: -10px; + left: -30px; + transform: rotateY(180deg); +} + +.faq-title { + margin: 0 35px 0 0; + color: #fff; +} + +.faq.active .faq-title { + color: var(--bg-color); +} + +.faq-text { + display: none; + margin: 30px 0 0; +} + +.faq.active .faq-text { + display: block; +} + +.faq-toggle { + background-color: var(--bg-color); + border: 0; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + padding: 0; + position: absolute; + top: 30px; + right: 30px; + height: 30px; + width: 30px; +} + +.faq-toggle:focus { + outline: 0; +} + +.faq-toggle .fa-times { + display: none; +} + +.faq.active .faq-toggle .fa-times { + color: #fff; + display: block; +} + +.faq.active .faq-toggle .fa-chevron-down { + display: none; +} + +.faq.active .faq-toggle { + background-color: var(--button-hov); +} + +.faq-toggle i { + color: var(--header-shadow); +} + +/* feature */ + +.featured { + height: 700px; + width: 90%; + text-align: center; + align-items: center; + margin-top: 100px; +} + +.featured h1 { + text-align: center; + font-size: 50px; + font-weight: 400px; + color: var(--font-color); + padding-bottom: 20px; +} + +.featured p { + width: 60%; + font-size: 20px; + font-weight: 300; + line-height: 1.8; + color: #fff; + text-align: center; + display: inline-block; +} +.featured .feature { + display: inline-block; +} + +.featured .feature img { + margin: 50px; + transition: 0.3s; +} +.featured .feature img:hover { + transform: translateZ(-60px) scale(1.3); +} +@media screen and (max-width: 1200px) { + .featured .feature img { + margin: 20px; + } +} +@media screen and (max-width: 768px) { + .featured { + height: 700px; + text-align: center; + margin-top: 100px; + } + .featured .feature img { + width: 120px; + height: 60px; + margin: 10px; + } + .featured p { + font-size: 15px; + margin-bottom: 30px; + } +} + +/* footer */ + +.footer { + padding: 40px 0; + width: 100%; + height: auto; + padding: 50px 100px; + background-color: rgb(42, 42, 43); + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +footer h1 { + position: relative; + color: #fff; + font-weight: 500; + margin-bottom: 15px; +} + +.footer h1:before { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + width: 50px; + height: 2px; + background-color: var(--line-color); +} + +footer .info { + position: relative; + text-decoration: none; + margin-bottom: 5px; + display: inline-block; + line-height: 2rem; +} +footer .info a { + display: inline-block; + padding: 0.5rem 2rem; + background: #999; + color: #fff; + font-family: var(--font-secondary); + font-style: italicno; + font-weight: bold; + font-size: 1rem; + text-align: center; + text-transform: capitalize; + transition: all 0.5s ease; + box-shadow: var(--header-shadow); + cursor: pointer; + border-radius: 10px; + position: relative; + text-decoration: none; + outline: none; + margin: 10px 0; +} + +footer .info a:hover { + box-shadow: var(--header-shadow); + background-color: var(--bg-color); + color: #000; +} + +footer .quicklinks { + position: relative; +} + +footer .quicklinks ul li { + list-style: none; +} +footer .quicklinks ul li a { + text-decoration: none; + margin-bottom: 5px; + display: inline-block; + opacity: 0.8; + color: var(--font-color); + transition: all 0.1s; +} +footer .quicklinks ul li a:hover { + opacity: 1; + color: var(--bg-color); + text-shadow: 0 0 10px #fff, 0 0 20px rgb(23, 94, 226), 0 0 30px #0ff, + 0 0 40px rgb(229, 49, 52), 0 0 50px #0ff, 0 0 60px #fff, + 0 0 70px rgb(233, 57, 57) 0 0 90px rgb(170, 232, 232); +} +footer .social { + position: relative; +} +footer .social h1 { + text-align: center; +} +.footer .social h1:before { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + width: 50px; + height: 2px; + margin-left: 60px; + background-color: var(--line-color); +} + +footer .social img { + vertical-align: middle; +} + +footer .social a { + font-size: 25px; + border: 1px solid #fff; + width: 40px; + height: 40px; + line-height: 38px; + display: inline-block; + text-align: center; + border-radius: 50%; + margin: 0 8px; + opacity: 0.75; + color: rgb(16, 89, 192); +} + +footer .social a:hover { + opacity: 1; + box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, + inset -20px 0 80px #0ff, inset 20px 0 300px rgb(230, 151, 230), + inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px rgb(237, 160, 237), + 10px 0 80px #0ff; +} + +footer .copyright { + width: 100%; + padding: 8px 100px; + text-align: center; + color: #999; + background-color: rgb(42, 42, 43); +} + +/* media quiry */ + +@media screen and (max-width: 768px) { + footer .social { + text-align: center; + } +} diff --git a/frontend/functions/merkleProof.js b/frontend/functions/merkleProof.js index fafe3da35b..6b27165997 100644 --- a/frontend/functions/merkleProof.js +++ b/frontend/functions/merkleProof.js @@ -1,38 +1,45 @@ -const fetch = require('node-fetch') +const fetch = (...args) => + import("node-fetch").then(({ default: fetch }) => fetch(...args)); const AUTH = process.env.NFTPORT_API_KEY; const include = "merkle_proofs"; exports.handler = async (event, context) => { - const wallet = event.queryStringParameters && event.queryStringParameters.wallet - const chain = event.queryStringParameters && event.queryStringParameters.chain - const contract_address = event.queryStringParameters && event.queryStringParameters.contract - const url = 'https://api.nftport.xyz/v0/me/contracts/collections?'; + const wallet = + event.queryStringParameters && event.queryStringParameters.wallet; + const chain = + event.queryStringParameters && event.queryStringParameters.chain; + const contract_address = + event.queryStringParameters && event.queryStringParameters.contract; + const url = "https://api.nftport.xyz/v0/me/contracts/collections?"; const options = { - method: 'GET', + method: "GET", headers: { - 'Content-Type': 'application/json', - Authorization: AUTH - } + "Content-Type": "application/json", + Authorization: AUTH, + }, }; const query = new URLSearchParams({ chain: chain, - include + include, }); - const data = await fetch(url + query, options) + const data = await fetch(url + query, options); const json = await data.json(); - const contractInfo = json.contracts.filter(contract => contract.address.toLowerCase() === contract_address.toLowerCase()); + const contractInfo = json.contracts.filter( + (contract) => + contract.address.toLowerCase() === contract_address.toLowerCase() + ); const merkleProofs = contractInfo[0].merkle_proofs || {}; const merkleProof = merkleProofs[wallet.toLowerCase()] || []; return { - 'statusCode': 200, - 'headers': { - 'Cache-Control': 'no-cache', - 'Content-Type': 'application/json', + statusCode: 200, + headers: { + "Cache-Control": "no-cache", + "Content-Type": "application/json", }, - 'body': JSON.stringify(merkleProof) - } -} + body: JSON.stringify(merkleProof), + }; +}; diff --git a/frontend/images/bg.jpg b/frontend/images/bg.jpg new file mode 100644 index 0000000000..23d92f4970 Binary files /dev/null and b/frontend/images/bg.jpg differ diff --git a/frontend/images/capital/A.png b/frontend/images/capital/A.png new file mode 100644 index 0000000000..41ec989719 Binary files /dev/null and b/frontend/images/capital/A.png differ diff --git a/frontend/images/capital/a1.png b/frontend/images/capital/a1.png new file mode 100644 index 0000000000..6cb9b236fa Binary files /dev/null and b/frontend/images/capital/a1.png differ diff --git a/frontend/images/centmoon.jpg b/frontend/images/centmoon.jpg new file mode 100644 index 0000000000..a13ce91073 Binary files /dev/null and b/frontend/images/centmoon.jpg differ diff --git a/frontend/images/header/2c4rg0b.jpg b/frontend/images/header/2c4rg0b.jpg new file mode 100644 index 0000000000..5b20b4c3e3 Binary files /dev/null and b/frontend/images/header/2c4rg0b.jpg differ diff --git a/frontend/images/header/N.png b/frontend/images/header/N.png new file mode 100644 index 0000000000..8c7d2b54ab Binary files /dev/null and b/frontend/images/header/N.png differ diff --git a/frontend/images/header/bg2.png b/frontend/images/header/bg2.png new file mode 100644 index 0000000000..7a3077a5a2 Binary files /dev/null and b/frontend/images/header/bg2.png differ diff --git a/frontend/images/header/icon.png b/frontend/images/header/icon.png new file mode 100644 index 0000000000..05f4f3b42e Binary files /dev/null and b/frontend/images/header/icon.png differ diff --git a/frontend/images/header/tg.png b/frontend/images/header/tg.png new file mode 100644 index 0000000000..5fbf7254d5 Binary files /dev/null and b/frontend/images/header/tg.png differ diff --git a/frontend/images/nft/1.png b/frontend/images/nft/1.png new file mode 100644 index 0000000000..98c60ab2c3 Binary files /dev/null and b/frontend/images/nft/1.png differ diff --git a/frontend/images/nft/2.png b/frontend/images/nft/2.png new file mode 100644 index 0000000000..026fe15264 Binary files /dev/null and b/frontend/images/nft/2.png differ diff --git a/frontend/images/nft/3.png b/frontend/images/nft/3.png new file mode 100644 index 0000000000..a0745ca7d3 Binary files /dev/null and b/frontend/images/nft/3.png differ diff --git a/frontend/images/nft/4.png b/frontend/images/nft/4.png new file mode 100644 index 0000000000..4f4350b10d Binary files /dev/null and b/frontend/images/nft/4.png differ diff --git a/frontend/images/nft/5.png b/frontend/images/nft/5.png new file mode 100644 index 0000000000..1bc04a2627 Binary files /dev/null and b/frontend/images/nft/5.png differ diff --git a/frontend/images/nft/6.png b/frontend/images/nft/6.png new file mode 100644 index 0000000000..0247c64fed Binary files /dev/null and b/frontend/images/nft/6.png differ diff --git a/frontend/images/nft/7.png b/frontend/images/nft/7.png new file mode 100644 index 0000000000..ea69520fc3 Binary files /dev/null and b/frontend/images/nft/7.png differ diff --git a/frontend/images/nft/8.jpg b/frontend/images/nft/8.jpg new file mode 100644 index 0000000000..3e9796542e Binary files /dev/null and b/frontend/images/nft/8.jpg differ diff --git a/frontend/images/partners/LOGO WITH TRANS.png b/frontend/images/partners/LOGO WITH TRANS.png new file mode 100644 index 0000000000..00678025ce Binary files /dev/null and b/frontend/images/partners/LOGO WITH TRANS.png differ diff --git a/frontend/images/partners/LOGO WITH WHITE.jpg b/frontend/images/partners/LOGO WITH WHITE.jpg new file mode 100644 index 0000000000..e73230e2d2 Binary files /dev/null and b/frontend/images/partners/LOGO WITH WHITE.jpg differ diff --git a/frontend/images/partners/WHITE FONT TRANS.png b/frontend/images/partners/WHITE FONT TRANS.png new file mode 100644 index 0000000000..2949023ad9 Binary files /dev/null and b/frontend/images/partners/WHITE FONT TRANS.png differ diff --git a/frontend/images/partners/comicmeta.png b/frontend/images/partners/comicmeta.png new file mode 100644 index 0000000000..93446fa48a Binary files /dev/null and b/frontend/images/partners/comicmeta.png differ diff --git a/frontend/images/partners/fiverr.png b/frontend/images/partners/fiverr.png new file mode 100644 index 0000000000..6eb9378e14 Binary files /dev/null and b/frontend/images/partners/fiverr.png differ diff --git a/frontend/images/partners/issuewire.png b/frontend/images/partners/issuewire.png new file mode 100644 index 0000000000..d09cef5422 Binary files /dev/null and b/frontend/images/partners/issuewire.png differ diff --git a/frontend/images/partners/losthopesociety.jpg b/frontend/images/partners/losthopesociety.jpg new file mode 100644 index 0000000000..05dba3b270 Binary files /dev/null and b/frontend/images/partners/losthopesociety.jpg differ diff --git a/frontend/images/partners/moongate.svg b/frontend/images/partners/moongate.svg new file mode 100644 index 0000000000..1df5f17920 --- /dev/null +++ b/frontend/images/partners/moongate.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/images/partners/nft-evening.png b/frontend/images/partners/nft-evening.png new file mode 100644 index 0000000000..0e3a375495 Binary files /dev/null and b/frontend/images/partners/nft-evening.png differ diff --git a/frontend/images/partners/nftcalendar (2).png b/frontend/images/partners/nftcalendar (2).png new file mode 100644 index 0000000000..9dd3ca6c0c Binary files /dev/null and b/frontend/images/partners/nftcalendar (2).png differ diff --git a/frontend/images/partners/nftcalendar.png b/frontend/images/partners/nftcalendar.png new file mode 100644 index 0000000000..46a51859a2 Binary files /dev/null and b/frontend/images/partners/nftcalendar.png differ diff --git a/frontend/images/partners/nfteller.png b/frontend/images/partners/nfteller.png new file mode 100644 index 0000000000..7de2f37b68 Binary files /dev/null and b/frontend/images/partners/nfteller.png differ diff --git a/frontend/images/partners/nftprojectdrop.png b/frontend/images/partners/nftprojectdrop.png new file mode 100644 index 0000000000..ea04ba7cde Binary files /dev/null and b/frontend/images/partners/nftprojectdrop.png differ diff --git a/frontend/images/partners/nnd.png b/frontend/images/partners/nnd.png new file mode 100644 index 0000000000..7e02dcfb4e Binary files /dev/null and b/frontend/images/partners/nnd.png differ diff --git a/frontend/images/partners/upcomingnft-maillogo-b.png b/frontend/images/partners/upcomingnft-maillogo-b.png new file mode 100644 index 0000000000..12e7dc2383 Binary files /dev/null and b/frontend/images/partners/upcomingnft-maillogo-b.png differ diff --git a/frontend/images/partners/upcomingnft-maillogo.png b/frontend/images/partners/upcomingnft-maillogo.png new file mode 100644 index 0000000000..675eafe216 Binary files /dev/null and b/frontend/images/partners/upcomingnft-maillogo.png differ diff --git a/frontend/images/partners/upcomingnft_maillogo.png b/frontend/images/partners/upcomingnft_maillogo.png new file mode 100644 index 0000000000..965a72133b Binary files /dev/null and b/frontend/images/partners/upcomingnft_maillogo.png differ diff --git a/frontend/images/partners/upcomingnft_maillogo_w.png b/frontend/images/partners/upcomingnft_maillogo_w.png new file mode 100644 index 0000000000..2d609e1c81 Binary files /dev/null and b/frontend/images/partners/upcomingnft_maillogo_w.png differ diff --git a/frontend/images/partners/verification free limited.jpg b/frontend/images/partners/verification free limited.jpg new file mode 100644 index 0000000000..5612392aed Binary files /dev/null and b/frontend/images/partners/verification free limited.jpg differ diff --git a/frontend/images/slider/0.png b/frontend/images/slider/0.png deleted file mode 100644 index 164672081c..0000000000 Binary files a/frontend/images/slider/0.png and /dev/null differ diff --git a/frontend/images/slider/1.png b/frontend/images/slider/1.png deleted file mode 100644 index 76a7303b68..0000000000 Binary files a/frontend/images/slider/1.png and /dev/null differ diff --git a/frontend/images/slider/2.png b/frontend/images/slider/2.png deleted file mode 100644 index a79fa08a27..0000000000 Binary files a/frontend/images/slider/2.png and /dev/null differ diff --git a/frontend/images/slider/3.png b/frontend/images/slider/3.png deleted file mode 100644 index f0aab31dbf..0000000000 Binary files a/frontend/images/slider/3.png and /dev/null differ diff --git a/frontend/images/slider/4.png b/frontend/images/slider/4.png deleted file mode 100644 index 01870bbdd7..0000000000 Binary files a/frontend/images/slider/4.png and /dev/null differ diff --git a/frontend/images/slider/5.png b/frontend/images/slider/5.png deleted file mode 100644 index 70e58e2e4f..0000000000 Binary files a/frontend/images/slider/5.png and /dev/null differ diff --git a/frontend/images/slider/6.png b/frontend/images/slider/6.png deleted file mode 100644 index 26b099d40b..0000000000 Binary files a/frontend/images/slider/6.png and /dev/null differ diff --git a/frontend/images/slider/7.png b/frontend/images/slider/7.png deleted file mode 100644 index 2ef1fb8f54..0000000000 Binary files a/frontend/images/slider/7.png and /dev/null differ diff --git a/frontend/images/slider/8.png b/frontend/images/slider/8.png deleted file mode 100644 index a1c6faa06d..0000000000 Binary files a/frontend/images/slider/8.png and /dev/null differ diff --git a/frontend/images/slider/9.png b/frontend/images/slider/9.png deleted file mode 100644 index b32bc85f61..0000000000 Binary files a/frontend/images/slider/9.png and /dev/null differ diff --git a/frontend/images/team/1.jpg b/frontend/images/team/1.jpg new file mode 100644 index 0000000000..934a9c92de Binary files /dev/null and b/frontend/images/team/1.jpg differ diff --git a/frontend/images/team/2.jpg b/frontend/images/team/2.jpg new file mode 100644 index 0000000000..0fe1e96498 Binary files /dev/null and b/frontend/images/team/2.jpg differ diff --git a/frontend/images/team/3.jpg b/frontend/images/team/3.jpg new file mode 100644 index 0000000000..fb30ccccb8 Binary files /dev/null and b/frontend/images/team/3.jpg differ diff --git a/frontend/images/team/4.jpg b/frontend/images/team/4.jpg new file mode 100644 index 0000000000..dd415342bd Binary files /dev/null and b/frontend/images/team/4.jpg differ diff --git a/frontend/images/team/5.jpg b/frontend/images/team/5.jpg new file mode 100644 index 0000000000..de3fbfdcb8 Binary files /dev/null and b/frontend/images/team/5.jpg differ diff --git a/frontend/images/team/6.jpg b/frontend/images/team/6.jpg new file mode 100644 index 0000000000..f9b8e2c76c Binary files /dev/null and b/frontend/images/team/6.jpg differ diff --git a/frontend/images/team/7.jpg b/frontend/images/team/7.jpg new file mode 100644 index 0000000000..e8086d6911 Binary files /dev/null and b/frontend/images/team/7.jpg differ diff --git a/frontend/images/team/8.jpg b/frontend/images/team/8.jpg new file mode 100644 index 0000000000..3e9796542e Binary files /dev/null and b/frontend/images/team/8.jpg differ diff --git a/frontend/images/team/Mark.png b/frontend/images/team/Mark.png new file mode 100644 index 0000000000..9756c57c51 Binary files /dev/null and b/frontend/images/team/Mark.png differ diff --git a/frontend/images/team/ellinjane.png b/frontend/images/team/ellinjane.png new file mode 100644 index 0000000000..26e60e264a Binary files /dev/null and b/frontend/images/team/ellinjane.png differ diff --git a/frontend/images/team/erica.png b/frontend/images/team/erica.png new file mode 100644 index 0000000000..8c170daac0 Binary files /dev/null and b/frontend/images/team/erica.png differ diff --git a/frontend/images/team/janella.jpg b/frontend/images/team/janella.jpg new file mode 100644 index 0000000000..3559ff3d3a Binary files /dev/null and b/frontend/images/team/janella.jpg differ diff --git a/frontend/images/team/jasmin.jpg b/frontend/images/team/jasmin.jpg new file mode 100644 index 0000000000..44f21b1320 Binary files /dev/null and b/frontend/images/team/jasmin.jpg differ diff --git a/frontend/images/team/jinky.png b/frontend/images/team/jinky.png new file mode 100644 index 0000000000..9dac22b2e5 Binary files /dev/null and b/frontend/images/team/jinky.png differ diff --git a/frontend/images/team/joel.png b/frontend/images/team/joel.png new file mode 100644 index 0000000000..3cac4f1964 Binary files /dev/null and b/frontend/images/team/joel.png differ diff --git a/frontend/images/team/joey.png b/frontend/images/team/joey.png new file mode 100644 index 0000000000..3d54050b89 Binary files /dev/null and b/frontend/images/team/joey.png differ diff --git a/frontend/images/team/jonathan.jpg b/frontend/images/team/jonathan.jpg new file mode 100644 index 0000000000..e39f0ca72a Binary files /dev/null and b/frontend/images/team/jonathan.jpg differ diff --git a/frontend/images/team/nel.jpg b/frontend/images/team/nel.jpg new file mode 100644 index 0000000000..6780dd748e Binary files /dev/null and b/frontend/images/team/nel.jpg differ diff --git a/frontend/images/team/reanni.png b/frontend/images/team/reanni.png new file mode 100644 index 0000000000..cf20d8d86e Binary files /dev/null and b/frontend/images/team/reanni.png differ diff --git a/frontend/images/team/ritchard.png b/frontend/images/team/ritchard.png new file mode 100644 index 0000000000..652c8c1f69 Binary files /dev/null and b/frontend/images/team/ritchard.png differ diff --git a/frontend/images/team/sahra.png b/frontend/images/team/sahra.png new file mode 100644 index 0000000000..6287808d34 Binary files /dev/null and b/frontend/images/team/sahra.png differ diff --git a/frontend/images/x-icon/android-chrome-192x192.png b/frontend/images/x-icon/android-chrome-192x192.png deleted file mode 100644 index 2127f8cd76..0000000000 Binary files a/frontend/images/x-icon/android-chrome-192x192.png and /dev/null differ diff --git a/frontend/images/x-icon/android-chrome-512x512.png b/frontend/images/x-icon/android-chrome-512x512.png deleted file mode 100644 index e31bdcf0ed..0000000000 Binary files a/frontend/images/x-icon/android-chrome-512x512.png and /dev/null differ diff --git a/frontend/images/x-icon/apple-touch-icon.png b/frontend/images/x-icon/apple-touch-icon.png deleted file mode 100644 index 6f95a8a8f6..0000000000 Binary files a/frontend/images/x-icon/apple-touch-icon.png and /dev/null differ diff --git a/frontend/images/x-icon/check.png b/frontend/images/x-icon/check.png new file mode 100644 index 0000000000..4c002b1124 Binary files /dev/null and b/frontend/images/x-icon/check.png differ diff --git a/frontend/images/x-icon/favicon-16x16.png b/frontend/images/x-icon/favicon-16x16.png deleted file mode 100644 index ebe504649d..0000000000 Binary files a/frontend/images/x-icon/favicon-16x16.png and /dev/null differ diff --git a/frontend/images/x-icon/favicon-32x32.png b/frontend/images/x-icon/favicon-32x32.png deleted file mode 100644 index fca5396bf6..0000000000 Binary files a/frontend/images/x-icon/favicon-32x32.png and /dev/null differ diff --git a/frontend/images/x-icon/favicon.ico b/frontend/images/x-icon/favicon.ico deleted file mode 100644 index 1469248762..0000000000 Binary files a/frontend/images/x-icon/favicon.ico and /dev/null differ diff --git a/frontend/images/x-icon/logo.jpg b/frontend/images/x-icon/logo.jpg new file mode 100644 index 0000000000..c17362e1be Binary files /dev/null and b/frontend/images/x-icon/logo.jpg differ diff --git a/frontend/images/x-icon/opensea.svg b/frontend/images/x-icon/opensea.svg new file mode 100644 index 0000000000..16237d0c29 --- /dev/null +++ b/frontend/images/x-icon/opensea.svg @@ -0,0 +1,3 @@ + + OpenSea \ No newline at end of file diff --git a/frontend/images/x-icon/opns.svg b/frontend/images/x-icon/opns.svg new file mode 100644 index 0000000000..495b367913 --- /dev/null +++ b/frontend/images/x-icon/opns.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/index.html b/frontend/index.html index c4934196dd..b8373a579f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,81 +1,101 @@ - CodeCats + Centurion + + + + + - - - - + + + +
-
+
-
- - Discord - - - Twitter - - - Opensea - - + +
+
-
-
-

Connect to MetaMask to Get Started

-

Welcome to the CodeCats NFT Project!

-

- The CodeCats NFT Project is a decentralized, open-source project that aims to demonstrate how to develope and launch your own NFT Collection. Follow step by step on the codeSTACKr YouTube channel. -

-
-
- +
+
+
+

Connect to MetaMask to Get Started

+

+

+ +

+
+
+

+ Download the Whitepaper here: + +

+
+ +
+
@@ -103,16 +123,14 @@

Welcome to the CodeCats NFT Project!

Pre-Sale Countdown

NFT Drop Coming Soon!!

-

- A new batch of cute cats will be available very soon! -

+

Join the Catmmunity + >Join the Centurion Community
+ + + +
+

Centurion Capital

+

+ The CENTURION CAPITAL serves as the Centurion’s + Venture Capital, this is the Centurion’s one-of-a-kind weapon + for growth and building a strong community. It serves as a conduit for + all NFT holders to receive Airdrops, through a comprehensive + assessment of high-potential start-up tokens in the global market. +

+
+
+
+

+ 50% of each Coin/Token acquired through Centurion Capital + investment will be Airdropped to all NFT holders.
+
40% of Coin/Token acquired will go back to Centurion Capital + Treasury And will be used to reinvest to another potential + project. +
+
5% will be split into Two, 1 part goes to the Centurion Team + and the other one goes to Centurion Capital research Team. +
+
5% will be used to fund the Real World Project that will + generate revenue to sustain the treasury of Centurion + Capital and the whole ecosystem.
+ see WhitePaper for more info. +

+
+
+ +
+

50% Airdrop to NFT Holders.

+
+

40% Treasury of Centurion Capital.

+
+

5% Team

+

5% Real World Project

+
+
+
+
+
+ + +
+
+
+

Roadmap

+

+ We are committed to establishing a long-term Roadmap for the + community's future. +

+
+
+
+
+
Q1
+
+

+

+ *Team Creation
+
+ * Planning +

+
+
+ +
+
Q2
+
+

+

+ *Launching of Twitter and Telegram account
+
+ *Building of website
+

+
+
+ +
+
Q3
+
+

+

+ * Launching of Website.
+
+ *Marketing.
+
+ *Partnership. +

+
+
+ +
+
Q4
+
+

+

+ *Launch of Minting.
+
+ * Start operation of Centurion Capital
+
+ * Onboarding of Team of Engineers For the Real world + Project. +

+
+
+
+
+

Roadmap V2 Comming

+
+
+
+ + + +
+

Team

+

+ Our team is made up of experts from a multitude of sectors, including + Engineering and Technology , Finance, and + Arts , and we are all passionate about cryptocurrencies. We are + really motivated and committed to contributing our expertise to the + project in order to produce something outstanding. +

+ +
+
+

Mark PeΓ±ero

+
CO-FOUNDER/CEO
+ +

+ BS-Civil Engineering. Worked in various Construction companies as a + site Engineer also a Web Developer. +

+
+
+

Jonathan Capili

+
CO-FOUNDER/COO
+ +

+ BS-Civil Engineering. Worked as a Project Engineer in the Middle + East for 11 Yrs. +

+
+
+

Erica Herreros

+
CO-FOUNDER/CTO
+ +

+ BS-Electronics & Communication Engineering. Working as Associate + Software Engineer-Support Analyst in various Tech Company in the + Philippines +

+
+
+

Joel PeΓ±ero

+
CO-FOUNDER/CMO
+ +

+ BA-Management. Former business analyst for the Philippines' leading + pawnshop & money transfer firm. His 7 years of experience in + financial industry has transformed him into an asset and help in the + development of the company's competitiveness. +

+
+ +
+

Jinky Lanzaderas

+
CO-FOUNDER/CFO
+ +

BA-Banking & Finance. Former COO of E&J Trading.

+
+
+

Ritchard Colaste

+
CO-FOUNDER/Digital Artist
+ +

+ BA-Financial Management. Has passion for portraiture, graphic + design, and digital art. He is also a crypto enthusiast. +

+
+
+

Sahrah Jane E. Ventura

+
Financial Adviser
+ +

+ BA-Human Resource. Licensed Financial Advisor & Unit Head of AXA + Philippines. Also a former employee of Paypal, Concentrix and EXL + Service Philippines . +

+
+
+

Janella Macabugao

+
Software Engineer
+ +

BS-Computer Science. Work as a Software Engineer of Fujitsu.

+
+
+

Nel Montilla

+
Software Engineer
+ +

+ BS-Computer Science. Work in various tech company in the Philippines + as a software Engineer. +

+
+
+

Jasmin Polvorosa

+
Web Developer
+ +

Student of BS-Computer Science. Crypto Enthusiast.

+
+ +
+

Joey Colaste

+
Graphics designer
+ +

+ BS-Political Science. Digital Artist, Graphics designer and Crypto + Enthusiasts. +

+
+
+

Reanie Colaste

+
Community Manager
+ +

+ Student of BA-Financial Management, Content Creator, and Former + Radio Producer She established techniques to create and supervise + social media marketing campaigns. +

+
+
+

Ellin jin Lanzaderas

+
Social Media Moderator
+ +

Student of BS- Civil Engineering, Cryptocurrency Enthusiast.

+
+
+
+ + + +
+

Partners

+

Click the logo to visit our partners

+
+
+
+ nftstudio24 + upcomingnft + Lost_hope_society + Moongate + comicmeta +
+
+ nftstudio24 + upcomingnft + Lost_hope_society + Moongate + comicmeta +
+
+
+
+

Be one of our partners.

+ CONTACT US +
+
+ + +
+

FAQs

+
+
+

How many Centurion NFT’s are there?

+ +

+ There are only 4,444 limited edition Centurion NFT's that will be + minted. +

+ + +
+ +
+

What is the price of each NFT?

+

The price will be 120 Matic per one NFT.

+ +
+ +
+

How many Centurion NFT can I Mint?

+

+ Maximum of 5 NFTs on Pre-minting and 10 NFTs on Public minting and a + mininmum of 1 NFT in all Minting phases. +

+ +
+ +
+

When is the Pre-minting and Public Minting?

+

To be announce.

+ +
+ +
+

Who is eligible for an Airdrop?

+

+ All NFT holders is Eligible for the Airdrop. More details will be + announce in the future. +

+ +
+
+
+ + +
+

Featured on

+

Click the Logo to view

+
+ nftstudio24 + upcomingnft + fiverr + nfteller + nftcalendar + Next nft drop + nftdropcalendar + nftprojectdrop + nftevening + isuewire +
+
+ + + + + + + + + + - + - + + + + + + diff --git a/frontend/js/abi.js b/frontend/js/abi.js index 8f27b4e5a5..23803671c7 100644 --- a/frontend/js/abi.js +++ b/frontend/js/abi.js @@ -1 +1,1493 @@ -const abi = [] +const abi = [ + { + inputs: [ + { + components: [ + { + internalType: "string", + name: "name", + type: "string", + }, + { + internalType: "string", + name: "symbol", + type: "string", + }, + { + internalType: "address", + name: "owner", + type: "address", + }, + { + internalType: "uint256", + name: "maxSupply", + type: "uint256", + }, + { + internalType: "uint256", + name: "reservedSupply", + type: "uint256", + }, + { + internalType: "uint256", + name: "mintPrice", + type: "uint256", + }, + { + internalType: "uint256", + name: "tokensPerMint", + type: "uint256", + }, + { + internalType: "address payable", + name: "treasuryAddress", + type: "address", + }, + ], + internalType: "struct NFTCollection.DeploymentConfig", + name: "deploymentConfig", + type: "tuple", + }, + { + components: [ + { + internalType: "string", + name: "baseURI", + type: "string", + }, + { + internalType: "bool", + name: "metadataUpdatable", + type: "bool", + }, + { + internalType: "uint256", + name: "publicMintStart", + type: "uint256", + }, + { + internalType: "uint256", + name: "presaleMintStart", + type: "uint256", + }, + { + internalType: "string", + name: "prerevealTokenURI", + type: "string", + }, + { + internalType: "bytes32", + name: "presaleMerkleRoot", + type: "bytes32", + }, + { + internalType: "uint256", + name: "royaltiesBps", + type: "uint256", + }, + { + internalType: "address", + name: "royaltiesAddress", + type: "address", + }, + ], + internalType: "struct NFTCollection.RuntimeConfig", + name: "runtimeConfig", + type: "tuple", + }, + ], + stateMutability: "nonpayable", + type: "constructor", + signature: "constructor", + }, + { + inputs: [], + name: "ApprovalCallerNotOwnerNorApproved", + type: "error", + }, + { + inputs: [], + name: "ApprovalQueryForNonexistentToken", + type: "error", + }, + { + inputs: [], + name: "ApprovalToCurrentOwner", + type: "error", + }, + { + inputs: [], + name: "ApproveToCaller", + type: "error", + }, + { + inputs: [], + name: "BalanceQueryForZeroAddress", + type: "error", + }, + { + inputs: [], + name: "MintToZeroAddress", + type: "error", + }, + { + inputs: [], + name: "MintZeroQuantity", + type: "error", + }, + { + inputs: [], + name: "OwnerQueryForNonexistentToken", + type: "error", + }, + { + inputs: [], + name: "TransferCallerNotOwnerNorApproved", + type: "error", + }, + { + inputs: [], + name: "TransferFromIncorrectOwner", + type: "error", + }, + { + inputs: [], + name: "TransferToNonERC721ReceiverImplementer", + type: "error", + }, + { + inputs: [], + name: "TransferToZeroAddress", + type: "error", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "address", + name: "owner", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "approved", + type: "address", + }, + { + indexed: true, + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "Approval", + type: "event", + signature: + "0x8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "address", + name: "owner", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "operator", + type: "address", + }, + { + indexed: false, + internalType: "bool", + name: "approved", + type: "bool", + }, + ], + name: "ApprovalForAll", + type: "event", + signature: + "0x17307eab39ab6107e8899845ad3d59bd9653f200f220920489ca2b5937696c31", + }, + { + anonymous: false, + inputs: [ + { + indexed: false, + internalType: "uint8", + name: "version", + type: "uint8", + }, + ], + name: "Initialized", + type: "event", + signature: + "0x7f26b83ff96e1f2b6a682f133852f6798a09c465da95921460cefb3847402498", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "address", + name: "previousOwner", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "newOwner", + type: "address", + }, + ], + name: "OwnershipTransferred", + type: "event", + signature: + "0x8be0079c531659141344cd1fd0a4f28419497f9722a3daafe3b4186f6b6457e0", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + { + indexed: true, + internalType: "bytes32", + name: "previousAdminRole", + type: "bytes32", + }, + { + indexed: true, + internalType: "bytes32", + name: "newAdminRole", + type: "bytes32", + }, + ], + name: "RoleAdminChanged", + type: "event", + signature: + "0xbd79b86ffe0ab8e8776151514217cd7cacd52c909f66475c3af44e129f0b00ff", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + { + indexed: true, + internalType: "address", + name: "account", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "sender", + type: "address", + }, + ], + name: "RoleGranted", + type: "event", + signature: + "0x2f8788117e7eff1d82e926ec794901d17c78024a50270940304540a733656f0d", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + { + indexed: true, + internalType: "address", + name: "account", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "sender", + type: "address", + }, + ], + name: "RoleRevoked", + type: "event", + signature: + "0xf6391f5c32d9c69d2a47ea670b442974b53935d1edc7fd64eb21e047a839171b", + }, + { + anonymous: false, + inputs: [ + { + indexed: true, + internalType: "address", + name: "from", + type: "address", + }, + { + indexed: true, + internalType: "address", + name: "to", + type: "address", + }, + { + indexed: true, + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "Transfer", + type: "event", + signature: + "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef", + }, + { + inputs: [], + name: "ADMIN_ROLE", + outputs: [ + { + internalType: "bytes32", + name: "", + type: "bytes32", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x75b238fc", + }, + { + inputs: [], + name: "DEFAULT_ADMIN_ROLE", + outputs: [ + { + internalType: "bytes32", + name: "", + type: "bytes32", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xa217fddf", + }, + { + inputs: [], + name: "ROYALTIES_BASIS", + outputs: [ + { + internalType: "uint16", + name: "", + type: "uint16", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x9da5b0a5", + }, + { + inputs: [], + name: "VERSION", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xffa1ad74", + }, + { + inputs: [ + { + internalType: "address", + name: "to", + type: "address", + }, + { + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "approve", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0x095ea7b3", + }, + { + inputs: [], + name: "availableSupply", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x7ecc2b56", + }, + { + inputs: [ + { + internalType: "address", + name: "owner", + type: "address", + }, + ], + name: "balanceOf", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x70a08231", + }, + { + inputs: [], + name: "baseURI", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x6c0360eb", + }, + { + inputs: [], + name: "contractURI", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xe8a3d485", + }, + { + inputs: [ + { + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "getApproved", + outputs: [ + { + internalType: "address", + name: "", + type: "address", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x081812fc", + }, + { + inputs: [], + name: "getInfo", + outputs: [ + { + components: [ + { + internalType: "uint256", + name: "version", + type: "uint256", + }, + { + components: [ + { + internalType: "string", + name: "name", + type: "string", + }, + { + internalType: "string", + name: "symbol", + type: "string", + }, + { + internalType: "address", + name: "owner", + type: "address", + }, + { + internalType: "uint256", + name: "maxSupply", + type: "uint256", + }, + { + internalType: "uint256", + name: "reservedSupply", + type: "uint256", + }, + { + internalType: "uint256", + name: "mintPrice", + type: "uint256", + }, + { + internalType: "uint256", + name: "tokensPerMint", + type: "uint256", + }, + { + internalType: "address payable", + name: "treasuryAddress", + type: "address", + }, + ], + internalType: "struct NFTCollection.DeploymentConfig", + name: "deploymentConfig", + type: "tuple", + }, + { + components: [ + { + internalType: "string", + name: "baseURI", + type: "string", + }, + { + internalType: "bool", + name: "metadataUpdatable", + type: "bool", + }, + { + internalType: "uint256", + name: "publicMintStart", + type: "uint256", + }, + { + internalType: "uint256", + name: "presaleMintStart", + type: "uint256", + }, + { + internalType: "string", + name: "prerevealTokenURI", + type: "string", + }, + { + internalType: "bytes32", + name: "presaleMerkleRoot", + type: "bytes32", + }, + { + internalType: "uint256", + name: "royaltiesBps", + type: "uint256", + }, + { + internalType: "address", + name: "royaltiesAddress", + type: "address", + }, + ], + internalType: "struct NFTCollection.RuntimeConfig", + name: "runtimeConfig", + type: "tuple", + }, + ], + internalType: "struct NFTCollection.ContractInfo", + name: "info", + type: "tuple", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x5a9b0b89", + }, + { + inputs: [ + { + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + ], + name: "getRoleAdmin", + outputs: [ + { + internalType: "bytes32", + name: "", + type: "bytes32", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x248a9ca3", + }, + { + inputs: [ + { + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + { + internalType: "address", + name: "account", + type: "address", + }, + ], + name: "grantRole", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0x2f2ff15d", + }, + { + inputs: [ + { + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + { + internalType: "address", + name: "account", + type: "address", + }, + ], + name: "hasRole", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x91d14854", + }, + { + inputs: [ + { + components: [ + { + internalType: "string", + name: "name", + type: "string", + }, + { + internalType: "string", + name: "symbol", + type: "string", + }, + { + internalType: "address", + name: "owner", + type: "address", + }, + { + internalType: "uint256", + name: "maxSupply", + type: "uint256", + }, + { + internalType: "uint256", + name: "reservedSupply", + type: "uint256", + }, + { + internalType: "uint256", + name: "mintPrice", + type: "uint256", + }, + { + internalType: "uint256", + name: "tokensPerMint", + type: "uint256", + }, + { + internalType: "address payable", + name: "treasuryAddress", + type: "address", + }, + ], + internalType: "struct NFTCollection.DeploymentConfig", + name: "deploymentConfig", + type: "tuple", + }, + { + components: [ + { + internalType: "string", + name: "baseURI", + type: "string", + }, + { + internalType: "bool", + name: "metadataUpdatable", + type: "bool", + }, + { + internalType: "uint256", + name: "publicMintStart", + type: "uint256", + }, + { + internalType: "uint256", + name: "presaleMintStart", + type: "uint256", + }, + { + internalType: "string", + name: "prerevealTokenURI", + type: "string", + }, + { + internalType: "bytes32", + name: "presaleMerkleRoot", + type: "bytes32", + }, + { + internalType: "uint256", + name: "royaltiesBps", + type: "uint256", + }, + { + internalType: "address", + name: "royaltiesAddress", + type: "address", + }, + ], + internalType: "struct NFTCollection.RuntimeConfig", + name: "runtimeConfig", + type: "tuple", + }, + ], + name: "initialize", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0xeec1b5d5", + }, + { + inputs: [ + { + internalType: "address", + name: "owner", + type: "address", + }, + { + internalType: "address", + name: "operator", + type: "address", + }, + ], + name: "isApprovedForAll", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xe985e9c5", + }, + { + inputs: [ + { + internalType: "address", + name: "wallet", + type: "address", + }, + { + internalType: "bytes32[]", + name: "proof", + type: "bytes32[]", + }, + ], + name: "isWhitelisted", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x5a23dd99", + }, + { + inputs: [], + name: "maxSupply", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xd5abeb01", + }, + { + inputs: [], + name: "metadataUpdatable", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x4e6f9dd6", + }, + { + inputs: [ + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + ], + name: "mint", + outputs: [], + stateMutability: "payable", + type: "function", + payable: true, + signature: "0xa0712d68", + }, + { + inputs: [], + name: "mintPrice", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x6817c76c", + }, + { + inputs: [], + name: "mintingActive", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x31f9c919", + }, + { + inputs: [], + name: "name", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x06fdde03", + }, + { + inputs: [], + name: "owner", + outputs: [ + { + internalType: "address", + name: "", + type: "address", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x8da5cb5b", + }, + { + inputs: [ + { + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "ownerOf", + outputs: [ + { + internalType: "address", + name: "", + type: "address", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x6352211e", + }, + { + inputs: [], + name: "prerevealTokenURI", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xf4ad0f97", + }, + { + inputs: [], + name: "presaleActive", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x53135ca0", + }, + { + inputs: [], + name: "presaleMerkleRoot", + outputs: [ + { + internalType: "bytes32", + name: "", + type: "bytes32", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x22212e2b", + }, + { + inputs: [ + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + { + internalType: "bytes32[]", + name: "proof", + type: "bytes32[]", + }, + ], + name: "presaleMint", + outputs: [], + stateMutability: "payable", + type: "function", + payable: true, + signature: "0xe3e1e8ef", + }, + { + inputs: [], + name: "presaleMintStart", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x4653124b", + }, + { + inputs: [], + name: "publicMintStart", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x8cfec4c0", + }, + { + inputs: [ + { + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + { + internalType: "address", + name: "account", + type: "address", + }, + ], + name: "renounceRole", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0x36568abe", + }, + { + inputs: [ + { + internalType: "address", + name: "to", + type: "address", + }, + { + internalType: "uint256", + name: "amount", + type: "uint256", + }, + ], + name: "reserveMint", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0xb0ea1802", + }, + { + inputs: [], + name: "reserveRemaining", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x5c629f4c", + }, + { + inputs: [], + name: "reservedSupply", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x44d19d2b", + }, + { + inputs: [ + { + internalType: "bytes32", + name: "role", + type: "bytes32", + }, + { + internalType: "address", + name: "account", + type: "address", + }, + ], + name: "revokeRole", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0xd547741f", + }, + { + inputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + { + internalType: "uint256", + name: "salePrice", + type: "uint256", + }, + ], + name: "royaltyInfo", + outputs: [ + { + internalType: "address", + name: "receiver", + type: "address", + }, + { + internalType: "uint256", + name: "royaltyAmount", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x2a55205a", + }, + { + inputs: [ + { + internalType: "address", + name: "from", + type: "address", + }, + { + internalType: "address", + name: "to", + type: "address", + }, + { + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "safeTransferFrom", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0x42842e0e", + }, + { + inputs: [ + { + internalType: "address", + name: "from", + type: "address", + }, + { + internalType: "address", + name: "to", + type: "address", + }, + { + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + { + internalType: "bytes", + name: "_data", + type: "bytes", + }, + ], + name: "safeTransferFrom", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0xb88d4fde", + }, + { + inputs: [ + { + internalType: "address", + name: "operator", + type: "address", + }, + { + internalType: "bool", + name: "approved", + type: "bool", + }, + ], + name: "setApprovalForAll", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0xa22cb465", + }, + { + inputs: [ + { + internalType: "bytes4", + name: "interfaceId", + type: "bytes4", + }, + ], + name: "supportsInterface", + outputs: [ + { + internalType: "bool", + name: "", + type: "bool", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x01ffc9a7", + }, + { + inputs: [], + name: "symbol", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x95d89b41", + }, + { + inputs: [ + { + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "tokenURI", + outputs: [ + { + internalType: "string", + name: "", + type: "string", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xc87b56dd", + }, + { + inputs: [], + name: "tokensPerMint", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x0807b9e2", + }, + { + inputs: [], + name: "totalSupply", + outputs: [ + { + internalType: "uint256", + name: "", + type: "uint256", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0x18160ddd", + }, + { + inputs: [ + { + internalType: "address", + name: "to", + type: "address", + }, + ], + name: "transferAdminRights", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0xb5106add", + }, + { + inputs: [ + { + internalType: "address", + name: "from", + type: "address", + }, + { + internalType: "address", + name: "to", + type: "address", + }, + { + internalType: "uint256", + name: "tokenId", + type: "uint256", + }, + ], + name: "transferFrom", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0x23b872dd", + }, + { + inputs: [ + { + internalType: "address", + name: "newOwner", + type: "address", + }, + ], + name: "transferOwnership", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0xf2fde38b", + }, + { + inputs: [], + name: "treasuryAddress", + outputs: [ + { + internalType: "address", + name: "", + type: "address", + }, + ], + stateMutability: "view", + type: "function", + constant: true, + signature: "0xc5f956af", + }, + { + inputs: [ + { + components: [ + { + internalType: "string", + name: "baseURI", + type: "string", + }, + { + internalType: "bool", + name: "metadataUpdatable", + type: "bool", + }, + { + internalType: "uint256", + name: "publicMintStart", + type: "uint256", + }, + { + internalType: "uint256", + name: "presaleMintStart", + type: "uint256", + }, + { + internalType: "string", + name: "prerevealTokenURI", + type: "string", + }, + { + internalType: "bytes32", + name: "presaleMerkleRoot", + type: "bytes32", + }, + { + internalType: "uint256", + name: "royaltiesBps", + type: "uint256", + }, + { + internalType: "address", + name: "royaltiesAddress", + type: "address", + }, + ], + internalType: "struct NFTCollection.RuntimeConfig", + name: "newConfig", + type: "tuple", + }, + ], + name: "updateConfig", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0x877bb1ae", + }, + { + inputs: [], + name: "withdrawFees", + outputs: [], + stateMutability: "nonpayable", + type: "function", + signature: "0x476343ee", + }, +]; diff --git a/frontend/js/app.js b/frontend/js/app.js index a599398480..f2ac95aeca 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -24,18 +24,18 @@ window.addEventListener("DOMContentLoaded", async () => { }); } - const splide = new Splide(".splide", { - type: "loop", - arrows: false, - perMove: 3, - pagination: false, - autoplay: true, - direction: 'ttb', - height: "calc(100vh - 90px)", - width: '30vw', - autoHeight: true, - }); - splide.mount(); + // const splide = new Splide(".splide", { + // type: "loop", + // arrows: false, + // perMove: 3, + // pagination: false, + // autoplay: true, + // direction: "ttb", + // height: "calc(100vh - 90px)", + // width: "30vw", + // autoHeight: true, + // }); + // splide.mount(); updateConnectStatus(); if (MetaMaskOnboarding.isMetaMaskInstalled()) { @@ -49,7 +49,7 @@ window.addEventListener("DOMContentLoaded", async () => { const updateConnectStatus = async () => { const onboarding = new MetaMaskOnboarding(); const onboardButton = document.getElementById("connectWallet"); - const notConnected = document.querySelector('.not-connected'); + const notConnected = document.querySelector(".not-connected"); const spinner = document.getElementById("spinner"); if (!MetaMaskOnboarding.isMetaMaskInstalled()) { onboardButton.innerText = "Install MetaMask!"; @@ -58,27 +58,27 @@ const updateConnectStatus = async () => { onboardButton.disabled = true; onboarding.startOnboarding(); // HIDE SPINNER - spinner.classList.add('hidden'); - notConnected.classList.remove('hidden'); - notConnected.classList.add('show-not-connected'); + spinner.classList.add("hidden"); + notConnected.classList.remove("hidden"); + notConnected.classList.add("show-not-connected"); }; } else if (accounts && accounts.length > 0) { onboardButton.innerText = `βœ” ...${accounts[0].slice(-4)}`; window.address = accounts[0]; onboardButton.disabled = true; onboarding.stopOnboarding(); - notConnected.classList.remove('show-not-connected'); - notConnected.classList.add('hidden'); + notConnected.classList.remove("show-not-connected"); + notConnected.classList.add("hidden"); // SHOW SPINNER - spinner.classList.remove('hidden'); + spinner.classList.remove("hidden"); window.contract = new web3.eth.Contract(abi, contractAddress); loadInfo(); } else { onboardButton.innerText = "Connect MetaMask!"; // HIDE SPINNER - spinner.classList.add('hidden'); - notConnected.classList.remove('hidden'); - notConnected.classList.add('show-not-connected'); + spinner.classList.add("hidden"); + notConnected.classList.remove("hidden"); + notConnected.classList.add("show-not-connected"); onboardButton.onclick = async () => { await window.ethereum .request({ @@ -86,10 +86,10 @@ const updateConnectStatus = async () => { }) .then(function (accts) { onboardButton.innerText = `βœ” ...${accts[0].slice(-4)}`; - notConnected.classList.remove('show-not-connected'); - notConnected.classList.add('hidden'); + notConnected.classList.remove("show-not-connected"); + notConnected.classList.add("hidden"); // SHOW SPINNER - spinner.classList.remove('hidden'); + spinner.classList.remove("hidden"); onboardButton.disabled = true; window.address = accts[0]; accounts = accts; @@ -102,45 +102,51 @@ const updateConnectStatus = async () => { async function checkChain() { let chainId = 0; - if(chain === 'rinkeby') { + if (chain === "rinkeby") { chainId = 4; - } else if(chain === 'polygon') { + } else if (chain === "polygon") { chainId = 137; - } else if(chain === 'ethereum') { + } else if (chain === "ethereum") { chainId = 1; } if (window.ethereum.networkVersion !== chainId) { try { await window.ethereum.request({ - method: 'wallet_switchEthereumChain', + method: "wallet_switchEthereumChain", params: [{ chainId: web3.utils.toHex(chainId) }], }); updateConnectStatus(); } catch (err) { - // This error code indicates that the chain has not been added to MetaMask. + // This error code indicates that the chain has not been added to MetaMask. if (err.code === 4902) { try { - if(chain === 'rinkeby') { + if (chain === "rinkeby") { await window.ethereum.request({ - method: 'wallet_addEthereumChain', + method: "wallet_addEthereumChain", params: [ { - chainName: 'Rinkeby Test Network', + chainName: "Rinkeby Test Network", chainId: web3.utils.toHex(chainId), - nativeCurrency: { name: 'ETH', decimals: 18, symbol: 'ETH' }, - rpcUrls: ['https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'], + nativeCurrency: { name: "ETH", decimals: 18, symbol: "ETH" }, + rpcUrls: [ + "https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161", + ], }, ], }); - } else if(chain === 'polygon') { + } else if (chain === "polygon") { await window.ethereum.request({ - method: 'wallet_addEthereumChain', + method: "wallet_addEthereumChain", params: [ { - chainName: 'Polygon Mainnet', + chainName: "Polygon Mainnet", chainId: web3.utils.toHex(chainId), - nativeCurrency: { name: 'MATIC', decimals: 18, symbol: 'MATIC' }, - rpcUrls: ['https://polygon-rpc.com/'], + nativeCurrency: { + name: "MATIC", + decimals: 18, + symbol: "MATIC", + }, + rpcUrls: ["https://polygon-rpc.com/"], }, ], }); @@ -170,32 +176,34 @@ async function loadInfo() { if (publicMintActive) { mainHeading.innerText = h1_public_mint; mainText.innerText = p_public_mint; - actionButton.classList.add('hidden'); + actionButton.classList.add("hidden"); mintButton.innerText = button_public_mint; - mintContainer.classList.remove('hidden'); + mintContainer.classList.remove("hidden"); setTotalPrice(); } else if (presaleMintActive) { startTime = window.info.runtimeConfig.publicMintStart; mainHeading.innerText = h1_presale_mint; subHeading.innerText = h2_presale_mint; - + try { // CHECK IF WHITELISTED const merkleData = await fetch( `/.netlify/functions/merkleProof/?wallet=${window.address}&chain=${chain}&contract=${contractAddress}` ); const merkleJson = await merkleData.json(); - const whitelisted = await contract.methods.isWhitelisted(window.address, merkleJson).call(); - if(!whitelisted) { + const whitelisted = await contract.methods + .isWhitelisted(window.address, merkleJson) + .call(); + if (!whitelisted) { mainText.innerText = p_presale_mint_not_whitelisted; actionButton.innerText = button_presale_mint_not_whitelisted; } else { mainText.innerText = p_presale_mint_whitelisted; - actionButton.classList.add('hidden'); + actionButton.classList.add("hidden"); mintButton.innerText = button_presale_mint_whitelisted; - mintContainer.classList.remove('hidden'); + mintContainer.classList.remove("hidden"); } - } catch(e) { + } catch (e) { // console.log(e); mainText.innerText = p_presale_mint_already_minted; actionButton.innerText = button_presale_already_minted; @@ -214,26 +222,26 @@ async function loadInfo() { countdown(); // HIDE SPINNER - spinner.classList.add('hidden'); + spinner.classList.add("hidden"); // SHOW CARD setTimeout(() => { - const countdownCard = document.querySelector('.countdown'); - countdownCard.classList.add('show-card'); + const countdownCard = document.querySelector(".countdown"); + countdownCard.classList.add("show-card"); }, 1000); - let priceType = ''; - if(chain === 'rinkeby' || chain === 'ethereum') { - priceType = 'ETH'; - } else if (chain === 'polygon') { - priceType = 'MATIC'; + let priceType = ""; + if (chain === "rinkeby" || chain === "ethereum") { + priceType = "ETH"; + } else if (chain === "polygon") { + priceType = "MATIC"; } - const price = web3.utils.fromWei(info.deploymentConfig.mintPrice, 'ether'); + const price = web3.utils.fromWei(info.deploymentConfig.mintPrice, "ether"); const pricePerMint = document.getElementById("pricePerMint"); const maxPerMint = document.getElementById("maxPerMint"); const totalSupply = document.getElementById("totalSupply"); const mintInput = document.getElementById("mintInput"); - + pricePerMint.innerText = `${price} ${priceType}`; maxPerMint.innerText = `${info.deploymentConfig.tokensPerMint}`; totalSupply.innerText = `${info.deploymentConfig.maxSupply}`; @@ -247,24 +255,24 @@ async function loadInfo() { const max = mintInput.attributes.max.value || false; mintDecrement.onclick = () => { let value = parseInt(mintInput.value) - 1 || 1; - if(!min || value >= min) { + if (!min || value >= min) { mintInput.value = value; - setTotalPrice() + setTotalPrice(); } }; mintIncrement.onclick = () => { let value = parseInt(mintInput.value) + 1 || 1; - if(!max || value <= max) { + if (!max || value <= max) { mintInput.value = value; - setTotalPrice() + setTotalPrice(); } }; setQtyMax.onclick = () => { mintInput.value = max; - setTotalPrice() + setTotalPrice(); }; mintInput.onchange = () => { - setTotalPrice() + setTotalPrice(); }; mintInput.onkeyup = async (e) => { if (e.keyCode === 13) { @@ -279,21 +287,25 @@ function setTotalPrice() { const mintInputValue = parseInt(mintInput.value); const totalPrice = document.getElementById("totalPrice"); const mintButton = document.getElementById("mintButton"); - if(mintInputValue < 1 || mintInputValue > info.deploymentConfig.tokensPerMint) { - totalPrice.innerText = 'INVALID QUANTITY'; + if ( + mintInputValue < 1 || + mintInputValue > info.deploymentConfig.tokensPerMint + ) { + totalPrice.innerText = "INVALID QUANTITY"; mintButton.disabled = true; mintInput.disabled = true; return; } - const totalPriceWei = BigInt(info.deploymentConfig.mintPrice) * BigInt(mintInputValue); - - let priceType = ''; - if(chain === 'rinkeby' || chain === 'ethereum') { - priceType = 'ETH'; - } else if (chain === 'polygon') { - priceType = 'MATIC'; + const totalPriceWei = + BigInt(info.deploymentConfig.mintPrice) * BigInt(mintInputValue); + + let priceType = ""; + if (chain === "rinkeby" || chain === "ethereum") { + priceType = "ETH"; + } else if (chain === "polygon") { + priceType = "MATIC"; } - const price = web3.utils.fromWei(totalPriceWei.toString(), 'ether'); + const price = web3.utils.fromWei(totalPriceWei.toString(), "ether"); totalPrice.innerText = `${price} ${priceType}`; mintButton.disabled = false; mintInput.disabled = false; @@ -302,7 +314,8 @@ function setTotalPrice() { async function mint() { const mintButton = document.getElementById("mintButton"); mintButton.disabled = true; - const spinner = '
Waiting for transaction...'; + const spinner = + '
Waiting for transaction...'; mintButton.innerHTML = spinner; const amount = parseInt(document.getElementById("mintInput").value); @@ -316,17 +329,20 @@ async function mint() { const mintTransaction = await contract.methods .mint(amount) .send({ from: window.address, value: value.toString() }); - if(mintTransaction) { - if(chain === 'rinkeby') { + if (mintTransaction) { + if (chain === "rinkeby") { const url = `https://rinkeby.etherscan.io/tx/${mintTransaction.transactionHash}`; - const mintedContainer = document.querySelector('.minted-container'); - const countdownContainer = document.querySelector('.countdown'); + const mintedContainer = document.querySelector(".minted-container"); + const countdownContainer = document.querySelector(".countdown"); const mintedTxnBtn = document.getElementById("mintedTxnBtn"); mintedTxnBtn.href = url; - countdownContainer.classList.add('hidden'); - mintedContainer.classList.remove('hidden'); + countdownContainer.classList.add("hidden"); + mintedContainer.classList.remove("hidden"); } - console.log("Minted successfully!", `Transaction Hash: ${mintTransaction.transactionHash}`); + console.log( + "Minted successfully!", + `Transaction Hash: ${mintTransaction.transactionHash}` + ); } else { const mainText = document.getElementById("mainText"); mainText.innerText = mint_failed; @@ -335,7 +351,7 @@ async function mint() { console.log("Failed to mint!"); } - } catch(e) { + } catch (e) { const mainText = document.getElementById("mainText"); mainText.innerText = mint_failed; mintButton.innerText = button_public_mint; @@ -353,17 +369,20 @@ async function mint() { const presaleMintTransaction = await contract.methods .presaleMint(amount, merkleJson) .send({ from: window.address, value: value.toString() }); - if(presaleMintTransaction) { - if(chain === 'rinkeby') { + if (presaleMintTransaction) { + if (chain === "rinkeby") { const url = `https://rinkeby.etherscan.io/tx/${presaleMintTransaction.transactionHash}`; - const mintedContainer = document.querySelector('.minted-container'); - const countdownContainer = document.querySelector('.countdown'); + const mintedContainer = document.querySelector(".minted-container"); + const countdownContainer = document.querySelector(".countdown"); const mintedTxnBtn = document.getElementById("mintedTxnBtn"); mintedTxnBtn.href = url; - countdownContainer.classList.add('hidden'); - mintedContainer.classList.remove('hidden'); + countdownContainer.classList.add("hidden"); + mintedContainer.classList.remove("hidden"); } - console.log("Minted successfully!", `Transaction Hash: ${presaleMintTransaction.transactionHash}`); + console.log( + "Minted successfully!", + `Transaction Hash: ${presaleMintTransaction.transactionHash}` + ); } else { const mainText = document.getElementById("mainText"); mainText.innerText = mint_failed; @@ -372,7 +391,7 @@ async function mint() { console.log("Failed to mint!"); } - } catch(e) { + } catch (e) { const mainText = document.getElementById("mainText"); mainText.innerText = mint_failed; mintButton.innerText = button_presale_mint_whitelisted; diff --git a/frontend/js/constants.js b/frontend/js/constants.js index 1d8868462d..af8e57120d 100644 --- a/frontend/js/constants.js +++ b/frontend/js/constants.js @@ -1,18 +1,23 @@ -const contractAddress = "YOUR CONTRACT ADDRESS"; // Replace with your own contract address -const chain = 'rinkeby'; // rinkeby, polygon, or ethereum +const contractAddress = "0x3eC307D71f5a9032965fFFf7c879b7ab79d17b46"; // Replace with your own contract address +const chain = "rinkeby"; // rinkeby, polygon, or ethereum -const welcome_h1 = "Welcome to the CodeCats NFT Project!!"; -const welcome_h2 = "Connect to MetaMask to Get Started"; -const welcome_p = 'The CodeCats NFT Project is a decentralized, open-source project that aims to demonstrate how to develope and launch your own NFT Collection. Follow step by step on the codeSTACKr YouTube channel.'; +const welcome_h1 = "We Secure Your Future!!!"; +const welcome_h2 = "Welcome to the Centurion Project!!"; +const welcome_p = + "Building a unique NFT that will provide you
with non-ending benefits that can be passed down
to future generations, assuring your
FINANCIAL SECURITY for today and the future."; const h1_presale_coming_soon = "NFT Drop Coming Soon!!"; const h1_presale_mint = "Pre-Sale Minting Open!!"; const h1_public_mint = "Public Minting Open!!"; const h2_presale_coming_soon = "Pre-Sale Minting Countdown"; const h2_presale_mint = "Public Minting Countdown"; -const p_presale_coming_soon = "We are working hard to launch the NFT Collection. Stay tuned for updates!"; -const p_presale_mint_not_whitelisted = "You are not whitelisted for the pre-sale.. 😒"; -const p_presale_mint_whitelisted = "You're on the whitelist for the pre-sale! πŸŽ‰"; -const p_presale_mint_already_minted = "You've already claimed your whitelist mint. Thank you! πŸŽ‰"; +const p_presale_coming_soon = + "We are working hard to launch the NFT Collection. Stay tuned for updates!"; +const p_presale_mint_not_whitelisted = + "You are not whitelisted for the pre-sale.. 😒"; +const p_presale_mint_whitelisted = + "You're on the whitelist for the pre-sale! πŸŽ‰"; +const p_presale_mint_already_minted = + "You've already claimed your whitelist mint. Thank you! πŸŽ‰"; const p_public_mint = "No whitelist needed. Public minting is now open! πŸŽ‰"; const button_presale_coming_soon = "Get on the Whitelist"; const button_presale_mint_whitelisted = "Mint Your Special NFT"; diff --git a/frontend/js/countdown.js b/frontend/js/countdown.js index dc65528524..c8711d899c 100644 --- a/frontend/js/countdown.js +++ b/frontend/js/countdown.js @@ -1,7 +1,7 @@ //Countdown Timer function countdown() { const clockdiv = document.getElementById("countdown"); - const countDownTime = clockdiv.getAttribute("data-date") * 1000 + const countDownTime = clockdiv.getAttribute("data-date") * 1000; const countdownfunction = setInterval(function () { const now = new Date().getTime(); @@ -12,7 +12,7 @@ function countdown() { const seconds = Math.floor((diff % (1000 * 60)) / 1000); if (diff < 0) { - clockdiv.style.display = "none"; + clockdiv.style.display = ""; clearInterval(countdownfunction); } else { clockdiv.style.display = "block"; diff --git a/frontend/js/faq.js b/frontend/js/faq.js new file mode 100644 index 0000000000..f2274a5754 --- /dev/null +++ b/frontend/js/faq.js @@ -0,0 +1,7 @@ +const toggles = document.querySelectorAll(".faq-toggle"); + +toggles.forEach((toggle) => { + toggle.addEventListener("click", () => { + toggle.parentNode.classList.toggle("active"); + }); +}); diff --git a/frontend/js/mobile.js b/frontend/js/mobile.js new file mode 100644 index 0000000000..be4fe66d37 --- /dev/null +++ b/frontend/js/mobile.js @@ -0,0 +1,8 @@ +var menu = document.getElementById("menu"); + +function showmenu() { + menu.style.right = "0"; +} +function hidemenu() { + menu.style.right = "-200px"; +} diff --git a/frontend/js/particles.js b/frontend/js/particles.js new file mode 100644 index 0000000000..325d834996 --- /dev/null +++ b/frontend/js/particles.js @@ -0,0 +1,1541 @@ +/* ----------------------------------------------- +/* Author : Vincent Garreau - vincentgarreau.com +/* MIT license: http://opensource.org/licenses/MIT +/* Demo / Generator : vincentgarreau.com/particles.js +/* GitHub : github.com/VincentGarreau/particles.js +/* How to use? : Check the GitHub README +/* v2.0.0 +/* ----------------------------------------------- */ + +var pJS = function(tag_id, params){ + + var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el'); + + /* particles.js variables with default values */ + this.pJS = { + canvas: { + el: canvas_el, + w: canvas_el.offsetWidth, + h: canvas_el.offsetHeight + }, + particles: { + number: { + value: 400, + density: { + enable: true, + value_area: 800 + } + }, + color: { + value: '#fff' + }, + shape: { + type: 'circle', + stroke: { + width: 0, + color: '#ff0000' + }, + polygon: { + nb_sides: 5 + }, + image: { + src: '', + width: 100, + height: 100 + } + }, + opacity: { + value: 1, + random: false, + anim: { + enable: false, + speed: 2, + opacity_min: 0, + sync: false + } + }, + size: { + value: 20, + random: false, + anim: { + enable: false, + speed: 20, + size_min: 0, + sync: false + } + }, + line_linked: { + enable: true, + distance: 100, + color: '#fff', + opacity: 1, + width: 1 + }, + move: { + enable: true, + speed: 2, + direction: 'none', + random: false, + straight: false, + out_mode: 'out', + bounce: false, + attract: { + enable: false, + rotateX: 3000, + rotateY: 3000 + } + }, + array: [] + }, + interactivity: { + detect_on: 'canvas', + events: { + onhover: { + enable: true, + mode: 'grab' + }, + onclick: { + enable: true, + mode: 'push' + }, + resize: true + }, + modes: { + grab:{ + distance: 100, + line_linked:{ + opacity: 1 + } + }, + bubble:{ + distance: 200, + size: 80, + duration: 0.4 + }, + repulse:{ + distance: 200, + duration: 0.4 + }, + push:{ + particles_nb: 4 + }, + remove:{ + particles_nb: 2 + } + }, + mouse:{} + }, + retina_detect: false, + fn: { + interact: {}, + modes: {}, + vendors:{} + }, + tmp: {} + }; + + var pJS = this.pJS; + + /* params settings */ + if(params){ + Object.deepExtend(pJS, params); + } + + pJS.tmp.obj = { + size_value: pJS.particles.size.value, + size_anim_speed: pJS.particles.size.anim.speed, + move_speed: pJS.particles.move.speed, + line_linked_distance: pJS.particles.line_linked.distance, + line_linked_width: pJS.particles.line_linked.width, + mode_grab_distance: pJS.interactivity.modes.grab.distance, + mode_bubble_distance: pJS.interactivity.modes.bubble.distance, + mode_bubble_size: pJS.interactivity.modes.bubble.size, + mode_repulse_distance: pJS.interactivity.modes.repulse.distance + }; + + + pJS.fn.retinaInit = function(){ + + if(pJS.retina_detect && window.devicePixelRatio > 1){ + pJS.canvas.pxratio = window.devicePixelRatio; + pJS.tmp.retina = true; + } + else{ + pJS.canvas.pxratio = 1; + pJS.tmp.retina = false; + } + + pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio; + pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio; + + pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio; + pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio; + pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio; + pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio; + pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio; + pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio; + pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio; + pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio; + pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio; + + }; + + + + /* ---------- pJS functions - canvas ------------ */ + + pJS.fn.canvasInit = function(){ + pJS.canvas.ctx = pJS.canvas.el.getContext('2d'); + }; + + pJS.fn.canvasSize = function(){ + + pJS.canvas.el.width = pJS.canvas.w; + pJS.canvas.el.height = pJS.canvas.h; + + if(pJS && pJS.interactivity.events.resize){ + + window.addEventListener('resize', function(){ + + pJS.canvas.w = pJS.canvas.el.offsetWidth; + pJS.canvas.h = pJS.canvas.el.offsetHeight; + + /* resize canvas */ + if(pJS.tmp.retina){ + pJS.canvas.w *= pJS.canvas.pxratio; + pJS.canvas.h *= pJS.canvas.pxratio; + } + + pJS.canvas.el.width = pJS.canvas.w; + pJS.canvas.el.height = pJS.canvas.h; + + /* repaint canvas on anim disabled */ + if(!pJS.particles.move.enable){ + pJS.fn.particlesEmpty(); + pJS.fn.particlesCreate(); + pJS.fn.particlesDraw(); + pJS.fn.vendors.densityAutoParticles(); + } + + /* density particles enabled */ + pJS.fn.vendors.densityAutoParticles(); + + }); + + } + + }; + + + pJS.fn.canvasPaint = function(){ + pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h); + }; + + pJS.fn.canvasClear = function(){ + pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); + }; + + + /* --------- pJS functions - particles ----------- */ + + pJS.fn.particle = function(color, opacity, position){ + + /* size */ + this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value; + if(pJS.particles.size.anim.enable){ + this.size_status = false; + this.vs = pJS.particles.size.anim.speed / 100; + if(!pJS.particles.size.anim.sync){ + this.vs = this.vs * Math.random(); + } + } + + /* position */ + this.x = position ? position.x : Math.random() * pJS.canvas.w; + this.y = position ? position.y : Math.random() * pJS.canvas.h; + + /* check position - into the canvas */ + if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius; + else if(this.x < this.radius*2) this.x = this.x + this.radius; + if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius; + else if(this.y < this.radius*2) this.y = this.y + this.radius; + + /* check position - avoid overlap */ + if(pJS.particles.move.bounce){ + pJS.fn.vendors.checkOverlap(this, position); + } + + /* color */ + this.color = {}; + if(typeof(color.value) == 'object'){ + + if(color.value instanceof Array){ + var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)]; + this.color.rgb = hexToRgb(color_selected); + }else{ + if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){ + this.color.rgb = { + r: color.value.r, + g: color.value.g, + b: color.value.b + } + } + if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){ + this.color.hsl = { + h: color.value.h, + s: color.value.s, + l: color.value.l + } + } + } + + } + else if(color.value == 'random'){ + this.color.rgb = { + r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), + g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), + b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0) + } + } + else if(typeof(color.value) == 'string'){ + this.color = color; + this.color.rgb = hexToRgb(this.color.value); + } + + /* opacity */ + this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value; + if(pJS.particles.opacity.anim.enable){ + this.opacity_status = false; + this.vo = pJS.particles.opacity.anim.speed / 100; + if(!pJS.particles.opacity.anim.sync){ + this.vo = this.vo * Math.random(); + } + } + + /* animation - velocity for speed */ + var velbase = {} + switch(pJS.particles.move.direction){ + case 'top': + velbase = { x:0, y:-1 }; + break; + case 'top-right': + velbase = { x:0.5, y:-0.5 }; + break; + case 'right': + velbase = { x:1, y:-0 }; + break; + case 'bottom-right': + velbase = { x:0.5, y:0.5 }; + break; + case 'bottom': + velbase = { x:0, y:1 }; + break; + case 'bottom-left': + velbase = { x:-0.5, y:1 }; + break; + case 'left': + velbase = { x:-1, y:0 }; + break; + case 'top-left': + velbase = { x:-0.5, y:-0.5 }; + break; + default: + velbase = { x:0, y:0 }; + break; + } + + if(pJS.particles.move.straight){ + this.vx = velbase.x; + this.vy = velbase.y; + if(pJS.particles.move.random){ + this.vx = this.vx * (Math.random()); + this.vy = this.vy * (Math.random()); + } + }else{ + this.vx = velbase.x + Math.random()-0.5; + this.vy = velbase.y + Math.random()-0.5; + } + + // var theta = 2.0 * Math.PI * Math.random(); + // this.vx = Math.cos(theta); + // this.vy = Math.sin(theta); + + this.vx_i = this.vx; + this.vy_i = this.vy; + + + + /* if shape is image */ + + var shape_type = pJS.particles.shape.type; + if(typeof(shape_type) == 'object'){ + if(shape_type instanceof Array){ + var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)]; + this.shape = shape_selected; + } + }else{ + this.shape = shape_type; + } + + if(this.shape == 'image'){ + var sh = pJS.particles.shape; + this.img = { + src: sh.image.src, + ratio: sh.image.width / sh.image.height + } + if(!this.img.ratio) this.img.ratio = 1; + if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){ + pJS.fn.vendors.createSvgImg(this); + if(pJS.tmp.pushing){ + this.img.loaded = false; + } + } + } + + + + }; + + + pJS.fn.particle.prototype.draw = function() { + + var p = this; + + if(p.radius_bubble != undefined){ + var radius = p.radius_bubble; + }else{ + var radius = p.radius; + } + + if(p.opacity_bubble != undefined){ + var opacity = p.opacity_bubble; + }else{ + var opacity = p.opacity; + } + + if(p.color.rgb){ + var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')'; + }else{ + var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')'; + } + + pJS.canvas.ctx.fillStyle = color_value; + pJS.canvas.ctx.beginPath(); + + switch(p.shape){ + + case 'circle': + pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false); + break; + + case 'edge': + pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2); + break; + + case 'triangle': + pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2); + break; + + case 'polygon': + pJS.fn.vendors.drawShape( + pJS.canvas.ctx, + p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX + p.y - radius / (2.66/3.5), // startY + radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength + pJS.particles.shape.polygon.nb_sides, // sideCountNumerator + 1 // sideCountDenominator + ); + break; + + case 'star': + pJS.fn.vendors.drawShape( + pJS.canvas.ctx, + p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX + p.y - radius / (2*2.66/3.5), // startY + radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength + pJS.particles.shape.polygon.nb_sides, // sideCountNumerator + 2 // sideCountDenominator + ); + break; + + case 'image': + + function draw(){ + pJS.canvas.ctx.drawImage( + img_obj, + p.x-radius, + p.y-radius, + radius*2, + radius*2 / p.img.ratio + ); + } + + if(pJS.tmp.img_type == 'svg'){ + var img_obj = p.img.obj; + }else{ + var img_obj = pJS.tmp.img_obj; + } + + if(img_obj){ + draw(); + } + + break; + + } + + pJS.canvas.ctx.closePath(); + + if(pJS.particles.shape.stroke.width > 0){ + pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color; + pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width; + pJS.canvas.ctx.stroke(); + } + + pJS.canvas.ctx.fill(); + + }; + + + pJS.fn.particlesCreate = function(){ + for(var i = 0; i < pJS.particles.number.value; i++) { + pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value)); + } + }; + + pJS.fn.particlesUpdate = function(){ + + for(var i = 0; i < pJS.particles.array.length; i++){ + + /* the particle */ + var p = pJS.particles.array[i]; + + // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy; + // var f = -BANG_SIZE / d; + // if ( d < BANG_SIZE ) { + // var t = Math.atan2( dy, dx ); + // p.vx = f * Math.cos(t); + // p.vy = f * Math.sin(t); + // } + + /* move the particle */ + if(pJS.particles.move.enable){ + var ms = pJS.particles.move.speed/2; + p.x += p.vx * ms; + p.y += p.vy * ms; + } + + /* change opacity status */ + if(pJS.particles.opacity.anim.enable) { + if(p.opacity_status == true) { + if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false; + p.opacity += p.vo; + }else { + if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true; + p.opacity -= p.vo; + } + if(p.opacity < 0) p.opacity = 0; + } + + /* change size */ + if(pJS.particles.size.anim.enable){ + if(p.size_status == true){ + if(p.radius >= pJS.particles.size.value) p.size_status = false; + p.radius += p.vs; + }else{ + if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true; + p.radius -= p.vs; + } + if(p.radius < 0) p.radius = 0; + } + + /* change particle position if it is out of canvas */ + if(pJS.particles.move.out_mode == 'bounce'){ + var new_pos = { + x_left: p.radius, + x_right: pJS.canvas.w, + y_top: p.radius, + y_bottom: pJS.canvas.h + } + }else{ + var new_pos = { + x_left: -p.radius, + x_right: pJS.canvas.w + p.radius, + y_top: -p.radius, + y_bottom: pJS.canvas.h + p.radius + } + } + + if(p.x - p.radius > pJS.canvas.w){ + p.x = new_pos.x_left; + p.y = Math.random() * pJS.canvas.h; + } + else if(p.x + p.radius < 0){ + p.x = new_pos.x_right; + p.y = Math.random() * pJS.canvas.h; + } + if(p.y - p.radius > pJS.canvas.h){ + p.y = new_pos.y_top; + p.x = Math.random() * pJS.canvas.w; + } + else if(p.y + p.radius < 0){ + p.y = new_pos.y_bottom; + p.x = Math.random() * pJS.canvas.w; + } + + /* out of canvas modes */ + switch(pJS.particles.move.out_mode){ + case 'bounce': + if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx; + else if (p.x - p.radius < 0) p.vx = -p.vx; + if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy; + else if (p.y - p.radius < 0) p.vy = -p.vy; + break; + } + + /* events */ + if(isInArray('grab', pJS.interactivity.events.onhover.mode)){ + pJS.fn.modes.grabParticle(p); + } + + if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){ + pJS.fn.modes.bubbleParticle(p); + } + + if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){ + pJS.fn.modes.repulseParticle(p); + } + + /* interaction auto between particles */ + if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){ + for(var j = i + 1; j < pJS.particles.array.length; j++){ + var p2 = pJS.particles.array[j]; + + /* link particles */ + if(pJS.particles.line_linked.enable){ + pJS.fn.interact.linkParticles(p,p2); + } + + /* attract particles */ + if(pJS.particles.move.attract.enable){ + pJS.fn.interact.attractParticles(p,p2); + } + + /* bounce particles */ + if(pJS.particles.move.bounce){ + pJS.fn.interact.bounceParticles(p,p2); + } + + } + } + + + } + + }; + + pJS.fn.particlesDraw = function(){ + + /* clear canvas */ + pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); + + /* update each particles param */ + pJS.fn.particlesUpdate(); + + /* draw each particle */ + for(var i = 0; i < pJS.particles.array.length; i++){ + var p = pJS.particles.array[i]; + p.draw(); + } + + }; + + pJS.fn.particlesEmpty = function(){ + pJS.particles.array = []; + }; + + pJS.fn.particlesRefresh = function(){ + + /* init all */ + cancelRequestAnimFrame(pJS.fn.checkAnimFrame); + cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + pJS.tmp.source_svg = undefined; + pJS.tmp.img_obj = undefined; + pJS.tmp.count_svg = 0; + pJS.fn.particlesEmpty(); + pJS.fn.canvasClear(); + + /* restart */ + pJS.fn.vendors.start(); + + }; + + + /* ---------- pJS functions - particles interaction ------------ */ + + pJS.fn.interact.linkParticles = function(p1, p2){ + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + /* draw a line between p1 and p2 if the distance between them is under the config distance */ + if(dist <= pJS.particles.line_linked.distance){ + + var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance; + + if(opacity_line > 0){ + + /* style */ + var color_line = pJS.particles.line_linked.color_rgb_line; + pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; + pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; + //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ + + /* path */ + pJS.canvas.ctx.beginPath(); + pJS.canvas.ctx.moveTo(p1.x, p1.y); + pJS.canvas.ctx.lineTo(p2.x, p2.y); + pJS.canvas.ctx.stroke(); + pJS.canvas.ctx.closePath(); + + } + + } + + }; + + + pJS.fn.interact.attractParticles = function(p1, p2){ + + /* condensed particles */ + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + if(dist <= pJS.particles.line_linked.distance){ + + var ax = dx/(pJS.particles.move.attract.rotateX*1000), + ay = dy/(pJS.particles.move.attract.rotateY*1000); + + p1.vx -= ax; + p1.vy -= ay; + + p2.vx += ax; + p2.vy += ay; + + } + + + } + + + pJS.fn.interact.bounceParticles = function(p1, p2){ + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy), + dist_p = p1.radius+p2.radius; + + if(dist <= dist_p){ + p1.vx = -p1.vx; + p1.vy = -p1.vy; + + p2.vx = -p2.vx; + p2.vy = -p2.vy; + } + + } + + + /* ---------- pJS functions - modes events ------------ */ + + pJS.fn.modes.pushParticles = function(nb, pos){ + + pJS.tmp.pushing = true; + + for(var i = 0; i < nb; i++){ + pJS.particles.array.push( + new pJS.fn.particle( + pJS.particles.color, + pJS.particles.opacity.value, + { + 'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w, + 'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h + } + ) + ) + if(i == nb-1){ + if(!pJS.particles.move.enable){ + pJS.fn.particlesDraw(); + } + pJS.tmp.pushing = false; + } + } + + }; + + + pJS.fn.modes.removeParticles = function(nb){ + + pJS.particles.array.splice(0, nb); + if(!pJS.particles.move.enable){ + pJS.fn.particlesDraw(); + } + + }; + + + pJS.fn.modes.bubbleParticle = function(p){ + + /* on hover event */ + if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){ + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), + ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance; + + function init(){ + p.opacity_bubble = p.opacity; + p.radius_bubble = p.radius; + } + + /* mousemove - check ratio */ + if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ + + if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){ + + /* size */ + if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){ + + if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){ + var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio); + if(size >= 0){ + p.radius_bubble = size; + } + }else{ + var dif = p.radius - pJS.interactivity.modes.bubble.size, + size = p.radius - (dif*ratio); + if(size > 0){ + p.radius_bubble = size; + }else{ + p.radius_bubble = 0; + } + } + + } + + /* opacity */ + if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){ + + if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){ + var opacity = pJS.interactivity.modes.bubble.opacity*ratio; + if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){ + p.opacity_bubble = opacity; + } + }else{ + var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio; + if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){ + p.opacity_bubble = opacity; + } + } + + } + + } + + }else{ + init(); + } + + + /* mouseleave */ + if(pJS.interactivity.status == 'mouseleave'){ + init(); + } + + } + + /* on click event */ + else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){ + + + if(pJS.tmp.bubble_clicking){ + var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), + time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000; + + if(time_spent > pJS.interactivity.modes.bubble.duration){ + pJS.tmp.bubble_duration_end = true; + } + + if(time_spent > pJS.interactivity.modes.bubble.duration*2){ + pJS.tmp.bubble_clicking = false; + pJS.tmp.bubble_duration_end = false; + } + } + + + function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){ + + if(bubble_param != particles_param){ + + if(!pJS.tmp.bubble_duration_end){ + if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ + if(p_obj_bubble != undefined) var obj = p_obj_bubble; + else var obj = p_obj; + if(obj != bubble_param){ + var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration); + if(id == 'size') p.radius_bubble = value; + if(id == 'opacity') p.opacity_bubble = value; + } + }else{ + if(id == 'size') p.radius_bubble = undefined; + if(id == 'opacity') p.opacity_bubble = undefined; + } + }else{ + if(p_obj_bubble != undefined){ + var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration), + dif = bubble_param - value_tmp; + value = bubble_param + dif; + if(id == 'size') p.radius_bubble = value; + if(id == 'opacity') p.opacity_bubble = value; + } + } + + } + + } + + if(pJS.tmp.bubble_clicking){ + /* size */ + process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size'); + /* opacity */ + process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity'); + } + + } + + }; + + + pJS.fn.modes.repulseParticle = function(p){ + + if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') { + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); + + var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse}, + repulseRadius = pJS.interactivity.modes.repulse.distance, + velocity = 100, + repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50); + + var pos = { + x: p.x + normVec.x * repulseFactor, + y: p.y + normVec.y * repulseFactor + } + + if(pJS.particles.move.out_mode == 'bounce'){ + if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x; + if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y; + }else{ + p.x = pos.x; + p.y = pos.y; + } + + } + + + else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) { + + if(!pJS.tmp.repulse_finish){ + pJS.tmp.repulse_count++; + if(pJS.tmp.repulse_count == pJS.particles.array.length){ + pJS.tmp.repulse_finish = true; + } + } + + if(pJS.tmp.repulse_clicking){ + + var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3); + + var dx = pJS.interactivity.mouse.click_pos_x - p.x, + dy = pJS.interactivity.mouse.click_pos_y - p.y, + d = dx*dx + dy*dy; + + var force = -repulseRadius / d * 1; + + function process(){ + + var f = Math.atan2(dy,dx); + p.vx = force * Math.cos(f); + p.vy = force * Math.sin(f); + + if(pJS.particles.move.out_mode == 'bounce'){ + var pos = { + x: p.x + p.vx, + y: p.y + p.vy + } + if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx; + else if (pos.x - p.radius < 0) p.vx = -p.vx; + if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy; + else if (pos.y - p.radius < 0) p.vy = -p.vy; + } + + } + + // default + if(d <= repulseRadius){ + process(); + } + + // bang - slow motion mode + // if(!pJS.tmp.repulse_finish){ + // if(d <= repulseRadius){ + // process(); + // } + // }else{ + // process(); + // } + + + }else{ + + if(pJS.tmp.repulse_clicking == false){ + + p.vx = p.vx_i; + p.vy = p.vy_i; + + } + + } + + } + + } + + + pJS.fn.modes.grabParticle = function(p){ + + if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){ + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); + + /* draw a line between the cursor and the particle if the distance between them is under the config distance */ + if(dist_mouse <= pJS.interactivity.modes.grab.distance){ + + var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance; + + if(opacity_line > 0){ + + /* style */ + var color_line = pJS.particles.line_linked.color_rgb_line; + pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; + pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; + //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ + + /* path */ + pJS.canvas.ctx.beginPath(); + pJS.canvas.ctx.moveTo(p.x, p.y); + pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y); + pJS.canvas.ctx.stroke(); + pJS.canvas.ctx.closePath(); + + } + + } + + } + + }; + + + + /* ---------- pJS functions - vendors ------------ */ + + pJS.fn.vendors.eventsListeners = function(){ + + /* events target element */ + if(pJS.interactivity.detect_on == 'window'){ + pJS.interactivity.el = window; + }else{ + pJS.interactivity.el = pJS.canvas.el; + } + + + /* detect mouse pos - on hover / click event */ + if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){ + + /* el on mousemove */ + pJS.interactivity.el.addEventListener('mousemove', function(e){ + + if(pJS.interactivity.el == window){ + var pos_x = e.clientX, + pos_y = e.clientY; + } + else{ + var pos_x = e.offsetX || e.clientX, + pos_y = e.offsetY || e.clientY; + } + + pJS.interactivity.mouse.pos_x = pos_x; + pJS.interactivity.mouse.pos_y = pos_y; + + if(pJS.tmp.retina){ + pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio; + pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio; + } + + pJS.interactivity.status = 'mousemove'; + + }); + + /* el on onmouseleave */ + pJS.interactivity.el.addEventListener('mouseleave', function(e){ + + pJS.interactivity.mouse.pos_x = null; + pJS.interactivity.mouse.pos_y = null; + pJS.interactivity.status = 'mouseleave'; + + }); + + } + + /* on click event */ + if(pJS.interactivity.events.onclick.enable){ + + pJS.interactivity.el.addEventListener('click', function(){ + + pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x; + pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y; + pJS.interactivity.mouse.click_time = new Date().getTime(); + + if(pJS.interactivity.events.onclick.enable){ + + switch(pJS.interactivity.events.onclick.mode){ + + case 'push': + if(pJS.particles.move.enable){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); + }else{ + if(pJS.interactivity.modes.push.particles_nb == 1){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); + } + else if(pJS.interactivity.modes.push.particles_nb > 1){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb); + } + } + break; + + case 'remove': + pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb); + break; + + case 'bubble': + pJS.tmp.bubble_clicking = true; + break; + + case 'repulse': + pJS.tmp.repulse_clicking = true; + pJS.tmp.repulse_count = 0; + pJS.tmp.repulse_finish = false; + setTimeout(function(){ + pJS.tmp.repulse_clicking = false; + }, pJS.interactivity.modes.repulse.duration*1000) + break; + + } + + } + + }); + + } + + + }; + + pJS.fn.vendors.densityAutoParticles = function(){ + + if(pJS.particles.number.density.enable){ + + /* calc area */ + var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000; + if(pJS.tmp.retina){ + area = area/(pJS.canvas.pxratio*2); + } + + /* calc number of particles based on density area */ + var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area; + + /* add or remove X particles */ + var missing_particles = pJS.particles.array.length - nb_particles; + if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles)); + else pJS.fn.modes.removeParticles(missing_particles); + + } + + }; + + + pJS.fn.vendors.checkOverlap = function(p1, position){ + for(var i = 0; i < pJS.particles.array.length; i++){ + var p2 = pJS.particles.array[i]; + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + if(dist <= p1.radius + p2.radius){ + p1.x = position ? position.x : Math.random() * pJS.canvas.w; + p1.y = position ? position.y : Math.random() * pJS.canvas.h; + pJS.fn.vendors.checkOverlap(p1); + } + } + }; + + + pJS.fn.vendors.createSvgImg = function(p){ + + /* set color to svg element */ + var svgXml = pJS.tmp.source_svg, + rgbHex = /#([0-9A-F]{3,6})/gi, + coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) { + if(p.color.rgb){ + var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')'; + }else{ + var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')'; + } + return color_value; + }); + + /* prepare to create img with colored svg */ + var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}), + DOMURL = window.URL || window.webkitURL || window, + url = DOMURL.createObjectURL(svg); + + /* create particle img obj */ + var img = new Image(); + img.addEventListener('load', function(){ + p.img.obj = img; + p.img.loaded = true; + DOMURL.revokeObjectURL(url); + pJS.tmp.count_svg++; + }); + img.src = url; + + }; + + + pJS.fn.vendors.destroypJS = function(){ + cancelAnimationFrame(pJS.fn.drawAnimFrame); + canvas_el.remove(); + pJSDom = null; + }; + + + pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){ + + // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/ + var sideCount = sideCountNumerator * sideCountDenominator; + var decimalSides = sideCountNumerator / sideCountDenominator; + var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides; + var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians + c.save(); + c.beginPath(); + c.translate(startX, startY); + c.moveTo(0,0); + for (var i = 0; i < sideCount; i++) { + c.lineTo(sideLength,0); + c.translate(sideLength,0); + c.rotate(interiorAngle); + } + //c.stroke(); + c.fill(); + c.restore(); + + }; + + pJS.fn.vendors.exportImg = function(){ + window.open(pJS.canvas.el.toDataURL('image/png'), '_blank'); + }; + + + pJS.fn.vendors.loadImg = function(type){ + + pJS.tmp.img_error = undefined; + + if(pJS.particles.shape.image.src != ''){ + + if(type == 'svg'){ + + var xhr = new XMLHttpRequest(); + xhr.open('GET', pJS.particles.shape.image.src); + xhr.onreadystatechange = function (data) { + if(xhr.readyState == 4){ + if(xhr.status == 200){ + pJS.tmp.source_svg = data.currentTarget.response; + pJS.fn.vendors.checkBeforeDraw(); + }else{ + console.log('Error pJS - Image not found'); + pJS.tmp.img_error = true; + } + } + } + xhr.send(); + + }else{ + + var img = new Image(); + img.addEventListener('load', function(){ + pJS.tmp.img_obj = img; + pJS.fn.vendors.checkBeforeDraw(); + }); + img.src = pJS.particles.shape.image.src; + + } + + }else{ + console.log('Error pJS - No image.src'); + pJS.tmp.img_error = true; + } + + }; + + + pJS.fn.vendors.draw = function(){ + + if(pJS.particles.shape.type == 'image'){ + + if(pJS.tmp.img_type == 'svg'){ + + if(pJS.tmp.count_svg >= pJS.particles.number.value){ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + }else{ + //console.log('still loading...'); + if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + }else{ + + if(pJS.tmp.img_obj != undefined){ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + }else{ + if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + } + + }else{ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + }; + + + pJS.fn.vendors.checkBeforeDraw = function(){ + + // if shape is image + if(pJS.particles.shape.type == 'image'){ + + if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){ + pJS.tmp.checkAnimFrame = requestAnimFrame(check); + }else{ + //console.log('images loaded! cancel check'); + cancelRequestAnimFrame(pJS.tmp.checkAnimFrame); + if(!pJS.tmp.img_error){ + pJS.fn.vendors.init(); + pJS.fn.vendors.draw(); + } + + } + + }else{ + pJS.fn.vendors.init(); + pJS.fn.vendors.draw(); + } + + }; + + + pJS.fn.vendors.init = function(){ + + /* init canvas + particles */ + pJS.fn.retinaInit(); + pJS.fn.canvasInit(); + pJS.fn.canvasSize(); + pJS.fn.canvasPaint(); + pJS.fn.particlesCreate(); + pJS.fn.vendors.densityAutoParticles(); + + /* particles.line_linked - convert hex colors to rgb */ + pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color); + + }; + + + pJS.fn.vendors.start = function(){ + + if(isInArray('image', pJS.particles.shape.type)){ + pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3); + pJS.fn.vendors.loadImg(pJS.tmp.img_type); + }else{ + pJS.fn.vendors.checkBeforeDraw(); + } + + }; + + + + + /* ---------- pJS - start ------------ */ + + + pJS.fn.vendors.eventsListeners(); + + pJS.fn.vendors.start(); + + + +}; + +/* ---------- global functions - vendors ------------ */ + +Object.deepExtend = function(destination, source) { + for (var property in source) { + if (source[property] && source[property].constructor && + source[property].constructor === Object) { + destination[property] = destination[property] || {}; + arguments.callee(destination[property], source[property]); + } else { + destination[property] = source[property]; + } + } + return destination; +}; + +window.requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback){ + window.setTimeout(callback, 1000 / 60); + }; +})(); + +window.cancelRequestAnimFrame = ( function() { + return window.cancelAnimationFrame || + window.webkitCancelRequestAnimationFrame || + window.mozCancelRequestAnimationFrame || + window.oCancelRequestAnimationFrame || + window.msCancelRequestAnimationFrame || + clearTimeout +} )(); + +function hexToRgb(hex){ + // By Tim Down - http://stackoverflow.com/a/5624139/3493650 + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function(m, r, g, b) { + return r + r + g + g + b + b; + }); + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; +}; + +function clamp(number, min, max) { + return Math.min(Math.max(number, min), max); +}; + +function isInArray(value, array) { + return array.indexOf(value) > -1; +} + + +/* ---------- particles.js functions - start ------------ */ + +window.pJSDom = []; + +window.particlesJS = function(tag_id, params){ + + //console.log(params); + + /* no string id? so it's object params, and set the id with default id */ + if(typeof(tag_id) != 'string'){ + params = tag_id; + tag_id = 'particles-js'; + } + + /* no id? set the id to default id */ + if(!tag_id){ + tag_id = 'particles-js'; + } + + /* pJS elements */ + var pJS_tag = document.getElementById(tag_id), + pJS_canvas_class = 'particles-js-canvas-el', + exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class); + + /* remove canvas if exists into the pJS target tag */ + if(exist_canvas.length){ + while(exist_canvas.length > 0){ + pJS_tag.removeChild(exist_canvas[0]); + } + } + + /* create canvas element */ + var canvas_el = document.createElement('canvas'); + canvas_el.className = pJS_canvas_class; + + /* set size canvas */ + canvas_el.style.width = "100%"; + canvas_el.style.height = "100%"; + + /* append canvas */ + var canvas = document.getElementById(tag_id).appendChild(canvas_el); + + /* launch particle.js */ + if(canvas != null){ + pJSDom.push(new pJS(tag_id, params)); + } + +}; + +window.particlesJS.load = function(tag_id, path_config_json, callback){ + + /* load json config */ + var xhr = new XMLHttpRequest(); + xhr.open('GET', path_config_json); + xhr.onreadystatechange = function (data) { + if(xhr.readyState == 4){ + if(xhr.status == 200){ + var params = JSON.parse(data.currentTarget.response); + window.particlesJS(tag_id, params); + if(callback) callback(); + }else{ + console.log('Error pJS - XMLHttpRequest status: '+xhr.status); + console.log('Error pJS - File config not found'); + } + } + }; + xhr.send(); + +}; \ No newline at end of file diff --git a/frontend/js/particles.min.js b/frontend/js/particles.min.js new file mode 100644 index 0000000000..0f06b75b83 --- /dev/null +++ b/frontend/js/particles.min.js @@ -0,0 +1,133 @@ +/* ----------------------------------------------- +/* How to use? : Check the GitHub README +/* ----------------------------------------------- */ + +/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */ +/* +particlesJS.load('particles-js', 'particles.json', function() { + console.log('particles.js loaded - callback'); +}); +*/ + +/* Otherwise just put the config content (json): */ + +particlesJS( + "particles-js", + + { + particles: { + number: { + value: 80, + density: { + enable: true, + value_area: 800, + }, + }, + color: { + value: "#ffffff", + }, + shape: { + type: "circle", + stroke: { + width: 0, + color: "#000000", + }, + polygon: { + nb_sides: 5, + }, + image: { + src: "img/github.svg", + width: 100, + height: 100, + }, + }, + opacity: { + value: 0.5, + random: false, + anim: { + enable: false, + speed: 1, + opacity_min: 0.1, + sync: false, + }, + }, + size: { + value: 3, + random: true, + anim: { + enable: false, + speed: 40, + size_min: 0.1, + sync: false, + }, + }, + line_linked: { + enable: false, + distance: 150, + color: "#ffffff", + opacity: 0.4, + width: 1, + }, + move: { + enable: true, + speed: 6, + direction: "none", + random: false, + straight: false, + out_mode: "out", + attract: { + enable: false, + rotateX: 600, + rotateY: 1200, + }, + }, + }, + interactivity: { + detect_on: "canvas", + events: { + onhover: { + enable: true, + mode: "repulse", + }, + onclick: { + enable: true, + mode: "push", + }, + resize: true, + }, + modes: { + grab: { + distance: 400, + line_linked: { + opacity: 1, + }, + }, + bubble: { + distance: 400, + size: 40, + duration: 2, + opacity: 8, + speed: 3, + }, + repulse: { + distance: 200, + }, + push: { + particles_nb: 4, + }, + remove: { + particles_nb: 2, + }, + }, + }, + retina_detect: true, + config_demo: { + hide_card: false, + background_color: "#b61924", + background_image: "", + background_position: "50% 50%", + background_repeat: "no-repeat", + background_size: "cover", + }, + } +); diff --git a/frontend/js/roadmap.js b/frontend/js/roadmap.js new file mode 100644 index 0000000000..ba511d20fc --- /dev/null +++ b/frontend/js/roadmap.js @@ -0,0 +1,53 @@ +"use strict"; + +function qs(selector, all = false) { + return all + ? document.querySelectorAll(selector) + : document.querySelector(selector); +} + +const sections = qs(".section", true); +const timeline = qs(".timeline"); +const line = qs(".line"); +line.style.bottom = `calc(100% - 20px)`; +let prevScrollY = window.scrollY; +let up, down; +let full = false; +let set = 0; +const targetY = window.innerHeight * 0.8; + +function scrollHandler(e) { + const { scrollY } = window; + up = scrollY < prevScrollY; + down = !up; + const timelineRect = timeline.getBoundingClientRect(); + const lineRect = line.getBoundingClientRect(); // const lineHeight = lineRect.bottom - lineRect.top; + + const dist = targetY - timelineRect.top; + console.log(dist); + + if (down && !full) { + set = Math.max(set, dist); + line.style.bottom = `calc(100% - ${set}px)`; + } + + if (dist > timeline.offsetHeight + 50 && !full) { + full = true; + line.style.bottom = `-50px`; + } + + sections.forEach((item) => { + // console.log(item); + const rect = item.getBoundingClientRect(); // console.log(rect); + + if (rect.top + item.offsetHeight / 5 < targetY) { + item.classList.add("show-me"); + } + }); // console.log(up, down); + + prevScrollY = window.scrollY; +} + +scrollHandler(); +line.style.display = "block"; +window.addEventListener("scroll", scrollHandler); diff --git a/frontend/partners.html b/frontend/partners.html new file mode 100644 index 0000000000..65154e14f2 --- /dev/null +++ b/frontend/partners.html @@ -0,0 +1,92 @@ + + + + + + + + + + + Centurion-Contact Us + + +
+
+
+

Tell us about your project and how we can assist you.

+

Let's build together and grow together.

+
+
+ +

Contact Us

+
+

Representative information:

+ + +

Company information:

+ + + + + + +
+
+
+
+ + + + diff --git a/frontend/pdf-file/Centurion-whitepaper.pdf b/frontend/pdf-file/Centurion-whitepaper.pdf new file mode 100644 index 0000000000..3d72f6827a Binary files /dev/null and b/frontend/pdf-file/Centurion-whitepaper.pdf differ diff --git a/frontend/package.json b/package.json similarity index 99% rename from frontend/package.json rename to package.json index f2963f5195..844598a09e 100644 --- a/frontend/package.json +++ b/package.json @@ -20,4 +20,4 @@ "dependencies": { "node-fetch": "^2.6.7" } -} \ No newline at end of file +}