Skip to content

Commit

Permalink
add roadmap
Browse files Browse the repository at this point in the history
  • Loading branch information
@alidevjimmy
alidevjimmy committed Sep 10, 2024
1 parent ab43e77 commit 67f90e9
Show file tree
Hide file tree
Showing 6 changed files with 449 additions and 40 deletions.
124 changes: 119 additions & 5 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1066,13 +1066,11 @@ html {
animation: gradient_301 5s ease infinite;
border: double 4px transparent;
background-image: linear-gradient(#161a25, #161a25),
linear-gradient(
137.48deg,
linear-gradient(137.48deg,
#217AFF 10%,
#14376b 45%,
#000000 67%,
#161a25 87%
);
#161a25 87%);
background-origin: border-box;
background-clip: content-box, border-box;
}
Expand All @@ -1091,7 +1089,6 @@ html {
.btn-become-validator strong {
z-index: 2;
color: #ffffff;
text-shadow: 0 0 4px white;
}

#glow {
Expand Down Expand Up @@ -1149,6 +1146,7 @@ html {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}

to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
Expand Down Expand Up @@ -1299,3 +1297,119 @@ html {
/* transform: translateY(-30px); */
transition-duration: 0.3s;
}


.fn_cs_roadmap .step_holder {
padding: 50px;
border-radius: 15px;
margin-bottom: 40px;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, .08);
border-bottom: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.15);
}

.fn_cs_roadmap .step_holder .fn__svg {
width: auto;
height: 15px;
position: absolute
}

.fn_cs_roadmap .step_in {
width: 0;
height: 22px;
position: relative;
overflow: hidden;
transition: .5s;
background-image: url(/images/roadmap.png);
background-repeat: repeat-x;
max-width: 100%!important
}

.fn_cs_hero_slider,.frenify_cards_gallery .o_img,.ripple {
background-size: cover;
background-repeat: no-repeat;
background-position: center center
}

.fn_cs_roadmap .swiper-slide .item {
border-radius: 10px;
box-shadow: 0 5px 20px rgba(112, 100, 233, 0.3);
position: relative
}

.fn_cs_roadmap .swiper-wrapper {
padding: 60px 0 20px
}

.fn_cs_roadmap .swiper-slide .icon {
position: absolute;
display: block;
left: 40px;
width: 20px;
height: 20px;
background: -moz-linear-gradient(90deg,#7064e9,#217AFF);
background: -webkit-linear-gradient(90deg,#7064e9,#217AFF);
background: linear-gradient(to right,#7064e9,#217AFF);
border-radius: 100%;
bottom: 100%;
margin-bottom: 41px
}

.fn_cs_roadmap .swiper-slide .icon:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: #1d1224;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px
}

.fn_cs_roadmap .swiper-slide .phase {
display: block;
width: fit-content;
max-width: 100%;
color: #9ba0b8;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
padding: 0 40px;
background-color: rgba(255,255,255,.1);
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
height: 40px;
line-height: 40px;
overflow: hidden
}

.fn_cs_roadmap .swiper-slide .item_in {
padding: 25px 40px 40px
}

.fn_cs_roadmap .swiper-slide .date {
margin: 0 0 7px
}

.fn_cs_roadmap .swiper-slide .title {
font-size: 18px;
font-weight: 500;
margin: 0 0 20px
}

.slider_holder:after {
z-index: -1;
position: absolute;
top: 23px;
left: 0;
right: 0;
height: 1px;
background-color: rgba(255, 255, 255, .1);
content: '';
}
.slider_holder {
position: relative;
}
178 changes: 177 additions & 1 deletion layouts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
</div>
<div class="mt-10 text-center items-center w-full">
<div class="flex gap-x-2 justify-center" data-aos-duration="1000" data-aos="fade-up">
<a target="_blank" href="https://docs.pactus.org/get-started/become-a-validator/" type="button" class="btn-become-validator">
<a target="_blank" href="https://docs.pactus.org/get-started/become-a-validator/" type="button"
class="btn-become-validator">
<strong>Become a validator</strong>
<div id="container-stars">
<div id="stars"></div>
Expand Down Expand Up @@ -287,6 +288,117 @@ <h3 class="fn__gradient_title"><span class="prefix"></span><span data-from="0"
</div>
</div>
</div>
<div class="mt-[6rem] md:mt-[10rem]">
<div class="container mx-auto">
{{ $roadmap := .Site.Data.roadmap }}
<h1
class="font-bold text-4xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-r from-[#FFFFFF] to-[#999999] self-center">
Roadmap
</h1>
<div class="fn_cs_roadmap">
<div class="step_holder" style="margin-top: 50px;">
<div class="step_in" style="width: 88.8889%;"></div>
</div>
<div class="slider_holder">
<div class="swiper-container swiper-container-horizontal overflow-hidden">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1775px, 0px, 0px);">
{{ $length := len $roadmap }}
{{ range $i := seq 0 (sub $length 1) }}
{{ $ri := sub (sub $length 1) $i }}
{{$value := index $roadmap $ri}}
{{$color := "#0F6CBD"}}
{{if in $value.state "completed"}}
{{$color = "#2CD776"}}
{{else if in $value.state "construct"}}
{{$color = "#F08C16"}}
{{end}}
<div class="swiper-slide" style="width: 315px; margin-right: 40px;">
<div class="item group">
<span class="icon"></span>
<span class="phase" style="background-color: {{$color}};color:white">{{$value.date}}</span>
<div class="item_in">
<div class="block w-full">
<i class="fas {{$value.icon}} text-lg w-[55px] mt-5 h-[55px] text-center content-center place-content-center rounded-xl shadow-lg"
style="color: white;background-color: #14161D;"></i>
</div>
{{if and $value.reference (gt (len $value.reference) 0)}}
<p class="mt-4"><a target="_blank" href="{{$value.reference}}"
class="mb-15 font-bold md:text-2xl text-xl group-hover:text-[#7064e9] transition ease-linear duration-100">{{$value.title}}</a>
</p>
{{else}}
<p class="mb-15 mt-4 font-bold md:text-2xl text-xl transition ease-linear duration-100">
{{$value.title}}</p>
{{end}}
<p class="desc">{{$value.description}}</p>
</div>
</div>
</div>
{{end}}
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span><span
class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>
</div>
</div>
</div>
<img class="absolute -z-10 right-9" src="/images/chains.svg" alt="" />
<div class="mt-[6rem] md:mt-[10rem]">
<div class="container mx-auto">
Expand Down Expand Up @@ -589,6 +701,11 @@ <h6 class="font-medium text-sm mt-2">
url: 'https://api.pacviewer.com/v1/counts',
method: 'GET',
dataType: 'json',
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Headers': 'Content-Type',
},
success: function (data) {
$('#totalBlocks').text(data.totalBlocks || 0);
$('#totalTransactions').text(data.totalTransactions || 0);
Expand All @@ -605,4 +722,63 @@ <h6 class="font-medium text-sm mt-2">
updateCountsFromAPI();
});
</script>

<script>
var roadmapStep = function (t, e, a) {
var n, o = parseInt(t.currentBreakpoint);
switch (o) {
case 1400:
case 1040:
default:
n = 4;
break;
case 1200:
n = 3;
break;
case 768:
n = 1;
}
e.css({
width: (t.activeIndex + n) * a + "%"
});
};

var swiper2 = new Swiper(".fn_cs_roadmap .swiper-container", {
loop: !1,
speed: 1500,
autoplay: {
delay: 5e3,
disableOnInteraction: !1
},
slidesPerView: 4,
spaceBetween: 40,
direction: "horizontal",
loopAdditionalSlides: 10,
watchSlidesProgress: !0,
breakpoints: {
0: {
slidesPerView: 1
},
768: {
slidesPerView: 1
},
1040: {
slidesPerView: 2
},
1200: {
slidesPerView: 3
},
1400: {
slidesPerView: 4
}
}
});
let n = 100 / (swiper2.params.loop ? swiper2.slides.length - 2 : swiper2.slides.length)
let i = $(".step_in");
swiper2.on("slideChange", function () {
roadmapStep(this, i, n);
});


</script>
{{ end }}
5 changes: 4 additions & 1 deletion layouts/partials/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<title>{{ .Title }} | Pactus.org | Pactus</title>


<meta name="keywords" content="pactus, blockchain, nft, smart contract, decentralized, storage, layer 1, web3, pips, proposal, community, consensus, sspos, proof of stake, proof of work, sensifai, aethir, dezh, shield games, pactus blockchain, pacviewer, whitepaper, block explorer, validator, earn, miner, block, transaction, committee, cryptography, pac, decentralized storage, password manager, node">
<meta name="keywords"
content="pactus, blockchain, nft, smart contract, decentralized, storage, layer 1, web3, pips, proposal, community, consensus, sspos, proof of stake, proof of work, sensifai, aethir, dezh, shield games, pactus blockchain, pacviewer, whitepaper, block explorer, validator, earn, miner, block, transaction, committee, cryptography, pac, decentralized storage, password manager, node">

<meta name="description"
content="Pactus is a community-run blockchain technology with a revolutionary, secure, Solid State Proof of Stake Consensus." />
Expand Down Expand Up @@ -50,4 +51,6 @@
<meta name="theme-color" content="#0B0B0F" />

<link href="/css/aos.css" rel="stylesheet" />
<link href="/css/swiper-bundle.min.css" rel="stylesheet" />
<link href="/fontawesome/css/all.min.css" rel="stylesheet" />
</head>
2 changes: 1 addition & 1 deletion layouts/partials/signle-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,6 @@
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#0B0B0F" />

<link href="/fontawesome/css/all.min.css" rel="stylesheet" />
<link href="/fontawesome/css/all.min.css" rel="stylesheet" />

</head>
Loading

0 comments on commit 67f90e9

Please sign in to comment.