Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pull request 2 #7

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Pull request 2 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
90d5499
Update env.js
Abdulyb May 4, 2024
447e261
Update index.html
Abdulyb May 5, 2024
f1a68ca
Update style.css
Abdulyb May 5, 2024
45a78c9
Create CNAME
Abdulyb May 5, 2024
7255e49
Update CNAME
Abdulyb May 5, 2024
f7b8258
Update CNAME
Abdulyb May 5, 2024
1ce1ce0
Update CNAME
Abdulyb May 5, 2024
edf65a5
Delete CNAME
Abdulyb May 5, 2024
1112e01
Update index.html
Abdulyb May 17, 2024
0a97b52
Update index.html
Abdulyb May 17, 2024
1f5d291
Create main.js
Abdulyb May 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 94 additions & 68 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<title>NFTs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script
src="https://cdn.ethers.io/lib/ethers-5.5.umd.min.js"
type="application/javascript"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap"
rel="stylesheet"
/>
<link href="./style/style.css" rel="stylesheet" />
<link href="./style/tooltip.css" rel="stylesheet" />
<script src="./js/abi.js" type="application/javascript"></script>
<script src="./js/env.js" type="application/javascript"></script>
<script src="./js/utils.js" type="application/javascript"></script>
<script src="./js/render.js" type="application/javascript"></script>
<script src="./js/script.js" type="application/javascript"></script>
<script></script>
</head>
<body>
<div class="container">
<div class="header br">
<div class="header-l">
<h1>
A matter of minutes. And zero developing costs. Want to build your
own NFT collection?
</h1>
<a href="https://apillon.io/" class="builders" target="_blank">
Build with Apillon
</a>
</div>
<div class="header-r">
<img src="images/header.svg" />
</div>
</div>
<div class="box collection br text-center">
<div id="collection"></div>
<div class="drop" id="drop"></div>
<div class="btn-connect-wrapper">
<button id="btnConnect" onclick="connectWallet();">
Connect wallet
</button>
<span id="connectError" class="error"></span>
</div>
<span id="generalError" class="error"></span>
</div>
<div id="actions" style="display: none">
<h2 class="text-center">Show NFTs:</h2>
<div class="actions">
<button id="btnAllNFTs" onclick="loadAllNFTs();">All nfts</button>
<button id="myNFTs" onclick="loadMyNFTs();">My nfts</button>
</div>
</div>
<div class="grid" id="nfts"></div>
<div class="modals" id="modals"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>NFTs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap"
rel="stylesheet"
/>
<link href="./style/style.css" rel="stylesheet" />
<link href="./style/tooltip.css" rel="stylesheet" />
<style>
/* ... existing styles ... */
.search-input {
margin-top: 10px;
padding: 5px;
width: calc(100% - 10px);
font-size: 1em;
}
/* ... additional styles for render.js functionality ... */
</style>
</head>
<body>
<div class="container">
<!-- Collection Information Section -->
<div id="collection">
<!-- Collection details will be loaded here by render.js -->
</div>

<!-- Drop Countdown Section -->
<div id="drop">
<!-- Countdown and minting options will be loaded here by render.js -->
</div>

<!-- Error Message Display -->
<span id="generalError" class="error"></span>

<!-- NFT Display Grid -->
<div class="grid" id="nfts">
<!-- NFT cards with search functionality will be rendered here -->
</div>

<!-- ... other content ... -->
</div>

<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script
src="https://cdn.ethers.io/lib/ethers-5.5.umd.min.js"
type="application/javascript"
></script>
<script src="./js/abi.js" type="application/javascript"></script>
<script src="./js/env.js" type="application/javascript"></script>
<script src="./js/utils.js" type="application/javascript"></script>
<script src="./js/render.js" type="application/javascript"></script>
<script src="./js/script.js" type="application/javascript"></script>
<script>
// ... existing scripts ...

function renderNFTs(nfts) {
const nftsContainer = document.getElementById('nfts');
nftsContainer.innerHTML = '';
nfts.forEach((nft) => {
const nftCard = document.createElement('div');
nftCard.className = 'nft-card';
nftCard.innerHTML = `
<img class="nft-image" src="${nft.image}" alt="${nft.name}" />
<h3>${nft.name}</h3>
<input type="text" class="search-input" onkeyup="searchNFT(this, '${nft.name}')" placeholder="Search in ${nft.name}">
`;
nftsContainer.appendChild(nftCard);
});
}

function searchNFT(inputElement, nftName) {
const filter = inputElement.value.toUpperCase();
const nftCards = document.getElementsByClassName('nft-card');
Array.from(nftCards).forEach((card) => {
const title = card.querySelector('h3').textContent;
if (title.toUpperCase().indexOf(filter) > -1) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
}
</script>
</body>
</html>
10 changes: 5 additions & 5 deletions js/env.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const contractAddress = ""; // Paste the address of the NFT collection.
// uncomment the chain you are using:
const chainId = "0x507"; // Moonbase
// const chainId = "0x504"; // Moonbeam
// const chainId = "0x250"; // Astar
const contractAddress = "0xFf5952519981D5e597B0F456760aEadF43e8891F"; // Your Moonbeam contract address
// uncomment the chain you are using by deleting the slashes
// const chainId = "0x507"; // Moonbase
const chainId = "0x504"; // Moonbeam
// const chainId = "0x250"; // Astar
1 change: 1 addition & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

Loading