generated from Templates_CodeFirst/templateHtmlCss
renommage du fichier pour empecher le 403
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Pierre Ferreira
1 year ago
parent
8c45095b29
commit
da9dbf4e34
@ -1,296 +1,296 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Pifolio</title>
|
<title>Pifolio</title>
|
||||||
<link rel="icon" type="image/png" href="logo/slime.png" />
|
<link rel="icon" type="image/png" href="logo/slime.png" />
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="topnav">
|
<nav class="topnav">
|
||||||
<a href="#about">À propos</a>
|
<a href="#about">À propos</a>
|
||||||
<a href="#parcour">Mon parcour</a>
|
<a href="#parcour">Mon parcour</a>
|
||||||
<a href="#projects">Projets</a>
|
<a href="#projects">Projets</a>
|
||||||
<a href="#contact">Contact</a>
|
<a href="#contact">Contact</a>
|
||||||
<div class="container" style="display: flex; justify-content: end; margin-right: 10px;">
|
<div class="container" style="display: flex; justify-content: end; margin-right: 10px;">
|
||||||
<label class="toggle" for="theme-toggle">
|
<label class="toggle" for="theme-toggle">
|
||||||
<input id="theme-toggle" class="input" type="checkbox">
|
<input id="theme-toggle" class="input" type="checkbox">
|
||||||
<div class="icon icon--moon">
|
<div class="icon icon--moon">
|
||||||
<svg height="32" width="32" fill="white" viewBox="0 0 24 24">
|
<svg height="32" width="32" fill="white" viewBox="0 0 24 24">
|
||||||
<path clip-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" fill-rule="evenodd"></path>
|
<path clip-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" fill-rule="evenodd"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="icon icon--sun">
|
<div class="icon icon--sun">
|
||||||
<svg height="32" width="32" fill="white" viewBox="0 0 24 24">
|
<svg height="32" width="32" fill="white" viewBox="0 0 24 24">
|
||||||
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"></path>
|
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="accueil">
|
<div class="accueil">
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<div class="nine">
|
<div class="nine">
|
||||||
<h1>Pierre Ferreira<span>Développeur</span></h1>
|
<h1>Pierre Ferreira<span>Développeur</span></h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Loader -->
|
<!-- Loader -->
|
||||||
<div class="loader-container">
|
<div class="loader-container">
|
||||||
<div class="loader triangle">
|
<div class="loader triangle">
|
||||||
<svg viewBox="0 0 86 80">
|
<svg viewBox="0 0 86 80">
|
||||||
<polygon points="43 8 79 72 7 72"></polygon>
|
<polygon points="43 8 79 72 7 72"></polygon>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section id="about" class="section">
|
<section id="about" class="section">
|
||||||
<h2 class="mainTitle">À propos de moi</h2>
|
<h2 class="mainTitle">À propos de moi</h2>
|
||||||
<p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p>
|
<p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p>
|
||||||
<h2 class="text-title">Centres d'intéret</h2>
|
<h2 class="text-title">Centres d'intéret</h2>
|
||||||
<div class="about-deck">
|
<div class="about-deck">
|
||||||
<div class="about-card-container">
|
<div class="about-card-container">
|
||||||
<div class="about-card">
|
<div class="about-card">
|
||||||
<div class="about-front-content">
|
<div class="about-front-content">
|
||||||
<img src="logo/cyclisme.png" alt="Cyclisme"/>
|
<img src="logo/cyclisme.png" alt="Cyclisme"/>
|
||||||
<p>Cyclisme</p>
|
<p>Cyclisme</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="about-content">
|
<div class="about-content">
|
||||||
<p class="about-heading">Cyclisme</p>
|
<p class="about-heading">Cyclisme</p>
|
||||||
<p>
|
<p>
|
||||||
Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir.
|
Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir.
|
||||||
J'aime me balader en montagne et découvrir de nouveaux paysages.
|
J'aime me balader en montagne et découvrir de nouveaux paysages.
|
||||||
Ou tout simplement me deplacer en vélo.
|
Ou tout simplement me deplacer en vélo.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="about-card-container">
|
<div class="about-card-container">
|
||||||
<div class="about-card">
|
<div class="about-card">
|
||||||
<div class="about-front-content">
|
<div class="about-front-content">
|
||||||
<img src="logo/muscu.png" alt="Musculation"/>
|
<img src="logo/muscu.png" alt="Musculation"/>
|
||||||
<p>Musculation</p>
|
<p>Musculation</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="about-content">
|
<div class="about-content">
|
||||||
<p class="about-heading">Musculation</p>
|
<p class="about-heading">Musculation</p>
|
||||||
<p>
|
<p>
|
||||||
Cela va faire maintenant 1 ans que je pratique la musculation.
|
Cela va faire maintenant 1 ans que je pratique la musculation.
|
||||||
Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps.
|
Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps.
|
||||||
C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction.
|
C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="about-card-container">
|
<div class="about-card-container">
|
||||||
<div class="about-card">
|
<div class="about-card">
|
||||||
<div class="about-front-content">
|
<div class="about-front-content">
|
||||||
<img src="logo/slime.png" alt="Slime"/>
|
<img src="logo/slime.png" alt="Slime"/>
|
||||||
<p>Pixel-Artist</p>
|
<p>Pixel-Artist</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="about-content">
|
<div class="about-content">
|
||||||
<p class="about-heading">Pixel-Artist</p>
|
<p class="about-heading">Pixel-Artist</p>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipii
|
Lorem ipsum dolor sit amet, consectetur adipii
|
||||||
voluptas ten mollitia pariatur odit, ab
|
voluptas ten mollitia pariatur odit, ab
|
||||||
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
minus ratione adipisci accusamus vel est excepturi laboriosam magnam
|
||||||
necessitatibus dignissimos molestias.
|
necessitatibus dignissimos molestias.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<section id="parcour" class="section">
|
<section id="parcour" class="section">
|
||||||
<h2 class="mainTitle">Mon parcours</h2>
|
<h2 class="mainTitle">Mon parcours</h2>
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<div class="timeline-empty"></div>
|
<div class="timeline-empty"></div>
|
||||||
<div class="timeline-middle">
|
<div class="timeline-middle">
|
||||||
<div class="timeline-circle"></div>
|
<div class="timeline-circle"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-component timeline-content">
|
<div class="timeline-component timeline-content">
|
||||||
<h3>Collège</h3>
|
<h3>Collège</h3>
|
||||||
<p>Lorem Ipsum</p>
|
<p>Lorem Ipsum</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-component timeline-content">
|
<div class="timeline-component timeline-content">
|
||||||
<h3>Lycée</h3>
|
<h3>Lycée</h3>
|
||||||
<p>Lorem Ipsum</p>
|
<p>Lorem Ipsum</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-middle">
|
<div class="timeline-middle">
|
||||||
<div class="timeline-circle"></div>
|
<div class="timeline-circle"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="timeline-empty"></div>
|
<div class="timeline-empty"></div>
|
||||||
<div class="timeline-empty"></div>
|
<div class="timeline-empty"></div>
|
||||||
|
|
||||||
<div class="timeline-middle">
|
<div class="timeline-middle">
|
||||||
<div class="timeline-circle"></div>
|
<div class="timeline-circle"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class=" timeline-component timeline-content">
|
<div class=" timeline-component timeline-content">
|
||||||
<h3>BUT informatique</h3>
|
<h3>BUT informatique</h3>
|
||||||
<p>Lorem Ipsum</p>
|
<p>Lorem Ipsum</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="timeline-empty"></div>
|
<div class="timeline-empty"></div>
|
||||||
<div class="timeline-middle">
|
<div class="timeline-middle">
|
||||||
<!-- "Cercle" final -->
|
<!-- "Cercle" final -->
|
||||||
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
|
<div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="projects" class="section">
|
<section id="projects" class="section">
|
||||||
<h2 class="mainTitle">Projets</h2>
|
<h2 class="mainTitle">Projets</h2>
|
||||||
<div class="projects-grid">
|
<div class="projects-grid">
|
||||||
<div class="project-card">
|
<div class="project-card">
|
||||||
<h3 class="text-title">Art e-Show</h3>
|
<h3 class="text-title">Art e-Show</h3>
|
||||||
<p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu :
|
<p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu :
|
||||||
<a href="https://github.com/PiR194/Art-eShow.git" class="project-card-button">Plus d'infos</a>
|
<a href="https://github.com/PiR194/Art-eShow.git" class="project-card-button">Plus d'infos</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-card offset">
|
<div class="project-card offset">
|
||||||
<h3 class="text-title">Spelltastic</h3>
|
<h3 class="text-title">Spelltastic</h3>
|
||||||
<p class="text-body">Spelltastic est une application de type "compagnons de jeu" pour le jeu de roles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire parti des développeusr de ce gestionnaire de liste de sorts avec un logique bien particulière.</p>
|
<p class="text-body">Spelltastic est une application de type "compagnons de jeu" pour le jeu de roles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire parti des développeusr de ce gestionnaire de liste de sorts avec un logique bien particulière.</p>
|
||||||
<a href="https://github.com/PiR194/SpellTastic.git" class="project-card-button">Plus d'infos</a>
|
<a href="https://github.com/PiR194/SpellTastic.git" class="project-card-button">Plus d'infos</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-card">
|
<div class="project-card">
|
||||||
<h3 class="text-title">SocialGraph</h3>
|
<h3 class="text-title">SocialGraph</h3>
|
||||||
<p class="text-body">Adaptation numérique de jeu de société d'enquêteurs, inspiré de du jeu Cryptid. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans un graphe de suspects ? Que l'enquête commence !</p>
|
<p class="text-body">Adaptation numérique de jeu de société d'enquêteurs, inspiré de du jeu Cryptid. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans un graphe de suspects ? Que l'enquête commence !</p>
|
||||||
<a href="https://github.com/PiR194/Cryptid.git" class="project-card-button">Plus d'infos</a>
|
<a href="https://github.com/PiR194/Cryptid.git" class="project-card-button">Plus d'infos</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="contact" class="section">
|
<section id="contact" class="section">
|
||||||
<h2 class="mainTitle">Contact</h2>
|
<h2 class="mainTitle">Contact</h2>
|
||||||
|
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
|
|
||||||
<div class="AltLinks">
|
<div class="AltLinks">
|
||||||
|
|
||||||
<!-- Github -->
|
<!-- Github -->
|
||||||
<button class="Btn" onclick="window.location.href='https://github.com/PiR194'">
|
<button class="Btn" onclick="window.location.href='https://github.com/PiR194'">
|
||||||
<span class="imgContainer">
|
<span class="imgContainer">
|
||||||
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
|
<img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
|
||||||
</span>
|
</span>
|
||||||
<span class="BG"></span>
|
<span class="BG"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- LinkedIn -->
|
<!-- LinkedIn -->
|
||||||
<button class="Btn" onclick="window.location.href='https://www.linkedin.com/in/pierre-ferreira-95a656253/'">
|
<button class="Btn" onclick="window.location.href='https://www.linkedin.com/in/pierre-ferreira-95a656253/'">
|
||||||
<span class="imgContainer">
|
<span class="imgContainer">
|
||||||
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
|
<img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
|
||||||
</span>
|
</span>
|
||||||
<span class="BG"></span>
|
<span class="BG"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="Btn">
|
<button class="Btn">
|
||||||
<span class="imgContainer">
|
<span class="imgContainer">
|
||||||
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
|
<img src="logo/BSLogoW.png" alt="BS" class="imgIcon">
|
||||||
</span>
|
</span>
|
||||||
<span class="BG"></span>
|
<span class="BG"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Teams -->
|
<!-- Teams -->
|
||||||
<button class="Btn">
|
<button class="Btn">
|
||||||
<span class="imgContainer">
|
<span class="imgContainer">
|
||||||
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
|
<img src="logo/teamsLogoW.png" alt="Teams" class="imgIcon">
|
||||||
</span>
|
</span>
|
||||||
<span class="BG"></span>
|
<span class="BG"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form class="form">
|
<form class="form">
|
||||||
<div class="form__group field">
|
<div class="form__group field">
|
||||||
<input type="input" class="form__field" placeholder="Name" required="">
|
<input type="input" class="form__field" placeholder="Name" required="">
|
||||||
<label for="name" class="form__label">Nom</label>
|
<label for="name" class="form__label">Nom</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form__group field">
|
<div class="form__group field">
|
||||||
<input type="input" class="form__field" placeholder="Name" required="">
|
<input type="input" class="form__field" placeholder="Name" required="">
|
||||||
<label for="name" class="form__label">Prenom</label>
|
<label for="name" class="form__label">Prenom</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form__group field">
|
<div class="form__group field">
|
||||||
<input type="input" class="form__field" placeholder="Name" required="">
|
<input type="input" class="form__field" placeholder="Name" required="">
|
||||||
<label for="name" class="form__label">E-mail</label>
|
<label for="name" class="form__label">E-mail</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
|
<label for="textarea"><h3>En quoi puis-je vous aider ?</h3></label>
|
||||||
<textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
|
<textarea name="textarea" id="textarea" rows="10" cols="50" required=""></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button class="send-msg">
|
<button class="send-msg">
|
||||||
<span class="circle" aria-hidden="true">
|
<span class="circle" aria-hidden="true">
|
||||||
<span class="icon arrow"></span>
|
<span class="icon arrow"></span>
|
||||||
</span>
|
</span>
|
||||||
<span class="button-text">Envoyer</span>
|
<span class="button-text">Envoyer</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>© 2024 Pifolio. Tous droits réservés.</p>
|
<p>© 2024 Pifolio. Tous droits réservés.</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
//* Gestion du loader
|
//* Gestion du loader
|
||||||
window.addEventListener('load', function() {
|
window.addEventListener('load', function() {
|
||||||
document.querySelector('.loader-container').classList.add('hidden');
|
document.querySelector('.loader-container').classList.add('hidden');
|
||||||
});
|
});
|
||||||
|
|
||||||
//Simulation d'un chargement de 3 secondes
|
//Simulation d'un chargement de 3 secondes
|
||||||
|
|
||||||
/*window.addEventListener('load', function() {
|
/*window.addEventListener('load', function() {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
const loaderContainer = document.querySelector('.loader-container');
|
const loaderContainer = document.querySelector('.loader-container');
|
||||||
if (loaderContainer) {
|
if (loaderContainer) {
|
||||||
loaderContainer.classList.add('hidden');
|
loaderContainer.classList.add('hidden');
|
||||||
}
|
}
|
||||||
}, 3000); // 3000 ms = 3 seconds
|
}, 3000); // 3000 ms = 3 seconds
|
||||||
});*/
|
});*/
|
||||||
|
|
||||||
//* Dark theme
|
//* Dark theme
|
||||||
document.addEventListener('DOMContentLoaded', (event) => {
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||||||
const toggleSwitch = document.querySelector('#theme-toggle');
|
const toggleSwitch = document.querySelector('#theme-toggle');
|
||||||
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
|
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
|
||||||
|
|
||||||
if (currentTheme) {
|
if (currentTheme) {
|
||||||
document.body.classList.add(currentTheme);
|
document.body.classList.add(currentTheme);
|
||||||
|
|
||||||
if (currentTheme === 'dark-mode') {
|
if (currentTheme === 'dark-mode') {
|
||||||
toggleSwitch.checked = true;
|
toggleSwitch.checked = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleSwitch.addEventListener('change', function() {
|
toggleSwitch.addEventListener('change', function() {
|
||||||
if (this.checked) {
|
if (this.checked) {
|
||||||
document.body.classList.add('dark-mode');
|
document.body.classList.add('dark-mode');
|
||||||
localStorage.setItem('theme', 'dark-mode');
|
localStorage.setItem('theme', 'dark-mode');
|
||||||
} else {
|
} else {
|
||||||
document.body.classList.remove('dark-mode');
|
document.body.classList.remove('dark-mode');
|
||||||
localStorage.setItem('theme', 'light-mode');
|
localStorage.setItem('theme', 'light-mode');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in new issue