codechronicles.github.io/itemvisualisation.html at main · KodeKronicles/codechronicles.github.io · GitHub

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
<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Item visualisation</title>
    <link href="newstyle.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="itemvisualisation.js"></script>
  </head>
  <body class="body-itemvisualisation">
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.html"><img src="img/templogo.png" alt="Bootstrap" width="30" height="24"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 h5">
                    <li>
                        <a class="nav-link" href="index.html">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Exhibitions</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="exhibition.html">Code Chronicles</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="nav-link active" href="itemvisualisation.html">Item visualisation</a>
                    </li>
                    <li>
                        <a class="nav-link" href="about.html">Team</a>
                    </li>
                    <li>
                        <a class="nav-link" href="documentation.html">Documentation</a>
                    </li>
                    <li>
                        <a class="nav-link" href="disclaimer.html">Disclaimer</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <main>
        <div class="container-itemvisualisation">
            <div class="card text-bg-light" id="mainCard">
                <div class="row">
                    <div class="col-sm-12 col-md-4">
                        <div class="card-header row align-items-center d-flex justify-content-end" id="itemCardHeader">
                            <div class="col-sm-12 col-xxl-3 text-center">
                                <button href="#"  type="button" class="btn btn-danger" id="buttonPrevious">Previous</button>
                            </div>
                            <div class="col-sm-12 col-xxl-6 text-center">
                                <h3 id="narrative"></h3>
                            </div>
                            <div class="col-sm-12 col-xxl-3 text-center">
                                <button href="#"  type="button" class="btn btn-danger" id="buttonNext">Next</button>
                            </div>
                        </div>
						<h5 class="card-title text-center" id="item-data-header">
							Data
						</h5>
						<table class="table d-md-table" id="table">
							<tbody class="table-striped table-light" id="infoTable"></tbody>
						</table>
					</div>
                    <div class="col-sm-12 col-md-8 d-flex align-items-center justify-content-center">
						<div id="img1-div">
							<div id="copyrightBox"></div>
						</div>
					</div>
                </div>
                <h5 class="card-title text-center" id="item-info-header">Info</h5>
				<p class="card-text" id="shortInfo"></p>
				<p class="card-text d-none" id="mediumInfo"></p>
            </div>
            <div class="card d-none" id="longInfo">
				<div class="card-header">
					<h2 class="text-center" id="fullHeader"></h2>
				</div>
				<div class="card-body" id="longInfoContent"></div>
				<div class="card-footer d-flex justify-content-between">
					<a href="#"  type="button" class="btn btn-primary m-auto" onclick="hideLongInfo()">Back</a>
				</div>
			</div>
        </div>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>