initial commit

BQuake41 · Jan 23, 2022 · 245d88b · 245d88b
commit 245d88b
Show file tree

Hide file tree

Showing 14 changed files with 338 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,27 @@
+# Basic DAPP Landing Page
+
+This repo is a work-in-progress and pairs with the Mint 10k NFT project. 
+
+## Video Walkthrough
+
+[video here]()
+
+## How to Create and Mint 10k NFTs
+
+[![Thumbnail](https://img.youtube.com/vi/AaCgydeMu64/maxresdefault.jpg)](https://youtu.be/AaCgydeMu64)
+
+## Instructions
+
+- Clone or download zipped code
+- Update `index.html` file
+  - \<title\>
+  - favicon images
+  - Logo
+  - Social Links
+  - Countdown `data-date`
+  - Heading and paragraph text
+- Update `style.css` file
+  - Fonts
+  - Colors
+
+## Watch the [video walkthrough](#video-walkthrough) above for more detailed instructions.
diff --git a/app.js b/app.js
@@ -0,0 +1,66 @@
+//Countdown Timer
+const clockdiv = document.getElementById("countdown");
+const countDownTime = new Date(
+  clockdiv.getAttribute("data-date")
+).getTime();
+
+const countdownfunction = setInterval(function () {
+  const now = new Date().getTime();
+  const diff = countDownTime - now;
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
+  const minutes = Math.floor(diff % (1000 * 60 * 60) / (1000 * 60));
+  const seconds = Math.floor(diff % (1000 * 60) / 1000);
+
+  if (diff < 0) {
+    clockdiv.style.display = "none";
+    clearInterval(countdownfunction);
+  } else {
+    clockdiv.querySelector(".days").innerHTML = days;
+    clockdiv.querySelector(".hours").innerHTML = hours;
+    clockdiv.querySelector(".minutes").innerHTML = minutes;
+    clockdiv.querySelector(".seconds").innerHTML = seconds;
+  }
+}, 1000);
+
+
+// METAMASK CONNECTION
+window.addEventListener('DOMContentLoaded', () => {
+  const onboarding = new MetaMaskOnboarding();
+  const onboardButton = document.getElementById('connectWallet');
+  let accounts;
+
+  const updateButton = () => {
+    if (!MetaMaskOnboarding.isMetaMaskInstalled()) {
+      onboardButton.innerText = 'Install MetaMask!';
+      onboardButton.onclick = () => {
+        onboardButton.innerText = 'Connecting...';
+        onboardButton.disabled = true;
+        onboarding.startOnboarding();
+      };
+    } else if (accounts && accounts.length > 0) {
+      onboardButton.innerText = `✔ ...${accounts[0].slice(-4)}`;
+      onboardButton.disabled = true;
+      onboarding.stopOnboarding();
+    } else {
+      onboardButton.innerText = 'Connect MetaMask!';
+      onboardButton.onclick = async () => {
+        await window.ethereum.request({
+          method: 'eth_requestAccounts',
+        })
+        .then(function(accounts) {
+          onboardButton.innerText = `✔ ...${accounts[0].slice(-4)}`;
+          onboardButton.disabled = true;
+        });
+      };
+    }
+  };
+
+  updateButton();
+  if (MetaMaskOnboarding.isMetaMaskInstalled()) {
+    window.ethereum.on('accountsChanged', (newAccounts) => {
+      accounts = newAccounts;
+      updateButton();
+    });
+  }
+});
diff --git a/images/header/discord.webp b/images/header/discord.webp
diff --git a/images/header/opensea.webp b/images/header/opensea.webp
diff --git a/images/header/twitter.webp b/images/header/twitter.webp
diff --git a/images/x-icon/android-chrome-192x192.png b/images/x-icon/android-chrome-192x192.png
diff --git a/images/x-icon/android-chrome-512x512.png b/images/x-icon/android-chrome-512x512.png
diff --git a/images/x-icon/apple-touch-icon.png b/images/x-icon/apple-touch-icon.png
diff --git a/images/x-icon/favicon-16x16.png b/images/x-icon/favicon-16x16.png
diff --git a/images/x-icon/favicon-32x32.png b/images/x-icon/favicon-32x32.png
diff --git a/images/x-icon/favicon.ico b/images/x-icon/favicon.ico
diff --git a/images/x-icon/site.webmanifest b/images/x-icon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>CodeCats</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="images/x-icon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/x-icon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/x-icon/favicon-16x16.png">
+    <link rel="manifest" href="images/x-icon/site.webmanifest">
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <div class="container">
+        <div class="logo">
+          <a href="/">
+            <img src="images/x-icon/favicon-32x32.png" alt="logo" />
+          </a>
+        </div>
+        <div class="menu">
+          <a
+            href="https://discord.gg/A9CnsVzzkZ"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src="images/header/discord.webp" alt="Discord" />
+          </a>
+          <a
+            href="https://twitter.com/CodeCats10k"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src="images/header/twitter.webp" alt="Twitter" />
+          </a>
+          <a
+            href="https://opensea.io/collection/codecats"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src="images/header/opensea.webp" alt="Opensea" />
+          </a>
+          <button class="wallet-btn btn" id="connectWallet">
+            <span>Connect Wallet</span>
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <section>
+      <div class="countdown">
+        <ul
+          id="countdown"
+          class="count-down"
+          data-date="Feb 17, 2022 4:00:00 PM UTC"
+        >
+          <li class="clock-item">
+            <span class="count-number days">20</span>
+            <p class="count-text">Days</p>
+          </li>
+
+          <li class="clock-item">
+            <span class="count-number hours">20</span>
+            <p class="count-text">Hour</p>
+          </li>
+
+          <li class="clock-item">
+            <span class="count-number minutes">20</span>
+            <p class="count-text">Min</p>
+          </li>
+
+          <li class="clock-item">
+            <span class="count-number seconds">20</span>
+            <p class="count-text">Sec</p>
+          </li>
+        </ul>
+        <h1>NFT Drop Coming Soon!</h1>
+
+        <p>A new batch of cute cats will be available very soon!</p>
+        <a href="https://discord.gg/A9CnsVzzkZ" target="_blank" rel="noopener noreferrer" class="hero-btn btn"
+          ><span>Join the Catmmunity</span>
+        </a>
+      </div>
+    </section>
+
+    <script src="https://cdn.jsdelivr.net/npm/@metamask/[email protected]/dist/metamask-onboarding.bundle.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,152 @@
+/* FONTS */
+
+@import url("https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+/* GLOBAL STYLES */
+
+:root {
+  --font-primary: 'Poppins', sans-serif;
+  --font-secondary: 'Arvo', serif;
+  --font-code: 'Roboto', monospace;
+  --bg-color: #00163f;
+  --font-color: #ffffff;
+  --btn-bg-color: #ffffff;
+  --accent-color: #be7efe;
+  --header-shadow: #000 0px 0px 5px;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--bg-color);
+  display: flex;
+  flex-flow: column;
+  height: 100vh;
+  color: var(--font-color);
+  font-family: var(--font-primary);
+}
+
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+/* HEADER */
+
+header {
+  box-shadow: var(--header-shadow);
+}
+
+header .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menu {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
+/* BUTTONS */
+
+.btn {
+  display: inline-block;
+  padding: 1rem 2rem;
+  background: var(--btn-bg-color);
+  color: var(--accent-color);
+  font-family: var(--font-secondary);
+  font-style: italic;
+  font-weight: bold;
+  font-size: 1rem;
+  text-transform: capitalize;
+  transition: all 0.3s ease;
+  box-shadow: 4px 4px 0 0 var(--accent-color);
+  cursor: pointer;
+  position: relative;
+  text-decoration: none;
+  outline: none;
+}
+.btn:hover {
+  box-shadow: none;
+}
+
+.wallet-btn {
+  border-radius: 5rem;
+  margin-left: 2rem;
+  border-color: transparent;
+}
+
+.hero-btn {
+  border-radius: 4px;
+  font-size: 1.2rem;
+  padding: 1.5rem 3rem;
+}
+
+/* COUNTDOWN SECTION */
+
+section {
+  flex: 1 1 auto;
+}
+
+.countdown {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.countdown ul {
+  display: flex;
+  gap: 2rem
+}
+.countdown .clock-item {
+  list-style: none;
+  width: 70px;
+  height: auto;
+}
+.countdown .clock-item .count-number {
+  background: var(--accent-color);
+  color: var(--font-color);
+  font-size: 2rem;
+  font-weight: 700;
+  font-family: var(--font-secondary);
+  padding: 1rem;
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  line-height: 1;
+  border-radius: 4px 4px 0 0;
+}
+.countdown .clock-item .count-text {
+  background: var(--btn-bg-color);
+  font-family: var(--font-secondary);
+  font-size: 1.1rem;
+  color: var(--bg-color);
+  padding: 0.5rem 0.7rem;
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  line-height: 1;
+  border-radius: 0 0 4px 4px;
+}
+
+.countdown h1 {
+  text-shadow: 2px 2px 0 var(--accent-color);
+  font-style: italic;
+  margin: 2rem 0;
+  font-size: 3.5rem;
+}
+
+.countdown p {
+  font-size: 1.1rem;
+  font-family: var(--font-secondary);
+  margin-bottom: 2rem;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}