diff --git a/constructor.html b/constructor.html new file mode 100644 index 0000000..4fe28c8 --- /dev/null +++ b/constructor.html @@ -0,0 +1,54 @@ + + + + + + Конструктор Таблицы + + + +
+ +
+
+
+
+

To-Do List

+
+ + +
+
    +
    +
    +
    + + + + + diff --git a/imgs/AVADACEDAVRA.gif b/imgs/AVADACEDAVRA.gif new file mode 100644 index 0000000..b092319 Binary files /dev/null and b/imgs/AVADACEDAVRA.gif differ diff --git a/imgs/ownership.png b/imgs/ownership.png new file mode 100644 index 0000000..915220e Binary files /dev/null and b/imgs/ownership.png differ diff --git a/imgs/rick.gif b/imgs/rick.gif new file mode 100644 index 0000000..77de0ff Binary files /dev/null and b/imgs/rick.gif differ diff --git a/imgs/smart-pointers.png b/imgs/smart-pointers.png new file mode 100644 index 0000000..00e535d Binary files /dev/null and b/imgs/smart-pointers.png differ diff --git a/imgs/traits.png b/imgs/traits.png new file mode 100644 index 0000000..f4b3514 Binary files /dev/null and b/imgs/traits.png differ diff --git a/index.html b/index.html index 0e4e11d..53817da 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + Этот сайе покажет интересные финты, которые были мной открыты за время изучения 'Rust' @@ -17,16 +17,16 @@

    Rust

    @@ -68,28 +68,97 @@

    About creator

    +
    +

    Topics

    +
    + +
    + +
    +
    +
    +

    Users List

    + + + +
    +
    - - - + + + \ No newline at end of file diff --git a/index_style.css b/index_style.css index 7aaf3b5..dc42c84 100644 --- a/index_style.css +++ b/index_style.css @@ -160,7 +160,7 @@ header .nav-bar { /* This is introduction styling part start */ .about-section { padding: 120px 0; - background: vat(--light-pink-color); + background: var(--light-pink-color); } .about-section .section-content { @@ -209,7 +209,95 @@ header .nav-bar { } -@media screen and (max-width: 575px) { +.menu-section { + color: var(--white-color); + background: var(--dark-color); + padding: 50px 0 100px; +} + +.menu-section .menu-list { + display: flex; + flex-wrap: wrap; + gap: 100px; + align-items: center; + justify-content: space-between; +} + +.menu-section .menu-list .menu-item { + display: flex; + align-items: center; + flex-direction: column; + text-align: center; + justify-content: space-between; + width: calc(100% / 3 - 110px); +} + +.menu-section .menu-list .menu-item .menu-image { + max-width: 83%; + aspect-ratio: 1; + margin-bottom: 15px; + object-fit: contain; +} + +.menu-section .menu-list .menu-item .text { + font-size: var(--font-size-m); +} + +.menu-section .menu-list .menu-item .name { + margin: 12px 0; + font-size: var(--font-size-l); + font-weight: var(--font-weight-semibold); + +} + +.loader { + text-align: center; + font-size: var(--font-size-l); + color: var(--primary-color); +} + +.nav-item .active { + color: #ff6600; + font-weight: bold; + border-bottom: 2px solid #ff6600; +} + +.wrapper { + border-style: solid; + border-radius: var(--border-radius-m); + border-color: var(--medium-gray-color); + font-weight: bold; + text-align: center; + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(7, 1fr); + grid-column-gap: 0; + grid-row-gap: 0; +} + +.wrapper>div:nth-child(10n+1), +.wrapper>div:nth-child(10n+2), +.wrapper>div:nth-child(10n+3), +.wrapper>div:nth-child(10n+4), +.wrapper>div:nth-child(10n+5) +{ + background: var(--primary-color); + color: var(--white-color); +} + +@media screen and (max-width: 1024px) { + + .menu-section .menu-list { + gap: 60px; + } + + .menu-section .menu-list .menu-item { + width: calc(100% / 3 - 60px); + } + +} + +@media screen and (max-width: 900px) { :root { --font-size-s: 0.7rem; @@ -247,7 +335,6 @@ header .nav-bar { } .nav-bar .nav-menu { - display: block; position: fixed; left: -300px; top: 0; @@ -302,4 +389,98 @@ header .nav-bar { max-width: 250px; } + .menu-section .menu-list { + gap: 30px; + } + + .menu-section .menu-list .menu-item { + width: calc(100% / 2 - 30px); + } + + .menu-section .menu-list .menu-item .menu-image { + max-width: 200px; + } + +} + +.todo-container { + max-width: 600px; + margin: auto; + background-color: var(--white-color); + border-radius: var(--border-radius-s); + padding: 100px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.todo-container .title { + text-align: center; + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + margin-bottom: 20px; + color: var(--primary-color); +} + +#todo-form { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +#todo-input { + flex: 1; + padding: 10px; + font-size: var(--font-size-m); + border: 1px solid var(--medium-gray-color); + border-radius: var(--border-radius-s); +} + +#todo-input:focus { + outline: none; + border-color: var(--secondary-color); +} + +.todo-list { + list-style-type: none; + padding: 0; +} + +.todo-list li { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 10px; + margin-bottom: 10px; + border: 1px solid var(--medium-gray-color); + border-radius: var(--border-radius-s); + transition: background-color 0.3s ease, text-decoration 0.3s ease; + word-wrap: break-word; + flex-wrap: wrap; +} + +.todo-list li span { + flex: 1; + margin-right: 10px; + word-break: break-word; + font-size: var(--font-size-m); +} + +.todo-list li.done { + background-color: var(--light-pink-color); + text-decoration: line-through; + color: var(--medium-gray-color); +} + +.todo-list .mark-done { + padding: 5px 10px; + font-size: var(--font-size-s); + color: var(--white-color); + background-color: var(--secondary-color); + border: none; + border-radius: var(--border-radius-s); + cursor: pointer; + align-self: flex-start; +} + +.todo-list .mark-done:hover { + background-color: var(--primary-color); } diff --git a/memory.html b/memory.html deleted file mode 100644 index 8913728..0000000 --- a/memory.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - Страница описывающая идею работы с памятью - - - -
    -

    Новая идея контроля памятью

    -
    -

    - Давайте прсото для начала увидем код, который поначану будет
    - вводить в ступор из-за ошибки - 

    
-fn main() {
-    let s = String::from("Hello world");
-    let s1 = s;
-    println!("{} {}", s, s1);
-}
-
-
    - Ошибка будет заключаться в том, что в Rust реализована система
    - владельцев, а именно то, что у всех данных есть владельцы(подробнее
    - про них можно прочитать тут - )

    - Пока что можно рассмотреть ошибку на примере данной картинки
    - -

    - Здесь показано, что при создании первой переменной у нас выделяяется
    - память на heap, а переменная просто на нее указывает, тем самым владеет
    - этим участком двнными. Но, когда мы добавляем новую переменную, на один
    - и тот же участок памяти указывает 2 переменные (владельца) => что при
    - очистке данных памяти на которую указывает нусколько переменных она будет
    - очищена несколько раз, что может привести к большим проблемам. Из-за этого
    - было принято решение просто затерать первую и далее работать с новосозданной
    -

    - 
    
-fn main() {
-    let first = String::from("Hello");
-    
-}
-
    -
    -
    - - \ No newline at end of file diff --git a/ownership.html b/ownership.html new file mode 100644 index 0000000..473c20b --- /dev/null +++ b/ownership.html @@ -0,0 +1,73 @@ + + + + + + Страница описывающая идею работы с памятью + + + + + +
    + +
    +
    +
    +
    +
    +

    Новая идея контроля памятью

    +

    Не garbage collectors и не полное управление

    +

    +  Давайте прсото для начала увидем код, который поначану будет
    + вводить в ступор из-за ошибки

    + 

    
+fn main() {
+    let s = String::from("Hello world");
+    let s1 = s;
+    println!("{} {}", s, s1);
+}
+
    +  Ошибка будет заключаться в том, что в Rust реализована система
    + владельцев, а именно то, что у всех данных есть владельцы(подробнее
    + про них можно прочитать тут + )

    + Пока что можно рассмотреть ошибку на примере данной картинки
    + +

    +  Здесь показано, что при создании первой переменной у нас выделяяется
    + память на heap, а переменная просто на нее указывает, тем самым владеет
    + этим участком двнными. Но, когда мы добавляем новую переменную, на один
    + и тот же участок памяти указывает 2 переменные (владельца) => что при
    + очистке данных памяти на которую указывает нусколько переменных она будет
    + очищена несколько раз, что может привести к большим проблемам. Из-за этого
    + было принято решение просто затерать первую и далее работать с новосозданной
    + 
    
+fn main() {
+    let first = String::from("Hello");  
+}
+
    +

    + +
    +
    +
    +
    + + + + \ No newline at end of file diff --git a/ownership_style.css b/ownership_style.css new file mode 100644 index 0000000..cd1fc17 --- /dev/null +++ b/ownership_style.css @@ -0,0 +1,310 @@ +@import url('https://fonts.googleapis.com/css2?family=Londrina+Sketch&family=Montserrat+Alternates:wght@400;500;600;700&family=Pacifico&display=swap'); + +/* Reset and Font Setup */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Montserrat Alternates", sans-serif; +} + +:root { + --white-color: #fff; + --dark-color: #252525; + --primary-color: #3b141c; + --secondary-color: #f3961c; + --light-pink-color: #faf4f5; + --medium-gray-color: #ccc; + + --font-size-s: 0.9rem; + --font-size-n: 1rem; + --font-size-m: 1.12rem; + --font-size-l: 1.5rem; + --font-size-xl: 2rem; + --font-size-xxl: 2.3rem; + + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + --border-radius-s: 8px; + --border-radius-m: 30px; + --site-max-width: 1000px; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +button { + cursor: pointer; + border: none; + background: none; +} + +img { + width: 100%; +} + +header { + position: fixed; + z-index: 5; + width: 100%; + background: var(--primary-color); +} + +/* Main Section Styling */ +body { + color: var(--dark-color); + background-color: var(--light-pink-color); +} + +main { + padding: 20px; + padding-top: 10%; +} + +.content-section { + padding: 50px 20px; + background-color: var(--white-color); + border-radius: var(--border-radius-s); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + max-width: var(--site-max-width); + margin: 0 auto; +} + +.section-content { + max-width: 800px; + margin: 0 auto; +} + +.title { + text-align: center; + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--primary-color); + font-family: "Londrina Sketch", sans-serif; +} + +.subtytle { + text-align: center; + font-size: var(--font-size-l); + font-weight: var(--font-weight-medium); + color: var(--secondary-color); + margin-top: 10px; +} + +.description { + margin-top: 20px; + font-size: var(--font-size-m); + line-height: 1.6; +} + +.description b { + font-weight: var(--font-weight-bold); +} + +.description i { + font-style: italic; +} + +.description em { + font-style: italic; + color: var(--primary-color); +} + +/* Styling for Links */ +.description a { + color: var(--secondary-color); + text-decoration: underline; + transition: color 0.3s; +} + +.description a:hover { + color: var(--primary-color); +} + +/* Code Styling */ +code, pre { + font-family: 'Courier New', Courier, monospace; + background-color: #f4f4f4; + color: #333; + padding: 8px; + border-radius: var(--border-radius-s); + display: block; + margin: 10px 0; + overflow-x: auto; +} + +pre { + white-space: pre-wrap; + padding: 16px; +} + +/* Image Styling */ +img { + display: block; + margin: 20px auto; + max-width: 100%; + height: auto; + border-radius: var(--border-radius-s); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.home-button { + margin-top: 20px; + padding: 10px 20px; + font-size: var(--font-size-n); + color: var(--white-color); + background-color: var(--medium-gray-color); + border: none; + border-radius: var(--border-radius-m); + cursor: pointer; + transition: background-color 0.3s ease; +} + +.home-button:hover { + background-color: var(--secondary-color); + color: var(--white-color); +} + +header .nav-bar { + display: flex; + align-items: center; + padding: 20px; + justify-content: space-between; +} + +.nav-bar .nav-menu { + display: flex; + gap: 10px; +} + +.nav-bar :where(#menu-open-button, #menu-close-button) { + display: none !important; +} + +.nav-bar .nav-logo .logo-text { + color: var(--white-color); + font-size: var(--font-size-xl); + font-weight: var(--font-weight-semibold); + font-family: "Pacifico", sans-serif; +} + +.nav-bar .nav-menu .nav-link { + padding: 10px 18px; + color: var(--white-color); + border-radius: var(--border-radius-m); + font-size: var(--font-size-m); + transition: 0.3s ease; +} + +.nav-bar .nav-menu .nav-link:hover { + color: var(--primary-color); + background: var(--secondary-color); +} + +.nav-item .active { + color: #ff6600; + font-weight: bold; + border-bottom: 2px solid #ff6600; +} + +.content-section { + /* margin-left: 270px; */ + padding: 20px; +} + +/* Optional: Styles for the button and the main content */ +.home-button { + background-color: var(--medium-gray-color); + color: white; + padding: 10px 20px; + border: none; + cursor: pointer; +} + +.home-button:hover { + background-color: var(--secondary-color); +} + +@media screen and (max-width: 768px) { + + :root { + --font-size-s: 0.7rem; + --font-size-n: 0.8rem; + --font-size-m: 1rem; + --font-size-l: 1.3rem; + --font-size-xl: 1.5rem; + --font-size-xxl: 1.8rem; + } + + .nav-bar :where(#menu-close-button, #menu-open-button) { + display: block !important; + font-size: var(--font-size-l); + } + + .nav-bar #menu-close-button { + position: absolute; + right: 30px; + top: 30px; + } + + .nav-bar #menu-open-button { + color: var(--white-color); + } + + body.show-mobile-menu header::before { + content: ""; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + backdrop-filter: blur(5px); + background-color: rgba(0, 0, 0, 0.2); + } + + .nav-bar .nav-menu { + position: fixed; + left: -300px; + top: 0; + width: 300px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 100px; + background: var(--white-color); + transition: left 0.2s ease; + } + + body.show-mobile-menu .nav-bar .nav-menu { + left: 0; + } + + .nav-bar .nav-menu .nav-link { + color: var(--dark-color); + display: block; + margin-top: 17px; + font-size: var(--font-size-l); + } + + .title { + font-size: var(--font-size-l); + } + + .subtytle { + font-size: var(--font-size-m); + } + + code, pre, p { + font-size: var(--font-size-s); + padding: 10px; + } +} diff --git a/script.js b/script.js deleted file mode 100644 index 4443f6f..0000000 --- a/script.js +++ /dev/null @@ -1,8 +0,0 @@ -const menuOpenButton = document.querySelector("#menu-open-button"); -const menuCloseButton = document.querySelector("#menu-close-button"); - -menuOpenButton.addEventListener("click", () => { - document.body.classList.toggle("show-mobile-menu"); -}); - -menuCloseButton.addEventListener("click", () => menuOpenButton.click()); diff --git a/scripts/constructor.js b/scripts/constructor.js new file mode 100644 index 0000000..639d08d --- /dev/null +++ b/scripts/constructor.js @@ -0,0 +1,72 @@ + +const todoForm = document.getElementById('todo-form'); +const todoInput = document.getElementById('todo-input'); +const todoList = document.getElementById('todo-list'); + +document.addEventListener('DOMContentLoaded', loadTasks); + +function addTask(event) { + event.preventDefault(); + + const taskText = todoInput.value.trim(); + if (taskText === "") { + alert("Please enter a task."); + return; + } + + const listItem = createTaskElement(taskText); + todoList.appendChild(listItem); + + saveTaskToLocalStorage(taskText); + + todoInput.value = ''; +} + +function createTaskElement(taskText) { + const listItem = document.createElement('li'); + listItem.className = 'todo-item'; + + const taskSpan = document.createElement('span'); + taskSpan.textContent = taskText; + + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete'; + deleteButton.className = 'delete-button'; + + listItem.appendChild(taskSpan); + listItem.appendChild(deleteButton); + + deleteButton.addEventListener('click', () => { + listItem.remove(); + removeTaskFromLocalStorage(taskText); + }); + + return listItem; +} + +function removeTaskFromLocalStorage(taskText) { + let tasks = getTasksFromLocalStorage(); + tasks = tasks.filter(task => task !== taskText); + localStorage.setItem('tasks', JSON.stringify(tasks)); +} + +todoForm.addEventListener('submit', addTask); + +function saveTaskToLocalStorage(taskText) { + let tasks = getTasksFromLocalStorage(); + tasks.push(taskText); + localStorage.setItem('tasks', JSON.stringify(tasks)); +} + +function getTasksFromLocalStorage() { + const tasks = localStorage.getItem('tasks'); + return tasks ? JSON.parse(tasks) : []; +} + +function loadTasks() { + const tasks = getTasksFromLocalStorage(); + tasks.forEach(taskText => { + const listItem = createTaskElement(taskText); + todoList.appendChild(listItem); + }); +} diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..481c684 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,161 @@ +const menuOpenButton = document.querySelector("#menu-open-button"); +const menuCloseButton = document.querySelector("#menu-close-button"); + +console.log("Script is running on this page."); + +menuOpenButton.addEventListener("click", () => { + document.body.classList.toggle("show-mobile-menu"); +}); + +menuCloseButton.addEventListener("click", () => menuOpenButton.click()); + + +(function() { + window.addEventListener('load', function() { + const loadTime = (performance.now()).toFixed(2); + + const loadTimeInfo = document.getElementById('load-time-info'); + loadTimeInfo.textContent = `Page loaded in ${loadTime} ms`; + }); +})(); + +document.addEventListener("DOMContentLoaded", function () { + const navLinks = document.querySelectorAll(".nav-item .nav-link"); + const currentPath = document.location.pathname; + navLinks.forEach(link => { + const linkPath = new URL(link.href).pathname; + if (linkPath === currentPath) { + link.classList.add("active"); + } + }); +}); + +document.addEventListener('DOMContentLoaded', () => { + const loader = document.getElementById('loader'); + const userList = document.getElementById('user-list'); + const errorMessage = document.getElementById('error-message'); + + const fetchData = async (filterCondition) => { + try { + loader.style.display = 'block'; + userList.innerHTML = ''; + errorMessage.style.display = 'none'; + + const response = await fetch('https://jsonplaceholder.typicode.com/users'); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const users = await response.json(); + + const filteredUsers = users.filter(user => + filterCondition === 'high' ? user.id > 5 : user.id <= 5 + ); + + renderUsers(filteredUsers); + } catch (error) { + console.error(error); + errorMessage.style.display = 'block'; + } finally { + loader.style.display = 'none'; + } + }; + + const renderUsers = (users) => { + if (users.length === 0) { + const li = document.createElement('li'); + li.textContent = "Пользователей не найдено." + userList.appendChild(li); + return; + } + + users.forEach(user => { + const li = document.createElement('li'); + li.textContent = `${user.name} (${user.email})`; + userList.appendChild(li); + }); + }; + + fetchData('high') + .then(r => console.log(r)) + .catch(e => console.error(e)); + + setTimeout(() => { + fetchData('low') + .then(r => console.log(r)) + .catch(e => console.error(e)); + }, 5000); +}); + +// Check if annyang (voice recognition library) is available +if (annyang) { + console.log("Annyang is available and ready!"); // Log that Annyang is ready + + // Define the voice commands and their corresponding actions + const commands = { + // Command to go to the home page + 'home': () => { + window.location.href = 'index.html'; // Redirect to index.html (Home Page) + }, + + // Command to go to the themes page + 'themes': () => { + window.location.href = 'ownership.html'; // Redirect to ownership.html (Themes Page) + }, + + // Command to go to the constructor page + 'constructor': () => { + window.location.href = 'constructor.html'; // Redirect to constructor.html (Constructor Page) + }, + + // Command to go to the contact page (which redirects to themes in this case) + 'contact': () => { + window.location.href = 'ownership.html'; // Redirect to ownership.html (same as themes page) + }, + + // Command to show an alert with a greeting message + 'say hello': () => { + alert('Hello! Welcome to the site.'); // Show a greeting message in an alert box + }, + + // Command to display a funny GIF (this can be used as a fun Easter egg) + 'ho ho ho': () => { + window.location.href = 'imgs/rick.gif'; // Redirect to a GIF (rick.gif) - Easter egg + }, + + // Command to show another GIF based on a famous Harry Potter phrase + 'the boy who lived': () => { + window.location.href = 'imgs/AVADACEDAVRA.gif'; // Redirect to another GIF (AVADACEDAVRA.gif) - Easter egg + } + }; + + // Add the defined commands to annyang + annyang.addCommands(commands); + + // Start voice recognition + annyang.start(); + + console.log("Voice recognition started"); // Log that voice recognition has started + + // Use case Scenario: + // 1. **User visits the website:** + // The website loads and initializes Annyang (voice recognition). + // User is prompted to speak voice commands like "home", "say hello", "ho ho ho", etc. + + // 2. **User interacts with the website via voice commands:** + // a. "Home" redirects to the homepage. + // b. "Themes" redirects to the themes page. + // c. "Constructor" redirects to the constructor page. + // d. "Contact" redirects to the themes page (same as themes). + // e. "Say hello" triggers a greeting message in an alert. + // f. "Ho ho ho" triggers a fun Rick GIF. + // g. "The boy who lived" triggers a Harry Potter GIF. + +} else { + // If annyang is not supported in the browser, log an error message + console.error("Annyang is not supported in this browser."); + // If the browser doesn't support Annyang, voice commands won't work, and you can either show an error message + // or use another fallback navigation (such as a normal UI with buttons). +} + +