v1.0.0

11 months ago · f9d5ce3dc8
parent 9690043c2e
commit f9d5ce3dc8
28 changed files with 3710 additions and 0 deletions
--- a/app/LICENSE
+++ b/app/LICENSE
@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) <year> <copyright holders>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/app/README.md
+++ b/app/README.md
@ -0,0 +1,8 @@
+#nano4
+
+Попытка уйти от jQuery и использовать чистый tailwind.
+
+## История
+
+- 27-01-2024 v1.0.0 начальная (галерея работает)
+
--- a/app/index.html
+++ b/app/index.html
@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
+    <title>TE+Svelte</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/app/jsconfig.json
+++ b/app/jsconfig.json
@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
--- a/app/main.jl
+++ b/app/main.jl
@ -0,0 +1,76 @@
+using Oxygen
+using HTTP
+using DBInterface, MySQL
+
+conn = DBInterface.connect(MySQL.Connection, "xigmanas", "itman", "X753951x", db="sea")
+
+staticfiles("./dist", "/")
+# staticfiles("./dist/font", "/font")
+
+# Определение маршрута для обработки запросов и возврата файла index.html
+@get "/" function(req::HTTP.Request)
+    return html(read("./dist/index.html", String), status=200)
+end
+
+@get "/album/{album}" function(req::HTTP.Request, album::String)
+	# println("get album: $(album)")
+    cmd = """
+    	select 
+    		filemeta.id, newurl, 
+			thumb.url as srct, 
+			thumb.width as widtht, thumb.height as heightt
+    	from filemeta 
+    		join pic on filemeta.id = pic.file_id
+    		join thumb on filemeta.id = thumb.file_id
+    	where 
+    		pic.seria = '$album' 
+    		and filemeta.del = 0
+    	limit 100
+    """
+    rows = DBInterface.execute(conn, cmd)
+    answer = []
+    for r in rows
+    	push!(answer, Dict(
+			"id"=>r.id, 
+			"newurl"=>r.newurl, 
+			"srct"=>r.srct,
+			"widtht"=>r.widtht,
+			"heightt"=>r.heightt
+		))
+    end
+	# println("$album: $(length(answer))")
+    json(answer)
+end
+
+@get "/albums" function(req::HTTP.Request)
+	# println("get album: $(album)")
+    cmd = """
+    	select 
+    		pic.seria, 
+			count(pic.seria) as cnt 
+    	from pic 
+    		join filemeta on pic.file_id = filemeta.id
+    	where 
+    		filemeta.del = 0 and pic.seria not like "comic%"
+		group by
+			pic.seria	
+		-- limit 10			
+    """
+    rows = DBInterface.execute(conn, cmd)
+    answer = []
+    for r in rows
+    	push!(answer, Dict(
+			"album"=>r.seria, 
+			"count"=>r.cnt
+		))
+    end
+	json(answer)
+end
+
+title = "nano4 v1.0.0 (30-01-2024)"
+printstyled("[ Стартую сервер: $(title)\n", color = :magenta, bold = true)  
+
+
+# set application level middleware
+serve(port=4321)
+
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@ -0,0 +1,24 @@
+{
+  "name": "nano4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "svelte": "^4.2.8",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "axios": "^1.6.7",
+    "svelte-spa-router": "^4.0.1",
+    "tw-elements": "^1.1.0"
+  }
+}
--- a/app/postcss.config.js
+++ b/app/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/app/public/vite.svg
+++ b/app/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/app/src/App.svelte
+++ b/app/src/App.svelte
@ -0,0 +1,12 @@
+<script>
+  import Router from "svelte-spa-router";
+  import { routes } from "./routers.js";
+  import Navbar from "./navbar/Navbar.svelte";
+
+</script>
+
+<Navbar/>
+
+<section>
+  <Router {routes} restoreScrollState={true}/>
+</section>
--- a/app/src/app.css
+++ b/app/src/app.css
@ -0,0 +1,8 @@
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+	background-color: #212121;
+}
--- a/app/src/assets/svelte.svg
+++ b/app/src/assets/svelte.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/app/src/gallery/Gallery.svelte
+++ b/app/src/gallery/Gallery.svelte
@ -0,0 +1,52 @@
+<script>
+  import { onMount } from "svelte";
+  //   import { fade } from 'svelte/transition';
+  import { initTE, Lightbox } from "tw-elements";
+  import axios from "axios";
+  import Images from "./Images.svelte";
+
+  let images = [];
+
+  // ======= команды =================
+  function move(e) {
+    let id = e.detail.id;
+    // console.log("move image id: ", id);
+    axios.get("/album/inz").then((response) => {
+      let imgs = response.data.map((image) => {
+        image.selected = false;
+        return image;
+      });
+      // console.log("imgs: ", imgs);
+      images = imgs;
+    });
+  }
+
+  function trash(e) {
+    let id = e.detail.id;
+    // console.log("trash image id: ", id);
+    axios.get(`/trash/${id}`).then((response) => {
+      let imgs = response.data.map((image) => {
+        image.selected = false;
+        return image;
+      });
+      // console.log("imgs: ", imgs);
+      images = imgs;
+    });
+  }
+
+  onMount(() => {
+    axios.get("/album/scool").then((response) => {
+      images = response.data;
+      console.log("images: ", images);
+      initTE({ Lightbox });
+    });
+  });
+
+</script>
+
+<div data-te-lightbox-init class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
+  <div class="md:columns-3 xl:columns-4 gap-2 mb-2 h-full w-full">
+    <Images {images} on:move={move} on:trash={trash}/>
+  </div>
+</div>
+
--- a/app/src/gallery/Images.svelte
+++ b/app/src/gallery/Images.svelte
@ -0,0 +1,99 @@
+<script>
+  import axios from "axios";
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  export let images = [];
+  function selectrect(block) {
+        console.log("selected:", block)
+    }
+
+  function command_move(id) {
+    dispatch('move', 
+    {
+        id: id,
+    });
+  }
+
+  function command_trash(id) {
+    dispatch('trash', 
+    {
+        id: id,
+    });
+  }
+
+  // function command_trash(e) {
+  //   images.splice(2, 1);
+  //   images = images;
+  // }
+
+  function command_select(id) {
+    console.log("select: " + id);
+    let image = images.find((image) => image.id == id);
+    if (image) {
+      console.log("select image: " + image.id);
+      image.selected = !image.selected;
+    } else {
+      console.log("selected image not found");
+    }
+    images = images;
+  }
+</script>
+
+{#each images as image}
+  <div class="group relative hover:bg-slate-100">
+    <!-- сама картинка -->
+    <img src={image.srct} data-te-img={image.newurl} class="img-space mb-2 w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto" class:p-2={image.selected} width={image.widtht} height={image.heightt} alt={image.newurl} />
+
+    <!-- левый нижний угол (id картинки) -->
+    <span class="absolute invisible group-hover:visible bottom-4 left-6">{image.id}</span>
+
+    <!-- левый верхний угол -->
+    <div class="flex absolute group-hover:visible top-2 left-4" class:invisible={!image.selected}>
+      <!-- отметка/снятие отметки -->
+      <button type="button" class="rounded-full" on:click={() => command_select(image.id)}>
+        {#if image.selected}
+          <svg class="p-2 w-8 h-8 fill-neutral-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+          </svg>
+        {:else}
+          <svg class="p-2 w-8 h-8 fill-neutral-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
+          </svg>
+        {/if}
+      </button>
+
+      <!-- рейтинг -->
+      <button type="button" class="rounded-full" on:click={ () => command_trash}>
+        <svg class="p-2 w-8 h-8 fill-neutral-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+          <path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- правый нижний угол -->
+    <div class="flex absolute invisible group-hover:visible bottom-2 right-4">
+      <!-- удаление -->
+      <button 
+        type="button" 
+        class="rounded-full hover:bg-default hover:bg-primary" 
+        on:click={() => command_trash(image.id)}
+      >
+        <svg class="p-2 w-8 h-8 fill-neutral-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+          <path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z" />
+        </svg>
+      </button>
+
+      <!-- перемещение -->
+      <button 
+          type="button" 
+          class="rounded-full hover:bg-default hover:bg-primary" 
+          on:click={() => command_move(image.id)}
+      >
+        <svg class="p-2 w-8 h-8 fill-neutral-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+          <path d="M400 255.4V240 208c0-8.8-7.2-16-16-16H352 336 289.5c-50.9 0-93.9 33.5-108.3 79.6c-3.3-9.4-5.2-19.8-5.2-31.6c0-61.9 50.1-112 112-112h48 16 32c8.8 0 16-7.2 16-16V80 64.6L506 160 400 255.4zM336 240h16v48c0 17.7 14.3 32 32 32h3.7c7.9 0 15.5-2.9 21.4-8.2l139-125.1c7.6-6.8 11.9-16.5 11.9-26.7s-4.3-19.9-11.9-26.7L409.9 8.9C403.5 3.2 395.3 0 386.7 0C367.5 0 352 15.5 352 34.7V80H336 304 288c-88.4 0-160 71.6-160 160c0 60.4 34.6 99.1 63.9 120.9c5.9 4.4 11.5 8.1 16.7 11.2c4.4 2.7 8.5 4.9 11.9 6.6c3.4 1.7 6.2 3 8.2 3.9c2.2 1 4.6 1.4 7.1 1.4h2.5c9.8 0 17.8-8 17.8-17.8c0-7.8-5.3-14.7-11.6-19.5l0 0c-.4-.3-.7-.5-1.1-.8c-1.7-1.1-3.4-2.5-5-4.1c-.8-.8-1.7-1.6-2.5-2.6s-1.6-1.9-2.4-2.9c-1.8-2.5-3.5-5.3-5-8.5c-2.6-6-4.3-13.3-4.3-22.4c0-36.1 29.3-65.5 65.5-65.5H304h32zM72 32C32.2 32 0 64.2 0 104V440c0 39.8 32.2 72 72 72H408c39.8 0 72-32.2 72-72V376c0-13.3-10.7-24-24-24s-24 10.7-24 24v64c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V104c0-13.3 10.7-24 24-24h64c13.3 0 24-10.7 24-24s-10.7-24-24-24H72z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/each}
--- a/app/src/gallery/items.js
+++ b/app/src/gallery/items.js
@ -0,0 +1,498 @@
+let items_src = [
+  {
+    "id": 11,
+    "newurl": "http://192.168.0.105:9091/6,4a717e787262",
+    "srct": "http://192.168.0.105:9091/6,55b76b35f052f5.jpg"
+  },
+  {
+    "id": 13,
+    "newurl": "http://192.168.0.105:9091/1,59d21a8556e0",
+    "srct": "http://192.168.0.105:9091/7,55b76c12c4ddda.jpg"
+  },
+  {
+    "id": 15,
+    "newurl": "http://192.168.0.105:9091/2,58e612798258",
+    "srct": "http://192.168.0.105:9091/3,55b76d97a21103.jpeg"
+  },
+  {
+    "id": 16,
+    "newurl": "http://192.168.0.105:9091/4,0f81bf65fc0de6",
+    "srct": "http://192.168.0.105:9091/4,55b76e4ba0fc74.png"
+  },
+  {
+    "id": 17,
+    "newurl": "http://192.168.0.105:9091/3,0fc093baba9b27",
+    "srct": "http://192.168.0.105:9091/4,55b76f2c0fe56c.jpg"
+  },
+  {
+    "id": 18,
+    "newurl": "http://192.168.0.105:9091/2,0fa5da52e8e301",
+    "srct": "http://192.168.0.105:9091/1,55b7709dbc46a9.jpg"
+  },
+  {
+    "id": 19,
+    "newurl": "http://192.168.0.105:9091/3,0eca1edb4c7b1b",
+    "srct": "http://192.168.0.105:9091/7,55b7711f435419.jpg"
+  },
+  {
+    "id": 20,
+    "newurl": "http://192.168.0.105:9091/5,0f6204cc99ef8a",
+    "srct": "http://192.168.0.105:9091/4,55b7727945e84e.jpg"
+  },
+  {
+    "id": 21,
+    "newurl": "http://192.168.0.105:9091/4,0faf0f7e18f883",
+    "srct": "http://192.168.0.105:9091/5,55b77394d6f0f4.jpg"
+  },
+  {
+    "id": 22,
+    "newurl": "http://192.168.0.105:9091/7,0f9261060983ed",
+    "srct": "http://192.168.0.105:9091/2,55b77426ea65ed.jpg"
+  },
+  {
+    "id": 23,
+    "newurl": "http://192.168.0.105:9091/2,100425976a9959",
+    "srct": "http://192.168.0.105:9091/4,55b77560020338.jpg"
+  },
+  {
+    "id": 24,
+    "newurl": "http://192.168.0.105:9091/5,0fc0f3d228da93",
+    "srct": "http://192.168.0.105:9091/2,55b7764b8fe915.jpg"
+  },
+  {
+    "id": 26,
+    "newurl": "http://192.168.0.105:9091/1,10040dd9712a6b",
+    "srct": "http://192.168.0.105:9091/3,55b7785bc6f3f1.png"
+  },
+  {
+    "id": 28,
+    "newurl": "http://192.168.0.105:9091/2,0fc1c67c4cd833",
+    "srct": "http://192.168.0.105:9091/3,55b77acdb2b7bf.jpg"
+  },
+  {
+    "id": 29,
+    "newurl": "http://192.168.0.105:9091/5,0fc0c981e7a7d6",
+    "srct": "http://192.168.0.105:9091/4,55b77bef59dfa9.jpg"
+  },
+  {
+    "id": 30,
+    "newurl": "http://192.168.0.105:9091/2,1003cc544e9df4",
+    "srct": "http://192.168.0.105:9091/5,55b77cb9a54ee2.jpg"
+  },
+  {
+    "id": 31,
+    "newurl": "http://192.168.0.105:9091/5,0fc085b5248472",
+    "srct": "http://192.168.0.105:9091/5,55b77de207d0a8.jpg"
+  },
+  {
+    "id": 32,
+    "newurl": "http://192.168.0.105:9091/1,02568c712ab7ff",
+    "srct": "http://192.168.0.105:9091/1,55b77eb53ceaf9.jpg"
+  },
+  {
+    "id": 33,
+    "newurl": "http://192.168.0.105:9091/3,0ec8f2d11fb727",
+    "srct": "http://192.168.0.105:9091/3,55b77f5691115c.jpg"
+  },
+  {
+    "id": 34,
+    "newurl": "http://192.168.0.105:9091/2,0fc1d6350837b7",
+    "srct": "http://192.168.0.105:9091/7,55b780eb086751.jpg"
+  },
+  {
+    "id": 35,
+    "newurl": "http://192.168.0.105:9091/3,1003fbbea2013f",
+    "srct": "http://192.168.0.105:9091/2,55b7812fc9f9fc.jpg"
+  },
+  {
+    "id": 36,
+    "newurl": "http://192.168.0.105:9091/2,0f7c55908472fa",
+    "srct": "http://192.168.0.105:9091/3,55b78293319f15.jpg"
+  },
+  {
+    "id": 38,
+    "newurl": "http://192.168.0.105:9091/7,0f93878e2461af",
+    "srct": "http://192.168.0.105:9091/5,55b7840a5f8181.jpg"
+  },
+  {
+    "id": 39,
+    "newurl": "http://192.168.0.105:9091/5,0ec8a89d03fb1a",
+    "srct": "http://192.168.0.105:9091/7,55b7856f66779b.jpg"
+  },
+  {
+    "id": 40,
+    "newurl": "http://192.168.0.105:9091/3,0ed357ce1ec7d8",
+    "srct": "http://192.168.0.105:9091/6,55b786342013e6.jpg"
+  },
+  {
+    "id": 42,
+    "newurl": "http://192.168.0.105:9091/4,0f93737f626689",
+    "srct": "http://192.168.0.105:9091/6,55b7883713be5c.jpg"
+  },
+  {
+    "id": 43,
+    "newurl": "http://192.168.0.105:9091/1,0f5907e6024795",
+    "srct": "http://192.168.0.105:9091/1,55b789a8c1fa60.jpg"
+  },
+  {
+    "id": 44,
+    "newurl": "http://192.168.0.105:9091/6,0f5d580838fb9c",
+    "srct": "http://192.168.0.105:9091/5,55b78a900de766.jpg"
+  },
+  {
+    "id": 45,
+    "newurl": "http://192.168.0.105:9091/5,0fc11143069019",
+    "srct": "http://192.168.0.105:9091/1,55b78b0f609980.jpg"
+  },
+  {
+    "id": 46,
+    "newurl": "http://192.168.0.105:9091/7,1f8cb49610603b",
+    "srct": "http://192.168.0.105:9091/5,55b78cf4729733.jpg"
+  },
+  {
+    "id": 47,
+    "newurl": "http://192.168.0.105:9091/5,0fc0fc99b8732f",
+    "srct": "http://192.168.0.105:9091/7,55b78d22c5aa08.jpg"
+  },
+  {
+    "id": 48,
+    "newurl": "http://192.168.0.105:9091/5,1003fffe10af42",
+    "srct": "http://192.168.0.105:9091/1,55b78ea30725f8.jpg"
+  },
+  {
+    "id": 49,
+    "newurl": "http://192.168.0.105:9091/4,0ed3a30b02dff7",
+    "srct": "http://192.168.0.105:9091/1,55b78fd096ee46.jpg"
+  },
+  {
+    "id": 50,
+    "newurl": "http://192.168.0.105:9091/6,0ecca582832547",
+    "srct": "http://192.168.0.105:9091/5,55b790ae55fbd2.jpg"
+  },
+  {
+    "id": 54,
+    "newurl": "http://192.168.0.105:9091/3,0fbe25dd00c22a",
+    "srct": "http://192.168.0.105:9091/6,55b793dc0551f5.jpg"
+  },
+  {
+    "id": 55,
+    "newurl": "http://192.168.0.105:9091/5,0dec3a00bb6b4e",
+    "srct": "http://192.168.0.105:9091/7,55b7948d4a221f.jpg"
+  },
+  {
+    "id": 56,
+    "newurl": "http://192.168.0.105:9091/6,0850de56f8761c",
+    "srct": "http://192.168.0.105:9091/4,55b7952ae59145.jpg"
+  },
+  {
+    "id": 57,
+    "newurl": "http://192.168.0.105:9091/6,0f7c6e85f32e48",
+    "srct": "http://192.168.0.105:9091/5,55b79654b6dfba.jpg"
+  },
+  {
+    "id": 58,
+    "newurl": "http://192.168.0.105:9091/6,0fc1913aa5a855",
+    "srct": "http://192.168.0.105:9091/2,55b7975324db12.jpg"
+  },
+  {
+    "id": 59,
+    "newurl": "http://192.168.0.105:9091/3,0fc0c4f1b085ac",
+    "srct": "http://192.168.0.105:9091/5,55b798593e5c0b.jpg"
+  },
+  {
+    "id": 60,
+    "newurl": "http://192.168.0.105:9091/4,0fa0d22eb3f34b",
+    "srct": "http://192.168.0.105:9091/1,55b79907d5c5c3.jpg"
+  },
+  {
+    "id": 61,
+    "newurl": "http://192.168.0.105:9091/5,0fc1806c7e18ec",
+    "srct": "http://192.168.0.105:9091/5,55b79a395c16a0.jpg"
+  },
+  {
+    "id": 62,
+    "newurl": "http://192.168.0.105:9091/2,0fc0d0a73a5d45",
+    "srct": "http://192.168.0.105:9091/1,55b79b4ca2bce8.jpg"
+  },
+  {
+    "id": 63,
+    "newurl": "http://192.168.0.105:9091/3,0f6f4af97e91f6",
+    "srct": "http://192.168.0.105:9091/5,55b79c14df72a5.png"
+  },
+  {
+    "id": 64,
+    "newurl": "http://192.168.0.105:9091/5,0f93acb078d12a",
+    "srct": "http://192.168.0.105:9091/1,55b79db56f23bb.jpg"
+  },
+  {
+    "id": 65,
+    "newurl": "http://192.168.0.105:9091/5,1f8cc731bc81ba",
+    "srct": "http://192.168.0.105:9091/7,55b79ef357d129.jpg"
+  },
+  {
+    "id": 66,
+    "newurl": "http://192.168.0.105:9091/7,0f15ac84f58c56",
+    "srct": "http://192.168.0.105:9091/6,55b79f76eb504c.jpg"
+  },
+  {
+    "id": 67,
+    "newurl": "http://192.168.0.105:9091/3,0dec1bcf59c84d",
+    "srct": "http://192.168.0.105:9091/5,55b7a089fbe393.jpg"
+  },
+  {
+    "id": 68,
+    "newurl": "http://192.168.0.105:9091/1,0faf4681c0b85b",
+    "srct": "http://192.168.0.105:9091/6,55b7a1d8e21116.jpg"
+  },
+  {
+    "id": 69,
+    "newurl": "http://192.168.0.105:9091/5,0d00e7d8291841",
+    "srct": "http://192.168.0.105:9091/5,55b7a21513c29a.jpg"
+  },
+  {
+    "id": 70,
+    "newurl": "http://192.168.0.105:9091/3,0f7c5806e69952",
+    "srct": "http://192.168.0.105:9091/6,55b7a304585d6c.jpg"
+  },
+  {
+    "id": 71,
+    "newurl": "http://192.168.0.105:9091/7,0ee6d5c2b564b0",
+    "srct": "http://192.168.0.105:9091/4,55b7a4e5473d20.jpg"
+  },
+  {
+    "id": 72,
+    "newurl": "http://192.168.0.105:9091/1,0f1609c53bfa37",
+    "srct": "http://192.168.0.105:9091/4,55b7a59bae8578.jpg"
+  },
+  {
+    "id": 73,
+    "newurl": "http://192.168.0.105:9091/1,1003ddd3bf6f2d",
+    "srct": "http://192.168.0.105:9091/6,55b7a66d5a0651.jpg"
+  },
+  {
+    "id": 74,
+    "newurl": "http://192.168.0.105:9091/4,0f56887f874d17",
+    "srct": "http://192.168.0.105:9091/4,55b7a777747cee.jpeg"
+  },
+  {
+    "id": 75,
+    "newurl": "http://192.168.0.105:9091/7,0fc10b050fb461",
+    "srct": "http://192.168.0.105:9091/4,55b7a8ed103e0d.jpg"
+  },
+  {
+    "id": 76,
+    "newurl": "http://192.168.0.105:9091/5,0d00d38452061f",
+    "srct": "http://192.168.0.105:9091/7,55b7a93799a03e.jpg"
+  },
+  {
+    "id": 77,
+    "newurl": "http://192.168.0.105:9091/5,0fa1589102ca37",
+    "srct": "http://192.168.0.105:9091/3,55b7aab3c00966.jpg"
+  },
+  {
+    "id": 78,
+    "newurl": "http://192.168.0.105:9091/5,0dec24ed4d1ecd",
+    "srct": "http://192.168.0.105:9091/3,55b7ab149b7e16.jpg"
+  },
+  {
+    "id": 79,
+    "newurl": "http://192.168.0.105:9091/5,0f933c5b71b325",
+    "srct": "http://192.168.0.105:9091/4,55b7ac44b45b04.jpg"
+  },
+  {
+    "id": 80,
+    "newurl": "http://192.168.0.105:9091/2,1f8cd8ae50771b",
+    "srct": "http://192.168.0.105:9091/5,55b7ad6e57fd90.jpg"
+  },
+  {
+    "id": 82,
+    "newurl": "http://192.168.0.105:9091/1,0ece59c5c0787f",
+    "srct": "http://192.168.0.105:9091/6,55b7ae329f99c8.jpg"
+  },
+  {
+    "id": 83,
+    "newurl": "http://192.168.0.105:9091/3,0f5221abb5105b",
+    "srct": "http://192.168.0.105:9091/1,55b7af83dbd411.png"
+  },
+  {
+    "id": 84,
+    "newurl": "http://192.168.0.105:9091/5,0fc160b64d0f03",
+    "srct": "http://192.168.0.105:9091/7,55b7b0fc20bcc8.jpg"
+  },
+  {
+    "id": 85,
+    "newurl": "http://192.168.0.105:9091/7,0f5212ab288e6e",
+    "srct": "http://192.168.0.105:9091/4,55b7b1d07c67d4.jpg"
+  },
+  {
+    "id": 86,
+    "newurl": "http://192.168.0.105:9091/2,0dec18032661ff",
+    "srct": "http://192.168.0.105:9091/6,55b7b2a9a0f9b1.jpg"
+  },
+  {
+    "id": 87,
+    "newurl": "http://192.168.0.105:9091/1,0ecbc87d050143",
+    "srct": "http://192.168.0.105:9091/4,55b7b3a4549b85.jpg"
+  },
+  {
+    "id": 88,
+    "newurl": "http://192.168.0.105:9091/3,0f92dcd0245713",
+    "srct": "http://192.168.0.105:9091/3,55b7b469f7dcbe.jpg"
+  },
+  {
+    "id": 89,
+    "newurl": "http://192.168.0.105:9091/3,0f78f40e12b337",
+    "srct": "http://192.168.0.105:9091/6,55b7b506ae49e8.jpg"
+  },
+  {
+    "id": 90,
+    "newurl": "http://192.168.0.105:9091/7,0f7c50550f88c7",
+    "srct": "http://192.168.0.105:9091/3,55b7b6917f55f6.jpg"
+  },
+  {
+    "id": 91,
+    "newurl": "http://192.168.0.105:9091/4,0f5d6c83e4b245",
+    "srct": "http://192.168.0.105:9091/5,55b7b75a1577d1.jpg"
+  },
+  {
+    "id": 92,
+    "newurl": "http://192.168.0.105:9091/3,0f568132d3f85b",
+    "srct": "http://192.168.0.105:9091/3,55b7b8a3fc7623.jpeg"
+  },
+  {
+    "id": 93,
+    "newurl": "http://192.168.0.105:9091/4,0fc0cc9d30ff9d",
+    "srct": "http://192.168.0.105:9091/5,55b7b959d8b2ab.jpg"
+  },
+  {
+    "id": 94,
+    "newurl": "http://192.168.0.105:9091/6,0f799c04e601f9",
+    "srct": "http://192.168.0.105:9091/7,55b7ba1c6b4735.jpg"
+  },
+  {
+    "id": 95,
+    "newurl": "http://192.168.0.105:9091/4,0f5d9ccb04640c",
+    "srct": "http://192.168.0.105:9091/4,55b7bb7c718207.jpg"
+  },
+  {
+    "id": 96,
+    "newurl": "http://192.168.0.105:9091/3,0fc0e2744b412b",
+    "srct": "http://192.168.0.105:9091/1,55b7bc728761bf.jpg"
+  },
+  {
+    "id": 97,
+    "newurl": "http://192.168.0.105:9091/1,0f5d83c4fda858",
+    "srct": "http://192.168.0.105:9091/3,55b7bdac6241a8.jpg"
+  },
+  {
+    "id": 98,
+    "newurl": "http://192.168.0.105:9091/3,0fc15ae70e2539",
+    "srct": "http://192.168.0.105:9091/1,55b7be00c770f3.jpg"
+  },
+  {
+    "id": 99,
+    "newurl": "http://192.168.0.105:9091/3,0fae7405235d68",
+    "srct": "http://192.168.0.105:9091/4,55b7bf01810c1e.jpg"
+  },
+  {
+    "id": 101,
+    "newurl": "http://192.168.0.105:9091/5,0ec9b4ceb40d0b",
+    "srct": "http://192.168.0.105:9091/2,55b7c03218b521.jpg"
+  },
+  {
+    "id": 103,
+    "newurl": "http://192.168.0.105:9091/4,0fc0aefea12599",
+    "srct": "http://192.168.0.105:9091/1,55b7c196eb134e.jpg"
+  },
+  {
+    "id": 104,
+    "newurl": "http://192.168.0.105:9091/4,1cb554fac518f4",
+    "srct": "http://192.168.0.105:9091/4,55b7c24bcc3534.jpg"
+  },
+  {
+    "id": 105,
+    "newurl": "http://192.168.0.105:9091/6,0dec5053fe893f",
+    "srct": "http://192.168.0.105:9091/3,55b7c3e6d3e827.jpg"
+  },
+  {
+    "id": 107,
+    "newurl": "http://192.168.0.105:9091/3,0fc08ddfb04115",
+    "srct": "http://192.168.0.105:9091/4,55b7c58d10b6a4.jpg"
+  },
+  {
+    "id": 108,
+    "newurl": "http://192.168.0.105:9091/7,0fc1681933fd0b",
+    "srct": "http://192.168.0.105:9091/4,55b7c65e78e2d8.png"
+  },
+  {
+    "id": 109,
+    "newurl": "http://192.168.0.105:9091/6,0f5960ace72708",
+    "srct": "http://192.168.0.105:9091/6,55b7c71de3633c.jpg"
+  },
+  {
+    "id": 110,
+    "newurl": "http://192.168.0.105:9091/6,0f92c7136177a0",
+    "srct": "http://192.168.0.105:9091/6,55b7c84a2db7e0.jpg"
+  },
+  {
+    "id": 111,
+    "newurl": "http://192.168.0.105:9091/2,0fc18b8171213b",
+    "srct": "http://192.168.0.105:9091/7,55b7c9a503cb5b.jpg"
+  },
+  {
+    "id": 112,
+    "newurl": "http://192.168.0.105:9091/4,0fc09ed2bf3382",
+    "srct": "http://192.168.0.105:9091/5,55b7caf6236762.jpg"
+  },
+  {
+    "id": 113,
+    "newurl": "http://192.168.0.105:9091/2,0ec883b9f31dc4",
+    "srct": "http://192.168.0.105:9091/3,55b7cb4d40e1ac.jpg"
+  },
+  {
+    "id": 115,
+    "newurl": "http://192.168.0.105:9091/7,0fc0d4cbfcf701",
+    "srct": "http://192.168.0.105:9091/4,55b7cc1d2fe845.jpg"
+  },
+  {
+    "id": 116,
+    "newurl": "http://192.168.0.105:9091/3,1003f57e05a010",
+    "srct": "http://192.168.0.105:9091/7,55b7cdd61e92b4.jpg"
+  },
+  {
+    "id": 117,
+    "newurl": "http://192.168.0.105:9091/5,0faf522ec86430",
+    "srct": "http://192.168.0.105:9091/1,55b7ce96fd7cac.jpg"
+  },
+  {
+    "id": 118,
+    "newurl": "http://192.168.0.105:9091/4,1f8cae8240d2cb",
+    "srct": "http://192.168.0.105:9091/3,55b7cfc35b93aa.jpg"
+  },
+  {
+    "id": 119,
+    "newurl": "http://192.168.0.105:9091/6,0ece25c2859541",
+    "srct": "http://192.168.0.105:9091/5,55b7d0c49a8dfe.jpg"
+  },
+  {
+    "id": 120,
+    "newurl": "http://192.168.0.105:9091/4,0ec8cde3d9f9ac",
+    "srct": "http://192.168.0.105:9091/3,55b7d1f9acd009.jpg"
+  },
+  {
+    "id": 121,
+    "newurl": "http://192.168.0.105:9091/6,0fc0514203d691",
+    "srct": "http://192.168.0.105:9091/5,55b7d241a32178.jpg"
+  },
+  {
+    "id": 122,
+    "newurl": "http://192.168.0.105:9091/4,0f61796b6dcfdc",
+    "srct": "http://192.168.0.105:9091/1,55b7d3876de49c.jpg"
+  },
+  {
+    "id": 123,
+    "newurl": "http://192.168.0.105:9091/7,0f61acd3623a16",
+    "srct": "http://192.168.0.105:9091/1,55b7d40e6e82db.jpg"
+  }
+];
+export default items_src;
--- a/app/src/lib/Counter.svelte
+++ b/app/src/lib/Counter.svelte
@ -0,0 +1,10 @@
+<script>
+  let count = 0
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button on:click={increment}>
+  count is {count}
+</button>
--- a/app/src/main.js
+++ b/app/src/main.js
@ -0,0 +1,8 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
--- a/app/src/move/AlbumSelect.svelte
+++ b/app/src/move/AlbumSelect.svelte
@ -0,0 +1,68 @@
+<script>
+    import { onMount } from "svelte";
+    import axios from "axios";
+    import {
+        Dropdown,
+        Ripple,
+        initTE,
+    } from "tw-elements";
+
+    let albums = [];
+    let activeAlbum = ""
+
+    onMount(() => {
+        axios.get(`/albums`).then((response) => {
+            albums = response.data;
+            console.log("albums: ", albums);
+            activeAlbum = albums[0].album;
+            console.log("activeAlbum: ", albums[0]);
+            initTE({Dropdown, Ripple });
+        });
+    });
+
+</script>
+
+<div class="relative" data-te-dropdown-ref>
+    <button
+      class="flex w-full items-center whitespace-nowrap rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] motion-reduce:transition-none dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+      type="button"
+      id="dropdownMenuButton1"
+      data-te-dropdown-toggle-ref
+      aria-expanded="false"
+      data-te-ripple-init
+      data-te-ripple-color="light">
+
+      {activeAlbum}
+
+      <span class="ml-2 w-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="h-5 w-5">
+          <path
+            fill-rule="evenodd"
+            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+            clip-rule="evenodd" />
+        </svg>
+      </span>
+
+    </button>
+
+    <ul
+      class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
+      aria-labelledby="dropdownMenuButton1"
+      data-te-dropdown-menu-ref>
+      {#each albums as a}
+        <li>
+            <a
+            class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-neutral-600"
+            href="/{a.album}"
+            data-te-dropdown-item-ref
+            >
+                {a.album}
+            </a>
+        </li>       
+      {/each}
+    </ul>
+  </div>
--- a/app/src/move/Move.svelte
+++ b/app/src/move/Move.svelte
@ -0,0 +1,26 @@
+<script>
+    import { onMount } from "svelte";
+    import axios from "axios";
+    import AlbumSelect from "./AlbumSelect.svelte";
+
+    let album = "art";
+    let images = [];
+
+    // onMount(() => {
+    //     axios.get(`/album/${album}`).then((response) => {
+    //     images = response.data;
+    //     console.log("images: ", images);
+    //     });
+    // });
+
+</script>
+
+<div
+    class="container mx-auto grid grid-cols-12 gap-2"
+>
+    <!-- исходный альбом -->
+    <div class="bg-blue-300 col-span-8 h-4">
+      <AlbumSelect />      
+    </div> 
+    <div class="bg-green-300 col-span-4 h-4"></div>
+</div>
--- a/app/src/navbar/Links.svelte
+++ b/app/src/navbar/Links.svelte
@ -0,0 +1,19 @@
+<script>
+      import {link} from "svelte-spa-router";
+</script>
+
+<!-- Left links -->
+<div class="list-style-none mr-auto flex flex-col pl-0 lg:mt-1 lg:flex-row" data-te-navbar-nav-ref>
+  <!-- Галерея -->
+  <div class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1" data-te-nav-item-ref>
+    <a href="/" use:link class="p-0 text-neutral-500 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" aria-current="page" data-te-nav-link-ref>
+        Галерея
+    </a>
+  </div>
+  <!-- Перемещение -->
+  <div class="mb-4 pl-2 lg:mb-0 lg:pl-0 lg:pr-1" data-te-nav-item-ref>
+    <a href="/move" use:link class="p-0 text-neutral-500 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400" data-te-nav-link-ref>
+        Перенос
+    </a>
+  </div>
+</div>
--- a/app/src/navbar/Logo.svelte
+++ b/app/src/navbar/Logo.svelte
@ -0,0 +1,6 @@
+<a
+	class="ml-2 text-xl text-neutral-800 dark:text-neutral-200"
+	href="/"
+>
+    TAD
+</a>
--- a/app/src/navbar/Navbar.svelte
+++ b/app/src/navbar/Navbar.svelte
@ -0,0 +1,15 @@
+<script>
+  import Search from "./Search.svelte";
+  import Logo from "./Logo.svelte";
+  import Links from "./Links.svelte";
+
+</script>
+
+<nav
+  class="flex w-full flex-wrap items-center justify-between bg-neutral-900 py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 lg:py-4 sticky top-0 z-20">
+  <div class="flex w-full flex-wrap items-center justify-between px-3">
+    <Logo />
+    <Links />
+    <Search />
+  </div>
+</nav>
--- a/app/src/navbar/Search.svelte
+++ b/app/src/navbar/Search.svelte
@ -0,0 +1,24 @@
+<div class="ml-5 flex w-[30%] items-center justify-between">
+    <input
+      type="search"
+      class="relative m-0 block w-[1px] min-w-0 flex-auto rounded border border-solid border-neutral-300 bg-transparent bg-white bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none motion-reduce:transition-none dark:border-neutral-600 dark:bg-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary"
+      placeholder="Поиск"
+      aria-label="Поиск"
+      aria-describedby="button-addon2" />
+
+    <!--Search icon-->
+    <span
+      class="input-group-text flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-white dark:text-neutral-200"
+      id="basic-addon2">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="h-5 w-5">
+        <path
+          fill-rule="evenodd"
+          d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+          clip-rule="evenodd" />
+      </svg>
+    </span>
+  </div>
--- a/app/src/routers.js
+++ b/app/src/routers.js
@ -0,0 +1,8 @@
+import Move from "./move/Move.svelte";
+import Gallery from "./gallery/Gallery.svelte";
+
+export const routes = {
+  "/": Gallery,  
+  "/gallery": Gallery,  
+  "/move": Move,
+};
--- a/app/src/vite-env.d.ts
+++ b/app/src/vite-env.d.ts
@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/app/svelte.config.js
+++ b/app/svelte.config.js
@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
--- a/app/tailwind.config.cjs
+++ b/app/tailwind.config.cjs
@ -0,0 +1,13 @@
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    "./node_modules/tw-elements/dist/js/**/*.js"
+  ],
+  theme: {
+    extend: {},
+  },
+  darkMode: "class",
+  plugins: [require("tw-elements/dist/plugin.cjs")]
+}
--- a/app/vite.config.js
+++ b/app/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>