feat: implement mod page

This commit is contained in:
daniyal 2024-07-11 17:52:48 +05:00
parent 686c871b27
commit b72e30adf7
12 changed files with 427 additions and 198 deletions

View File

@ -20,6 +20,7 @@
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css"
/> />
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
@ -50,5 +51,6 @@
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,77 @@
import '../styles/cardMod.css'
type ModCardProps = {
backgroundLink: string
}
export const ModCard = ({ backgroundLink }: ModCardProps) => {
return (
<a className='cardModMainWrapperLink' href='mods-inner.html'>
<div className='cardModMain'>
<div
className='cMMPicture'
style={{
background: `url("${backgroundLink}") center / cover no-repeat`
}}
></div>
<div className='cMMBody'>
<h3 className='cMMBodyTitle'>
This is a mod title for an awesome game that will make everyone
happy! The happiest!
</h3>
<p className='cMMBodyText'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero.
<br />
<br />
</p>
</div>
<div className='cMMFoot'>
<div className='cMMFootReactions'>
<div className='cMMFootReactionsElement'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width='1em'
height='1em'
fill='currentColor'
>
<path d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'></path>
</svg>
<p>420</p>
</div>
<div className='cMMFootReactionsElement'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width='1em'
height='1em'
fill='currentColor'
>
<path d='M512 440.1C512 479.9 479.7 512 439.1 512H71.92C32.17 512 0 479.8 0 440c0-35.88 26.19-65.35 60.56-70.85C43.31 356 32 335.4 32 312C32 272.2 64.25 240 104 240h13.99C104.5 228.2 96 211.2 96 192c0-35.38 28.56-64 63.94-64h16C220.1 128 256 92.12 256 48c0-17.38-5.784-33.35-15.16-46.47C245.8 .7754 250.9 0 256 0c53 0 96 43 96 96c0 11.25-2.288 22-5.913 32h5.879C387.3 128 416 156.6 416 192c0 19.25-8.59 36.25-22.09 48H408C447.8 240 480 272.2 480 312c0 23.38-11.38 44.01-28.63 57.14C485.7 374.6 512 404.3 512 440.1z'></path>
</svg>
<p>420</p>
</div>
<div className='cMMFootReactionsElement'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width='1em'
height='1em'
fill='currentColor'
>
<path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
</svg>
<p>420</p>
</div>
</div>
</div>
</div>
</a>
)
}

View File

@ -1,16 +1,37 @@
:root { html {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; background: linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b);
line-height: 1.5; background: -webkit-linear-linear-gradient(
font-weight: 400; to top right,
#1b1b1b,
#232323,
#1b1b1b
);
background: -moz-linear-linear-gradient(
to top right,
#1b1b1b,
#232323,
#1b1b1b
);
min-height: 100%;
display: flex;
flex-direction: column;
scroll-behavior: smooth;
font-family: 'Roboto';
}
color-scheme: light dark; body {
color: rgba(255, 255, 255, 0.87); background: unset;
background-color: #242424; display: flex;
flex-direction: column;
font-synthesis: none; align-items: center;
text-rendering: optimizeLegibility; flex-grow: 1;
-webkit-font-smoothing: antialiased; min-height: 100vh;
-moz-osx-font-smoothing: grayscale; position: relative;
letter-spacing: 1px;
font-size: 16px;
line-height: 25px;
word-break: break-word;
color: #ffffff;
} }
* { * {

View File

@ -1,14 +1,13 @@
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom'
import mainStyles from '../styles/main.module.scss'
import { Footer } from './footer' import { Footer } from './footer'
import { Header } from './header' import { Header } from './header'
export const Layout = () => { export const Layout = () => {
return ( return (
<div className={mainStyles.bodyMain}> <>
<Header /> <Header />
<Outlet /> <Outlet />
<Footer /> <Footer />
</div> </>
) )
} }

View File

@ -1,7 +1,7 @@
import { GameCard } from '../components/GameCard' import { GameCard } from '../components/GameCard'
import { ModCard } from '../components/ModCard'
import '../styles/cardBlogs.css' import '../styles/cardBlogs.css'
import '../styles/cardLists.css' import '../styles/cardLists.css'
import '../styles/cardMod.css'
import '../styles/SimpleSlider.css' import '../styles/SimpleSlider.css'
import '../styles/styles.css' import '../styles/styles.css'
@ -212,82 +212,6 @@ export const HomePage = () => {
) )
} }
type ModCardProps = {
backgroundLink: string
}
const ModCard = ({ backgroundLink }: ModCardProps) => {
return (
<a className='cardModMainWrapperLink' href='mods-inner.html'>
<div className='cardModMain'>
<div
className='cMMPicture'
style={{
background: `url("${backgroundLink}") center / cover no-repeat`
}}
></div>
<div className='cMMBody'>
<h3 className='cMMBodyTitle'>
This is a mod title for an awesome game that will make everyone
happy! The happiest!
</h3>
<p className='cMMBodyText'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula in libero.
<br />
<br />
</p>
</div>
<div className='cMMFoot'>
<div className='cMMFootReactions'>
<div className='cMMFootReactionsElement'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width='1em'
height='1em'
fill='currentColor'
>
<path d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'></path>
</svg>
<p>420</p>
</div>
<div className='cMMFootReactionsElement'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width='1em'
height='1em'
fill='currentColor'
>
<path d='M512 440.1C512 479.9 479.7 512 439.1 512H71.92C32.17 512 0 479.8 0 440c0-35.88 26.19-65.35 60.56-70.85C43.31 356 32 335.4 32 312C32 272.2 64.25 240 104 240h13.99C104.5 228.2 96 211.2 96 192c0-35.38 28.56-64 63.94-64h16C220.1 128 256 92.12 256 48c0-17.38-5.784-33.35-15.16-46.47C245.8 .7754 250.9 0 256 0c53 0 96 43 96 96c0 11.25-2.288 22-5.913 32h5.879C387.3 128 416 156.6 416 192c0 19.25-8.59 36.25-22.09 48H408C447.8 240 480 272.2 480 312c0 23.38-11.38 44.01-28.63 57.14C485.7 374.6 512 404.3 512 440.1z'></path>
</svg>
<p>420</p>
</div>
<div className='cMMFootReactionsElement'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width='1em'
height='1em'
fill='currentColor'
>
<path d='M256 32C114.6 32 .0272 125.1 .0272 240c0 49.63 21.35 94.98 56.97 130.7c-12.5 50.37-54.27 95.27-54.77 95.77c-2.25 2.25-2.875 5.734-1.5 8.734C1.979 478.2 4.75 480 8 480c66.25 0 115.1-31.76 140.6-51.39C181.2 440.9 217.6 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32z'></path>
</svg>
<p>420</p>
</div>
</div>
</div>
</div>
</a>
)
}
type BlogCardProps = { type BlogCardProps = {
backgroundLink: string backgroundLink: string
} }

186
src/pages/mods.tsx Normal file
View File

@ -0,0 +1,186 @@
import '../styles/filters.css'
import '../styles/pagination.css'
import '../styles/styles.css'
import '../styles/search.css'
import { ModCard } from '../components/ModCard'
export const ModsPage = () => {
return (
<div className='InnerBodyMain'>
<div className='ContainerMain'>
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
<div className='IBMSecMain'>
<div className='SearchMainWrapper'>
<div className='IBMSMTitleMain'>
<h2 className='IBMSMTitleMainHeading'>Mods</h2>
</div>
<div className='SearchMain'>
<div className='SearchMainInside'>
<div className='SearchMainInsideWrapper'>
<input type='text' className='SMIWInput' />
<button className='btn btnMain SMIWButton' type='button'>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
width='1em'
height='1em'
fill='currentColor'
>
<path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div className='IBMSecMain'>
<div className='FiltersMain'>
<div className='FiltersMainElement'>
<div className='dropdown dropdownMain'>
<button
className='btn dropdown-toggle btnMain btnMainDropdown'
aria-expanded='false'
data-bs-toggle='dropdown'
type='button'
>
Latest
</button>
<div className='dropdown-menu dropdownMainMenu'>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Latest
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Oldest
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Best Rated
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Worst Rated
</a>
</div>
</div>
</div>
<div className='FiltersMainElement'>
<div className='dropdown dropdownMain'>
<button
className='btn dropdown-toggle btnMain btnMainDropdown'
aria-expanded='false'
data-bs-toggle='dropdown'
type='button'
>
Show all (filtered)
</button>
<div className='dropdown-menu dropdownMainMenu'>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Show all (filtered)
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Show all (unfiltered)
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Show from my follow list
</a>
</div>
</div>
</div>
<div className='FiltersMainElement'>
<div className='dropdown dropdownMain'>
<button
className='btn dropdown-toggle btnMain btnMainDropdown'
aria-expanded='false'
data-bs-toggle='dropdown'
type='button'
>
Hide NSFW
</button>
<div className='dropdown-menu dropdownMainMenu'>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Hide NSFW
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Show NSFW
<br />
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Only show NSFW
</a>
</div>
</div>
</div>
<div className='FiltersMainElement'>
<div className='dropdown dropdownMain'>
<button
className='btn dropdown-toggle btnMain btnMainDropdown'
aria-expanded='false'
data-bs-toggle='dropdown'
type='button'
>
Show From: DEG Mods
</button>
<div className='dropdown-menu dropdownMainMenu'>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Show From: DEG Mods
</a>
<a className='dropdown-item dropdownMainMenuItem' href='#'>
Show All
</a>
</div>
</div>
</div>
</div>
</div>
<div className='IBMSecMain IBMSMListWrapper'>
<div className='IBMSMList'>
<ModCard backgroundLink='https://image.nostr.build/65a11a00bb99c11561735f861c51b498cf9dc07d02beff7303fe7f7ab52f3987.jpg' />
<ModCard backgroundLink='https://web.archive.org/web/20240215093752im_/https://staticdelivery.nexusmods.com/mods/6144/images/headers/13_1707966408.jpg' />
<ModCard backgroundLink='https://steamuserimages-a.akamaihd.net/ugc/2013708095892656347/39A93A2B1EB05E725214373849F8E37FCEB4C2EA/?imw=512&amp;imh=256&amp;ima=fit&amp;impolicy=Letterbox&amp;imcolor=%23000000&amp;letterbox=true' />
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
<ModCard backgroundLink='/assets/img/DEGMods%20Placeholder%20Img.png' />
</div>
</div>
<div className='IBMSecMain'>
<div className='PaginationMain'>
<div className='PaginationMainInside'>
<a
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
href='#'
>
<i className='fas fa-chevron-left'></i>
</a>
<div className='PaginationMainInsideBoxGroup'>
<a className='PaginationMainInsideBox PMIBActive' href='#'>
<p>1</p>{' '}
</a>
<a className='PaginationMainInsideBox' href='#'>
<p>2</p>{' '}
</a>
<a className='PaginationMainInsideBox' href='#'>
<p>3</p>
</a>
<p className='PaginationMainInsideBox PMIBDots'>...</p>
<a className='PaginationMainInsideBox' href='#'>
<p>8</p>
</a>
</div>
<a
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
href='#'
>
<i className='fas fa-chevron-right'></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
)
}

View File

@ -1,5 +1,6 @@
import { GamesPage } from '../pages/games' import { GamesPage } from '../pages/games'
import { HomePage } from '../pages/home' import { HomePage } from '../pages/home'
import { ModsPage } from '../pages/mods'
export const appRoutes = { export const appRoutes = {
index: '/', index: '/',
@ -25,7 +26,7 @@ export const routes = [
}, },
{ {
path: appRoutes.mods, path: appRoutes.mods,
element: <HomePage /> element: <ModsPage />
}, },
{ {
path: appRoutes.about, path: appRoutes.about,

27
src/styles/filters.css Normal file
View File

@ -0,0 +1,27 @@
.FiltersMain {
width: 100%;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
grid-gap: 15px;
/*padding: 10px;*/
/*border-radius: 10px;*/
/*border: solid 1px rgba(255,255,255,0.1);*/
flex-wrap: wrap;
}
.FiltersMainElement {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(255,255,255,0.5);
}
@media (max-width: 576px) {
.FiltersMainElement {
flex-grow: 1;
}
}

View File

@ -1,18 +1,3 @@
.bodyMain {
background: unset;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
min-height: 100vh;
position: relative;
letter-spacing: 1px;
font-size: 16px;
line-height: 25px;
word-break: break-word;
color: #ffffff;
}
.ContainerMain { .ContainerMain {
max-width: 1400px; max-width: 1400px;
width: 100%; width: 100%;

View File

@ -1,29 +1,3 @@
.htmlMain {
Background: linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b);
Background: -webkit-linear-linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b);
Background: -moz-linear-linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b);
min-height: 100%;
display: flex;
flex-direction: column;
scroll-behavior: smooth;
font-family: 'Roboto';
}
.bodyMain {
background: unset;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
min-height: 100vh;
position: relative;
letter-spacing: 1px;
font-size: 16px;
line-height: 25px;
word-break: break-word;
color: #ffffff;
}
.ContainerMain { .ContainerMain {
max-width: 1400px; max-width: 1400px;
width: 100%; width: 100%;
@ -48,7 +22,12 @@ p {
padding: 25px 0; padding: 25px 0;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0; margin: 0;
} }
@ -151,7 +130,12 @@ h1, h2, h3, h4, h5, h6 {
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626); background: linear-gradient(
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.05)
),
linear-gradient(to top right, #262626, #292929, #262626),
linear-gradient(to top right, #262626, #292929, #262626);
z-index: -1; z-index: -1;
border-radius: 10px; border-radius: 10px;
} }
@ -215,7 +199,11 @@ h1, h2, h3, h4, h5, h6 {
border: unset; border: unset;
padding: 5px 15px; padding: 5px 15px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626); background: linear-gradient(
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03)
),
linear-gradient(to top right, #262626, #292929, #262626);
font-size: 16px; font-size: 16px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -245,7 +233,11 @@ h1, h2, h3, h4, h5, h6 {
.dropdownMainMenuItem { .dropdownMainMenuItem {
transition: ease 0.4s; transition: ease 0.4s;
background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626); background: linear-gradient(
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03)
),
linear-gradient(to top right, #262626, #292929, #262626);
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
border-radius: 5px; border-radius: 5px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
@ -261,7 +253,11 @@ h1, h2, h3, h4, h5, h6 {
.dropdownMainMenuItem:hover { .dropdownMainMenuItem:hover {
transition: ease 0.4s; transition: ease 0.4s;
background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626); background: linear-gradient(
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.05)
),
linear-gradient(to top right, #262626, #292929, #262626);
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
text-decoration: unset; text-decoration: unset;
} }
@ -416,7 +412,7 @@ h1, h2, h3, h4, h5, h6 {
.CheckboxMain::before { .CheckboxMain::before {
transition: ease 0.4s; transition: ease 0.4s;
content: "\2713"; content: '\2713';
width: 24px; width: 24px;
height: 24px; height: 24px;
transform: scale(0); transform: scale(0);
@ -517,4 +513,3 @@ a:hover {
flex-direction: row; flex-direction: row;
grid-gap: 10px; grid-gap: 10px;
} }