mirror of
https://github.com/vacp2p/wakuconnect.dev.git
synced 2025-02-28 19:10:47 +00:00
Pawel eth master (#10)
Co-authored-by: Pawel <Pawel@Tests-MacBook-Air.local> Co-authored-by: Paweł Rzepiński <pawel@TPL013-PR-MBA8.local> Co-authored-by: Paweł Rzepiński <pawel.r@ethworks.io> Co-authored-by: pawelEth <80252264+pawelEth@users.noreply.github.com>
This commit is contained in:
F
GitHub
parent
782960d95e
commit
b9cc17c2ab
12
README.md
12
README.md
@ -3,15 +3,15 @@
|
||||
1. Install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
# yarn
|
||||
yarn install
|
||||
```
|
||||
|
||||
2. Start the development server:
|
||||
|
||||
```bash
|
||||
# Using gulp
|
||||
npm run dev
|
||||
# gulp
|
||||
gulp
|
||||
```
|
||||
|
||||
Now you should be able to see the project running at [localhost:3000](http://localhost:3000).
|
||||
@ -21,7 +21,7 @@
|
||||
## For production
|
||||
|
||||
```bash
|
||||
# Using gulp
|
||||
npm run build
|
||||
# gulp
|
||||
gulp build
|
||||
|
||||
```
|
||||
18753
package-lock.json
generated
18753
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "dapp-connect",
|
||||
"name": "@dappconnect/dappconnect.dev",
|
||||
"version": "1.0.0",
|
||||
"description": "DApp Connect - landing page",
|
||||
"main": "src/index.html",
|
||||
|
||||
356374
src/css/style.min.css
vendored
356374
src/css/style.min.css
vendored
File diff suppressed because it is too large
Load Diff
@ -28,3 +28,21 @@
|
||||
content: "";
|
||||
@apply block mt-0
|
||||
}
|
||||
|
||||
#code .tight {
|
||||
margin: 0 -3px;
|
||||
}
|
||||
|
||||
#code .tight-left {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
#typewriter:after {
|
||||
content: '|';
|
||||
animation: blink 400ms linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes blink{
|
||||
0%{opacity: 0;}
|
||||
100%{opacity: 1;}
|
||||
}
|
||||
136
src/index.html
136
src/index.html
@ -33,13 +33,13 @@
|
||||
<nav class="mb-auto">
|
||||
<ul class="md:flex">
|
||||
<li class="items-center menu-item relative mb-8 cursor-pointer md:flex md:m-0 md:py-2">
|
||||
<a class="inline-block font-special font-bold text-xs mb-4 md:m-0" href="">Docs</a>
|
||||
<a class="inline-block font-special font-bold text-xs mb-4 md:m-0" href="https://docs.dappconnect.dev/">Docs</a>
|
||||
<img class="hidden transform duration-200 rotate-90 ml-2 md:block" src="assets/images/arrow/arrow-black.svg" alt="">
|
||||
<ul class="bg-rectangle102 md:absolute md:top-full md:left-2/4 md:transform md:-translate-x-2/4 md:p-4 md:shadow md:hidden">
|
||||
<li class="mb-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Quick Start</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Guides</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Docs</a></li>
|
||||
<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">GitHub</a></li>
|
||||
<li class="mb-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://docs.dappconnect.dev/quick_start.html">Quick Start</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://docs.dappconnect.dev/guides/index.html">Guides</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://docs.dappconnect.dev/">Docs</a></li>
|
||||
<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://github.com/status-im/?q=dappconnect&type=&language=&sort=">GitHub</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-item md:m-0 cursor-pointer mb-8 md:mb-0 md:mx-16 md:py-2">
|
||||
@ -50,13 +50,14 @@
|
||||
<img class="hidden transform duration-200 rotate-90 ml-2 md:block" src="assets/images/arrow/arrow-black.svg" alt="">
|
||||
<ul class="bg-rectangle102 md:absolute md:top-full md:left-2/4 md:transform md:-translate-x-2/4 md:p-4 md:shadow md:hidden">
|
||||
<li class="my-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">About us</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Careers</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Blog</a></li>
|
||||
<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Forum</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://status.im/our_team/jobs.html">Careers</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://vac.dev/research-log/">Blog</a></li>
|
||||
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://forum.vac.dev/">Forum</a></li>
|
||||
<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://discord.gg/NgQERkYbHD">Discord</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="border border-rectangle97 font-bold text-xs py-3 px-6 md:hidden">Get Started</button>
|
||||
<a href="https://docs.dappconnect.dev/quick_start.html" class="border border-rectangle97 font-bold text-xs py-3 px-6 md:hidden">Get Started</a>
|
||||
</nav>
|
||||
<div class="flex items-center justify-center mt-6 md:hidden">
|
||||
<a href="">
|
||||
@ -77,7 +78,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="hidden border border-rectangle97 font-bold text-xs py-3 px-6 transition-colors duration-200 hover:bg-rectangle97 hover:text-rectangle102 md:block ">Get Started</button>
|
||||
<a href="https://docs.dappconnect.dev/quick_start.html" class="hidden border border-rectangle97 font-bold text-xs py-3 px-6 transition-colors duration-200 hover:bg-rectangle97 hover:text-rectangle102 md:block ">Get Started</a>
|
||||
<button id="burger" class="relative flex flex-col justify-center items-center w-12 h-12 md:hidden">
|
||||
<span id="line-top" class="block w-6 h-0.5 bg-rectangle97"></span>
|
||||
<span id="line-middle" class="block w-6 h-0.5 bg-rectangle97 my-1.5"></span>
|
||||
@ -91,8 +92,8 @@
|
||||
<section class="py-10 mb-10 border-b border-grey md:pl-20 lg:flex lg:justify-center lg:py-26 lg:mb-26">
|
||||
<div class="max-w-lg md:max-w-2xl">
|
||||
<h1 class="text-title md:text-3.5xl">Empower your dApp with decentralized communication</h1>
|
||||
<p class="text-sm italic my-8 opacity-75 max-w-31 sm:pr-7">DappConnect gives you the tools to seamlessly enable your project with off-chain communication for decentralized, private, and secure messaging.</p>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="" >See the docs</a>
|
||||
<p class="text-sm italic my-8 opacity-75 max-w-31 sm:pr-7">DappConnect seamlessly enhances your project with off-chain communication for decentralized, private, and secure messaging.</p>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="https://docs.dappconnect.dev/" >See the docs</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Grid section -->
|
||||
@ -101,30 +102,76 @@
|
||||
<div class="grid grid-cols-1 gap-16 md:grid-cols-3 md:gap-4 lg:px-35 lg:gap-22">
|
||||
<div class="flex flex-col items-center">
|
||||
<img src="assets/images/photo1.svg" alt="Private and Secure by Design">
|
||||
<h3 class="font-bold text-sm text-center leading-6 my-4">Private and Secure by Design</h3>
|
||||
<p class="text-sm text-center leading-6 opacity-75">Leveraging peer-to-peer messaging protocols and tools for strong end-to-end encryption, DappConnect is designed to protect your users.</p>
|
||||
<h3 class="font-bold text-sm text-center leading-6 my-4">Private and secure by design</h3>
|
||||
<p class="text-sm text-center leading-6 opacity-75">DappConnect leverages peer-to-peer messaging protocols and strong end-to-end encryption to protect your users.</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<img src="assets/images/photo2.svg" alt="Decentralized Messaging">
|
||||
<h3 class="font-bold text-sm text-center leading-6 my-4">Decentralized Messaging</h3>
|
||||
<p class="text-sm text-center leading-6 opacity-75">Adopt DappConnect to protect your users from censorship and remove the need for centralized infrastructure.</p>
|
||||
<h3 class="font-bold text-sm text-center leading-6 my-4">Decentralized messaging</h3>
|
||||
<p class="text-sm text-center leading-6 opacity-75">Protect your users from censorship, and remove the weaknesses of centralized infrastructure.</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<img src="assets/images/photo3.svg" alt="dApp Ready">
|
||||
<h3 class="font-bold text-sm text-center leading-6 my-4">dApp Ready</h3>
|
||||
<p class="text-sm text-center leading-6 opacity-75">Optimized for mobile and web platforms, DappConnect can be used by any project built on Ethereum or other blockchains. </p>
|
||||
<h3 class="font-bold text-sm text-center leading-6 my-4">dApp ready</h3>
|
||||
<p class="text-sm text-center leading-6 opacity-75">Optimized for mobile and web platforms, DappConnect can be used by any project built on Ethereum or other blockchains.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- section code -->
|
||||
<section id="sectionCode" class="border-b border-grey pb-10 mb-10 md:border-0 lg:border-b lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25">
|
||||
<div class="mb-11 md:mb-15 lg:max-w-xs">
|
||||
<h2 class="font-bold text-sm leading-6 whitespace-nowrap mb-4">Get started with DappConnect in Minutes</h2>
|
||||
<p class="text-sm leading-6 italic opacity-75 mb-7">The simple API allows you to introduce decentralized, private, secure communication in your application in minutes.</p>
|
||||
<h2 class="font-bold text-sm leading-6 whitespace-nowrap mb-4">Get started with DappConnect in minutes</h2>
|
||||
<p class="text-sm leading-6 italic opacity-75 mb-7">The simple API allows you to introduce decentralized, private, secure communication to your application in minutes.</p>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="" >Get started</a>
|
||||
<h1 class="testArea"></h1>
|
||||
</div>
|
||||
<div id="code" class="bg-rectangle97 p-4 md:px-8 lg:max-w-code lg:w-full lg:p-8 lg:h-96">
|
||||
<div id="testText" class="text-sm font-special"></div>
|
||||
|
||||
<span class="text-sm font-special text-red">import</span>
|
||||
<span class="text-sm font-special text-rectangle102">{</span>
|
||||
<span class="text-sm font-special text-orange">Waku</span>
|
||||
<span class="text-sm font-special text-rectangle102 tight-left">,</span>
|
||||
<span class="text-sm font-special text-orange">WakuMessage</span>
|
||||
<span class="text-sm font-special text-rectangle102">}</span>
|
||||
<span class="text-sm font-special text-red">from</span>
|
||||
<span class="text-sm font-special text-rectangle98">'js-waku'</span>
|
||||
<span class="text-sm font-special text-rectangle102 tight-left">;</span>
|
||||
<br><br>
|
||||
<span class="text-sm font-special text-red">const</span>
|
||||
<span class="text-sm font-special text-rectangle102">waku</span>
|
||||
<span class="text-sm font-special text-blueLight">=</span>
|
||||
<span class="text-sm font-special text-red">await</span>
|
||||
<span class="text-sm font-special text-orange">Waku</span>
|
||||
<span class="text-sm font-special text-rectangle102 tight">.</span>
|
||||
<span class="text-sm font-special text-violet">create</span>
|
||||
<span class="text-sm font-special text-rectangle102">({</span>
|
||||
<span class="text-sm font-special text-blueLight">relay</span>
|
||||
<span class="text-sm font-special text-rectangle102 tight-left">:</span>
|
||||
<span class="text-sm font-special text-blueLight">true</span>
|
||||
<span class="text-sm font-special text-rectangle102"> </span>
|
||||
<span class="text-sm font-special text-rectangle102">});</span>
|
||||
<br><br>
|
||||
<span class="text-sm font-special text-red">const</span>
|
||||
<span class="text-sm font-special text-rectangle102">msg</span>
|
||||
<span class="text-sm font-special text-blueLight">=</span>
|
||||
<span class="text-sm font-special text-red">await</span>
|
||||
<span class="text-sm font-special text-orange">WakuMessage</span>
|
||||
<span class="text-sm font-special text-rectangle102 tight">.</span>
|
||||
<span class="text-sm font-special text-violet">fromUtf8String</span>
|
||||
<span class="text-sm font-special text-rectangle102">(</span>
|
||||
<br><br>
|
||||
<span class="text-sm font-special text-rectangle98 pl-4">'I am using a decentralized network for messaging',</span>
|
||||
<br><br>
|
||||
<span class="text-sm font-special text-rectangle98 pl-4">'/my-cool-app/1/my-use-case/proto'</span>
|
||||
<br><br>
|
||||
<span class="text-sm font-special text-rectangle102">);</span>
|
||||
<br><br>
|
||||
<span class="text-sm font-special text-red">await</span>
|
||||
<span class="text-sm font-special text-rectangle102">waku.</span>
|
||||
<span class="text-sm font-special text-blueLight tight-left">relay</span>
|
||||
<span class="text-sm font-special text-rectangle102 tight">.</span>
|
||||
<span class="text-sm font-special text-violet">send</span>
|
||||
<span class="text-sm font-special text-rectangle102 tight-left">(msg);</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Use Cases -->
|
||||
@ -157,7 +204,7 @@
|
||||
<section class="lg:px-28">
|
||||
<div class="flex flex-col items-center mb-11 xl:mb-26">
|
||||
<h2 class="font-bold text-sm text-center leading-6 whitespace-nowrap mb-4">Built with Waku</h2>
|
||||
<p class="text-sm text-center leading-6 italic opacity-75 mb-7 md:max-w-32.5">Waku is a suite of protocols designed for private, secure, decentralized messaging. The communication layer for Web3.</p>
|
||||
<p class="text-sm text-center leading-6 italic opacity-75 mb-7 md:max-w-32.5">Waku is a suite of protocols designed for private, secure, and decentralized messaging. Waku is the communication layer for Web3.</p>
|
||||
<a class="text-blue text-xs text-center font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="">Learn more about Waku</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-6 mb-20 md:grid-cols-3 xl:gap-26">
|
||||
@ -196,32 +243,39 @@
|
||||
<svg width="33" height="32" viewBox="0 0 33 32" fill="none">
|
||||
<path d="M32.2485 6.11174C31.0521 6.63195 29.7858 6.97584 28.4889 7.13272C29.8537 6.31485 30.8728 5.0282 31.3574 3.51145C30.0749 4.27728 28.6694 4.81685 27.202 5.10672C26.2146 4.04199 24.9034 3.33325 23.4741 3.09165C22.0448 2.85006 20.5782 3.08927 19.3044 3.77178C18.0305 4.45428 17.0215 5.54148 16.4354 6.86285C15.8494 8.18423 15.7196 9.66504 16.0664 11.073C13.4644 10.9415 10.9164 10.2642 8.58778 9.08511C6.25917 7.90606 4.20206 6.25164 2.5501 4.22932C1.97971 5.23461 1.68321 6.37308 1.69007 7.53154C1.69369 8.60736 1.96329 9.667 2.47485 10.6161C2.98641 11.5652 3.72407 12.3743 4.62214 12.9714C3.58182 12.9431 2.56241 12.664 1.65061 12.1578L1.65103 12.2376C1.66676 13.745 2.20265 15.2034 3.16805 16.3661C4.13346 17.5289 5.46911 18.3246 6.94909 18.6187C6.38089 18.7919 5.7905 18.8832 5.19569 18.8899C4.78391 18.8851 4.37297 18.8477 3.96673 18.7782C4.39457 20.0749 5.21527 21.2081 6.31464 22.0201C7.41401 22.8321 8.73736 23.2826 10.1006 23.3088C7.8084 25.1199 4.97187 26.1083 2.04314 26.1165C1.5099 26.1182 0.976899 26.0863 0.447338 26.0208C3.44777 27.9515 6.9379 28.9764 10.4973 28.972C12.9537 28.9975 15.388 28.5333 17.6579 27.6066C19.9279 26.6798 21.9881 25.3091 23.7181 23.5744C25.4482 21.8397 26.8134 19.7759 27.734 17.5034C28.6547 15.231 29.1123 12.7955 29.0801 10.3392C29.0787 10.068 29.0772 9.78087 29.0757 9.49372C30.3226 8.56019 31.3962 7.41576 32.2485 6.11174Z" fill="#132644"/>
|
||||
</svg>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Twitter</a>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://twitter.com/dappconnect">Twitter</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg width="40" height="32" viewBox="0 0 40 32" fill="none">
|
||||
<path d="M37.7988 13.6081C36.2597 8.19607 34.5066 5.39968 34.4783 5.34952C34.3782 5.22592 31.8959 2.22193 25.8867 0L25.0796 2.17663C27.9384 3.23372 29.9637 4.52331 31.0769 5.35655C27.7456 4.35535 23.7796 3.74217 20.2641 3.74217C16.7486 3.74217 12.7762 4.35535 9.43433 5.35655C10.5562 4.52339 12.5951 3.23372 15.4651 2.17663L14.6809 0C8.64845 2.22193 6.13452 5.22592 6.0331 5.34952C6.0043 5.39968 4.22168 8.19607 2.62568 13.6081C1.08748 18.8237 0.47484 26.1813 0.452441 26.4764C0.585942 26.6878 3.65409 31.9996 12.0919 31.9996L14.247 28.8875C11.8543 28.2482 9.57488 27.2172 7.49073 25.8183L8.77957 23.888C12.1419 26.1448 16.0702 27.3377 20.1399 27.3377C24.2097 27.3377 28.1506 26.1448 31.5366 23.888L32.8051 25.8183C30.7064 27.2172 28.416 28.2482 26.0165 28.8875L28.1389 31.9996C36.5767 31.9996 39.7008 26.6878 39.8365 26.4764C39.8172 26.1813 39.282 18.8237 37.7988 13.6081ZM14.8451 19.6744H12.5375L12.5578 15.8096H14.8655L14.8451 19.6744ZM27.8231 19.6744H25.5154L25.5358 15.8096H27.8434L27.8231 19.6744Z" fill="#132644"/>
|
||||
</svg>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Discord</a>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://discord.gg/NgQERkYbHD">Discord</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg width="33" height="32" viewBox="0 0 33 32" fill="none">
|
||||
<path d="M15.9978 -0.000488281C7.1639 -0.000488281 0.0375093 7.12605 0.0837804 15.9173C0.120789 22.9487 4.73612 28.9139 11.1071 31.0206C11.9079 31.1672 12.1973 30.6757 12.1951 30.2536C12.1931 29.8751 12.1738 28.8743 12.1588 27.5465C7.71394 28.5076 6.75766 25.4121 6.75766 25.4121C6.02199 23.573 4.96943 23.0835 4.96943 23.0835C3.51026 22.0965 5.07234 22.1163 5.07234 22.1163C6.67891 22.2293 7.53094 23.7573 7.53094 23.7573C8.97172 26.1889 11.286 25.4874 12.1958 25.0791C12.3344 24.0506 12.7447 23.349 13.2006 22.9507C9.64655 22.5484 5.90341 21.1829 5.87132 15.0849C5.86217 13.3469 6.47868 11.926 7.49681 10.8122C7.32869 10.4099 6.77218 8.79076 7.63064 6.60087C7.63064 6.60087 8.97237 6.1728 12.0392 8.23189C13.3133 7.87913 14.6803 7.70275 16.0423 7.6968C17.4003 7.70473 18.7712 7.87913 20.0511 8.23387C23.0942 6.17479 24.4384 6.60285 24.4384 6.60285C25.3219 8.79472 24.7825 10.4119 24.6206 10.8142C25.6524 11.9279 26.2779 13.3489 26.287 15.0869C26.3192 21.2008 22.5864 22.5464 19.0245 22.9408C19.6011 23.4323 20.1182 24.4033 20.126 25.8877C20.1372 28.0161 20.1262 29.7324 20.129 30.2536C20.1312 30.6797 20.4218 31.1751 21.233 31.0186C27.5718 28.9099 32.1203 22.9467 32.0833 15.9173C32.0371 7.12605 24.8357 -0.000488281 15.9978 -0.000488281Z" fill="#132644"/>
|
||||
</svg>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">GitHub</a>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://github.com/status-im/?q=dappconnect&type=&language=&sort=">GitHub</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg class="w-8 h-8" viewBox="0 0 40 32" fill="none">
|
||||
<use href="#logo"/>
|
||||
<svg width="33" height="32" viewBox="0 0 33 32" fill="none">
|
||||
<path d="M17.1187 2C9.45625 2 3 8.15625 3 15.7563C3 16 3.00625 30 3.00625 30L17.1187 29.9875C24.7875 29.9875 31 23.5938 31 15.9937C31 8.39375 24.7875 2 17.1187 2ZM17 24C15.7875 24 14.6313 23.7312 13.6 23.2437L8.53125 24.5L9.9625 19.8125C9.35 18.6812 9 17.3813 9 16C9 11.5813 12.5813 8 17 8C21.4188 8 25 11.5813 25 16C25 20.4188 21.4188 24 17 24Z" fill="#132644"/>
|
||||
</svg>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Forum</a>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://forum.vac.dev/">Forum</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||
<path d="M22.7754 4.97859C20.4766 3.67482 18.2425 2.40777 16.0083 1.14072C15.6298 0.929547 15.2605 0.966273 14.8913 1.17745C10.8107 3.50955 6.73019 5.83247 2.65889 8.16457C2.52964 8.23803 2.40962 8.4492 2.40962 8.5961C2.40039 13.2511 2.39116 17.897 2.41885 22.5428C2.41885 22.8458 2.64965 23.2773 2.89892 23.4242C5.09613 24.7188 7.32104 25.9583 9.54595 27.2162C9.56441 27.2254 9.60134 27.2162 9.70289 27.2162C9.70289 27.0417 9.70289 26.8581 9.70289 26.6837C9.70289 22.1113 9.71213 17.5481 9.69366 12.9757C9.69366 12.5442 9.85061 12.3422 10.2014 12.1493C14.2912 9.83561 18.3717 7.51269 22.4523 5.18977C22.5354 5.14386 22.6277 5.07959 22.7754 4.97859Z" fill="#132644"/>
|
||||
<path d="M10.1758 27.3105C12.4745 28.6142 14.7087 29.8813 16.9428 31.1483C17.3213 31.3595 17.6906 31.3228 18.0599 31.1116C22.1404 28.7795 26.221 26.4566 30.2923 24.1245C30.4215 24.051 30.5415 23.8399 30.5415 23.693C30.5508 19.0379 30.56 14.3921 30.5323 9.74625C30.5323 9.44326 30.3015 9.01173 30.0523 8.86483C27.855 7.57023 25.6301 6.33073 23.4052 5.07286C23.3868 5.06368 23.3498 5.07286 23.2483 5.07286C23.2483 5.24731 23.2483 5.43094 23.2483 5.60539C23.2483 10.1778 23.239 14.741 23.2575 19.3134C23.2575 19.7449 23.1006 19.9469 22.7498 20.1397C18.66 22.4535 14.5794 24.7764 10.4989 27.0993C10.4158 27.1452 10.3235 27.2095 10.1758 27.3105Z" fill="#132644"/>
|
||||
<svg width="15" height="32" viewBox="0 0 15 32" fill="none">
|
||||
<g clip-path="url(#clip0_1662_10901)">
|
||||
<path d="M6.84648 11.0368C6.79238 8.40203 5.70498 5.872 4.29297 3.61958C5.0666 3.15862 5.94842 2.90195 6.84107 3.06957C7.73372 3.23719 8.55063 3.80816 8.93474 4.60436C9.26474 5.30103 9.24851 6.09724 9.19441 6.86201C9.16736 7.20249 9.1349 7.54821 9.0213 7.87298C8.94556 8.0825 8.84277 8.27632 8.72375 8.45965C8.57227 8.70061 8.39915 8.92585 8.22603 9.15109C7.76618 9.76396 7.30633 10.424 6.84648 11.0368Z" fill="#284778"/>
|
||||
<path d="M14.4806 16.1597C14.3291 15.8139 14.1398 15.4839 13.9071 15.1801C13.7773 15.0073 13.6366 14.8449 13.5014 14.6773C13.1714 14.253 13.0632 13.6925 12.652 13.3468C12.23 12.9958 12.0894 12.3672 12.3112 11.8696C12.4032 11.6653 12.5546 11.4872 12.6466 11.2882C12.9171 10.7172 12.7332 10.0467 12.4735 9.47052C12.111 8.66384 11.6079 7.92526 11.0777 7.20763C10.3582 6.22809 9.58997 5.28522 8.77847 4.37378C8.92454 5.15951 8.85421 5.91904 8.65945 6.69953C8.55125 7.12906 8.39977 7.54811 8.20501 7.95145C7.96697 8.44384 7.66401 8.91004 7.36105 9.371C5.58658 12.0687 3.758 14.7349 1.87533 17.3644C0.798744 18.8678 0.425456 20.8478 0.301026 22.6707C0.176597 24.4936 0.539065 26.3689 1.46958 27.9613C2.01058 28.8884 2.73552 29.7056 3.47128 30.5018C3.93653 31.0047 4.47753 31.7799 5.14296 31.9999C5.22952 31.2299 5.37018 30.1927 5.47838 29.428C5.66232 28.1813 6.07889 26.9608 6.71186 25.8608C7.13925 25.1117 7.71811 24.3731 8.55666 24.1007C9.12471 23.9174 9.76309 23.9907 10.3636 24.0431C10.699 24.0169 11.0398 24.0641 11.3753 24.0641C11.7107 24.0641 12.0677 24.0169 12.3382 23.8284C12.6412 23.6188 12.8035 23.2679 12.8576 22.9117C12.9117 22.5555 12.8684 22.1836 12.8468 21.8274C12.8305 21.5917 12.8197 21.3455 12.9333 21.1359C13.1389 20.7483 13.7232 20.565 13.7557 20.1302C13.7719 19.9312 13.6583 19.7478 13.5771 19.5592C13.496 19.3707 13.4581 19.1402 13.5988 18.9883C13.6691 18.9149 13.7665 18.8783 13.8314 18.8049C13.9666 18.6478 13.8909 18.4121 13.7719 18.2445C13.6529 18.0768 13.4906 17.9249 13.4581 17.7259C13.4202 17.5321 13.5176 17.333 13.6583 17.1864C13.7989 17.0397 13.9775 16.9402 14.156 16.8354C14.3237 16.7359 14.5022 16.6049 14.5185 16.4163C14.5239 16.3325 14.4968 16.2487 14.4698 16.1701C14.3562 15.8663 14.1993 15.5782 13.9991 15.3163" fill="#132644"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1662_10901">
|
||||
<rect width="14" height="32" fill="white" transform="translate(0.599609)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Blog</a>
|
||||
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://vac.dev/research-log/">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -240,26 +294,26 @@
|
||||
<div class="text-rectangle102 w-1/2 sm:w-auto md:w-24">
|
||||
<h3 class="text-sm leading-6 mb-5">Developers</h3>
|
||||
<ul>
|
||||
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Quick Starts</a></li>
|
||||
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Docs</a></li>
|
||||
<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Guides</a></li>
|
||||
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://docs.dappconnect.dev/quick_start.html">Quick Starts</a></li>
|
||||
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://docs.dappconnect.dev/">Docs</a></li>
|
||||
<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://docs.dappconnect.dev/guides/index.html">Guides</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-rectangle102 w-1/2 sm:w-auto md:w-24 sm:order-3 xl:w-auto">
|
||||
<h3 class="text-sm leading-6 mb-5">Connect</h3>
|
||||
<ul class="xl:grid xl:grid-cols-2 xl:gap-x-16">
|
||||
<li class="mb-3.5 xl:order-1"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Twitter</a></li>
|
||||
<li class="mb-3.5 xl:order-3"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Discord</a></li>
|
||||
<li class="mb-3.5 xl:order-5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">GitHub</a></li>
|
||||
<li class="mb-3.5 xl:order-2"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Forum</a></li>
|
||||
<li class="xl:order-4"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Blog</a></li>
|
||||
<li class="mb-3.5 xl:order-1"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://twitter.com/dappconnect">Twitter</a></li>
|
||||
<li class="mb-3.5 xl:order-3"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://discord.gg/NgQERkYbHD">Discord</a></li>
|
||||
<li class="mb-3.5 xl:order-5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://github.com/status-im/?q=dappconnect&type=&language=&sort=">GitHub</a></li>
|
||||
<li class="mb-3.5 xl:order-2"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://forum.vac.dev/">Forum</a></li>
|
||||
<li class="xl:order-4"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://vac.dev/research-log/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-rectangle102 w-1/2 -mt-10 sm:w-auto md:w-24 sm:mt-0">
|
||||
<h3 class="text-sm leading-6 mb-5">About us</h3>
|
||||
<ul>
|
||||
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">About</a></li>
|
||||
<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Careers</a></li>
|
||||
<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://status.im/our_team/jobs.html">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,38 +1,44 @@
|
||||
const section = document.getElementById('sectionCode')
|
||||
const string = ' \n { \t\xa0\xa0 "AdvertiseAddr" \n: "YOUR_PUBLIC_IP", \n \t\xa0\xa0 "ListenAddr" \n: "0.0.0.0:30303", \t\xa0\xa0 "HTTPEnabled" \n: true, \t\xa0\xa0 "HTTPHost" \n: "127.0.0.1", \t\xa0\xa0"HTTPPort" \n: 8545, \t\xa0\xa0 "APIModules" \n: "eth,net,web3,admin,mailserver", \t\xa0\xa0 "RegisterTopics" \n : ["whispermail"], \t\xa0\xa0 "WakuConfig" \n: { \t \xa0\xa0\xa0\xa0\xa0\xa0"Enabled" \n : true, \n \xa0\xa0\xa0\xa0} \n }';
|
||||
const array = string.split("");
|
||||
const wrapper = document.getElementById("code")
|
||||
let container = document.getElementById("testText")
|
||||
let timer;
|
||||
|
||||
const menuVisibility = () => {
|
||||
document.querySelector('body').classList.toggle('body-noScroll')
|
||||
document.querySelector('#menu-wrapper').classList.toggle('menu-visible');
|
||||
}
|
||||
|
||||
function writeCode () {
|
||||
if (array.length > 0) {
|
||||
const letter = array.shift()
|
||||
if(letter === '\n') {
|
||||
const newContainer = document.createElement("span")
|
||||
const brakeLine = document.createElement('br')
|
||||
newContainer.classList.add('text-rectangle102', 'text-sm', 'font-special')
|
||||
wrapper.appendChild(newContainer)
|
||||
wrapper.appendChild(brakeLine)
|
||||
container = newContainer
|
||||
} else if (letter === '\t') {
|
||||
const newContainer = document.createElement("span")
|
||||
newContainer.classList.add('text-rectangle99', 'text-sm', 'font-special')
|
||||
wrapper.appendChild(newContainer)
|
||||
container = newContainer
|
||||
}
|
||||
container.innerHTML += letter;
|
||||
} else {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
loopTimer = setTimeout('writeCode()',40);
|
||||
const code = document.querySelector('#code')
|
||||
const content = code.querySelectorAll('span')
|
||||
const codeText = []
|
||||
const codeElements = []
|
||||
|
||||
const codeInitContent = () => {
|
||||
content.forEach(el => {
|
||||
codeText.push(el.innerText)
|
||||
el.innerText = ''
|
||||
codeElements.push(el)
|
||||
})
|
||||
}
|
||||
|
||||
const writeCode = (speed = 50) => {
|
||||
let startWriting = 0
|
||||
let textElement
|
||||
|
||||
codeText.forEach((el, index) => {
|
||||
const text = [...el]
|
||||
|
||||
setTimeout(() => {
|
||||
textElement = codeElements[index]
|
||||
|
||||
text.forEach((char, i) => {
|
||||
setTimeout(() => {
|
||||
char === ' ' ? char = ' ' : char
|
||||
textElement.innerHTML += char
|
||||
}, i * speed)
|
||||
})
|
||||
}, startWriting * speed)
|
||||
startWriting = startWriting + text.length
|
||||
})
|
||||
};
|
||||
|
||||
function isInViewport(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return (
|
||||
@ -45,11 +51,12 @@ function isInViewport(element) {
|
||||
|
||||
function eventOnScroll () {
|
||||
if(isInViewport(section)) {
|
||||
writeCode();
|
||||
writeCode(40)
|
||||
document.removeEventListener('scroll', eventOnScroll);
|
||||
}
|
||||
}
|
||||
|
||||
codeInitContent()
|
||||
document.querySelector('#burger').addEventListener('click', menuVisibility);
|
||||
document.querySelector('.button--close').addEventListener('click', menuVisibility);
|
||||
window.addEventListener('resize', function () {
|
||||
|
||||
@ -15,8 +15,12 @@ module.exports = {
|
||||
rectangle102: '#fff',
|
||||
black: '#000000',
|
||||
blue: '#3A71F9',
|
||||
blueLight: '#73b6f2',
|
||||
grey: '#D5D5D5',
|
||||
green: '#60D086',
|
||||
red: '#f67971',
|
||||
violet: '#b592dc',
|
||||
orange: '#e09350',
|
||||
},
|
||||
container: {
|
||||
padding: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user