https://pnw-tools.uhopeinsta.workers.dev/castflow

1<!doctype html>
2<html lang="id">
3  <!-- PNW-FILE-GUIDE
4       castflow.html — CastFlow v9.18, web presentasi ibadah operator-first.
5       Tidak memuat js/app.js sama sekali. Mesinnya js/yv-standalone.js,
6       yang hanya membaca DATA LAGU dan menyiarkan lewat kanal terpisah
7       pujianYouth/youthviews/live (bukan pujianYouth/live milik spectate).
8       Buka output lewat ?mode=display.
9       v7.0: nama CastFlow + logo baru + tema gelap navy (#101010)
10       + pratinjau atas drag & drop + i18n EN/ID + font library besar. -->
11  <head>
12    <meta charset="utf-8" />
13    <meta
14      name="viewport"
15      content="width=device-width, initial-scale=1, viewport-fit=cover"
16    />
17    <title>CastFlow — Presentasi Ibadah Efisien</title>
18    <meta
19      name="description"
20      content="CastFlow adalah web presentasi ibadah yang membantu operator memilih konten, mendesain tampilan, dan menayangkannya dengan cepat."
21    />
22    <meta name="theme-color" content="#101010" />
23    <link rel="manifest" href="manifest.json" />
24    <link rel="apple-touch-icon" href="icon-192.png" />
25    <link rel="icon" type="image/png" href="./castflow-favicon.png" />
26    <meta name="apple-mobile-web-app-capable" content="yes" />
27    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
28    <meta name="apple-mobile-web-app-title" content="PNW TOOLS" />
29    <meta name="mobile-web-app-capable" content="yes" />
30    <!-- FONT: mau pakai font BARU? Muat <link>-nya di sini, lalu set kategori di css/design.css -> "PANEL KONTROL FONT". -->
31    <!-- v101: font Inter/JetBrains/Satoshi dihapus - UI CastFlow 100% TikTok Sans (S5-05). -->
32    <link rel="preconnect" href="https://fonts.googleapis.com" />
33    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
34    <link rel="stylesheet" href="./css/styles.css" />
35    <link rel="stylesheet" href="./css/design.css" />
36    <link rel="stylesheet" href="./css/yv.css" />
37    <link rel="stylesheet" href="./css/yv-timeline.css" />
38    <link rel="preconnect" href="https://fonts.googleapis.com" />
39    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
40    <link
41      href="https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,[email protected],300..900&display=swap"
42      rel="stylesheet"
43    />
44    <link rel="stylesheet" href="./css/castflow.css" />
45    <link rel="stylesheet" href="./css/castflow-v100.css" />
46    <link rel="stylesheet" href="./css/cf-tokens.css" />
47    <link rel="stylesheet" href="./css/cf-v101.css" />
48    <link rel="stylesheet" href="./css/cf-v103.css" />
49    <link rel="stylesheet" href="./css/cf-v104.css" />
50    <link rel="stylesheet" href="./css/cf-v105.css" />
51    <link rel="stylesheet" href="./css/cf-v107.css" />
52    <link rel="stylesheet" href="./css/cf-v108.css" />
53    <link rel="stylesheet" href="./css/cf-v109.css" />
54    <link rel="stylesheet" href="./css/cf-v110.css" />
55    <link rel="stylesheet" href="./css/cf-v111.css" />
56    <link rel="stylesheet" href="./css/cf-v112.css" />
57    <link rel="stylesheet" href="./css/cf-v116.css" />
58    <link rel="stylesheet" href="./css/cf-v117.css" />
59    <link rel="stylesheet" href="./css/cf-v118.css" />
60    <link
61      rel="stylesheet"
62      href="https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css"
63    />
64    <link
65      rel="stylesheet"
66      href="https://cdn-uicons.flaticon.com/uicons-solid-straight/css/uicons-solid-straight.css"
67    />
68    

68<script defer src="./js/logger.js"></script>

68
69      <style>
70      /* Bar kecil khusus halaman mandiri CastFlow (v6.2). */
71      body.yvStandalone { background: #07080c; }
72      .yvBar {
73        position: fixed; inset: 0 0 auto 0; z-index: 60;
74        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
75        padding: 8px 14px; min-height: 46px;
76        background: rgba(10, 12, 18, 0.92);
77        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
78        color: #e9eefb; font: 500 13px/1.3 "TikTok Sans", system-ui, sans-serif;
79        backdrop-filter: blur(10px);
80      }
81      .yvBarTitle { font-weight: 800; letter-spacing: 0.2px; }
82      .yvBarNote { opacity: 0.7; font-size: 12px; }
83      .yvBarSpacer { flex: 1 1 auto; }
84      .yvBarBtn {
85        appearance: none; cursor: pointer;
86        border: 1px solid rgba(255, 255, 255, 0.16);
87        background: rgba(255, 255, 255, 0.06);
88        color: #e9eefb; border-radius: 999px;
89        padding: 6px 14px; font: 600 12px/1 "TikTok Sans", system-ui, sans-serif;
90        text-decoration: none;
91      }
92      .yvBarBtn:hover { background: rgba(255, 255, 255, 0.14); }
93      body.yvStandalone .projPage { top: 46px; }
94      body.yvStandalone.display-mode .yvBar { display: none; }
95      body.yvStandalone.display-mode .projPage { display: none !important; }
96      #openProjBtn[hidden] { display: none !important; }
97    </style>
98  </head>
99  <body class="yvStandalone">
100    <div class="yvBar" id="yvBar">
101      <a class="yvBarBtn" href="./index.html">← Aplikasi utama</a>
102
103      <span class="yvBarNote" id="yvStatus">Memuat data lagu…</span>
104      <span class="yvBarNote" id="yvWho"></span>
105      <span class="yvBarSpacer"></span>
106      <span class="cfLangSeg" id="cfLangSeg" title="Language / Bahasa"><button type="button" data-cflang="en">EN</button><button type="button" data-cflang="id">ID</button></span>
107      <button class="yvBarBtn" id="yvOutputBtn" type="button">Buka jendela Output</button>
108      <button class="yvBarBtn" id="yvLogBtn" type="button">Log Error <span class="pnwLogBadge" id="logBadgeYv" hidden></span></button>
109      <button class="yvBarBtn" id="yvLoginBtn" type="button">Masuk dengan Google</button>
110    </div>
111
112    <div id="displayScreen" class="displayScreen" hidden>
113      <div class="dispBg" id="dispBg" aria-hidden="true"></div>
114      <video
115        class="dispVideo"
116        id="dispVideo"
117        muted
118        loop
119        playsinline
120        aria-hidden="true"
121      ></video>
122      <canvas class="dispMotion" id="dispMotion" aria-hidden="true"></canvas>
123      <div class="dispLottie" id="dispLottie" aria-hidden="true"></div>
124      <div class="dispOverlay" id="dispOverlay" aria-hidden="true"></div>
125      <div class="dispMask" id="dispMask" aria-hidden="true"><div class="dispMaskT"></div><div class="dispMaskB"></div></div>
126      <div class="dispBar">
127        <span class="dispDot off" id="dispDot" title="Menyambung…"></span>
128        <span class="dispBrand">CastFlow — Live Output</span>
129      </div>
130      <div class="dispIdle" id="dispIdle">
131        <div class="dispIdleInner">
132          <div class="dispLogo" id="dispLogo"><div class="dispLogoAnim" id="dispLogoAnim" aria-hidden="true"></div><span class="dispLogoFallback"><img src="./castflow-icon.png" alt="CastFlow" /></span></div>
133          <p id="dispWait">Menunggu live dimulai…</p>
134        </div>
135      </div>
136      <div class="dispStage" id="dispStage" hidden>
137        <h2 id="dispTitle"></h2>
138        <p id="dispKey" class="dispKey"></p>
139        <div id="dispContent" class="dispContent"></div>
140      </div>
141    </div>
142
143    <div class="projPage youthViewsPage no-print" id="projPage" aria-hidden="true">
144      <header class="projTop">
145        <div class="projTopL">
146          <span class="projBrand">CastFlow</span>
147          <span class="projBadge">Worship Presentation</span>
148          <span class="projDev">Pilih konten · Desain tampilan · Tayangkan</span>
149        </div>
150        <button class="xBtn" id="closeProjBtn" type="button">&#10005;</button>
151      </header>
152      <section class="cfPrevWrap" id="cfPrevWrap">
153        <div class="cfPrevHead">

154          <span class="cfPrevTitle">Pratinjau</span>
155          <span class="cfPrevHint">Seret gambar / video / animasi ke sini untuk latar</span>
156          <span class="cfPrevSpacer"></span>
157          <button class="cfPrevSize" type="button" data-cfsize="s">S</button>
158          <button class="cfPrevSize on" type="button" data-cfsize="m">M</button>
159          <button class="cfPrevSize" type="button" data-cfsize="l">L</button>
160          <select class="cfPrevRatio" id="cfPrevRatio" title="Resolusi pratinjau">
161            <option value="fit">Pas ke layar</option>
162            <option value="16:9">16:9 · 1920×1080</option>
163            <option value="4:3">4:3 · 1024×768</option>
164            <option value="1:1">1:1 · 1080×1080</option>
165            <option value="9:16">9:16 · 1080×1920</option>
166            <option value="custom">Kustom…</option>
167          </select>
168          <span class="cfCustomRes" id="cfCustomRes" hidden>
169            <input type="number" id="cfResW" min="16" max="7680" value="1920" title="Lebar" />
170            ×
171            <input type="number" id="cfResH" min="16" max="7680" value="1080" title="Tinggi" />
172            <button type="button" id="cfResApply">Terapkan</button>
173          </span>
174          <button class="cfPopBtn" id="cfPopBtn" type="button" title="Lepas / sematkan pratinjau">⧉</button>
175        </div>
176        <div class="cfPrevStage" id="cfPrevStage">
177          <div class="projPreview" id="projPreview">
178            <span id="projPreviewText">Contoh teks lirik</span>
179          </div>
180          <div class="cfPrevDrop" id="cfPrevDrop">Lepaskan media untuk latar</div>
181        </div>
182        <div class="cfPrevResizer" id="cfPrevResizer" title="Tarik untuk mengubah tinggi pratinjau"><span></span></div>
183      </section>
184      <div class="projGrid">
185        <aside class="projPane projPaneL">
186          <div class="projPaneHead">
187            <h3>Playlist / Rundown</h3>
188            <div class="projPaneOps">
189              <button class="projMiniBtn" id="projNewPlan" type="button">
190                Baru
191              </button>
192              <button
193                class="projMiniBtn primary"
194                id="projSavePlan"
195                type="button"
196              >
197                Simpan
198              </button>
199            </div>
200          </div>
201          <div class="projPlanList" id="projPlanList"></div>
202        </aside>
203        <section class="projPane projPaneC">
204          <div class="projTabs" id="projTabs">
205            <button class="projTab on" data-tab="lagu" type="button">
206              Lagu
207            </button>
208            <button class="projTab" data-tab="alkitab" type="button">
209              Alkitab
210            </button>
211            <button class="projTab" data-tab="teks" type="button">Teks</button>
212            <button class="projTab" data-tab="media" type="button">
213              Media
214            </button>
215            <button class="projTab" data-tab="template" type="button">
216              Template
217            </button>
218          </div>
219          <div class="projSearchRow">
220            <input id="projSearch" type="search" placeholder="Cari lagu / filter library..." />
221          </div>
222          <div class="projFilters" id="projFilters">
223            <button class="projChip on" data-filter="semua" type="button">
224              Semua <span id="projCountAll">0</span>
225            </button>
226            <button class="projChip" data-filter="rencana" type="button">
227              Di rencana
228            </button>
229          </div>
230          <div class="projCatalogList" id="projCatalogList"></div>
231          <div class="projSlideGrid" id="projSlideGrid" hidden></div>
232        </section>
233        <aside class="projPane projPaneR">
234          <div class="projPaneHead">
235            <h3>DESIGN PANEL</h3>
236            <span class="projLive" id="projLiveDot">LIVE</span>
237          </div>
238          <div class="cfThemeWrap">
239            <span class="cfThemeLabel">TEMA</span>
240            <span class="cfThemeRow" id="cfThemeRow"></span>
241          </div>
242          <label class="cfReflowTgl"
243            ><input type="checkbox" id="cfReflow" /> Auto-fit teks padat</label
244          >
245          <div class="cfMaskRow" id="cfMaskRow"></div>
246          <div class="projActiveBody" id="projActiveBody"></div>
247          <div class="projRowBtns">
248            <button class="projMiniBtn" id="projPrevSlide" type="button" title="Slide sebelumnya (←)">
249              ◀
250            </button>
251            <button class="projMiniBtn primary" id="projGoLive" type="button">
252              Tayangkan
253            </button>
254            <button class="projMiniBtn" id="projNextSlide" type="button" title="Slide berikutnya (→ / Spasi)">
255              ▶
256            </button>
257            <button class="projMiniBtn" id="projClear" type="button">
258              Bersihkan Layar
259            </button>
260          </div>
261          <p class="label">Pengaturan Teks Sesi</p>
262          <div class="projField">
263            <label for="projFont">Font</label>
264            <select id="projFont">
265              <option value="Montserrat">Montserrat</option>
266            </select>
267          </div>
268          <div class="projField">
269            <label for="projSize"
270              >Ukuran <span id="projSizeVal">56px</span></label
271            >
272            <input type="range" id="projSize" min="24" max="140" step="2" />
273          </div>
274          <div class="projField">
275            <label for="projMaxLines"
276              >Baris per slide <span id="projMaxLinesVal">4</span></label
277            >
278            <input type="range" id="projMaxLines" min="1" max="8" step="1" />
279          </div>
280          <div class="projField">
281            <label>Perataan</label>
282            <div class="projSeg" id="projAlign">
283              <button data-align="left" type="button">Kiri</button>
284              <button data-align="center" type="button">Tengah</button>
285              <button data-align="right" type="button">Kanan</button>
286            </div>
287          </div>
288          <div class="projField">
289            <label for="projShadow">Bayangan</label>
290            <select id="projShadow">
291              <option value="soft">Lembut</option>
292              <option value="strong">Tegas</option>
293              <option value="none">Tanpa bayangan</option>
294            </select>
295          </div>
296          <p class="label">Latar Belakang</p>
297          <div class="projBgTabs" id="projBgTabs">
298            <button class="projBgTab on" data-bgtab="warna" type="button">Warna</button>
299            <button class="projBgTab" data-bgtab="animasi" type="button">Animasi</button>
300            <button class="projBgTab" data-bgtab="preset" type="button">Preset</button>
301            <button class="projBgTab" data-bgtab="api" type="button">API</button>
302          </div>
303          <div class="projSolids" id="projSolids"></div>
304          <div class="projPresets" id="projPresets" hidden></div>
305          <div class="projBgApi" id="projBgApi" hidden>
306            <div class="projBgApiRow">
307              <select id="projBgProvider">
308                <option value="pexels">Pexels</option>
309                <option value="pixabay">Pixabay</option>
310                <option value="picsum">Picsum (tanpa key)</option>
311              </select>
312              <input id="projBgKey" type="password" placeholder="API key kamu" autocomplete="off" />
313            </div>
314            <div class="projBgApiRow">
315              <input id="projBgQuery" placeholder="worship, light rays, clouds…" />
316              <button class="projMiniBtn primary" id="projBgSearch" type="button">Cari</button>
317            </div>
318            <div class="projBgChips" id="projBgChips"></div>
319            <div class="projBgResults" id="projBgResults"></div>
320          </div>
321          <input id="projBgUrl" class="projBgUrl" placeholder="Tempel URL gambar / video .mp4 sendiri" />
322        </aside>
323      </div>
324    </div>
325
326    <button id="openProjBtn" type="button" hidden aria-hidden="true"></button>
327
328    

328<script defer src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>

328
329    

329<script defer src="https://www.gstatic.com/firebasejs/10.12.2/firebase-database-compat.js"></script>

329
330    

330<script defer src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>

330
331    

331<script defer src="https://www.gstatic.com/firebasejs/10.12.2/firebase-storage-compat.js"></script>

331
332    

332<script defer src="./js/gsap/gsap.min.js"></script>

332
333    

333<script defer src="./js/gsap/CustomEase.min.js"></script>

333
334    

334<script defer src="./js/motion.js"></script>

334
335    

335<script defer src="./js/yv-motion.js"></script>

335
336    <!-- v104: kernel/scheduler tersedia sebelum modul UI legacy -->
337    

337<script defer src="./js/cf-kernel.js"></script>

337
338    

338<script defer src="./js/projector.js"></script>

338
339    

339<script defer src="./js/yv-standalone.js"></script>

339
340    

340<script defer src="./js/yv-timeline.js"></script>

340
341    

341<script defer src="./js/cf-timeline-v117.js"></script>

341
342    

342<script defer src="./js/castflow.js"></script>

342
343    

343<script defer src="./js/castflow-v100.js"></script>

343
344    

344<script defer src="./js/cf-dual-canvas.js"></script>

344
345    

345<script defer src="./js/cf-performance-v117.js"></script>

345
346    

346<script defer src="./js/cf-health.js"></script>

346
347    

347<script defer src="./js/cf-preflight.js"></script>

347
348    

348<script defer src="./js/cf-media.js"></script>

348
349    

349<script defer src="./js/cf-package.js"></script>

349
350    

350<script defer src="./js/cf-toast.js"></script>

350
351    

351<script defer src="./js/cf-workspace.js"></script>

351
352    

352<script defer src="./js/cf-a11y.js"></script>

352
353    

353<script defer src="./js/cf-reliability.js"></script>

353
354    

354<script defer src="./js/cf-diag.js"></script>

354
355    

355<script defer src="./js/cf-remote.js"></script>

355
356  </body>
357</html>