Вот код с решением проблемы:
<code lang="rust">
use serde::{Deserialize, Serialize};
use serde_json::from_str;
#[derive(Serialize, Deserialize)]
struct Ascii {
ascii: Vec<String>,
}
fn ascii() -> Vec<String> {
let file_contents = include_str!("ascii.json");
let ascii_data: Ascii = from_str(file_contents).expect("Could not deserialize JSON");
ascii_data.ascii
}
fn main() {
loop {
let lines = ascii();
for line in lines {
println!("{}", line);
}
break;
}
println!("\nPress any key to exit...");
let _ = std::io::stdin().read_line(&mut String::new());
}
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-lang="title"></title>
<link rel="stylesheet" href="src/css/global.css">
</head>
<body>
<div class="layout">
<header>
<h1 class="heading" data-lang="heading" style="border-bottom: 3px solid var(--border-color);"></h1>
</header>
<main>
<div class="primaryBlock">
<div class="secondaryBlock">
<div class="descriptionBlock">
<h2 class="descriptionTitle" data-lang="descriptionTitle"></h2>
<p class="descriptionText" data-lang="descriptionText"></p>
</div>
<div class="newBlock">
<div class="newBlockTitle">
<h2 class="newTitle" data-lang="newTitle"></h2>
<a class="moreTitle close">Show more</a>
</div>
<p class="newText" data-lang="newText"></p>
<p class="moreext" data-lang="moreText"></p>
</div>
<div class="progressBlock">
<h2 class="progressTitle" data-lang="progressTitle"></h2>
<p class="progressText" data-lang="progressText"></p>
<ul class="progressList">
<li class="git" data-lang="git"></li>
</ul>
</div>
</div>
<div class="information">
<div class="aboutMe">
<h2 class="aboutMeTitle" data-lang="aboutMeTitle"></h2>
<p class="userName" data-lang="userName"></p>
<p class="repo" data-lang="repo"></p>
</div>
<div class="social">
<h2 class="socialTitle" data-lang="socialTitle"></h2>
<ul class="socialList">
<li class="email" data-lang="email"></li>
<li class="gitHub" data-lang="gitHub"></li>
</ul>
</div>
</div>
</div>
</main>
<footer>
<div class="function">
<button class="languageSwitcher en">English</button>
<button class="themeToggle light">Light theme</button>
</div>
</footer>
</div>
<script src="src/scripts/jquery.min.js"></script>
<script type="module" src="src/scripts/index.js"></script>
</body>
</html>$('.theme-toggle').on('click', function () {
document.body.classList.toggle('light-theme');
if ($(this).hasClass('light')) {
$(this).toggleClass('light dark');
if (currentLanguage === 'en') {
$(this).text("Dark theme");
} else if (currentLanguage === 'ru') {
$(this).text("Темная тема");
}
} else if ($(this).hasClass('dark')) {
$(this).toggleClass('dark light');
if (currentLanguage === 'en') {
$(this).text("Light theme");
} else if (currentLanguage === 'ru') {
$(this).text("Светлая тема");
}
}
});
$(document).ready(function() {
$.getJSON("./src/scripts/translations/en.json", function(data) {
let jsonData = data;
$(document).ready(function() {
$('.theme-toggle').click(function() {
document.body.classList.toggle('light-theme');
let currentValue = $(this).attr('data-lang');
let newLang = currentValue === 'themeToggle-light' ? 'themeToggle-dark' : 'themeToggle-light';
let newTitle = jsonData[newLang];
$(this).attr('data-lang', newLang);
$(this).text(newTitle);
});
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-lang="title"></title>
<link rel="stylesheet" href="src/css/global.css">
</head>
<body>
<div class="layout">
<header>
<h1 class="heading" data-lang="heading" style="border-bottom: 3px solid var(--border-color);"></h1>
</header>
<main>
<div class="primaryBlock">
<div class="secondaryBlock">
<div class="descriptionBlock">
<h2 class="descriptionTitle" data-lang="descriptionTitle"></h2>
<p class="descriptionText" data-lang="descriptionText"></p>
</div>
<div class="newBlock">
<div class="newBlockTitle">
<h2 class="newTitle" data-lang="newTitle"></h2>
<a href="#" class="moreTitle close">Open more.</a>
</div>
<p class="newText" data-lang="newText"></p>
<p class="moreText" data-lang="moreText"></p>
</div>
<div class="progressBlock">
<h2 class="progressTitle" data-lang="progressTitle"></h2>
<p class="progressText" data-lang="progressText"></p>
<ul class="progressList">
<li class="git" data-lang="git"></li>
</ul>
</div>
</div>
<div class="information">
<div class="aboutMe">
<h2 class="aboutMeTitle" data-lang="aboutMeTitle"></h2>
<p class="userName" data-lang="userName"></p>
<p class="repo" data-lang="repo"></p>
</div>
<div class="social">
<h2 class="socialTitle" data-lang="socialTitle"></h2>
<ul class="socialList">
<li class="email" data-lang="email"></li>
<li class="gitHub" data-lang="gitHub"></li>
</ul>
</div>
</div>
</div>
</main>
<footer>
<div class="function">
<button class="language-switcher en">English</button>
<button class="theme-toggle dark" data-lang="themeToggle-light">Light theme</button>
</div>
</footer>
</div>
<script defer src="src/scripts/jquery.min.js"></script>
<script type="module" src="src/scripts/index.js"></script>
</body>
</html>$('.theme-toggle').on('click', function () {
document.body.classList.toggle('light-theme');
var currentValue = $('.theme-toggle').attr('data-lang');
var newLang = currentValue === 'themeToggle-light' ? 'themeToggle-dark' : 'themeToggle-light';
$('.theme-toggle').attr('data-lang', newLang);
$('.theme-toggle').html(newLang);
});