https://ronaldjabouinjr.com/zines/gua26.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>GUA26</title>
7    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
8    

8<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

8
9    

9<script src="turn.min.js"></script>

9
10    <!-- Google tag (gtag.js) -->

10
11    <script async src="https://www.googletagmanager.com/gtag/js?id=

11G-X3S4QFM8BT

11"></script>
12    

12<script>
13      

13window.dataLayer = window.dataLayer || [];
14      function gtag(){dataLayer.push(arguments);}
15      gtag('js', new Date());
16      gtag('config', '

16G-X3S4QFM8BT

16');
17    

17</script>

17
18    <style>
19        * { box-sizing: border-box; margin: 0; padding: 0; }
20
21        body {
22            font-family: 'Poppins', sans-serif;
23            background: #f5f5f5;
24            display: flex;
25            flex-direction: column;
26            align-items: center;
27            min-height: 100vh;
28            padding: 30px 20px;
29        }
30
31        header {
32            width: 100%;
33            max-width: 1000px;
34            margin-bottom: 24px;
35        }
36
37        header a {
38            font-family: 'Poppins', sans-serif;
39            font-weight: 300;
40            font-size: 14px;
41            color: grey;
42            text-decoration: none;
43        }
44
45        header a:hover { color: red; text-decoration: underline; }
46
47        h1 {
48            font-family: 'Poppins', sans-serif;
49            font-weight: 500;
50            font-size: 24px;
51            color: black;
52            margin-top: 10px;
53        }
54
55        p.subtitle {
56            font-family: 'Poppins', sans-serif;
57            font-weight: 300;
58            font-size: 14px;
59            color: #555;
60            margin-top: 4px;
61        }
62
63        #book-container {
64            display: flex;
65            flex-direction: column;
66            align-items: center;
67            gap: 20px;
68        }
69
70        #flipbook {
71            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
72            overflow: hidden;
73        }
74
75        #flipbook .page img {
76            width: 100%;
77            height: 100%;
78            object-fit: cover;
79            display: block;
80        }
81
82        .controls {
83            display: flex;
84            align-items: center;
85            gap: 20px;
86        }
87
88        .controls button {
89            font-family: 'Poppins', sans-serif;
90            font-weight: 300;
91            font-size: 14px;
92            background: none;
93            border: 1px solid #ccc;
94            padding: 8px 20px;
95            cursor: pointer;
96            color: #333;
97        }
98
99        .controls button:hover { border-color: #111; color: #111; }
100        .controls button:disabled { opacity: 0.3; cursor: default; }
101
102        #page-indicator {
103            font-family: 'Poppins', sans-serif;
104            font-weight: 300;
105            font-size: 13px;
106            color: #777;
107            min-width: 80px;
108            text-align: center;
109        }
110
111        :fullscreen body,
112        :-webkit-full-screen body {
113            background: #000;
114            justify-content: center;
115            padding: 0;
116        }
117        :fullscreen header,
118        :-webkit-full-screen header { display: none; }
119        :fullscreen #book-container,
120        :-webkit-full-screen #book-container { justify-content: center; }
121        :fullscreen .controls,
122        :-webkit-full-screen .controls {
123            position: fixed;
124            bottom: 20px;
125            left: 50%;
126            transform: translateX(-50%);
127            background: rgba(0,0,0,0.5);
128            padding: 8px 20px;
129            border-radius: 4px;
130            gap: 16px;
131        }
132        :fullscreen .controls button,
133        :-webkit-full-screen .controls button { color: #fff; border-color: rgba(255,255,255,0.4); }
134        :fullscreen #page-indicator,
135        :-webkit-full-screen #page-indicator { color: rgba(255,255,255,0.6); }
136    </style>
137</head>
138<body>
139
140    <header>
141        <a href="../index.html#photography" target="_self">&larr; Back</a>
142        <h1>GUA26</h1>
143        <p class="subtitle">Guatemala, April 2026.</p>
144    </header>
145
146    <div id="book-container">
147        <div id="flipbook"></div>
148        <div class="controls">
149            <button id="prev-btn">Previous</button>
150            <span id="page-indicator"></span>
151            <button id="next-btn">Next</button>
152            <button id="present-btn">Present</button>
153        </div>
154    </div>
155
156    

156<script src="zine-viewer.js"></script>

156
157    

157<script>
158        initZineViewer({
159            pdfPages: 23,
160            folder: 'images/gua26',
161            soloLastPage: false,
162            zineTitle: 'gua26'
163        });
164    </script>

164
165</body>
166</html>