Developed userPage prototype
This commit is contained in:
parent
bc55ab8f68
commit
1b4eed529a
GPG Key ID:
027994B0AA357688
315
front/prototype.html
Normal file
315
front/prototype.html
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user