Skip to content

Commit

Permalink
Merge pull request #372 from Sami3160/master
Browse files Browse the repository at this point in the history 
Enhanced UI of About page
  • Loading branch information
@vikhyatsingh123
vikhyatsingh123 authored Dec 26, 2023
2 parents e0956e6 + 4c8dc7b commit db3939b
Show file tree
Hide file tree
Showing 8 changed files with 496 additions and 130 deletions.
354 changes: 340 additions & 14 deletions about.css
View file

Large diffs are not rendered by default.

130 changes: 105 additions & 25 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,26 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/style.css" />
<link rel="favicon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="index.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Righteous&display=swap"
Expand All @@ -26,35 +39,66 @@
<title>About</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand navTitle" href="index.html"
><i class="fas fa-desktop mr-2"></i>SlugTerra</a
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<nav class="navbar navbar-expand-lg navbar-dark p-3 mb-2 text-white">
<a class="navbar-brand navTitle" href="index.html">
<img class="logo-img" src="./images/logo/slugterra_logo.png" alt="no img" />
</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item itemNav">
<a class="nav-link" class="active" href="index.html#header">Home</a>
</li>
<li class="nav-item itemNav">
<a class="nav-link" href="index.html#gallery-title">Slugs</a>
</li>
<li class="nav-item itemNav">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="itemNav navBtn"><a class="nav-link" href="index.html#header">Home</a></li>

<li class="itemNav navBtn"><a class="nav-link" href="index.html#gallery-title">Slugs</a></li>

<li class="itemNav navBtn"><a class="nav-link" href="index.html#heroes">Heroes</a></li>

<li class="itemNav navBtn"><a class="nav-link" href="about.html">About</a></li>

</ul>
</div>
</nav>
<!-- <div class="data-container">
<h1>Current data on site</h1>
<div class="heroC">
<h3>Total Number of Hero cards</h3>
</div>
<div class="slugsC">
<h3>Total Number of Slugs cards</h3>
</div>
<div class="eslugsC">
<h3>Total Number of Elemental Slugs cards</h3>
</div>
</div> -->
<div class="extra" style="background-color: #FF4F04; width:fit-content;margin: auto;">
<h1 style="color: #000; text-shadow: 0 4px 8px rgba(255, 79, 4, 0.5); padding: 10px; margin: 10px;text-shadow:0 2px 15px white;">Know more about us!</h1>
</div>
<h1 style="color: aliceblue;text-shadow: 0 5px 15px #FF4F04;">Current data on site</h1>
<div class="top-data">
<div class="wrapper">
<div class="data-container" id="a0">
<i class="fas fa-male"></i>
<span class="num" data-val="20" id="hero">000</span>
<span class="text">Heros</span>
</div>
<div class="data-container" id="a1">
<i class="fas fa-dragon"></i>
<span class="num" data-val="200" id="slug">000</span>
<span class="text">Slugs</span>
</div>
<div class="data-container" id="a2">
<i class="fas fa-fire"></i>
<span class="num" data-val="15" id="eleslug">000</span>
<span class="text">Elemental Slugs</span>
</div>
</div>
</div>

<div class="line" style="height: 3px;background-color: rgb(255, 153, 0);margin: 30px 10px ;"></div>
<div class="container">
<h1 class="about-title">
<b>This Project Is Developed by Vikhyat Singh</b>
Expand Down Expand Up @@ -133,7 +177,7 @@ <h1 class="about-title">
<div class="face face1">
<div class="content">
<div class="icon">
<i class="fab fa-instagram" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</div>
Expand All @@ -154,10 +198,17 @@ <h1 class="about-title">



<div id="buttons" class="text-center" style="margin-top: 5%;">
<!-- <div id="buttons" class="text-center" style="margin-top: 5%;">
<a id="end1" href="index.html" class="btn btn-outline-dark">Home</a>
</div> -->
<div id="btnP">
<a href="/index.html">
<button id="btn1" >To Home!</button>
</a>
</div>
<div class="footer">
<marquee behavior="" direction="right">This website is built by Vikhyat Singh | © All Rights Reserved</marquee>
</div>

<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
Expand All @@ -178,5 +229,34 @@ <h1 class="about-title">
$('.navbar-collapse').collapse('hide');
});
</script>
<script>
let hero=document.getElementById('hero')
let slug=document.getElementById('slug')
let eleslug=document.getElementById('eleslug')
let data=localStorage.getItem('data')
data=JSON.parse(data)
hero.dataset.val=(data['heros']).toString()
slug.dataset.val=(data['slugs']).toString()
eleslug.dataset.val=(data['eleslugs']).toString()

console.log(data['heros'])
window.onload=(event)=>{
let valueDisplays = document.querySelectorAll(".num");
let interval = 2000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});

}
</script>
</body>
</html>
Binary file added fonts/CanterBold.otf
View file
Binary file not shown.
Binary file added fonts/CanterLight.otf
View file
Binary file not shown.
Binary file added images/bg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 26 additions & 85 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ <h1 class="gallery-head">Slugs - Gallery</h1>
<div class="Explore"></div>
<section id="gallery">
<div class="container">
<div class="row">
<div class="row" id="slugs">
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
Expand Down Expand Up @@ -3315,7 +3315,7 @@ <h1 class="gallery-head">
</div>
<section id="gallery">
<div class="container">
<div class="row">
<div class="row" id="eleslugs">
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="./images/fire.png" alt="" />
Expand Down Expand Up @@ -3873,7 +3873,7 @@ <h1 class="gallery-head"> <img class="elemental" src="./images/logo-48.png" alt=
</div>
<section id="gallery">
<div class="container">
<div class="row">
<div class="row" id="hero">
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="images/Eli_shane.webp" alt="Eli shane" />
Expand Down Expand Up @@ -4020,22 +4020,6 @@ <h5 class="card-title">Lian</h5>
</div>
</div>

<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
src="https://static.wikia.nocookie.net/slugterra/images/3/35/Ice_Elemental.png/revision/latest?cb=20191105232428"
alt="">
<div class="card-body">
<h5 class="card-title">Ice Elemental</h5>
<p class="card-text">The Ice Elemental is one of the Elemental Slugs. He looks like a Buffed up
MegaMorph
Frostcrawler and is one of the 5 new elementals to come to slugterra.</p>
<a href="https://slugterra.fandom.com/wiki/Ice_Elemental" class="contributor-name">Ice Elemental Slug
</a>
</div>
</div>
</div>

<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
Expand All @@ -4049,73 +4033,28 @@ <h5 class="card-title">Bludgeon</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
src="https://static.wikia.nocookie.net/slugterra/images/3/35/Ice_Elemental.png/revision/latest?cb=20191105232428"
alt="">
<div class="card-body">
<h5 class="card-title">Ice Elemental</h5>
<p class="card-text">The Ice Elemental is one of the Elemental Slugs. He looks like a Buffed up
MegaMorph
Frostcrawler and is one of the 5 new elementals to come to slugterra.</p>
<a href="https://slugterra.fandom.com/wiki/Ice_Elemental" class="contributor-name">Ice Elemental Slug
</a>
</div>
</div>
<div class="card">
<img class="card-img-top"
src="https://static.wikia.nocookie.net/slugterra/images/3/35/Ice_Elemental.png/revision/latest?cb=20191105232428"
alt="">
<div class="card-body">
<h5 class="card-title">Ice Elemental</h5>
<p class="card-text">The Ice Elemental is one of the Elemental Slugs. He looks like a Buffed up
MegaMorph
Frostcrawler and is one of the 5 new elementals to come to slugterra.</p>
<a href="https://slugterra.fandom.com/wiki/Ice_Elemental" class="contributor-name">Ice Elemental Slug
</a>
</div>
</div>
</div>

<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
src="https://static.wikia.nocookie.net/slugterra/images/c/ce/Opening_Rammstone.png/revision/latest?cb=20130221032847"
alt="">
<div class="card-body">
<h5 class="card-title">Bludgeon</h5>
<p class="card-text">Bludgeon is a Rammstone Slug that seems to have originally belonged of Kord Zane,
although now appears to be shared amongst the Shane Gang.</p>
<a href="https://github.com/Tashuuuu" class="contributor-name">Contributed by - Akriti Sengar</a>
</div>
</div>

</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
src="https://static.wikia.nocookie.net/slugterra/images/8/82/Spectre%282%29.png/revision/latest?cb=20160117212918"
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
src="https://static.wikia.nocookie.net/slugterra/images/3/35/Ice_Elemental.png/revision/latest?cb=20191105232428"
alt="">
<div class="card-body">
<h5 class="card-title">Frightgeist</h5>
<p class="card-text">Frightgeists are rare psychic element Slugs with cyan skin and white patterns on
their
body. Their protoform has a skeletal pattern. Its first major appearance is in the episode "Deadweed"
and
is found in the cavern of the same name. This slug has mostly fear-related moves. They are notable for
being the only known slug who can directly attack a Darkbane.</p>
<a href="https://slugterra.fandom.com/wiki/Frightgeist" class="contributor-name">Contributed by -
VishalAggarwal2</a>
<div class="card-body">
<h5 class="card-title">Ice Elemental</h5>
<p class="card-text">The Ice Elemental is one of the Elemental Slugs. He looks like a Buffed up
MegaMorph
Frostcrawler and is one of the 5 new elementals to come to slugterra.</p>
<a href="https://slugterra.fandom.com/wiki/Ice_Elemental" class="contributor-name">Ice Elemental Slug
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">

<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top"
src="https://static.wikia.nocookie.net/slugterra/images/8/82/Spectre%282%29.png/revision/latest?cb=20160117212918"
alt="">
src="https://static.wikia.nocookie.net/slugterra/images/8/82/Spectre%282%29.png/revision/latest?cb=20160117212918"
alt="">
<div class="card-body">
<h5 class="card-title">Frightgeist</h5>
<p class="card-text">Frightgeists are rare psychic element Slugs with cyan skin and white patterns on
Expand All @@ -4124,13 +4063,14 @@ <h5 class="card-title">Frightgeist</h5>
and
is found in the cavern of the same name. This slug has mostly fear-related moves. They are notable for
being the only known slug who can directly attack a Darkbane.</p>
<a href="https://slugterra.fandom.com/wiki/Frightgeist" class="contributor-name">Contributed by -
VishalAggarwal2</a>
<a href="https://slugterra.fandom.com/wiki/Frightgeist" class="contributor-name">Contributed by -
VishalAggarwal2</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section>
Expand Down Expand Up @@ -4169,6 +4109,7 @@ <h5 class="card-title">Frightgeist</h5>
<script src="indexdarkmode.js"></script>
<script src="searchbar.js"></script>
<script src="./scrollEffect.js"></script>
<script src="js/index.js"></script>

<script src="scrolltotop.js"></script>
</div>
Expand Down
5 changes: 5 additions & 0 deletions js/count.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"heros":"0",
"eleslugs":"0",
"slugs":"0"
}
26 changes: 20 additions & 6 deletions js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
var anchorData = document.getElementsByTagName('a');
var anchorDataLength = anchorData.length;
for(let i = 0; i < anchorDataLength; i++){
if(anchorData[i].innerHTML.includes('Contributed by -')) {
anchorData[i].innerHTML = anchorData[i].innerHTML.replace('Contributed by -', 'Contributor</br>');
// var anchorData = document.getElementsByTagName('a');
// var anchorDataLength = anchorData.length;
// for(let i = 0; i < anchorDataLength; i++){
// if(anchorData[i].innerHTML.includes('Contributed by -')) {
// anchorData[i].innerHTML = anchorData[i].innerHTML.replace('Contributed by -', 'Contributor</br>');
// }
// }

const path="./count.json"
var heros = document.getElementById("hero")
var slugs = document.getElementById("slugs")
var eleslugs = document.getElementById("eleslugs")

window.onload=(event)=>{
data={
heros:heros.childElementCount,
slugs:slugs.childElementCount,
eleslugs:eleslugs.childElementCount,
}
}
localStorage.setItem("data",JSON.stringify(data))
}

0 comments on commit db3939b

Please sign in to comment.