Добавил список стихов на главной

index.html

@@ -54,7 +54,10 @@
 		</nav>
 	</header>	
 	<main>
+		<h1>Полный список стихотворений</h1>
 		<input class="input search" id="text" placeholder="Введите название для поиска">
+		<div id="grid">
+		</div>
 	</main>
 	<footer>
 		<div>Казанское объединение молодых поэтов</div>

js/main.js

@@ -29,6 +29,20 @@ async function checkStatus(url, data = {}) {
 		return false
 	}
 }
+async function fetchJSON(url) {
+	try {
+		const response = await fetch(url)
+
+		if (!response.ok)
+			return false
+
+		const json = await response.json()
+		return json
+	}
+	catch (error) {
+		return false
+	}
+}
 
 async function checkLogin(login) {
 	return await checkStatus(`/api/checklogin/${login}`)
@@ -55,3 +69,47 @@ function getUser() {
 		return false
 	return user
 }
+
+const cachePeople = {}
+const cacheVerse = {}
+
+const grid = document.getElementById('grid')
+
+async function verseToGrid(i) {
+	const div = document.createElement('div')
+	div.className = 'verse'
+	div.style.display = 'none'
+	grid.appendChild(div)
+	const verse = cacheVerse[i]
+	const id = verse.AUTHOR
+	if (!cachePeople[id]) {
+		cachePeople[id] = await fetchJSON(`/api/people/${id}`)
+	}
+	const author = cachePeople[id]
+	if (!verse.PRE) {
+		const r = await fetch(`/api/pre/${i}`)
+		verse.PRE = await r.text()
+	}
+	div.onclick = () => window.open(`/${i}`, '_self')
+	div.classList.add(verse.GENRE)
+	div.innerHTML = `<h2>${verse.TITLE}</h2><a href="/${author.LOGIN}">${author.NAME} ${author.SUBNAME}</a><pre>${verse.PRE}</pre>`
+	div.style.display = 'flow-root'
+}
+
+function addVersePart(part = 0) {
+	fetchJSON(`/api/versepart/${part}`)
+		.then(result => {
+			if (result) {
+				let arr = []
+				for (v in result)
+					arr.push(v)
+				arr.reverse()
+				arr.forEach(i => {
+					cacheVerse[i] = result[i]
+					verseToGrid(i)
+				})
+			}
+		})
+}
+
+window.onload = addVersePart

style/main.css

@@ -6,7 +6,19 @@
 	--header-button-hover-color: rgb(205, 205, 205);
 	--header-button-font-color: black;
 	--border-color: var(--header-button-active-color);
-	--accent-color: tomato
+	--accent-color: tomato;
+	--verse-color: #e6e6e6;
+	--verse-border-color: color-mix(in srgb, var(--verse-color), black 20%);
+	--verse-hover-color: color-mix(in srgb, var(--verse-color), black 5%);
+	--love-color: #ffebeb;
+	--love-border-color: color-mix(in srgb, var(--love-color), black 20%);
+	--love-hover-color: color-mix(in srgb, var(--love-color), black 5%);
+	--civil-color: #ebf1ff;
+	--civil-border-color: color-mix(in srgb, var(--civil-color), black 20%);
+	--civil-hover-color: color-mix(in srgb, var(--civil-color), black 5%);
+	--landscape-color: #ecffeb;
+	--landscape-border-color: color-mix(in srgb, var(--landscape-color), black 20%);
+	--landscape-hover-color: color-mix(in srgb, var(--landscape-color), black 5%);
 }
 
 @font-face {
@@ -123,12 +135,72 @@ main {
 	flex-direction: column;
 	align-items: center;
 	padding: 20px;
+	gap: 20px;
 	text-align: center
 }
 
 .search {
 	width: 500px;
-	text-align: center
+	text-align: center;
+	margin-bottom: 10px
+}
+
+#grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 16px;
+}
+
+.verse {
+	text-align: left;
+	width: 300px;
+	padding: 15px;
+	background: var(--verse-color);
+	border-radius: 10px;
+	cursor: pointer;
+	border: 1px solid var(--verse-border-color)
+}
+.verse:hover {
+	background-color: var(--verse-hover-color);
+	transition: background-color .2s;
+}
+
+.verse.love {
+	background-color: var(--love-color);
+	border-color: var(--love-border-color);
+}
+.verse.love:hover {
+	background-color: var(--love-hover-color);
+}
+
+.verse.civil {
+	background-color: var(--civil-color);
+	border-color: var(--civil-border-color);
+}
+.verse.civil:hover {
+	background-color: var(--civil-hover-color);
+}
+
+.verse.landscape {
+	background-color: var(--landscape-color);
+	border-color: var(--landscape-border-color);
+}
+.verse.landscape:hover {
+	background-color: var(--landscape-hover-color);
+}
+
+
+.verse a {
+	display: inline-block;
+	font-style: italic;
+	margin-bottom: 15px;
+}
+
+.verse pre {
+	mask-image: linear-gradient(to bottom,
+		rgba(0, 0, 0, 1) 50%,
+		rgba(0, 0, 0, 0) 100%
+	);
 }
 
 #form {
@@ -282,6 +354,9 @@ footer a:first-child {
 	#menu {
 		display: block;
 	}
+	#grid {
+		grid-template-columns: 1fr;
+	}
 	footer {
 		flex-direction: column;
 	}