diff --git a/front/prototype.html b/front/prototype.html
new file mode 100644
index 0000000..0eceeca
--- /dev/null
+++ b/front/prototype.html
@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+</head>
+
+<body>
+ <nav>
+ <a href="#back" class="back">
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
+ <path fill-rule="evenodd"
+ d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
+ </svg>
+ </a>
+ <h1 class="heading">Иванов Иван, с нами с 17.07.2023</h1>
+ </nav>
+ <div id="root"></div>
+ <div class="poemContainer">
+ <h1>Поэзия</h1>
+ <div class="poemText">
+ <div class="eleven" style="position:relative;left:-60px">"Fury said to</div>
+ <div class="ten" style="position:relative;left:-40px">a mouse, That</div>
+ <div class="ten" style="position:relative;left:0px">he met</div>
+ <div class="ten" style="position:relative;left:10px">in the</div>
+ <div class="ten" style="position:relative;left:20px">house,</div>
+ <div class="ten" style="position:relative;left:17px">'Let us</div>
+ <div class="ten" style="position:relative;left:5px">both go</div>
+ <div class="ten" style="position:relative;left:-7px">to law:</div>
+ <div class="ten" style="position:relative;left:-23px"><i>I</i> will</div>
+ <div class="ten" style="position:relative;left:-26px">prosecute</div>
+ <div class="nine" style="position:relative;left:-40px"><i>you.</i>—</div>
+ <div class="nine" style="position:relative;left:-30px">Come, I'll</div>
+ <div class="nine" style="position:relative;left:-20px">take no</div>
+ <div class="nine" style="position:relative;left:-7px">denial;</div>
+ <div class="nine" style="position:relative;left:19px">We must</div>
+ <div class="nine" style="position:relative;left:45px">have a</div>
+ <div class="nine" style="position:relative;left:67px">trial:</div>
+ <div class="nine" style="position:relative;left:80px">For</div>
+ <div class="eight" style="position:relative;left:70px">really</div>
+ <div class="eight" style="position:relative;left:57px">this</div>
+ <div class="eight" style="position:relative;left:75px">morning</div>
+ <div class="eight" style="position:relative;left:95px">I've</div>
+ <div class="eight" style="position:relative;left:77px">nothing</div>
+ <div class="eight" style="position:relative;left:57px">to do.'</div>
+ <div class="seven" style="position:relative;left:38px">Said the</div>
+ <div class="seven" style="position:relative;left:30px">mouse to</div>
+ <div class="seven" style="position:relative;left:18px">the cur,</div>
+ <div class="seven" style="position:relative;left:22px">'Such a</div>
+ <div class="seven" style="position:relative;left:37px">trial,</div>
+ <div class="seven" style="position:relative;left:27px">dear sir,</div>
+ <div class="seven" style="position:relative;left:9px">With no</div>
+ <div class="seven" style="position:relative;left:-8px">jury or</div>
+ <div class="seven" style="position:relative;left:-18px">judge,</div>
+ <div class="seven" style="position:relative;left:-6px">would be</div>
+ <div class="seven" style="position:relative;left:7px">wasting</div>
+ <div class="seven" style="position:relative;left:25px">our breath.'</div>
+ <div class="six" style="position:relative;left:30px">'I'll be</div>
+ <div class="six" style="position:relative;left:24px">judge,</div>
+ <div class="six" style="position:relative;left:15px">I'll be</div>
+ <div class="six" style="position:relative;left:2px">jury,'</div>
+ <div class="six" style="position:relative;left:-4px">Said</div>
+ <div class="six" style="position:relative;left:17px">cunning</div>
+ <div class="six" style="position:relative;left:29px">old Fury;</div>
+ <div class="six" style="position:relative;left:37px">'I'll try</div>
+ <div class="six" style="position:relative;left:51px">the whole</div>
+ <div class="six" style="position:relative;left:70px">cause,</div>
+ <div class="six" style="position:relative;left:65px">and</div>
+ <div class="six" style="position:relative;left:60px">condemn</div>
+ <div class="six" style="position:relative;left:60px">you</div>
+ <div class="six" style="position:relative;left:68px">to</div>
+ <div class="six" style="position:relative;left:82px">death.' "</div>
+ </div>
+ <img src="uploads/mouse.jpg" class="poemImg">
+ </div>
+
+
+ <script>
+ const categoryGraphics = {
+ 'PORRIDGE': 'dist/PORRIDGE.jpg',
+ 'conspects': 'dist/conspects.jpg',
+ 'milk': 'dist/milk.jpg',
+ 'bred': 'dist/bred.jpg',
+ 'wathing': 'dist/wathing.jpg',
+ 'cloth': 'dist/cloth.jpg',
+ 'fruits_vegatables': 'dist/fruits_vegatables.jpg',
+ 'soup': 'dist/soup.jpg',
+ 'dinner': 'dist/dinner.jpg',
+ 'conserves': 'dist/conserves.jpg',
+ 'pens': 'dist/pens.jpg',
+ 'other_things': 'dist/other_things.jpg',
+ }
+
+ const categoryNames = {
+ 'PORRIDGE': 'PORRIDGE',
+ 'conspects': 'Конспекты',
+ 'milk': 'Молочные продукты',
+ 'bred': 'Хлебобулочные изделия',
+ 'wathing': 'Моющие средства',
+ 'cloth': 'Одежда',
+ 'fruits_vegatables': 'Фрукты и овощи',
+ 'soup': 'Супы',
+ 'dinner': 'Ужин',
+ 'conserves': 'Консервы',
+ 'pens': 'Канцелярия',
+ 'other_things': 'Всякая всячина',
+ }
+
+ const cats = ["Раздача", "Бронь", "История"]
+
+ const props = ["Годен до 01.09.2023", "Бронь ещё 5 чел.", "Забрал 16.07.2023"]
+
+
+ const stories = [2, 4, 1].map(
+ (n) => (new Array(n)).fill(1).map(
+ () => (
+ {
+ title: (Math.random() * Math.pow(10, Math.random() * 100)).toString(36),
+ category: Object.keys(categoryGraphics)[Math.round(Math.random() * (Object.keys(categoryGraphics).length - 1))]
+ }
+ )
+ )
+ )
+
+ console.log(stories)
+
+ const render = () => {
+ const root = document.getElementById('root')
+
+ root.innerHTML = ''
+
+ stories.forEach((c, i) => {
+ const section = document.createElement('section')
+ section.className = 'section'
+ section.innerHTML = `<h1>${cats[i]}</h1>`
+ const ul = document.createElement('ul')
+ c.forEach((v, j) => {
+ const story = document.createElement('li')
+ story.className = 'story'
+ story.innerHTML = `
+ <a href="#${i},${j}">
+ <img class="storyPic" src="${categoryGraphics[v.category]}" />
+ <p class="storyTitle">${v.title}</p>
+ <p class="storyTitle">${props[i]}</p>
+ `.trim()
+ ul.appendChild(story)
+ })
+
+ console.log(window.innerWidth, (window.innerHeight * 0.25 * 9 / 16), (window.innerWidth * 0.25 * 9 / 16) * c.length)
+
+ if ((window.innerWidth - 60) < (window.innerHeight * 0.25 * 9 / 16 + 10) * c.length) {
+ const seeMore = document.createElement('a')
+ seeMore.href = "#more"
+ seeMore.innerHTML = `<svg fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/></svg>`
+ seeMore.className = 'seeMore'
+
+ ul.appendChild(seeMore)
+ ul.classList.add('grad')
+ }
+
+ section.appendChild(ul)
+ root.appendChild(section)
+ })
+ }
+
+ // window.addEventListener('resize', render)
+ document.addEventListener('DOMContentLoaded', render)
+ </script>
+
+ <style>
+ * {
+ padding: 0;
+ margin: 0;
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ }
+
+ a {
+ color: rgb(185, 179, 170);
+ text-decoration: none;
+ }
+
+ body {
+ background-color: #111;
+ color: rgb(185, 179, 170);
+ width: 100%;
+ max-width: calc(100vh*9/16);
+ margin: auto;
+ }
+
+ .section {
+ padding: 30px;
+ padding-bottom: 0;
+ }
+
+ ul {
+ display: flex;
+ list-style-type: none;
+ padding-top: 20px;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+ }
+
+ .grad::after {
+ content: '';
+ background: linear-gradient(to right, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 255) 100%);
+ display: block;
+ height: 100%;
+ width: 10%;
+ position: absolute;
+ right: 0;
+ }
+
+ li {
+ padding-right: 10px;
+ width: calc(25vh*9/16);
+ }
+
+ .storyPic {
+ max-height: 25vh;
+ border-radius: 12px;
+ }
+
+ .storyTitle {
+ padding-top: 5px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ /* max-width: 100%; */
+ }
+
+ .seeMore {
+ position: absolute;
+ left: calc(100% - 5% / 3 - 30px + 8px);
+ top: calc(50% - 15px);
+ z-index: 100;
+ width: 24px;
+ height: 24px;
+ padding: 3px;
+ color: rgb(185, 179, 170);
+ /* background-color: #111; */
+ border-radius: 100%;
+ }
+
+ nav {
+ padding: 30px;
+ padding-bottom: 0;
+ display: flex;
+ }
+
+ .back {
+ color: rgb(185, 179, 170);
+ display: flex;
+ align-items: center;
+ }
+
+ .back svg {
+ display: block;
+ height: 24px;
+ width: 24px;
+ padding: 3px;
+ }
+
+ .heading {
+ padding-left: 7px;
+ }
+
+ .poemContainer {
+ padding: 30px;
+ }
+
+ .poemText {
+ padding: 0 60px;
+ padding-top: 10px;
+ }
+
+ .eleven {
+ font-size: 105%;
+ margin: 0px;
+ }
+
+ .ten {
+ font-size: 100%;
+ margin: 0px;
+ }
+
+ .nine {
+ font-size: 90%;
+ margin: 0px;
+ }
+
+ .eight {
+ font-size: 80%;
+ margin: 0px;
+ }
+
+ .seven {
+ font-size: 70%;
+ margin: 0px;
+ }
+
+ .six {
+ font-size: 60%;
+ margin: 0px;
+ }
+
+ .poemImg {
+ max-width: 100%;
+ padding-top: 10px;
+ }
+ </style>
+</body>
+
+</html>
\ No newline at end of file