Skip to content

Commit

Permalink
English/French translation button added
Browse files Browse the repository at this point in the history
  • Loading branch information
@feove
feove committed Aug 30, 2024
1 parent bac3d2e commit 5dbce67
Show file tree
Hide file tree
Showing 7 changed files with 521 additions and 41 deletions.
40 changes: 34 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="stylesheet" href="style/navbar.css">
<link rel="stylesheet" href="style/style-home.css">
<link rel="stylesheet" href="/style/custom-cursor.css">
<script src="js/index-lang.js"></script>


</head>
Expand All @@ -27,7 +28,7 @@
<div class="background-layer" data-speed="5"></div>
<img src="media/Forestpt1.png" class="layer" id="plain" data-speed="0">
<img src="media/Forestpt2.png" class="layer" id="sky" data-speed="2">
<a href="index/download.html"><img src="media/logo_v0.png" class="logo-rotate" id="logo" alt="Logo"></a>
<a href="./index/download.html"><img src="media/logo_v0.png" class="logo-rotate" id="logo" alt="Logo"></a>
</div>
</section>
</div>
Expand All @@ -37,11 +38,16 @@
<a href="index/download.html"><img src="media/iboren.png" id="ibo" alt="iboren"></a>
</div>
</div>
<div class="language-switcher">
<button id="lang-en" style="display: none;">English</button>
<button id="lang-fr" class="active">Français</button>
</div>


<nav>

<ul>
<li><a href="index.html" class ="active a-nav">Home</a></li>
<li><a href="index/download.html" class="a-nav">Download</a></li>
<li><a href="index/download.html" class="a-nav" id="download-nav">Download</a></li>
<li><a href="index/about.html" class="a-nav">About</a></li>
<li><a href="index/leaderboard.html" class="a-nav">Ranking</a></li>
</ul>
Expand Down Expand Up @@ -140,7 +146,7 @@ <h2>What is TreasHunt ?</h2>
<li class="footer-item">
<a href="https://mail.google.com" target="_blank" class="contact-link">
<img src="media/contact-logo.png" id="contact-logo" alt="Contact" class="footer-icon">
<span>Contact us</span>
<span id="contact">Contact us</span>
</a>
</li>
<li class="footer-item">
Expand Down Expand Up @@ -197,14 +203,16 @@ <h2>What is TreasHunt ?</h2>
if (textBoxPosition < screenPosition) {
textBox.classList.add('reveal');
textBox.classList.add('visible');

}
});

window.addEventListener('scroll', function() {
const animatedTitle = document.querySelector('.animated-title');
const titlePosition = animatedTitle.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;

const trad = document.querySelector('language-switcher');

if (titlePosition < screenPosition) {
animatedTitle.classList.add('visible');
}
Expand Down Expand Up @@ -250,7 +258,27 @@ <h2>What is TreasHunt ?</h2>




document.addEventListener("DOMContentLoaded", function() {
const btnEnglish = document.getElementById('lang-en');
const btnFrench = document.getElementById('lang-fr');

btnEnglish.addEventListener('click', function() {
btnEnglish.style.display = 'none';
btnFrench.style.display = 'inline-block';
btnEnglish.classList.remove('active');
btnFrench.classList.add('active');

});

btnFrench.addEventListener('click', function() {
btnFrench.style.display = 'none';
btnEnglish.style.display = 'inline-block';
btnFrench.classList.remove('active');
btnEnglish.classList.add('active');

});
});


</script>
</body>
Expand Down
97 changes: 62 additions & 35 deletions index/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" type="text/css" href="../style/style-about.css">
<link rel="stylesheet" type="text/css" href="../style/navbar.css">
<link rel="stylesheet" href="../style/custom-cursor.css">
<script src="../js/about-lang.js"></script>
<title>A propos</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
Expand All @@ -31,6 +32,12 @@
<a href="../index/download.html"><img src="../media/iboren.png" id="ibo" alt="iboren"></a>
</div>
</div>
</div>
<div class="language-switcher">
<button id="lang-en" style="display: none;">English</button>
<button id="lang-fr" class="active">Français</button>
</div>

<nav>
<ul >
<li><a href="../index.html" class ="a-nav">Home</a></li>
Expand All @@ -55,7 +62,7 @@
<h3>Paul Vogeleisen</h3>
<div class="friend-content">
<img src="../media/paul.jpg" alt="Paul Vogeleisen">
<div class="overlay">
<div class="overlay" id="paul_des">
<p>I led the team to ensure the success of the project by meeting deadlines and resolving conflicts.
I also created a unique immersive sound experience.</p>
</div>
Expand All @@ -65,13 +72,13 @@ <h3>Paul Vogeleisen</h3>
<a href="https://www.linkedin.com/in/paul-vogeleisen/"><img src="../media/icon-linkedin.png" alt="Linkedin"></a>
</div>
</div>
<p class="role">Project leader</p>
<p class="role" id="paul_role">Project leader</p>
</div>
<div class="friend-item">
<h3>Léo Sibour</h3>
<div class="friend-content">
<img src="../media/leo.jpg" alt="Léo Sibour">
<div class="overlay">
<div class="overlay" id="leo_des">
<p>I created the maps for Chapters 1 and 2 and helped add several features to the game.</p>

</div>
Expand All @@ -87,7 +94,7 @@ <h3>Léo Sibour</h3>
<h3>Cyril Kohler</h3>
<div class="friend-content">
<img src="../media/cyril.jpg" alt="Cyril Kohler">
<div class="overlay">
<div class="overlay" id="cyril_des">
<p>I've set up a lobby-based multiplayer mode and realized the player's moves</p>

</div>
Expand All @@ -96,14 +103,14 @@ <h3>Cyril Kohler</h3>
<a href="https://discord.com/users/593456700045000704"><img src="../media/icon-discord.png" alt="Discord"></a>
</div>
</div>
<p class="role">Technical Director</p>
<p class="role" id="cyril_role">Technical Director</p>
</div>
<div class="friend-item">
<h3>Baptiste Marx</h3>
<div class="friend-content">
<div class="friend-content" >
<img src="../media/baptiste.jpg" alt="Baptiste Marx">

<div class="overlay">
<div class="overlay" id="baptiste_des">
<p>I conceived the level design, developed the scenario, and managed the
graphic assets to create immersive environments and a compelling story.</p>

Expand All @@ -116,21 +123,19 @@ <h3>Baptiste Marx</h3>
</div>
</div>

<p class="role">Art Director</p>
<p class="role" id="baptiste_role">Art Director</p>
</div>
</div>



<div class="repertory" >Realization of Treashunt</div>
<div class="repertory" id="rep">Realization of Treashunt</div>
<div class="process-wrapper">
<div id="progress-bar-container">
<ul>
<li class="step step01 active"><div class="step-inner">October</div></li>
<li class="step step02"><div class="step-inner">November</div></li>
<li class="step step03"><div class="step-inner">January/February</div></li>
<li class="step step04"><div class="step-inner">March presentation</div></li>
<li class="step step05"><div class="step-inner">May/June</div></li>
<li class="step step01 active"><div class="step-inner" id="oct">October</div></li>
<li class="step step02"><div class="step-inner" id="nov">November</div></li>
<li class="step step03"><div class="step-inner" id="jan">January/February</div></li>
<li class="step step04"><div class="step-inner" id="mar">March soutenance</div></li>
<li class="step step05"><div class="step-inner" id="may">May/June</div></li>
</ul>
<div id="line">
<div id="line-progress"></div>
Expand Down Expand Up @@ -168,62 +173,65 @@ <h2>May/June :</h2>
</div>
</div>
</div>
<div class="repertory" style="top: 7%; margin-bottom: -5%;">
Website development
</div>

<!------------------------------------------------------------------------------------------------------------------------- -->
<div class="repertory" id="web" style="top: 7%; margin-bottom: -5%;">
Website development
</div>

<section class="timeline">
<div class="timeline-start-circle">Start</div>
<div class="timeline-start-circle" id="start">Start</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--right">October 2023</div>
<div class="date date--right" id="tim_oct">October 2023</div>
<div class="timeline-content js--fadeInLeft">
<img src="../media/GithubContent.png" class="timeline-img">
<h2 >Site hosting</h2>
<p>It was in this month that I initiated a repository on GitHub to host the Treashunt website.</p>
<h2 id="host" >Site hosting</h2>
<p id="host_text">It was in this month that I initiated a repository on GitHub to host the Treashunt website.</p>
<a class="bnt-more a-style" href="javascript:void(0)">Plus</a>
</div>
</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--left">January 2023</div>
<div class="date date--left" id="tim_jan">January 2023</div>
<div class="timeline-content js--fadeInRight">
<img src="../media/prototypeWebsite.png" class="timeline-img">
<h2>First Design</h2>
<p>I've almost completed the first version of the home page, entirely in HTML/CSS. This approach has given me a thorough understanding of the basics of web development.</p>
<h2 id="first">First Design</h2>
<p id="first_text">I've almost completed the first version of the home page, entirely in HTML/CSS. This approach has given me a thorough understanding of the basics of web development.</p>
<a class="bnt-more a-style" href="javascript:void(0)">Plus</a>
</div>
</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--right">March 2023</div>
<div class="date date--right" id="tim_mar">March 2023</div>
<div class="timeline-content js--fadeInLeft">
<img src="../media/gif-website.gif" class="timeline-img">
<h2>Parallax effect</h2>
<p>I integrated my first parallax effect into the “About” section without the use of external JavaScript libraries. This involved setting up event handlers and CSS transitions to create a smooth scrolling effect.</p>
<h2 id="parallax">Parallax effect</h2>
<p id="parallax_text">I integrated my first parallax effect into the “About” section without the use of external JavaScript libraries. This involved setting up event handlers and CSS transitions to create a smooth scrolling effect.</p>
<a class="bnt-more a-style" href="javascript:void(0)">Plus</a>
</div>
</div>

<div class="timeline-item">
<div class="timeline-circle"></div>
<div class="date date--left">Juin 2023</div>
<div class="date date--left" id="tim_jun">Juin 2023</div>
<div class="timeline-content js--fadeInRight">
<img src="../media/HomePage.png" class="timeline-img">
<h2>Remastering</h2>
<p>I've improved the home page to make it simpler and more modern with a new javascript effect</p>
<h2 id="remaster">Remastering</h2>
<p id="remaster_text">I've improved the home page to make it simpler and more modern with a new javascript effect</p>
<a class="bnt-more a-style" href="javascript:void(0)">Plus</a>
</div>
</div>
</section>

</div>
</div>
<!------------------------------------------------------------------------------------------------------------------------- -->
</div>


</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Expand Down Expand Up @@ -364,7 +372,26 @@ <h2>Remastering</h2>
});


document.addEventListener("DOMContentLoaded", function() {
const btnEnglish = document.getElementById('lang-en');
const btnFrench = document.getElementById('lang-fr');

btnEnglish.addEventListener('click', function() {
btnEnglish.style.display = 'none';
btnFrench.style.display = 'inline-block';
btnEnglish.classList.remove('active');
btnFrench.classList.add('active');

});

btnFrench.addEventListener('click', function() {
btnFrench.style.display = 'none';
btnEnglish.style.display = 'inline-block';
btnFrench.classList.remove('active');
btnEnglish.classList.add('active');

});
});

</script>

Expand Down
26 changes: 26 additions & 0 deletions index/download.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="stylesheet" type="text/css" href="../style/navbar.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../style/custom-cursor.css">
<script src="../js/download-lang.js"></script>
<title>Téléchargement</title>

</head>
Expand All @@ -20,13 +21,19 @@
<a href="../index/download.html"><img src="../media/iboren.png" id="ibo" alt="iboren"></a>
</div>
</div>
</div>
<div class="language-switcher">
<button id="lang-en" style="display: none;">English</button>
<button id="lang-fr" class="active">Français</button>
</div>
<nav>
<ul>
<li><a href="../index.html" class="a-nav" style="text-decoration-line: none;" >Home</a></li>
<li><a href="download.html" class="active a-nav" style="text-decoration-line: none;" >Download</a></li>
<li><a href="about.html" class="a-nav" style="text-decoration-line: none;" >About</a></li>
<li><a href="leaderboard.html" class="a-nav">Ranking</a></li>
</ul>

</nav>
</header>
<div class="download-bg" style="margin-top: -0.1%;">
Expand Down Expand Up @@ -156,7 +163,26 @@ <h3>Project Report</h3>
});


document.addEventListener("DOMContentLoaded", function() {
const btnEnglish = document.getElementById('lang-en');
const btnFrench = document.getElementById('lang-fr');

btnEnglish.addEventListener('click', function() {
btnEnglish.style.display = 'none';
btnFrench.style.display = 'inline-block';
btnEnglish.classList.remove('active');
btnFrench.classList.add('active');

});

btnFrench.addEventListener('click', function() {
btnFrench.style.display = 'none';
btnEnglish.style.display = 'inline-block';
btnFrench.classList.remove('active');
btnEnglish.classList.add('active');

});
});


</script>
Expand Down
Loading

0 comments on commit 5dbce67

Please sign in to comment.