-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (128 loc) · 6.26 KB
/
index.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- OG tags -->
<meta property="og:title" content="Governors Letterbook Viewer" />
<meta property="og:type" content="website">
<meta property="og:description" content="This is a tool to view Governor Richard K Call's letterbooks" />
<meta property="og:url" content="https://admaloch.github.io/governor-letterbook-viewer/" />
<meta property="og:image" content="https://floridamemory.com/fmp/governor-records/large/s32_v001_001.jpg" />
<meta property="og:image:secure_url" content="https://secure.floridamemory.com/fmp/governor-records/large/s32_v001_001.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Florida Memory" />
<title>Image project</title>
<!-- css links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./files/bootstrap.min.css">
<!-- main style sheets-->
<link rel="stylesheet" href="./css/thumbnail.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container full-container d-flex justify-content-center">
<div class="content vh-100 d-flex flex-column justify-content-center align-items-center mt-2 ">
<!--header content-->
<div class="img-header mb-4">
<div class="text-center mb-0 mb-md-2">
<h1> Territorial and State Governors letterbooks, 1836-1909.</h1>
<h3>State Archives of Florida, Series S32 <a
href="http://archivescatalog.info.florida.gov/default.asp?IDCFile=/fsa/detailsS.IDC,SPECIFIC=53,DATABASE=SERIES"
target="_blank">(Series
Description)</a> </h3>
</div>
<div class="selects mb-2">
<div class=" d-flex align-items-center justify-content-center mb-2">
<p class="mb-0"><b>Volume:</b> </p>
<select id="volume-select" class="form-select" aria-label="Default select example">
</select>
<!-- <button id="download-btn" onclick="downloadZip()"></button> -->
<button class="btn btn-outline-secondary ml-3 btn-sm" id="download-btn" onclick="downloadVolumes()">Download
Volume <span id="download-volume">1</span>
</button>
</div>
<!--end vol select-->
<div class=" d-flex align-items-center justify-content-center mb-2">
<p class="mb-0"><b>Page:</b> </p>
<select id="page-select" class="form-select" aria-label="Default select example">
</select>
<p class="mb-0 ml-2">of <span class="volume-length">141</span></p>
</div>
<!--end page select-->
</div>
<!--end selects container-->
</div>
<!--end header content-->
<!-- content -->
<div class="row d-flex flex-column flex-sm-row justify-content-center align-items-center mb-4">
<!--volume info -->
<div id="vol-info"
class="volume-info col-12 col-md-3 text-center d-flex flex-column justify-content-center align-items-center ">
<h5 id="vol-title"> Volume 1:</h5>
<ul id="vol-list" class="">
<li>Call, Richard Keith : April 19, 1836 - October 1, 1836</li>
</ul>
</div>
<div class="main-container col-12 col-md-9 d-flex justify-content-center align-items-center ">
<!-- img carousel -->
<div class="carousel-container mb-2 d-flex justify-content-center align-items-center ">
<div id="image-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner carousel-image">
<div class="carousel-item active">
<a id="new-img-link" href="https://www.floridamemory.com/fmp/governor-records/large/s32_v001_001.jpg"
target="_blank">
<img id="new-img-src" class="d-block img-fluid "
src="https://www.floridamemory.com/fmp/governor-records/large/s32_v001_001.jpg" alt="First slide">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end row for volume/imgs/arrows-->
<div class="row d-flex justify-content-center align-items-center w-100 ">
<div class="col-2 d-none d-sm-block"></div>
<div class="col-12 col-md-10">
<div class="thumbnail-container d-flex justify-content-around align-items-center">
<div class="thumb-content row d-flex flex-row justify-content-center align-items-center">
<div id="prev-thumb-arrow" class="thumb-arrows col-1"><i
class="fa fa-arrow-left thumb-icons prev-thumb-icon"></i></div>
<div class="thumb-img-container col-10 d-flex justify-content-around align-items-center">
<div class="img-thumb-container">
<img src="" alt="" class="" id="">
<div></div>
</div>
</div>
<div id="next-thumb-arrow" class="thumb-arrows col-1"><i
class="fa fa-arrow-right thumb-icons next-thumb-icon"></i></div>
</div>
</div>
</div>
</div>
</div>
<!--end content container-->
</div>
<!--end main container-->
<!-- jquery -->
<script src="files/jquery-3.6.3.min.js"></script>
<!-- bootstrap -->
<script src="files/bootstrap.bundle.min.js"></script>
<!-- js files -->
<script src="js/data.js"></script>
<script src="js/volume-object.js"></script>
<script src="js/seperateVolumes.js"></script>
<script src="js/addSelectOptions.js"></script>
<script src="js/addVolumeInfo.js"></script>
<script src="js/removeLeadingZeros.js"></script>
<script src="js/createImgUrl.js"></script>
<script src="js/testArrows.js"></script>
<script src="js/img-thumbnail.js"></script>
<!-- main js file -->
<script src="script.js"></script>
</body>
</html>