-
Notifications
You must be signed in to change notification settings - Fork 0
/
item2.html
100 lines (94 loc) · 7.26 KB
/
item2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Examplitem at The Legacy Showcase</title>
<meta name="author" content="Alexander Korostelin">
<link type="image/png" sizes="16x16" rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/items.css">
<link rel="stylesheet" href="css/glightbox.min.css" />
<script src="js/glightbox.min.js"></script>
</head>
<body>
<script type="text/javascript">
function openTab(tabId) {
let elements = document.getElementsByClassName('textcontainer');
for (let element of elements){
element.style.display = 'none';
}
document.getElementById(tabId).style.display = 'inline-block';
}
</script>
<header><div id="head-content"><a href="index.html"><h1>The Legacy Showcase</h1></a></div></header>
<main>
<div id="content">
<div id="gallery">
<div class="imgcontainer">
<a href="img/c1/big/b1.jpg" class="glightbox1" data-gallery="gallery1" data-glightbox="title: Motherboard general appearance"><img src="img/c1/b1.jpg" alt="image"/></a>
<div class="imgoverlay"><p>Motherboard general appearance</p></div>
</div>
<div class="imgcontainer">
<a href="img/c1/big/b2.jpg" class="glightbox1" data-gallery="gallery1" data-glightbox="title: IO backplate"><img src="img/c1/b2.jpg" alt="image"/></a>
<div class="imgoverlay"><p>IO backplate</p></div>
</div>
<div class="imgcontainer">
<a href="img/c1/big/b3.jpg" class="glightbox1" data-gallery="gallery1" data-glightbox="title: CPU cooler and VRM; description: Capacitors have deteriorated over time"><img src="img/c1/b3.jpg" alt="image"/></a>
<div class="imgoverlay"><p>CPU cooler and VRM</p></div>
</div>
<div class="imgcontainer">
<a href="img/c1/big/p1.jpg" class="glightbox1" data-gallery="gallery1" data-glightbox="title: Power supply PCB"><img src="img/c1/p1.jpg" alt="image"/></a>
<div class="imgoverlay"><p>Power supply PCB</p></div>
</div>
</div>
<div id="wrapper">
<div class="navbar">
<div class="nav">
<button class="btn-back" onclick="location.href='index.html#item2';" title="Return to main"><img src="img/back.png"></button>
<h3>Example item</h3>
</div>
<div class="tabcontrols">
<button class="btn-tab" onclick="openTab('nfo');" title="View information"><img src="img/book.png"> Info</button>
<button class="btn-tab" onclick="openTab('fls');" title="Download relevant files"><img src="img/down.png"> Files</button>
</div>
</div>
<div class="textcontainer" id="nfo">
<p>This is a blank page. You may copy-paste and then customize this for every item entry.</p>
<p>The gallery height (on the left) is automatically adjusted to match the text height on the right (the one you're just reading). And the text part, on its turn, has the minumum height set to 500px.</p>
<p>There's a navigation control in the top-right corner. It allows a user to switch between the two existing tabs: the default one with textual description, and a file download page.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis eros sed porta luctus. Nam neque velit, pharetra eu ultrices et, auctor id neque. Sed cursus mattis turpis, vitae luctus orci interdum at. Nam consequat viverra neque a gravida. Ut mattis quam in efficitur vestibulum. Proin ultrices sit amet sem vel eleifend. Suspendisse dictum turpis quam.</p>
<p>Fusce sed vestibulum orci, nec pretium velit. Mauris elementum condimentum nisi, et mattis orci ornare quis. Maecenas ac consequat felis. Maecenas et turpis tincidunt, volutpat purus at, molestie nibh. Praesent efficitur consequat nisi auctor semper. Ut malesuada eros ultrices lectus pellentesque, quis dapibus neque hendrerit. Nunc ullamcorper urna tristique nibh congue, non rutrum ligula pretium. Donec et ligula consectetur, eleifend nunc a, accumsan nunc. Sed vitae ipsum aliquam, congue massa id, dapibus enim. Vestibulum at scelerisque odio. Nam maximus viverra pulvinar. Mauris felis tortor, facilisis in feugiat et, porttitor a libero. Cras neque ipsum, lacinia accumsan odio in, imperdiet viverra lacus. Aliquam tempor enim sed diam ullamcorper, id consequat ante lacinia. Cras dignissim egestas erat. Donec cursus tincidunt ipsum, et vulputate metus accumsan sed.</p>
<p>Morbi a ipsum neque. Etiam quis consequat orci. Fusce sit amet metus non justo viverra gravida in in eros. Sed nec metus in tellus rhoncus interdum sit amet laoreet felis. Nullam in nibh in justo consectetur tincidunt quis at nisi. Sed ullamcorper, metus non tempor eleifend, nisi purus viverra purus, a efficitur ante tellus id mi. Nulla facilisi. In nibh purus, venenatis ut rhoncus faucibus, fringilla vel arcu. Mauris vitae urna interdum, mollis tellus et, sodales nibh. Suspendisse ac leo et sem congue finibus. Integer a tellus ut dui pretium pharetra. Vivamus vel imperdiet est, non tincidunt ipsum. Donec sagittis nisi urna, sit amet pellentesque augue cursus at. Praesent varius enim et arcu tristique vehicula. Nulla vel dui rutrum, interdum libero a, vestibulum erat. Pellentesque eget imperdiet dolor.</p>
<p>Etiam et cursus orci, at rutrum urna. Donec dapibus eget metus quis imperdiet. Curabitur vitae sapien viverra, rutrum metus vel, consequat justo. Curabitur tempor maximus interdum. Sed facilisis urna ligula, nec vulputate ex posuere vitae. Quisque sollicitudin non lorem at congue. Nam non orci sollicitudin, porttitor odio dignissim, efficitur purus. Aliquam lectus purus, ultrices iaculis porttitor vitae, interdum non leo. Aenean vitae sodales orci. Suspendisse potenti. Etiam at tristique nunc. Sed ut ante non odio finibus dictum. Curabitur velit massa, auctor nec gravida quis, viverra nec urna.</p>
</div>
<div class="textcontainer" id="fls" style="display: none;">
<table>
<tr>
<td><h4>Service manual</h4><p>Assembly info and specs</p></td>
<td><img class="img-dwn" src="img/cloud.png" alt="Down"></td>
</tr>
<tr>
<td><h4>Drivers list</h4><p>PDF from a seller's website. Files itself are lost unfortunately.</p></td>
<td><img class="img-dwn" src="img/cloud.png" alt="Down"></td>
</tr>
<tr>
<td><h4>Newspaper article</h4><p>PDF</p></td>
<td><img class="img-dwn" src="img/cloud.png" alt="Down"></td>
</tr>
</table>
</div>
</div>
</div>
</main>
<footer>
<div id="foot-content">
<p>Alexander Korostelin, 2022.
The website uses <a href="https://biati-digital.github.io/glightbox/" target="_blank">GLightbox</a>, distributed under the MIT license.
Icons by <a href="https://icons8.com/" target="_blank">Icons8</a>.</p>
</div>
<script src="js/itempage.js"></script>
</footer>
</body>
</html>