Merge pull request #121 from AN0NCER/develop

Update customazing
AN0NCER · Oct 6, 2024 · 80c81f2 · 80c81f2
2 parents cb364f0 + 270b6ea
commit 80c81f2
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 172 deletions.
diff --git a/README.md b/README.md
@@ -1,62 +1,48 @@
-______
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/AN0NCER/resources/refs/heads/main/git-tunime/github_preview_black.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/AN0NCER/resources/refs/heads/main/git-tunime/github_preview_white.png">
+  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://raw.githubusercontent.com/AN0NCER/resources/refs/heads/main/git-tunime/github_preview_white.png">
+</picture>
 
-<img src="https://github.com/AN0NCER/resources/raw/main/GithubPreview(1).png">
 
-___
+# <img src="https://raw.githubusercontent.com/AN0NCER/resources/refs/heads/main/git-tunime/gif_tunime.gif" width="80" /> Tunime
 
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/49330600f3a5954c42ef1a0eb7241d02dbf9ade7/git-tunime/icon_animation.svg" align="left" width="50" />
 
-![Platform](https://img.shields.io/badge/platform-ios%20%7C%20android-brightgreen)
-![Release](https://img.shields.io/github/v/release/AN0NCER/an0ncer.github.io)
-![Code](https://img.shields.io/github/languages/top/AN0NCER/an0ncer.github.io)
+**`https://an0ncer.github.io/`** - это онлайн-платформа для просмотра аниме с возможностью управлять своим аккаунтом и управлением аниме. Сайт обладает удобным и простым интерфейсом, имеет множество различных функций и собственный сервер. Кроме того, сайт поддерживает функционал PWA, что позволяет добавить его на главный экран мобильного устройства и использовать как полноценное приложение **(Tunime MAX)**.
 
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/7731c9ac00ad69422f3991fa454a83918305e191/git-tunime/space.svg" width="35%">
 
-# <img src="https://wotaku.moe/asset/inaidle.webp" width="20" /> Tunime
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/4b11a0aeff88cb0430c633dd79f59636b2cb159d/git-tunime/tunime_max_1.svg" loading="lazy" width="100%">
 
-<img src="./images/icons/logo-x512-o.png" align="left" width="50" />
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/7731c9ac00ad69422f3991fa454a83918305e191/git-tunime/space.svg" width="35%">
 
-This site is a mobile application for watching anime. Uses data from **Shikimori** and **Kodik** player, as well as **PWA** functionality.
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/42a67c99beb8f7b0353c48cdd841459ca1879621/git-tunime/adaptive_interface.svg" loading="lazy" width="100%">
 
-## Functional
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/7731c9ac00ad69422f3991fa454a83918305e191/git-tunime/space.svg" width="35%">
 
-<img src="https://raw.githubusercontent.com/AN0NCER/resources/main/screenshot_6.PNG" align="right" width="310">
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/42a67c99beb8f7b0353c48cdd841459ca1879621/git-tunime/adaptive_window.svg" loading="lazy" width="100%">
 
-- [X] Search anime by name.
-- [X] View information about anime, including description, genre, number of episodes and rating.
-- [X] Play video on mobile device with Kodik player.
-- [X] Add anime to favorites.
-- [X] User account management.
-- [X] Work offline as a PWA app.
-- [X] Mobile optimization and friendly user interface.
-- [X] Ability to download TV series and movies to your device.
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/7731c9ac00ad69422f3991fa454a83918305e191/git-tunime/space.svg" width="35%">
 
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/42a67c99beb8f7b0353c48cdd841459ca1879621/git-tunime/menu_profile.svg" loading="lazy" width="100%">
 
-## Pages
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/7731c9ac00ad69422f3991fa454a83918305e191/git-tunime/space.svg" width="35%">
 
-- [X] Main page.
-- [X] Search page.
-- [X] Page witch anime (Can Watch).
-- [X] List page (User anime).
-- [X] User page.
-- [X] Settings page.
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/42a67c99beb8f7b0353c48cdd841459ca1879621/git-tunime/anime_access.svg" loading="lazy" width="100%">
 
-## Description
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/7731c9ac00ad69422f3991fa454a83918305e191/git-tunime/space.svg" width="35%">
 
-**`https://an0ncer.github.io/`** - is an online platform for watching anime with the ability to manage your account and save your favorites. The site has a convenient and simple interface, has many filters and categories to search for anime. In addition, the site supports PWA functionality, which allows you to add it to the home screen of a mobile device and use it as a full-fledged application.
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/42a67c99beb8f7b0353c48cdd841459ca1879621/git-tunime/syncronysing.svg" loading="lazy" width="100%">
 
-## Stats
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/7731c9ac00ad69422f3991fa454a83918305e191/git-tunime/space.svg" width="35%">
 
-![Alt](https://repobeats.axiom.co/api/embed/ade0779625b8da67b375884494164252f8348c2d.svg "Repobeats analytics image")
+<img src="https://raw.githubusercontent.com/AN0NCER/resources/42a67c99beb8f7b0353c48cdd841459ca1879621/git-tunime/settings.svg" loading="lazy" width="100%">
 
----
+## Дополнительно
 
-Interactive menu with easy settings options
-
-![Menu](https://github.com/AN0NCER/resources/blob/main/new-interact-menu.png?raw=true)
-___
-
-<img src="https://raw.githubusercontent.com/AN0NCER/resources/main/screenshot_2.PNG" align="left" width="23%">
-<img src="https://raw.githubusercontent.com/AN0NCER/resources/main/screenshot_3.PNG" align="left" width="23%">
-<img src="https://raw.githubusercontent.com/AN0NCER/resources/main/screenshot_4.PNG" align="left" width="23%">
-<img src="https://raw.githubusercontent.com/AN0NCER/resources/main/screenshot_5.PNG" align="left" width="23%">
-<img src ="https://raw.githubusercontent.com/AN0NCER/resources/main/screenshot_7.jpg" align="left" width="23%">
-<img src ="https://raw.githubusercontent.com/AN0NCER/resources/main/screenshot_8.png" align="left" width="23%">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/AN0NCER/resources/1499938db8f911a239b57c039b1a438026865ab2/git-tunime/framchises_detail_dark.svg" loading="lazy" width="100%">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/AN0NCER/resources/1499938db8f911a239b57c039b1a438026865ab2/git-tunime/framchises_detail_light.svg" loading="lazy" width="100%">
+  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://raw.githubusercontent.com/AN0NCER/resources/1499938db8f911a239b57c039b1a438026865ab2/git-tunime/framchises_detail_dark.svg" loading="lazy" width="100%">
+</picture>
diff --git a/javascript/pages/anime/51009.js b/javascript/pages/anime/51009.js
@@ -0,0 +1,13 @@
+import { Screenshots } from "../watch/mod_resource.js";
+
+const url = "https://image.tmdb.org/t/p/original/fgPa2oJD8lbLaTanzlGDd32tqDE.jpg";
+
+$(`.page-loading`).css("--image", `url(${url})`);
+
+export default {
+    OnLoad: () => {
+        $('.galery-slider').prepend(`<div class="slide" data-id="${Screenshots.length}"><img src="${url}"></div>`);
+        $(`.galery-slider > .slide[data-id="${Screenshots.length - 1}"]`).click();
+        Screenshots.push({ original: url });
+    }
+}
diff --git a/javascript/pages/anime/51122.js b/javascript/pages/anime/51122.js
@@ -10,7 +10,7 @@ if (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {
 const url = "https://image.tmdb.org/t/p/original/Ao8SbtYJbxBuzFTQFSdHF7lLmDE.jpg";
 const bg = "https://image.tmdb.org/t/p/original/iCqaGYVQw9MYZap5pNgTRkdPBWf.jpg";
 
-$(`.page-loading`).css({ "background": `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url('${load_image}') no-repeat center center / cover` });
+$(`.page-loading`).css("--image", `url(${load_image})`);
 
 export default {
     OnLoad: () => {

diff --git a/javascript/pages/settings.js b/javascript/pages/settings.js
@@ -92,6 +92,12 @@ const Parameters = [
                 name: 'Скрыть героев',
                 description: 'Позволяет пользователю убирать изображения персонажей для более нейтрального просмотра сайта.'
             },
+            {
+                type: 'boolean',
+                param: 'customstyle',
+                name: 'Кастомизация',
+                description: 'Включить кастомные стили для некоторых аниме.'
+            },
             // {
             //     type: 'boolean',
             //     param: '',

diff --git a/javascript/pages/watch.js b/javascript/pages/watch.js
@@ -29,11 +29,13 @@ import(`/javascript/pages/watch/mod_collection.js`);
 
 //Авторизируем пользователя
 Main(async (e) => {
-    try {
-        const data = await import(`/javascript/pages/anime/${$ID}.js`);
-        $RULES = data.default;
-        console.log(`[watch] - Custom RULES uploaded`);
-    } catch { }
+    if ($PARAMETERS.anime.customstyle) {
+        try {
+            const data = await import(`/javascript/pages/anime/${$ID}.js`);
+            $RULES = data.default;
+            console.log(`[watch] - Custom RULES uploaded`);
+        } catch { }
+    }
     //Проверка на существование такого ID
     const check = await CheckID($ID);
 

diff --git a/javascript/parametrs.js b/javascript/parametrs.js
@@ -9,6 +9,7 @@ const $PARAMETERS = {
     anime: {
         syncdata: true,
         hidehero: false,
+        customstyle: true,
     },
     watch: {
         dubanime: false,

diff --git a/style/css/list.css b/style/css/list.css
@@ -1055,7 +1055,6 @@ body.menuver[data-orientation="90"] .span-row {
 }
 .app > .wrapper .anime-content .anime-list .card-loader,
 .app > .wrapper .anime-content .anime-search-result .card-loader {
-  max-height: 200px;
   aspect-ratio: 1/1.44;
   border-radius: 4px;
   display: flex;

diff --git a/style/css/watch.css b/style/css/watch.css
@@ -21,10 +21,29 @@ body.loading {
   left: 0;
   width: 100%;
   height: 100dvh;
-  background: #101318;
   opacity: 1;
   z-index: 9999;
 }
+.page-loading::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #101318;
+  z-index: 1;
+}
+.page-loading::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgb(0, 0, 0)), var(--image) center center/cover no-repeat;
+}
 .page-loading .loader {
   position: absolute;
   top: calc(50% - 32px);
@@ -33,6 +52,7 @@ body.loading {
   height: 64px;
   border-radius: 50%;
   perspective: 800px;
+  z-index: 3;
 }
 .page-loading .wrapper {
   max-width: 900px;
@@ -43,6 +63,7 @@ body.loading {
   width: 100%;
   left: 0;
   right: 0;
+  z-index: 3;
 }
 .page-loading .wrapper .text-error {
   position: absolute;
@@ -632,6 +653,12 @@ main .player-title .player-controls .btn {
   background: #191C21;
 }
 
+.spotify {
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+}
+
 .episodes {
   margin: 20px 20px 10px 20px;
   overflow: hidden;

diff --git a/style/watch.scss b/style/watch.scss
@@ -15,124 +15,7 @@ body {
     }
 }
 
-.page-loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100dvh;
-    background: #101318;
-    opacity: 1;
-    z-index: 9999;
-
-    .loader {
-        position: absolute;
-        top: calc(50% - 32px);
-        left: calc(50% - 32px);
-        width: 64px;
-        height: 64px;
-        border-radius: 50%;
-        perspective: 800px;
-    }
-
-    .wrapper {
-        max-width: 900px;
-        margin: 0 auto;
-        position: absolute;
-        bottom: 20px;
-        height: 4px;
-        width: 100%;
-        left: 0;
-        right: 0;
-
-        .text-error {
-            position: absolute;
-            bottom: 10px;
-            text-align: center;
-            left: 20px;
-            right: 20px;
-            color: #ff000057;
-            font-family: "Manrope";
-            font-size: 12px;
-        }
-
-        .progress {
-            position: relative;
-            height: 4px;
-            margin-left: 20px;
-            margin-right: 20px;
-            border-radius: 3px;
-            background: #ffffff07;
-            overflow: hidden;
-
-            .bar {
-                width: 0%;
-                height: 100%;
-                background: #5fbff325;
-                transition: 0.6s ease-in-out;
-            }
-        }
-    }
-
-    .inner {
-        position: absolute;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-    }
-
-    .inner.one {
-        left: 0%;
-        top: 0%;
-        animation: rotate-one 1s linear infinite;
-        border-bottom: 3px solid #efeffa;
-    }
-
-    .inner.two {
-        right: 0%;
-        top: 0%;
-        animation: rotate-two 1s linear infinite;
-        border-right: 3px solid #efeffa;
-    }
-
-    .inner.three {
-        right: 0%;
-        bottom: 0%;
-        animation: rotate-three 1s linear infinite;
-        border-top: 3px solid #efeffa;
-    }
-
-    @keyframes rotate-one {
-        0% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-        }
-
-        100% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-two {
-        0% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-        }
-
-        100% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-three {
-        0% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-        }
-
-        100% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-        }
-    }
-}
+@import './watch/pageloading';
 
 header {
     width: 100%;
@@ -748,6 +631,12 @@ main {
     }
 }
 
+.spotify {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+
 .episodes {
     margin: 20px 20px 10px 20px;
     overflow: hidden;