-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdetail_faqs.html
More file actions
192 lines (192 loc) · 10.6 KB
/
detail_faqs.html
File metadata and controls
192 lines (192 loc) · 10.6 KB
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><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Fri Oct 03 2025 06:02:44 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="67651c1bc9620acbc78182a9" data-wf-site="675e864941c3cbd6e11bdc6b" data-wf-intellimize-customer-id="117828907" lang="en">
<head>
<meta charset="utf-8">
<title>The Trees v001</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/the-trees-c8c1bd.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Alegreya:regular,700,italic,700italic","Alegreya Sans:regular,italic,700,700italic","Inter:300,regular,700,900,300italic,italic,700italic,900italic","Nanum Gothic Coding:regular,700","Chivo Mono:regular,700,900"] }});</script>
<script src="https://use.typekit.net/hfb4yup.js" type="text/javascript"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
<style>.anti-flicker, .anti-flicker * {visibility: hidden !important; opacity: 0 !important;}</style>
<style>[data-wf-hidden-variation], [data-wf-hidden-variation] * {
display: none !important;
}</style><!-- 1. Font Awesome for your play/pause icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- 2. Minimal styling -->
<style>
/* Hide the unused Plyr audio players */
.v2_audio-player-container {
display: none !important;
}
/* Color overrides from your original code */
.v3_triple-caption div a {
color: var(--light-beige);
}
.v3_triple-caption div a:hover {
color: var(--gold);
}
/* Play/pause button colors */
.v3_play .v3_player-icon i {
color: var(--light-beige);
}
.v3_play:hover .v3_player-icon i {
color: var(--light-beige);
}
/* Only the minimal CSS needed for knot dragging functionality */
.v3_knot {
cursor: grab;
}
.v3_knot:active {
cursor: grabbing;
}
</style>
<!-- 3. Plausible analytics -->
<script defer="" data-domain="thetre.es" src="https://plausible.io/js/script.js"></script>
</head>
<body>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=675e864941c3cbd6e11bdc6b" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/gsap.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/Flip.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/SplitText.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/Draggable.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/DrawSVGPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/InertiaPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/MorphSVGPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/MotionPathPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/MotionPathHelper.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/Observer.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/Physics2DPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/PhysicsPropsPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrambleTextPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollTrigger.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollSmoother.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollToPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/TextPlugin.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/CustomEase.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/CustomBounce.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/CustomWiggle.min.js" type="text/javascript"></script>
<script src="https://cdn.prod.website-files.com/gsap/3.13.0/EasePack.min.js" type="text/javascript"></script>
<script type="text/javascript">gsap.registerPlugin(Flip,SplitText,Draggable,DrawSVGPlugin,InertiaPlugin,MorphSVGPlugin,MotionPathPlugin,MotionPathHelper,Observer,Physics2DPlugin,PhysicsPropsPlugin,ScrambleTextPlugin,ScrollTrigger,ScrollSmoother,ScrollToPlugin,TextPlugin,CustomEase,CustomBounce,CustomWiggle,EasePack);</script><!-- Custom Audio Controls JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const audioElements = document.querySelectorAll('.v3_audio');
audioElements.forEach((audio, index) => {
const controlsWrapper = audio.closest('.collection-item-release-home').querySelector('.v3_music-controls');
if (!controlsWrapper) return;
const playBtn = controlsWrapper.querySelector('.v3_play');
const playIcon = playBtn?.querySelector('i');
const currentTimeEl = controlsWrapper.querySelector('.v3_song-current-time');
const durationEl = controlsWrapper.querySelector('.v3_song-duration');
const seekBarInset = controlsWrapper.querySelector('.v3_seek-bar-inset'); // Use inset as clickable area
const seekBar = controlsWrapper.querySelector('.v3_seek-bar');
const knot = controlsWrapper.querySelector('.v3_knot');
// Drag state for this audio player
let isDragging = false;
// Play/Pause functionality
playBtn?.addEventListener('click', () => {
if (audio.paused) {
// Pause all other audio first
audioElements.forEach(otherAudio => {
if (otherAudio !== audio) {
otherAudio.pause();
// Reset other play buttons
const otherControls = otherAudio.closest('.collection-item-release-home').querySelector('.v3_play i');
if (otherControls) otherControls.className = 'fa-solid fa-play';
}
});
audio.play();
playIcon.className = 'fa-solid fa-pause';
} else {
audio.pause();
playIcon.className = 'fa-solid fa-play';
}
});
// Update progress and time
audio.addEventListener('timeupdate', () => {
if (!isDragging) { // Only update if not dragging
const progress = (audio.currentTime / audio.duration) * 100;
if (knot && seekBarInset) {
// Calculate position relative to inset width, not seek-bar width
const insetWidth = seekBarInset.getBoundingClientRect().width;
const pixelPosition = (progress / 100) * insetWidth;
knot.style.left = `${pixelPosition}px`; // Use pixels instead of percentage
}
if (currentTimeEl) currentTimeEl.textContent = formatTime(audio.currentTime);
}
});
// Set duration when loaded
audio.addEventListener('loadedmetadata', () => {
if (durationEl) durationEl.textContent = formatTime(audio.duration);
});
// Seek functionality - click anywhere on seek bar inset
seekBarInset?.addEventListener('click', (e) => {
const rect = seekBarInset.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
audio.currentTime = percent * audio.duration;
});
// Drag functionality for the knot
knot?.addEventListener('mousedown', (e) => {
isDragging = true;
e.preventDefault();
const handleMouseMove = (e) => {
if (!isDragging) return;
const rect = seekBarInset.getBoundingClientRect();
const percent = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
audio.currentTime = percent * audio.duration;
// Use pixel positioning instead of percentage
const pixelPosition = percent * rect.width;
knot.style.left = `${pixelPosition}px`;
if (currentTimeEl) currentTimeEl.textContent = formatTime(audio.currentTime);
};
const handleMouseUp = () => {
isDragging = false;
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
});
// Reset play button when audio ends
audio.addEventListener('ended', () => {
if (playIcon) playIcon.className = 'fa-solid fa-play';
});
});
// Format time helper
function formatTime(seconds) {
if (isNaN(seconds)) return '00:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
});
</script>
<!-- Custom Plausible events (kept from your last snippet) -->
<script>
/* 30-second engagement */
setTimeout(() => plausible('30_seconds_engaged'), 30000);
/* Scroll depth events */
let scroll500 = false, scroll1000 = false;
document.addEventListener('scroll', () => {
if (!scroll500 && window.scrollY > 500) { plausible('scrolled_500px'); scroll500 = true; }
if (!scroll1000 && window.scrollY > 1000) { plausible('scrolled_1000px'); scroll1000 = true; }
});
/* Reached bottom */
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
plausible('reached_page_bottom');
}
});
</script>
</body>
</html>