forked from polka_billy/porridger
315 lines
12 KiB
HTML
315 lines
12 KiB
HTML
<!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> |