-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·192 lines (151 loc) · 11.1 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<!--Head section. Title, links to css and javascript-->
<head>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
<title>A Sailor, A Cook</title>
<link href="./style.css" type="text/css" rel="stylesheet">
<script src="main.js" defer></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!--'Left container', occupying left hand side of the page.
Consists of large title and four possible tabcontent divs, activated by the tabs in the right container.-->
<div class="left-container">
<h1 id="banner" onclick="openTab(event, 'zero-content')">A Sailor, A Cook</h1>
<div id="zero-content" class="tabcontent">
<h1 id="intro-title">A Sailor, A Cook</h1>
<h3 id="intro-text">‘A Sailor, A Cook’ is a candid collection of music, film, photography and artwork, conceived through interdisciplinary dialogue.</h3>
</div>
<!--First tab, contains Barbara's film-->
<div id="one-content" class="tabcontent">
<span id="part-one-title">A Film</span>
<video id="video" width="1920" height="1440" controls>
<source src="./Barbs Short 480.mp4" type="video/MP4">
Your browser does not support the video tag.
</video>
<br>
<p id="part-one-credits" class="credits">Credits: Barbara Mele, Jack Barrie, Tristan Cole, Harry Manley</p>
</div>
<!--Second tab, contains one painting and one audio file-->
<div id="two-content" class="tabcontent">
<span id="part-two-title">A Song and a Painting</span>
<div id="part-two-content">
<div class="art-container" id="painting-container">
<img id="painting" src="./A SAILOR A COOK/Artwork/Joe G Painting 1.jpeg">
</div>
<div class="art-container" id="bridge-container">
<h2>By The Bridge<br><span class="time" id="time-bridge">2:54</span></h2>
<h3 id="play-bridge" class="controls" onclick= "pauseAll();document.getElementById('audio-bridge').play()">Play</h3>
<h3 id="pause-bridge" class="controls" onclick= "document.getElementById('audio-bridge').pause()">Pause</h3>
<h3 id="restart-bridge" class="controls" onclick= "pauseAll();document.getElementById('audio-bridge').currentTime = 0.01;document.getElementById('audio-bridge').play()">From The Top</h3>
<h3 id="stop-bridge" class="controls" onclick= "document.getElementById('audio-bridge').currentTime = 0;document.getElementById('audio-bridge').pause()">Stop</h3>
<audio id="audio-bridge" class="audio" class="media" ontimeupdate="updateTime('audio-bridge', 'time-bridge')">
<source src="./A SAILOR A COOK/Music/By The Bridge.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
</div>
<p id="part-two-credits" class="credits">Music by Tristan Cole, Artwork by Joe Giampalma</p>
</div>
</div>
<!--Third tab, contains audio file and photography slideshow. -->
<div id="three-content" class="tabcontent">
<span id="part-three-title">A Piano Piece and a photography collection</span>
<div id="part-three-content">
<div class="art-container" id="levert-container">
<h2>Le Vert<br><span class="time" id="time-levert">4:16</span></h2>
<h3 id="play-levert" class="controls" onclick= "pauseAll();document.getElementById('audio-levert').play()">Play</h3>
<h3 id="pause-levert" class="controls" onclick= "document.getElementById('audio-levert').pause()">Pause</h3>
<h3 id="restart-levert" class="controls" onclick= "pauseAll();document.getElementById('audio-levert').currentTime = 0.01;document.getElementById('audio-levert').play()">From The Top</h3>
<h3 id="stop-levert" class="controls" onclick= "document.getElementById('audio-levert').currentTime = 0;document.getElementById('audio-levert').pause()">Stop</h3>
<audio id="audio-levert" class="audio" class="media" ontimeupdate="updateTime('audio-levert', 'time-levert')">
<source src="./A SAILOR A COOK/Music/Le-Vert.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
<div class="art-container" id="photography-container">
<div id="slideshow">
<img class="slides" id="slide1" src="./A SAILOR A COOK/Photography/_17_01906.jpg">
<img class="slides" id="slide2" src="./A SAILOR A COOK/Photography/_22_01911.jpg">
<img class="slides" id="slide3" src="./A SAILOR A COOK/Photography/_24_00497.jpg">
<img class="slides" id="slide4" src="./A SAILOR A COOK/Photography/_35_00508.jpg">
<img class="slides" id="slide5" src="./A SAILOR A COOK/Photography/__2_01892.jpg">
</div>
<div id="gallery">
<img class="gallery-photos" id="photo1" src="./A SAILOR A COOK/Photography/_17_01906.jpg" onclick="enlarge(event, 'slide1')">
<img class="gallery-photos" id="photo2" src="./A SAILOR A COOK/Photography/_22_01911.jpg" onclick="enlarge(event, 'slide2')">
<img class="gallery-photos" id="photo3" src="./A SAILOR A COOK/Photography/_24_00497.jpg" onclick="enlarge(event, 'slide3')">
<img class="gallery-photos" id="photo4" src="./A SAILOR A COOK/Photography/_35_00508.jpg" onclick="enlarge(event, 'slide4')">
<img class="gallery-photos" id="photo5" src="./A SAILOR A COOK/Photography/__2_01892.jpg" onclick="enlarge(event, 'slide5')">
</div>
</div>
</div>
<div><p id="part-three-credits" class="credits">Music by Joe Burke, Photography by Barbara Mele and Tristan Cole</p></div>
</div>
<!--Fourth tab, contains three audio files-->
<div id="four-content" class="tabcontent">
<span id="part-four-title">Three Demos</span>
<div id="part-four-content">
<div class="art-container" id="just-container">
<h2>Just<br><span class="time" id="time-just">1:52</span></h2>
<h3 id="play-just" class="controls" onclick= "pauseAll();document.getElementById('audio-just').play()">Play</h3>
<h3 id="pause-just" class="controls" onclick= "document.getElementById('audio-just').pause()">Pause</h3>
<h3 id="restart-just" class="controls" onclick= "pauseAll();document.getElementById('audio-just').currentTime = 0.01;document.getElementById('audio-just').play()">From The Top</h3>
<h3 id="stop-just" class="controls" onclick= "document.getElementById('audio-just').currentTime = 0;document.getElementById('audio-just').pause()">Stop</h3>
<audio id="audio-just" class="audio" class="media" ontimeupdate="updateTime('audio-just', 'time-just')">
<source src="./A SAILOR A COOK/Music/Just.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
<div class="art-container" id="loop-1-container">
<h2>Loop 1<br><span class="time" id="time-loop-1">3:07</span></h2>
<h3 id="play-loop-1" class="controls" onclick= "pauseAll();document.getElementById('audio-loop-1').play()">Play</h3>
<h3 id="pause-loop-1" class="controls" onclick= "document.getElementById('audio-loop-1').pause()">Pause</h3>
<h3 id="restart-loop-1" class="controls" onclick= "pauseAll();document.getElementById('audio-loop-1').currentTime = 0.01;document.getElementById('audio-loop-1').play()">From The Top</h3>
<h3 id="stop-loop-1" class="controls" onclick= "document.getElementById('audio-loop-1').currentTime = 0;document.getElementById('audio-loop-1').pause()">Stop</h3>
<audio id="audio-loop-1" class="audio" class="media" ontimeupdate="updateTime('audio-loop-1', 'time-loop-1')">
<source src="./A SAILOR A COOK/Music/Loop 1.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
<div class="art-container" id="roomy-container">
<h2>Roomy<br><span class="time" id="time-roomy">2:33</span></h2>
<h3 id="play-roomy" class="controls" onclick= "pauseAll();document.getElementById('audio-roomy').play()">Play</h3>
<h3 id="pause-roomy" class="controls" onclick= "document.getElementById('audio-roomy').pause()">Pause</h3>
<h3 id="restart-roomy" class="controls" onclick= "pauseAll();document.getElementById('audio-roomy').currentTime = 0.01;document.getElementById('audio-roomy').play()">From The Top</h3>
<h3 id="stop-roomy" class="controls" onclick= "document.getElementById('audio-roomy').currentTime = 0;document.getElementById('audio-roomy').pause()">Stop</h3>
<audio id="audio-roomy" class="audio" class="media" ontimeupdate="updateTime('audio-roomy', 'time-roomy')">
<source src="./A SAILOR A COOK/Music/Roomy.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
</div>
<span id="final-credits"class="credits">Thanks are owed to all the contributors who have made this project possible. Additional thanks to Giorgio Cort and Harry Thorley. Website design by Joe Burke.</span>
</div>
</div>
<!--'Right container', occupying right hand side of the page.
Consists of 4 tabs, 1 for each part of the project.-->
<div class="right-container">
<div class="section" class="tablinks" onclick="openTab(event, 'one-content');" id="section1">
<h4>
One
</h4>
</div>
<div class="section" class="tablinks" onclick="openTab(event, 'two-content')" id="section2">
<h4>
Two
</h4>
</div>
<div class="section" class="tablinks" onclick="openTab(event, 'three-content')" id="section3">
<h4>
Three
</h4>
</div>
<div class="section" class="tablinks" onclick="openTab(event, 'four-content')" id="section4">
<h4>
Four
</h4>
</div>
</div>
</body>
</html>