home page layout

gryphnft · Mar 6, 2022 · 901034e · 901034e
1 parent d70b53a
commit 901034e
Show file tree

Hide file tree

Showing 35 changed files with 2,914 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,47 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+.DS_Store
+node_modules
+
+package-lock.json 
+
+#Hardhat files
+cache
+artifacts
+archives
diff --git a/docs/browserconfig.xml b/docs/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/images/favicon/mstile-150x150.png"/>
+            <TileColor>#ee141e</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/images/bg-gns-1.jpg b/docs/images/bg-gns-1.jpg
diff --git a/docs/images/bg-gns-2.jpg b/docs/images/bg-gns-2.jpg
diff --git a/docs/images/bg-space.jpg b/docs/images/bg-space.jpg
diff --git a/docs/images/bg-space.png b/docs/images/bg-space.png
diff --git a/docs/images/diagram-sidechain.png b/docs/images/diagram-sidechain.png
diff --git a/docs/images/gcoin.png b/docs/images/gcoin.png
diff --git a/docs/images/gryph-8bit-7.png b/docs/images/gryph-8bit-7.png
diff --git a/docs/images/home-city.png b/docs/images/home-city.png
diff --git a/docs/images/peg-3darvr.png b/docs/images/peg-3darvr.png
diff --git a/docs/images/peg-art.png b/docs/images/peg-art.png
diff --git a/docs/images/peg-fashion.png b/docs/images/peg-fashion.png
diff --git a/docs/images/peg-games.png b/docs/images/peg-games.png
diff --git a/docs/images/peg-land.png b/docs/images/peg-land.png
diff --git a/docs/images/peg-mobile.png b/docs/images/peg-mobile.png
diff --git a/docs/images/peg-music.png b/docs/images/peg-music.png
diff --git a/docs/images/peg-sports.png b/docs/images/peg-sports.png
diff --git a/docs/images/sprite-chains.png b/docs/images/sprite-chains.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>GRY.PH</title>
+    <meta property="og:title" content="GRY.PH" />
+    <meta property="og:image" content="https://gryphcdn.s3.ap-southeast-1.amazonaws.com/static/2022/authentic-streetwear.jpg" />
+    <meta property="og:url" content="https://gry.ph/" />
+    <meta property="og:type" content="website" />
+
+    <link rel="shortcut icon" href="https://gryphcdn.s3.ap-southeast-1.amazonaws.com/static/2022/favicon.png" type="image/x-icon"></link>
+    <link rel="icon" href="https://gryphcdn.s3.ap-southeast-1.amazonaws.com/static/2022/favicon.png" type="image/x-icon" />
+
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" />
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" />
+
+    <link rel="stylesheet" type="text/css" href="https:/js.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+    <link rel="stylesheet" type="text/css" href="/styles/theme.css?" />
+    <link rel="stylesheet" type="text/css" href="/styles/index.css?" />
+  </head>
+  <body>
+    <header class="head">
+      <nav class="left">
+        <a class="logo" href="/">
+          <img src="/images/gryph-8bit-7.png" />
+        </a>
+        <div class="name">GRY.PH</div>
+      </nav>
+      <nav class="right">
+        <a class="btn-outline-primary" href="#">Shop Now</a>
+        <a href="#">Whitepaper</a>
+        <a href="#">Whitelist</a>
+        <a class="social" href="https://www.twitter.com/gryphnft" target="_blank">
+          <i class="fab fa-twitter"></i>
+        </a>
+        <a class="social" href="https://discord.com/invite/PZDyNcVSNu" target="_blank">
+          <i class="fab fa-discord"></i>
+        </a>
+        <a class="social" href="https://github.com/gryphnft" target="_blank">
+          <i class="fab fa-github"></i>
+        </a>
+      </nav>
+    </header>
+    <main class="body">
+      <section id="particles-js" class="section section-1">
+        <div class="container">
+          <div class="left">
+            <h1>Crosschain NFT Marketplace</h1>
+            <h2>
+              Stake the Next Level of Digital
+              <span 
+                class="typewrite" 
+                data-period="2000" 
+                data-values="Art Collections,Audio &amp; Music,Metaverse and Play2Earn,Land &amp; Properties,Virtual &amp; Augmented Reality,Fashion &amp; Apparel,Sports &amp; Fanfare"
+              ></span>
+            </h2>
+            <div class="chains">
+              <span class="chain chain-1"></span>
+              <span class="chain chain-2"></span>
+              <span class="chain chain-3"></span>
+              <span class="chain chain-4"></span>
+              <span class="chain chain-5"></span>
+              <span class="chain chain-6"></span>
+              <span class="chain chain-7"></span>
+              <span class="chain chain-8"></span>
+              <span class="chain chain-9"></span>
+            </div>
+            <a class="btn-primary" href="#">Read the Whitepaper</a>
+          </div>
+          <div id="carousel" class="right">
+            <div class="frame">
+              <img class="active" src="/images/peg-art.png" />
+              <img src="/images/peg-music.png" />
+              <img src="/images/peg-games.png" />
+              <img src="/images/peg-land.png" />
+              <img src="/images/peg-3darvr.png" />
+              <img src="/images/peg-fashion.png" />
+              <img src="/images/peg-sports.png" />
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="section section-2">
+        <div class="container">
+          <div class="left">
+            <h2>The Next Utopia</h2>
+            <h3>GRYPH Chain</h3>
+            <p>
+              An ethereum-linked sidechain made specifically for the GRYPH Marketplace. Experience
+              fast and cheap gas costs when minting, listing and trading that scales.
+            </p>
+            <h3>The Economy Engine</h3>
+            <p>
+              GRYPH is powered by the world's first decentralized economy engine that 
+              allows users to buy and sell provably asset backed $GRYPH direct.
+            </p>
+            <a class="btn-outline-primary" href="#">Learn More</a>
+          </div>
+          <div class="right">
+            <img src="/images/home-city.png" />
+          </div>
+        </div>
+      </section>
+      <section class="section section-3">
+        <div class="container">
+          <div class="left">
+            <img src="/images/peg-mobile.png" />
+          </div>
+          <div class="right">
+            <h2>The NFT Wallet You Deserve</h2>
+            <ul>
+              <li>List, Buy, Send and Collect Digital Art</li>
+              <li>Discover NFTs Across All Blockchains</li>
+              <li>Zero Configuration NFT Detection</li>
+              <li>Your Wallet, Your Data</li>
+            </ul>
+            <a class="btn-outline-primary" href="#">Coming Soon</a>
+          </div>
+        </div>
+      </section>
+      <section class="section section-4">
+        <div class="container">
+          <h2><span class="label">GRY.PH</span> <span class="title">Naming Service</span></h2>
+          <h3>Decentralized Naming for sellers, buyers and art collections.</h3>
+          <form action="/gns">
+            <img class="logo" width="35" src="/images/gryph-8bit-7.png" />
+            <label>GNS</label>
+            <input type="text" placeholder="ex. mycollection" />
+            <span class="domain">.gry.ph</span>
+            <button>Search</button>
+          </form>
+        </div>
+      </section>
+      <section class="section section-5">
+        <div class="container">
+          <div class="left">
+            <h3>Staking $GRYPH</h3>
+            <ul>
+              <li>Earn on Successful Listings &amp; Purchases</li>
+              <li>Use on Platform Fees &amp; Gas</li>
+              <li>HODL for Rewards &amp; Exclusive Deals</li>
+              <li>Zero Fees for All NFTs Created on the Side Chain</li>
+              <li>Cheap Marketplace Gas Fees. Forever.</li>
+            </ul>
+            <a class="btn-primary" href="#">Get Whitelisted</a>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer class="foot">
+      <nav class="left">
+        <a href="#">Home</a>
+        <a href="#">About</a>
+        <a href="#">Whitepaper</a>
+        <a href="#">Roadmap</a>
+        <a href="#">Questions</a>
+      </nav>
+      <nav class="center">
+        <h6>GRY.PH</h6>
+        <div>
+          <img class="logo" src="/images/gryph-8bit-7.png" />
+        </div>
+        <a class="social" href="https://www.twitter.com/gryphnft" target="_blank">
+          <i class="fab fa-twitter"></i>
+        </a>
+        <a class="social" href="https://discord.com/invite/PZDyNcVSNu" target="_blank">
+          <i class="fab fa-discord"></i>
+        </a>
+        <a class="social" href="https://github.com/gryphnft" target="_blank">
+          <i class="fab fa-github"></i>
+        </a>
+      </nav>
+      <nav class="right">
+        <a href="#">Naming Service</a>
+        <a href="#">$GRYPH Tokens</a>
+        <a href="#">GRYPH Shop</a>
+        <a href="#">Terms of Use</a>
+        <a href="#">Privacy Policy</a>
+      </nav>
+    </footer>
+    <script type="text/javascript" src="/scripts/lib/doon.js"></script>
+    <script type="text/javascript" src="/scripts/home/particle.js"></script>
+    <script type="text/javascript" src="/scripts/home/particles.js"></script>
+    <script type="text/javascript" src="/scripts/home/typewrite.js"></script>
+    <script type="text/javascript" src="/scripts/home.js"></script>
+  </body>
+</html>
diff --git a/docs/scripts/collection.js b/docs/scripts/collection.js
@@ -0,0 +1,34 @@
+(async() => {
+  const state = {}
+  const connected = async function(newstate) {
+    Object.assign(state, newstate, {
+      //account: '0xe4d48122f4e3cc276480dc28db9e023fd66e39e8'
+    })
+    blockapi.notify('success', 'Wallet connected')
+
+    document.getElementById('connected').classList.remove('hidden');
+    document.getElementById('disconnected').classList.add('hidden');
+
+    document.getElementById('wallet-address').innerHTML = [
+      newstate.account.substr(0, 6),
+      newstate.account.substr(newstate.account.length - 4)
+    ].join('...')
+  }
+
+  const disconnected = function(e) {
+    if (e?.message) {
+      blockapi.notify('error', e.message)
+    } else {
+      blockapi.notify('success', 'Wallet disconnected')
+    }
+
+    document.getElementById('disconnected').classList.remove('hidden');
+    document.getElementById('connected').classList.add('hidden');
+  }
+
+  window.doon('body')
+  window.addEventListener('disconnect-click', disconnected)
+  window.addEventListener('connect-click', async(e) => {
+    blockapi.connect(blockmetadata, connected, disconnected)
+  })
+})()
diff --git a/docs/scripts/contracts.js b/docs/scripts/contracts.js
@@ -0,0 +1,13 @@
+window.blockmetadata = {
+  "chain_id": 80001,
+  "chain_name": "Polygon (MATIC)",
+  "chain_scan": "https://rpc-mumbai.maticvigil.com/", //testnet
+  //"chain_scan": "https://bscscan.com/", //mainnet
+  "contracts": {
+    "collection": {
+      "address": "0x2D368564a298F6738049cbCDB25E689b6157dc35", //testnet
+      //"address": "0x2D368564a298F6738049cbCDB25E689b6157dc35", //mainnet
+      "abi": []
+    }
+  }
+}
diff --git a/docs/scripts/home.js b/docs/scripts/home.js
@@ -0,0 +1,13 @@
+(() => {
+  const carousel = Array.from(document.querySelectorAll('#carousel img'))
+  window.addEventListener('typewriter-next', (e) => {
+    console.log(e.index, e.text)
+    carousel.forEach((image, index) => {
+      if (e.index == index) {
+        image.classList.add('active')
+      } else {
+        image.classList.remove('active')
+      }
+    })
+  })
+})()