Skip to content

Commit

Permalink
Adjust dashboard to be more responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@DemogorGod
DemogorGod committed Jun 11, 2022
1 parent 5381a2e commit d4674bd
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 123 deletions.
8 changes: 5 additions & 3 deletions apps/website/src/components/Puddles.vue → apps/website/src/pages/Puddles.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ onMounted(() => {
})
const randomPuddle = Math.floor(Math.random() * puddleStyles.value.length)
puddleStyles.value[randomPuddle] = {
'fill': 'rgba(249, 158, 76, 0.80)',
'filter': 'drop-shadow( 12px 0px 2px rgba(0, 0, 0, .45))',
'fill': 'rgba(249, 158, 76, 10)',
'filter': 'drop-shadow( 12px 0px 2px rgba(0, 0, 0, .65))',
'transition': ' all 3.5s ease-out',
}
}, 3000)
Expand Down Expand Up @@ -393,7 +393,9 @@ onMounted(() => {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
opacity: 1;
}
Expand Down
236 changes: 116 additions & 120 deletions apps/website/src/pages/index/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { ArrowRightIcon } from '@heroicons/vue/solid'
import { ref, onMounted } from 'vue'
import Puddles from '@/components/Puddles.vue'
import Puddles from '../Puddles.vue'
const email = ref('')
async function onSubmit() {
Expand Down Expand Up @@ -45,6 +45,7 @@ const hideMessages = () => {
// Create function that does email validation
function validateEmail(email: string) {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const valid = re.test(String(email).toLowerCase())
console.log('valid :>> ', valid)
Expand All @@ -66,9 +67,9 @@ onMounted(() => {
</script>

<template>
<div class="pb-[50px]">
<div class="p-[50px]">
<div class="flex flex-wrap">
<div class="pl-[100px] pt-[80px] basis-1/2 ">
<div class="min-w-[375px] w-1/2">
<button
class="flex bg-[#F36F38]/[0.13] hover:bg-[#F36F38]/[0.25] py-1 rounded-3xl text-[#F36F38] w-[270px] text-sm"
@click="$router.push('/whitepaper')"
Expand Down Expand Up @@ -107,15 +108,15 @@ onMounted(() => {
<input
v-model="email"
type="text"
placeholder="Enter your email"
placeholder="Sign up for early access"
class="border border-[#D0D5DD] rounded-md px-4 py-2 col-span-3 input-text text-[#F36F38]"
@click="hideMessages"
>
<button
type="submit"
class="bg-[#F36F38] button-text text-white py-2 px-4 rounded-md w-[130px] hover:bg-[#F36F38]/[.75]"
>
Get Started
Early Access
</button>
</div>
<div
Expand All @@ -125,6 +126,7 @@ onMounted(() => {
Thank you for submitting!
</div>
<div
v-show="email.length > 0"
id="invalid-message"
class="small-text text-[#7d0101] pl-[5px]"
>
Expand All @@ -133,138 +135,132 @@ onMounted(() => {
<span class="small-text text-[#667085] pl-[5px]">We won't spam you. We promise.</span>
</form>
</div>
<div class="basis-1/2 relative">
<div class="min-w-[370px] w-1/2 h-[500px] relative overflow-hidden">
<Puddles class="absolute right-[-300px] top-[-200px]" />
</div>
<div class="w-full h-[400px] relative my-[100px]">
<div
v-if="currentSlide === 0"
class="slideshow"
>
<div
class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
</div>

<div class="border w-full p-[50px] bg-[#c4c4c4]/[.5] mt-[100px] min-w-[395px]">
<div
v-if="currentSlide === 0"
class="flex flex-wrap slideshow"
>
<div class="min-w-[375px] w-1/2 pl-[50px] pt-[50px] slideshow">
<img
src="/Dashboard.png"
class="p-[5%] h-[90%] object-cover"
alt=""
>
<div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
<img
src="/Dashboard.png"
class="p-[5%] h-[90%] object-cover"
alt=""
>
</div>
<div class="min-w-[50%] w-[50%] text-center">
<h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
<span class="text-[#F36F38] font-extrabold">Manage</span> your
assets and earnings across chains. See all of your coins and NFTs
in one dashboard.
</h1>
</div>
</div>
</div>
<div class="min-w-[375px] w-1/2 pt-[50px] pr-[50px]">
<h1 class="text-[42px] text-left ">
<span class="text-[#F36F38] font-extrabold">Manage</span> your
assets and earnings across chains. See all of your coins and NFTs
in one dashboard.
</h1>
</div>
</div>
<div
v-if="currentSlide === 1"
class="flex flex-wrap slideshow"
>
<div
v-if="currentSlide === 1"
class="slideshow"
class="min-w-[375px] w-1/2 pl-[50px] pt-[50px]"
>
<div
class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
<img
src="/earn.png"
class="p-[5%] h-[90%] object-cover"
alt=""
>
<div class="min-w-[50%] w-[50%] text-center">
<h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
<span class="text-[#F36F38] font-extrabold">Earn</span> by staking
your assets to high performing validators. Participate in
liquidity pools. Help keep staking decentralized with a strong set
of independent validators.
</h1>
</div>
<div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
<img
src="/earn.png"
class="p-[5%] h-[90%] object-cover"
alt=""
>
</div>
</div>
</div>
<div class="min-w-[375px] w-1/2 pt-[50px] pr-[50px]">
<h1 class="text-[42px] text-left ">
<span class="text-[#F36F38] font-extrabold">Earn</span> by staking
your assets to high performing validators. Participate in
liquidity pools. Help keep staking decentralized with a strong set
of independent validators.
</h1>
</div>
</div>
<div
v-if="currentSlide === 2"
class="flex flex-wrap slideshow"
>
<div
v-if="currentSlide === 2"
class="slideshow"
class="min-w-[375px] w-1/2 pl-[50px] pt-[50px]"
>
<div
class="flex flex-row flex-wrap bg-[#c4c4c4]/[.5] p-10 min-w-[375px]"
<img
src="/earn3.png"
class="p-[5%] h-[90%] object-cover"
alt=""
>
<div class="text-center min-w-[325px] w-[50%] min-h-[300px]">
<img
src="/earn3.png"
class="p-[5%] h-[90%] object-cover"
alt=""
>
</div>
<div class="min-w-[50%] w-[50%] text-center">
<h1 class="text-[32px] p-[2.5%] min-w-[325px] text-left ">
<span class="text-[#F36F38] font-extrabold">Learn</span> about the
latest airdops, mints, and protocol news. Stay safe with built-in
security features like smart contract scanning.
</h1>
</div>
</div>
</div>
<div class="w-full h-1 border border-red ">
<div
class="bg-[#F36F38]/[.5] h-full"
:style="{ width: slideshowProgress + '%' }"
/>
<div class="min-w-[375px] w-1/2 pt-[50px] pr-[50px]">
<h1 class="text-[42px] text-left ">
<span class="text-[#F36F38] font-extrabold">Learn</span> about the
latest airdops, mints, and protocol news. Stay safe with built-in
security features like smart contract scanning.
</h1>
</div>
<div class="grid grid-rows-2 text-center py-[50px]">
<div class="flex justify-center gap-4">
<a
href="https://mobile.twitter.com/CasimirAssets"
target="_blank"
class="w-[25px]"
>
<img
src="/twitter.svg"
alt=""
class="border"
>
</a>
</div>
<div class="w-full h-1 border border-red ">
<div
class="bg-[#F36F38]/[.5] h-full"
:style="{ width: slideshowProgress + '%' }"
/>
</div>
</div>

<a
href="https://discord.gg/hkJD9gnN"
target="_blank"
class="w-[25px]"
>
<img
src="/discord.svg"
alt=""
>
</a>
<div class="flex flex-wrap justify-center mt-[200px]">
<div class="flex justify-center gap-4">
<a
href="https://mobile.twitter.com/CasimirAssets"
target="_blank"
class="w-[25px]"
>
<img
src="/twitter.svg"
alt=""
class="border"
>
</a>

<a
href="https://github.com/consensusnetworks/casimir"
target="_blank"
class="w-[25px]"
>
<img
src="/github.svg"
alt=""
>
</a>
</div>
<div class="flex justify-center w-full pt-4">
<img
src="/copyrightIcon.svg"
alt=""
class="w-[20px]"
>
<a
href="https://consensusnetworks.com/"
target="_blank"
class="text-[#F36F38] mx-4"
>Consensus Networks</a>
<span> | All Right Reserved</span>
</div>
</div>
<a
href="https://discord.gg/hkJD9gnN"
target="_blank"
class="w-[25px]"
>
<img
src="/discord.svg"
alt=""
>
</a>

<a
href="https://github.com/consensusnetworks/casimir"
target="_blank"
class="w-[25px]"
>
<img
src="/github.svg"
alt=""
>
</a>
</div>
</div>
<div class="flex flex-wrap justify-center">
<img
src="/copyrightIcon.svg"
alt=""
class="w-[20px]"
>
<a
href="https://consensusnetworks.com/"
target="_blank"
class="text-[#F36F38] mx-4"
>Consensus Networks</a>
<span> | All Right Reserved</span>
</div>
</div>
</template>

Expand Down

0 comments on commit d4674bd

Please sign in to comment.