!DOCTYPE html
html lang=tr
head
meta charset=UTF-8
meta name=viewport content=width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0, user-scalable=no
!-- PWA Ana Ekran Metaları --
meta name=apple-mobile-web-app-capable content=yes
meta name=apple-mobile-web-app-status-bar-style content=black-translucent
meta name=apple-mobile-web-app-title content=GÜNCEL
meta name=application-name content=GÜNCEL
meta name=theme-color content=#02040a
titleGÜNCEL - Profesyonel Veri Terminalititle
link href=httpsfonts.googleapis.comcss2family=Share+Tech+Mono&family=Interwght@300;400;500;600;700;800&family=Merriweatherital,wght@0,300;0,400;0,700;1,300&display=swap rel=stylesheet
script src=httpscdnjs.cloudflare.comajaxlibsthree.jsr128three.min.jsscript
style
root {
--neon-cyan #00f3ff;
--neon-blue #0055ff;
--danger #ff3b5c;
--bg-dark #02040a;
--card-bg rgba(6, 11, 24, 0.85);
--card-border rgba(0, 243, 255, 0.2);
--text-main #ffffff;
--text-muted #94a3b8;
--safe-top env(safe-area-inset-top, 40px);
--safe-bottom env(safe-area-inset-bottom, 20px);
}
{ box-sizing border-box; margin 0; padding 0; -webkit-tap-highlight-color transparent; }
body { background-color var(--bg-dark); color var(--text-main); font-family 'Inter', sans-serif; overflow hidden; height 100vh; width 100vw; overscroll-behavior-y none; }
.cyber-font { font-family 'Share Tech Mono', monospace; }
focus-visible { outline 2px solid var(--neon-cyan); outline-offset 3px; border-radius 6px; }
--- STREAMING_CHUNK Styling layout background and structures... ---
#webgl-canvas { position fixed; top 0; left 0; width 100vw; height 100vh; z-index 1; pointer-events none; }
.scanlines { position fixed; inset 0; z-index 2; background repeating-linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 1px, transparent 1px, transparent 3px); opacity 0.25; pointer-events none; }
#app-container { position relative; z-index 10; height 100vh; display flex; flex-direction column; padding-top var(--safe-top); padding-bottom var(--safe-bottom); }
--- STREAMING_CHUNK Styling auth screen and cyber panels... ---
#auth-screen { position fixed; inset 0; background rgba(2, 4, 10, 0.9); backdrop-filter blur(15px); z-index 9999; display flex; flex-direction column; justify-content center; align-items center; transition 0.5s; }
#auth-screen.hidden { opacity 0; pointer-events none; }
.auth-box { text-align center; padding 3rem 2.5rem; background rgba(6, 11, 24, 0.95); border 1px solid var(--neon-cyan); border-radius 16px; width 90%; max-width 400px; box-shadow 0 0 50px rgba(0, 85, 255, 0.4); }
.auth-logo { font-size 3rem; color #fff; margin-bottom 1.5rem; text-shadow 0 0 20px var(--neon-cyan); letter-spacing 5px; font-weight 800;}
.auth-logo span { color var(--neon-cyan); }
.cyber-input { background rgba(0, 0, 0, 0.5); border 1px solid rgba(0, 243, 255, 0.3); border-radius 8px; color var(--neon-cyan); font-family inherit; font-size 1.1rem; padding 1rem; outline none; transition 0.3s; margin-bottom 1.5rem; width 100%; text-align center; letter-spacing 2px; }
.cyber-inputfocus { background rgba(0, 243, 255, 0.1); border-color var(--neon-cyan); box-shadow 0 0 15px rgba(0, 243, 255, 0.3); color #fff;}
.cyber-btn { background rgba(0, 85, 255, 0.25); color var(--neon-cyan); border 1px solid var(--neon-cyan); font-weight 700; border-radius 8px; padding 1.2rem; font-family 'Share Tech Mono', monospace; font-size 1.2rem; cursor pointer; text-transform uppercase; width 100%; transition 0.3s; letter-spacing 2px; }
.cyber-btnactive { background var(--neon-cyan); color #000; box-shadow 0 0 30px var(--neon-cyan); transform scale(0.98); }
--- STREAMING_CHUNK Styling application header and navigation... ---
header { display flex; justify-content space-between; align-items center; padding 1rem 1.5rem 0.5rem; background linear-gradient(to bottom, rgba(2,4,10,0.95) 0%, transparent 100%); }
.header-left { display flex; align-items center; gap 1.5rem; }
.menu-btn { background transparent; border none; cursor pointer; display flex; flex-direction column; gap 6px; padding 5px; }
.menu-btn span { display block; width 28px; height 3px; background-color var(--text-main); border-radius 2px;}
.header-title-container { display flex; flex-direction column; }
.header-title { color #fff; font-size 1.6rem; font-weight 800; letter-spacing 4px; text-shadow 0 0 15px rgba(0,243,255,0.4);}
.header-title span { color var(--neon-cyan); }
.sys-time { color var(--neon-cyan); font-size 0.7rem; font-family 'Share Tech Mono', monospace; opacity 0.8; letter-spacing 1px; margin-top 2px;}
.add-feed-btn { background rgba(0, 119, 255, 0.15); border 1px solid rgba(0,243,255,0.4); color var(--neon-cyan); width 42px; height 42px; border-radius 10px; font-size 1.6rem; display flex; align-items center; justify-content center; cursor pointer; transition 0.3s; box-shadow 0 0 15px rgba(0,243,255,0.2); }
.add-feed-btnactive { background var(--neon-cyan); color #000; transform scale(0.9);}
--- STREAMING_CHUNK Styling category elements and card feed container... ---
.category-bar-wrapper { display flex; align-items center; padding 0.5rem 1.5rem 1rem; -webkit-mask-image linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%); }
.category-bar { display flex; overflow-x auto; gap 1rem; scrollbar-width none; flex 1; }
.category-bar-webkit-scrollbar { display none; }
.cat-item { color var(--text-muted); padding 0.6rem 1.4rem; border-radius 25px; border 1px solid rgba(255,255,255,0.15); background rgba(0,0,0,0.5); backdrop-filter blur(8px); font-size 0.85rem; white-space nowrap; cursor pointer; font-weight 600; transition 0.3s; letter-spacing 1px; }
.cat-item.active { color #02040a; background var(--neon-cyan); border-color var(--neon-cyan); box-shadow 0 0 20px rgba(0,243,255,0.5); font-weight 800;}
--- STREAMING_CHUNK Styling card layouts and image blends... ---
#feed-container { flex 1; overflow-y auto; padding 0.5rem 1.5rem 2rem; scrollbar-width none; position relative; display flex; flex-direction column; }
#feed-container-webkit-scrollbar { display none; }
@keyframes cardIn { from { opacity 0; transform translateY(25px); } to { opacity 1; transform translateY(0); } }
.article-card {
background var(--card-bg); backdrop-filter blur(20px); border 1px solid var(--card-border); border-radius 20px; margin-bottom 1.8rem;
position relative; transform translateX(0); transition 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow 0 15px 35px rgba(0, 0, 0, 0.8);
animation cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
display flex; flex-direction column; height auto; min-height min-content; overflow hidden;
}
.article-thumb { width 100%; height 210px; flex-shrink 0; background-size cover; background-position center; position relative; background-color #040914; border-bottom 1px solid rgba(255, 255, 255, 0.05); }
.article-thumbafter { content ''; position absolute; bottom 0; left 0; width 100%; height 60%; background linear-gradient(to top, rgba(6,11,24,1) 0%, transparent 100%); }
.article-badge { position absolute; top 1rem; right 1rem; background rgba(0, 0, 0, 0.75); backdrop-filter blur(10px); border 1px solid rgba(0, 243, 255, 0.4); color var(--neon-cyan); padding 0.3rem 0.8rem; border-radius 8px; font-size 0.75rem; font-weight bold; z-index 2; letter-spacing 1px; box-shadow 0 0 10px rgba(0,243,255,0.2); }
.article-content { padding 0 1.5rem 1.5rem; position relative; z-index 3; display flex; flex-direction column; flex-grow 1; margin-top -10px; }
.article-meta { display flex; align-items center; flex-wrap wrap; gap 0.6rem; margin-bottom 0.8rem; font-family 'Share Tech Mono', monospace; font-size 0.8rem; color var(--text-muted); }
.article-source { color var(--neon-cyan); font-weight 700; letter-spacing 1px; text-transform uppercase;}
.meta-dot { width 4px; height 4px; background rgba(255,255,255,0.2); border-radius 50%; flex-shrink 0;}
.article-title { font-size 1.35rem; line-height 1.4; color #ffffff; font-weight 700; margin-bottom 0.6rem; text-shadow 0 2px 4px rgba(0,0,0,0.8);}
.article-summary { font-size 0.95rem; color #a9b5c9; line-height 1.6; display -webkit-box; -webkit-line-clamp 3; -webkit-box-orient vertical; overflow hidden;}
--- STREAMING_CHUNK Styling swipe areas and dynamic blue overlay... ---
.swipe-bg { position absolute; top 0; left 0; width 100%; height 100%; border-radius 20px; display flex; align-items center; opacity 0; z-index -1; transition opacity 0.2s; padding 0 2.5rem; }
.swipe-delete { background linear-gradient(90deg, transparent, rgba(0, 85, 255, 0.9)); justify-content flex-end; }
.swipe-delete svg { width 36px; height 36px; fill #fff; filter drop-shadow(0 0 15px rgba(0,85,255,0.8)); }
.swipe-archive { background linear-gradient(270deg, transparent, rgba(0, 243, 255, 0.9)); justify-content flex-start; }
.swipe-archive svg { width 36px; height 36px; fill #02040a; filter drop-shadow(0 0 10px rgba(0,0,0,0.5)); }
.article-card.swiping .swipe-bg { opacity 1; }
.article-card.deleted { transform translateX(-120%) !important; opacity 0; transition 0.4s ease-out; }
.article-card.archived { transform translateX(120%) !important; opacity 0; transition 0.4s ease-out; }
--- STREAMING_CHUNK Styling sidebar and sliding panel... ---
#sidebar-overlay { position fixed; inset 0; background rgba(0,0,0,0.8); z-index 190; opacity 0; pointer-events none; transition 0.4s; backdrop-filter blur(5px); }
#sidebar-overlay.active { opacity 1; pointer-events auto; }
#sidebar { position fixed; top 0; left 0; width 280px; height 100vh; background rgba(6, 11, 24, 0.95); backdrop-filter blur(25px); border-right 1px solid rgba(255,255,255,0.1); z-index 200; transform translateX(-100%); transition 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding-top calc(var(--safe-top) + 20px); padding-bottom var(--safe-bottom); display flex; flex-direction column; box-shadow 20px 0 50px rgba(0,0,0,0.9); }
#sidebar.active { transform translateX(0); }
.sidebar-header { padding 0 1.5rem 1.5rem; border-bottom 1px solid rgba(255,255,255,0.05); margin-bottom 1rem;}
.sidebar-title { color var(--text-main); font-size 1rem; letter-spacing 2px; font-weight 600;}
.sidebar-content { flex 1; overflow-y auto; padding 0 1.5rem; scrollbar-width none;}
.sidebar-category-block { margin-bottom 2rem; }
.sidebar-cat-title { color var(--neon-cyan); font-size 0.8rem; font-weight 700; margin-bottom 1rem; letter-spacing 2px; display flex; align-items center; gap 8px;}
.sidebar-feed-list { list-style none; display flex; flex-direction column; gap 6px; }
.sidebar-feed-item { background rgba(0,0,0,0.3); border 1px solid transparent; border-radius 8px; color var(--text-muted); font-size 0.95rem; padding 0.6rem 1rem; cursor pointer; transition 0.2s;}
.sidebar-feed-item.active { background rgba(0,85,255,0.2); border-color rgba(0,243,255,0.3); color #fff; font-weight 600;}
--- STREAMING_CHUNK Styling control panels and multi-tab system... ---
#control-modal { position fixed; inset 0; background rgba(2, 4, 10, 0.85); backdrop-filter blur(15px); z-index 400; display flex; justify-content center; align-items center; opacity 0; pointer-events none; transition 0.4s; }
#control-modal.active { opacity 1; pointer-events auto; }
.control-box { background rgba(6, 11, 24, 0.95); border 1px solid var(--neon-cyan); border-radius 20px; width 95%; max-width 480px; max-height 85vh; display flex; flex-direction column; transform scale(0.95) translateY(20px); transition 0.4s; box-shadow 0 30px 60px rgba(0,0,0,0.9); overflow hidden;}
#control-modal.active .control-box { transform scale(1) translateY(0); }
.control-header { display flex; justify-content space-between; align-items center; padding 1.5rem; border-bottom 1px solid rgba(0,243,255,0.2); }
.control-tabs { display flex; background rgba(0,0,0,0.5); padding 5px; border-radius 12px; margin 1rem 1.5rem; gap 5px;}
.ctrl-tab { flex 1; text-align center; padding 0.8rem 0.2rem; color var(--text-muted); font-size 0.8rem; font-weight 700; cursor pointer; border-radius 8px; transition 0.3s; letter-spacing 1px;}
.ctrl-tab.active { background var(--neon-cyan); color #000; }
.control-body { padding 0 1.5rem 1.5rem; overflow-y auto; flex 1; scrollbar-width none; }
.control-section { display none; flex-direction column; gap 1rem;}
.control-section.active { display flex; animation cardIn 0.3s; }
.search-results { display flex; flex-direction column; gap 10px; margin-top 10px;}
.search-item { background rgba(0,0,0,0.3); border 1px solid rgba(255,255,255,0.1); padding 1rem; border-radius 10px; display flex; flex-direction column; gap 10px;}
.search-item-info { display flex; flex-direction column; gap 4px; }
.search-item-title { color #fff; font-weight 600; font-size 1rem;}
.search-item-url { color var(--text-muted); font-size 0.75rem; word-break break-all;}
.search-action-row { display flex; gap 5px; align-items center; }
.add-icon-btn { background rgba(0,243,255,0.15); color var(--neon-cyan); border 1px solid var(--neon-cyan); width 36px; height 36px; border-radius 8px; font-weight bold; cursor pointer; display flex; align-items center; justify-content center; font-size 1.2rem;}
.add-icon-btnactive { background var(--neon-cyan); color #000; }
.cat-manage-item { display flex; justify-content space-between; align-items center; background rgba(0,0,0,0.3); padding 1rem; border-radius 10px; border 1px solid rgba(255,255,255,0.05);}
.del-icon-btn { background rgba(255,59,92,0.1); color var(--danger); border 1px solid var(--danger); padding 6px 12px; border-radius 6px; font-size 0.8rem; cursor pointer; font-weight bold; font-family inherit;}
--- STREAMING_CHUNK Styling reading view sheet and overlays... ---
#reader-view { position fixed; inset 0; background #02040a; z-index 300; display flex; flex-direction column; transform translateY(100%); transition 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow-x hidden; }
#reader-view.active { transform translateY(0); }
.reader-grabber { width 40px; height 4px; background rgba(255,255,255,0.3); border-radius 2px; margin 10px auto 0; flex-shrink 0; }
.reader-header-nav { position absolute; top var(--safe-top); left 0; width 100%; display flex; justify-content space-between; padding 1rem 1.5rem; z-index 10; }
.close-btn { background rgba(0,0,0,0.6); backdrop-filter blur(10px); border 1px solid rgba(255,255,255,0.1); border-radius 50%; width 40px; height 40px; display flex; align-items center; justify-content center; font-size 1.2rem; color #fff; cursor pointer;}
.reader-hero { width 100%; height 35vh; min-height 250px; background-size cover; background-position center; position relative; }
.reader-heroafter { content ''; position absolute; bottom 0; left 0; width 100%; height 80%; background linear-gradient(to top, #02040a 0%, transparent 100%); }
.reader-content-wrapper { flex 1; overflow-y auto; padding 0 1.5rem; padding-bottom calc(var(--safe-bottom) + 4rem); margin-top -2rem; position relative; z-index 5;}
.reader-content { max-width 700px; margin 0 auto; font-family 'Merriweather', serif; font-size 1.1rem; line-height 1.8; color var(--text-reader); }
.reader-content h1 { font-family 'Inter', sans-serif; color #ffffff; margin-bottom 1.5rem; font-size 1.8rem; line-height 1.3; font-weight 800;}
--- STREAMING_CHUNK Styling toast notifications and dynamic alerts... ---
#system-toast { position fixed; bottom calc(var(--safe-bottom) + 20px); left 50%; transform translateX(-50%) translateY(100px); background rgba(6, 11, 24, 0.95); backdrop-filter blur(10px); border 1px solid var(--neon-cyan); color #fff; padding 0.8rem 1.5rem; border-radius 12px; box-shadow 0 10px 20px rgba(0,0,0,0.8); z-index 1000; opacity 0; transition 0.4s; display flex; align-items center; gap 10px; font-size 0.9rem; white-space nowrap; font-family 'Share Tech Mono', monospace;}
#system-toast.show { transform translateX(-50%) translateY(0); opacity 1; }
#new-card-alert { position fixed; top calc(var(--safe-top) + 10px); left 50%; transform translateX(-50%) translateY(-100px); background rgba(0, 243, 255, 0.15); backdrop-filter blur(15px); border 1px solid var(--neon-cyan); color #fff; padding 1rem 2rem; border-radius 30px; font-family 'Share Tech Mono', monospace; box-shadow 0 0 30px rgba(0, 243, 255, 0.5); z-index 1000; opacity 0; transition 0.4s cubic-bezier(0.16, 1, 0.3, 1); display flex; align-items center; gap 12px; font-size 1rem; font-weight bold; white-space nowrap; letter-spacing 1px; }
#new-card-alert.show { transform translateX(-50%) translateY(0); opacity 1; }
#new-card-alert svg { width 24px; height 24px; fill var(--neon-cyan); animation pulseAlert 1s infinite; }
@keyframes pulseAlert { 0%, 100% { transform scale(1); opacity 0.8; } 50% { transform scale(1.2); opacity 1; } }
.empty-state { margin auto; text-align center; color var(--text-muted); display none; flex-direction column; align-items center; width 100%;}
.empty-state.visible { display flex; }
.empty-state svg { width 60px; height 60px; fill rgba(255,255,255,0.1); margin-bottom 1.5rem; }
style
head
body
canvas id=webgl-canvascanvas
div class=scanlinesdiv
div id=auth-screen
div class=auth-box
h1 class=auth-logo cyber-fontGÜNCELspan_spanh1
p style=color var(--text-muted); font-size 0.95rem; margin-bottom 2rem; line-height 1.5;Güvenli terminale erişim sağlayın.br(Şifre neon2026)p
input type=password id=passkey class=cyber-input cyber-font placeholder= autocomplete=off
button class=cyber-btn onclick=authenticate()SİSTEME GİRİŞ YAPbutton
p id=auth-error style=color #00f3ff; margin-top 1.5rem; font-size 0.85rem; font-weight bold; display none; letter-spacing 1px;HATA YETKİ REDDEDİLDİp
div
div
div id=sidebar-overlay onclick=toggleSidebar()div
aside id=sidebar
div class=sidebar-headerspan class=sidebar-title cyber-fontAĞ BAĞLANTILARIspandiv
div class=sidebar-content id=sidebar-feed-listdiv
aside
div id=app-container
header
div class=header-left
button class=menu-btn onclick=toggleSidebar()spanspanspanspanspanspanbutton
div class=header-title-container
div class=header-title cyber-fontGÜNCELspan_spandiv
div class=sys-time id=sys-timeSYS.TIME ------div
div
div
button class=add-feed-btn onclick=openControlModal()+button
header
div class=category-bar-wrapper
div class=category-bar cyber-font id=category-bar-containerdiv
div
div id=feed-container
div class=empty-state id=empty-state
svg viewBox=0 0 24 24path d=M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2zsvg
h3 class=cyber-fontVERİ BULUNAMADIh3
div
div
div
!-- Bildirim Sistemleri --
div id=system-toastspan id=toast-messagespandiv
div id=new-card-alert
svg viewBox=0 0 24 24path d=M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9v-2h2v2zm0-4H9V7h2v5zsvg
spanYENİ VERİ TERMİNALE DÜŞTÜspan
div
!-- SİSTEM YÖNETİM MODAL --
div id=control-modal class=modal-overlay
div class=control-box
div class=control-header
span class=cyber-font style=colorvar(--neon-cyan); font-size1.2rem; font-weightbold; letter-spacing1px;SİSTEM YÖNETİMİspan
button onclick=closeControlModal() style=backgroundtransparent; bordernone; color#fff; font-size1.5rem; cursorpointer;✕button
div
div class=control-tabs cyber-font
div class=ctrl-tab active onclick=switchControlTab('url')URL EKLEdiv
div class=ctrl-tab onclick=switchControlTab('search')KEŞFETdiv
div class=ctrl-tab onclick=switchControlTab('category')KATEGORİdiv
div
div class=control-body
div id=tab-url class=control-section active
input type=text id=new-feed-name class=cyber-input style=text-alignleft; letter-spacing1px; placeholder=Kaynak Adı (Örn Wired)
input type=url id=new-feed-url class=cyber-input style=text-alignleft; letter-spacing1px; placeholder=RSS URL Adresi
select id=new-feed-category class=cyber-input cyber-font style=text-alignleft; letter-spacing1px; appearancenone; background-imageurl('dataimagesvg+xml;charset=UTF-8,%3csvg xmlns=%22httpwww.w3.org2000svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2300f3ff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3cpolyline%3e%3csvg%3e'); background-repeatno-repeat; background-positionright 1rem center; background-size1.2em;select
button class=cyber-btn onclick=saveNewFeed()AĞA BAĞLAbutton
div
div id=tab-search class=control-section
input type=text id=rss-search-input class=cyber-input style=text-alignleft; letter-spacingnormal; placeholder=Konu veya site ara (Örn teknoloji)
button class=cyber-btn onclick=searchRSS()AĞDA TARAbutton
div class=search-results id=rss-search-resultsdiv
div
div id=tab-category class=control-section
div style=displayflex; gap10px;
input type=text id=new-cat-input class=cyber-input style=letter-spacing1px; margin-bottom0; placeholder=YENİ KATEGORİ
button class=cyber-btn style=widthauto; padding0 1rem; onclick=addCategory()EKLEbutton
div
div style=margin-top1rem; border-top1px solid rgba(255,255,255,0.1); padding-top1rem; id=cat-manage-listdiv
div
div
div
div
!-- Okuma Ekranı --
div id=reader-view
div class=reader-grabber aria-hidden=truediv
div class=reader-header-nav
button class=close-btn onclick=closeReader()✕button
div
div class=reader-hero id=reader-hero-imgdiv
div class=reader-content-wrapper id=reader-scroll-area
div class=reader-content id=reader-bodydiv
div
div
script
==========================================
0. INTEGRATED BACKEND CONFIGURATION
==========================================
const BACKEND_URL = httpsscript.google.commacrossAKfycbxzroB7OqOu-4ui1Z2YHW_Nq6EKccsSMvsctVbg57E5vn8namvhmBuGXiUT-DLAZaYrbAexec;
const AUTO_REFRESH_MS = 15 60 1000; 15 dakika
let isRefreshing = false;
--- STREAMING_CHUNK Initializing dynamic PWA icon generation... ---
function setupAppIcon() {
try {
const canvas = document.createElement('canvas');
canvas.width = 512; canvas.height = 512;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#02040a';
ctx.fillRect(0, 0, 512, 512);
ctx.strokeStyle = '#00f3ff';
ctx.lineWidth = 16;
ctx.strokeRect(8, 8, 496, 496);
ctx.fillStyle = '#00f3ff';
ctx.font = 'bold 240px monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('G_', 256, 276);
const iconUrl = canvas.toDataURL('imagepng');
const linkApple = document.createElement('link');
linkApple.rel = 'apple-touch-icon';
linkApple.href = iconUrl;
document.head.appendChild(linkApple);
const linkFavicon = document.createElement('link');
linkFavicon.rel = 'icon';
linkFavicon.type = 'imagepng';
linkFavicon.href = iconUrl;
document.head.appendChild(linkFavicon);
const manifest = {
name GÜNCEL Veri Terminali,
short_name GÜNCEL,
display standalone,
background_color #02040a,
theme_color #02040a,
icons [{ src iconUrl, sizes 512x512, type imagepng, purpose any maskable }]
};
const manifestBlob = new Blob([JSON.stringify(manifest)], {type 'applicationjson'});
const linkManifest = document.createElement('link');
linkManifest.rel = 'manifest';
linkManifest.href = URL.createObjectURL(manifestBlob);
document.head.appendChild(linkManifest);
} catch(e) { console.warn(Icon setup failed); }
}
--- STREAMING_CHUNK Setting up local-first database sync... ---
function safeParse(key, fallback) {
try { const val = localStorage.getItem(key); return val JSON.parse(val) fallback; }
catch (e) { return fallback; }
}
let categories = safeParse('guncel_cats', [TEKNOLOJİ, BİLİM, FİNANS, HABER]);
let feeds = safeParse('guncel_feeds', [
{ id 1, name The Verge, url httpswww.theverge.comrssindex.xml, category TEKNOLOJİ },
{ id 2, name Evrim Ağacı, url httpsevrimagaci.orgrss.xml, category BİLİM }
]);
let articles = safeParse('guncel_articles', [
{ id 101, category TEKNOLOJİ, source The Verge, date Bugün, readTime 4 dk, title Apple Nöral Çiplerde Yeni Çağ Edge AI Dünyayı Nasıl Değiştirecek, summary Bulut tabanlı yapay zeka maliyetlerinin artması ve gizlilik endişeleri, teknoloji devlerini uç bilişim (Edge Computing) odaklı modellere yöneltiyor., image httpsimages.unsplash.comphoto-1620712943543-bcc4688e7485auto=format&fit=crop&w=1200&q=90, content `h1Apple Nöral Çiplerde Yeni Çağh1pBulut bilişimin altın çağı yerini yavaş yavaş daha merkeziyetsiz bir yapıya bırakıyor.p` },
{ id 102, category BİLİM, source Evrim Ağacı, date Dün, readTime 6 dk, title K2-18b Okyanuslarında Yaşam İzi Bulundu mu, summary James Webb Uzay Teleskobu (JWST), Dünya'dan 120 ışık yılı uzaklıktaki K2-18b ötegezegeninde biyolojik imza olabilecek Dimetil Sülfit (DMS) gazı tespit etti., image httpsimages.unsplash.comphoto-1462331940025-496dfbfc7564auto=format&fit=crop&w=1200&q=90, content `h1K2-18b Okyanuslarında Yaşam İzih1pGezegen atmosferinde metan olduğu doğrulandı.p` }
]);
let archivedArticles = safeParse('guncel_archive', []);
let currentFilterType = 'KATEGORİ';
let currentFilterValue = categories.length 0 categories[0] '';
function saveData() {
try {
localStorage.setItem('guncel_cats', JSON.stringify(categories));
localStorage.setItem('guncel_feeds', JSON.stringify(feeds));
localStorage.setItem('guncel_articles', JSON.stringify(articles));
localStorage.setItem('guncel_archive', JSON.stringify(archivedArticles));
} catch(e) { console.warn(Local storage quota limit reached.); }
}
function escapeHTML(str) {
if (!str) return '';
return String(str).replace(&g, '&').replace(g, '<').replace(g, '>').replace(g, '"').replace('g, ''');
}
--- STREAMING_CHUNK Spinning Three.js engine and handling scene fog... ---
function initWebGLBackground() {
try {
if (typeof THREE === 'undefined') return;
const canvas = document.getElementById('webgl-canvas');
const renderer = new THREE.WebGLRenderer({ canvas canvas, antialias true, alpha true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x02040a, 0.002);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth window.innerHeight, 0.1, 1000);
camera.position.z = 40; camera.position.y = 10;
function createGlow() {
const c = document.createElement('canvas'); c.width = 64; c.height = 64;
const ctx = c.getContext('2d');
const g = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
g.addColorStop(0, 'rgba(255, 255, 255, 1)'); g.addColorStop(0.2, 'rgba(255, 255, 255, 0.8)'); g.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = g; ctx.fillRect(0,0,64,64); return new THREE.CanvasTexture(c);
}
const glowTexture = createGlow();
const pGeo = new THREE.BufferGeometry();
const pCount = 200;
const pPos = new Float32Array(pCount 3);
for(let i=0; ipCount3; i++) {
pPos[i3] = (Math.random() - 0.5) 150;
pPos[i3+1] = (Math.random() - 0.5) 100 + 10;
pPos[i3+2] = (Math.random() - 0.5) 100;
}
pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
const pMat = new THREE.PointsMaterial({ size 3.5, color 0x00f3ff, map glowTexture, transparent true, opacity 0.6, depthWrite false, blending THREE.AdditiveBlending });
const pMesh = new THREE.Points(pGeo, pMat);
scene.add(pMesh);
const gridGeo = new THREE.PlaneGeometry(300, 300, 40, 40);
const gridMat = new THREE.MeshBasicMaterial({ color 0x0033aa, wireframe true, transparent true, opacity 0.15 });
const gridMesh = new THREE.Mesh(gridGeo, gridMat);
gridMesh.rotation.x = -Math.PI 2; gridMesh.position.y = -20;
scene.add(gridMesh);
window.addEventListener('resize', () = { camera.aspect = window.innerWidth window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const t = clock.getElapsedTime();
pMesh.rotation.y = t 0.01;
const attr = gridMesh.geometry.attributes.position;
for(let i=0; iattr.count; i++) {
const x = attr.getX(i); const y = attr.getY(i);
attr.setZ(i, Math.sin((x + t5)10) Math.cos((y + t2)10) 4);
}
attr.needsUpdate = true;
camera.position.y = Math.sin(t 0.2) 2 + 10; camera.lookAt(scene.position);
renderer.render(scene, camera);
}
animate();
} catch(e) { console.warn(WebGL system disabled or unsupported.); }
}
--- STREAMING_CHUNK Managing persistent auth states... ---
setInterval(() = { document.getElementById('sys-time').innerText = SYS.TIME + new Date().toLocaleTimeString('tr-TR'); }, 1000);
window.onload = function() {
setupAppIcon();
initWebGLBackground();
const isLogged = localStorage.getItem('guncel_auth') === 'true';
if(isLogged) { document.getElementById('auth-screen').style.display = 'none'; initApp(); }
};
function authenticate() {
if(document.getElementById('passkey').value === neon2026) {
localStorage.setItem('guncel_auth', 'true');
const screen = document.getElementById('auth-screen');
screen.classList.add('hidden');
setTimeout(() = { screen.style.display = 'none'; initApp(); }, 600);
} else {
document.getElementById('auth-error').style.display = 'block';
}
}
document.getElementById('passkey').addEventListener('keydown', e = { if (e.key === 'Enter') authenticate(); });
--- STREAMING_CHUNK Triggering async backend content fetch... ---
async function fetchLiveArticles(showFeedback = false) {
if (isRefreshing feeds.length === 0) return;
isRefreshing = true;
if (showFeedback) showToast(Ağ taranıyor...);
try {
const queryFeeds = feeds.map(f = ({ name f.name, url f.url, category f.category }));
const response = await fetch(`${BACKEND_URL}feeds=${encodeURIComponent(JSON.stringify(queryFeeds))}`);
const result = await response.json();
if (result.status === success && Array.isArray(result.data)) {
let newItemsCount = 0;
const existingIds = new Set(articles.map(a = a.id));
result.data.forEach(item = {
if (!existingIds.has(item.id)) {
articles.unshift(item);
newItemsCount++;
}
});
if (newItemsCount 0) {
saveData();
renderFeed(currentFilterType, currentFilterValue);
showNewCardAlert();
} else {
if (showFeedback) showToast(Yeni haber bulunamadı);
}
}
} catch(e) {
console.error(Sync error, e);
if (showFeedback) showToast(Bağlantı hatası oluştu.);
} finally {
isRefreshing = false;
}
}
function initApp() {
if(categories.length === 0) currentFilterValue = 'ARŞİV';
renderCategoryUI(); renderSidebar(); renderFeed('KATEGORİ', currentFilterValue);
İlk açılışta ve her 15 dakikada bir otomatik senkronizasyon yap
fetchLiveArticles(false);
setInterval(fetchLiveArticles, AUTO_REFRESH_MS);
}
function showToast(msg) {
const t = document.getElementById('system-toast');
document.getElementById('toast-message').innerText = msg;
t.classList.add('show'); setTimeout(() = t.classList.remove('show'), 3000);
}
function showNewCardAlert() {
const a = document.getElementById('new-card-alert');
a.classList.add('show');
if (navigator.vibrate) window.navigator.vibrate([100, 50, 100]);
setTimeout(() = a.classList.remove('show'), 4000);
}
--- STREAMING_CHUNK Configuring control modals and category options... ---
function openControlModal() {
document.getElementById('control-modal').classList.add('active');
updateCategorySelects(); renderCategoryManager();
}
function closeControlModal() {
document.getElementById('control-modal').classList.remove('active');
document.getElementById('new-feed-name').value = ''; document.getElementById('new-feed-url').value = '';
document.getElementById('rss-search-input').value = ''; document.getElementById('rss-search-results').innerHTML = '';
document.getElementById('new-cat-input').value = '';
}
function switchControlTab(tab) {
document.querySelectorAll('.ctrl-tab').forEach(el = el.classList.remove('active'));
document.querySelectorAll('.control-section').forEach(el = el.classList.remove('active'));
document.querySelector(`.ctrl-tab[onclick=switchControlTab('${tab}')]`).classList.add('active');
document.getElementById(`tab-${tab}`).classList.add('active');
}
function updateCategorySelects() {
const selectUrls = document.querySelectorAll('#new-feed-category, .cyber-input[id^=sel-]');
let options = categories.length === 0 'option value=Kategori oluşturunoption' categories.map(c = `option value=${escapeHTML(c)} style=background#02040a${escapeHTML(c)}option`).join('');
selectUrls.forEach(sel = sel.innerHTML = options);
}
--- STREAMING_CHUNK Filtering deep search indexes... ---
const rssDatabase = [
{ name Webrazzi, url httpswebrazzi.comfeed, keywords [teknoloji, girişim, startup, haber, tech] },
{ name ShiftDelete, url httpsshiftdelete.netrss, keywords [teknoloji, mobil, telefon, donanım, oyun] },
{ name Webtekno, url httpswww.webtekno.comrss.xml, keywords [teknoloji, bilim, web, oyun] },
{ name DonanımHaber, url httpswww.donanimhaber.comrss, keywords [teknoloji, donanım, bilgisayar, pc] },
{ name The Verge, url httpswww.theverge.comrssindex.xml, keywords [tech, science, art, teknoloji] },
{ name Evrim Ağacı, url httpsevrimagaci.orgrss.xml, keywords [bilim, evrim, uzay, fizik, biyoloji] },
{ name NASA, url httpswww.nasa.govrssdynbreaking_news.rss, keywords [space, uzay, bilim, nasa] },
{ name Bloomberg, url httpswww.bloomberg.comfeed, keywords [finans, ekonomi, borsa, dolar, haber] },
{ name CoinDesk, url httpswww.coindesk.comarcoutboundfeedsrss, keywords [kripto, bitcoin, crypto, finans] },
{ name Ekonomist, url httpswww.ekonomist.com.trrss, keywords [ekonomi, finans, para, piyasa, haber] },
{ name BBC Türkçe, url httpsfeeds.bbci.co.ukturkcerss.xml, keywords [haber, gündem, dünya, politika] },
{ name NTV Haber, url httpswww.ntv.com.trrss, keywords [haber, gündem, siyaset, türkiye] },
{ name NTV Spor, url httpswww.ntvspor.netrss, keywords [spor, futbol, basketbol, haber] },
{ name IGN, url httpswww.ign.comrssarticlesfeed, keywords [oyun, gaming, game, sinema] }
];
function searchRSS() {
const query = document.getElementById('rss-search-input').value.toLowerCase().trim();
const resDiv = document.getElementById('rss-search-results');
resDiv.innerHTML = '';
if(!query) { resDiv.innerHTML = 'span style=colorvar(--text-muted); font-size0.9rem;Aramak için kelime yazın.span'; return; }
let results = rssDatabase.filter(feed = feed.name.toLowerCase().includes(query) feed.keywords.some(k = k.includes(query)));
if(results.length === 0) { resDiv.innerHTML = 'span style=colorvar(--danger); font-size0.9rem;Kaynak bulunamadı.span'; return; }
let catOptions = categories.map(c = `option value=${escapeHTML(c)} style=background#000;${escapeHTML(c)}option`).join('');
if(categories.length === 0) catOptions = `option value=Kategori Yokoption`;
results.forEach((item, idx) = {
resDiv.innerHTML += `
div class=search-item
div class=search-item-info
span class=search-item-title${escapeHTML(item.name)}span
span class=search-item-url${escapeHTML(item.url)}span
div
div class=search-action-row
select class=cyber-input id=sel-${idx} style=margin0; padding8px 5px; font-size0.8rem; width110px; height36px; letter-spacing1px;${catOptions}select
button class=add-icon-btn data-idx=${idx} onclick=addFeedFromSearchByIndex(this)+button
div
div`;
});
window.__lastRSSResults = results;
}
function addFeedFromSearchByIndex(btnEl) {
const idx = parseInt(btnEl.getAttribute('data-idx'), 10);
const item = window.__lastRSSResults && window.__lastRSSResults[idx];
if (!item) return;
addFeedFromSearch(item.name, item.url, 'sel-' + idx);
}
function addFeedFromSearch(name, url, selectId) {
const cat = document.getElementById(selectId).value;
if(!cat) { alert(Lütfen kategori seçin.); return; }
if(feeds.some(f = f.url === url)) { showToast(Kaynak ağda mevcut.); return; }
feeds.push({ id Date.now(), name name, url url, category cat });
saveData();
renderSidebar();
closeControlModal();
fetchLiveArticles(true);
}
function saveNewFeed() {
const name = document.getElementById('new-feed-name').value.trim();
const url = document.getElementById('new-feed-url').value.trim();
const cat = document.getElementById('new-feed-category').value;
if(!name !url !cat) { alert(Tüm alanları doldurun.); return; }
if(feeds.some(f = f.url === url)) { showToast(URL zaten ağda var.); return; }
feeds.push({ id Date.now(), name name, url url, category cat });
saveData();
renderSidebar();
closeControlModal();
fetchLiveArticles(true);
}
--- STREAMING_CHUNK Managing category operations... ---
function renderCategoryManager() {
const list = document.getElementById('cat-manage-list');
list.innerHTML = '';
categories.forEach(cat = {
list.innerHTML += `
div class=cat-manage-item
span class=cyber-font style=colorvar(--text-main); font-size0.9rem;${escapeHTML(cat)}span
button class=del-icon-btn data-cat=${escapeHTML(cat)} onclick=deleteCategory(this.getAttribute('data-cat'))SİLbutton
div`;
});
}
function addCategory() {
const val = document.getElementById('new-cat-input').value.trim().toUpperCase();
if(!val) return;
if(!categories.includes(val)) {
categories.push(val); document.getElementById('new-cat-input').value = '';
saveData(); renderCategoryUI(); renderCategoryManager(); updateCategorySelects(); showToast(Kategori Oluşturuldu);
}
}
function deleteCategory(cat) {
if(feeds.some(f = f.category === cat)) { alert(`Bu kategoriye bağlı kaynaklar var. Önce onları silmelisiniz.`); return; }
categories = categories.filter(c = c !== cat);
articles = articles.filter(a = a.category !== cat);
archivedArticles = archivedArticles.filter(a = a.category !== cat);
if(currentFilterValue === cat) currentFilterValue = categories.length 0 categories[0] 'ARŞİV';
saveData(); renderCategoryUI(); renderCategoryManager(); updateCategorySelects(); renderFeed('KATEGORİ', currentFilterValue);
showToast(Kategori Silindi);
}
--- STREAMING_CHUNK Rendering category Pills and scroll interfaces... ---
function renderCategoryUI() {
const barContainer = document.getElementById('category-bar-container');
let barHTML = '';
categories.forEach(cat = { barHTML += `div class=cat-item ${currentFilterValue === cat 'active' ''} onclick=filterCategory('${escapeHTML(cat).replace('g,')}', this)${escapeHTML(cat)}div`; });
barHTML += `div class=cat-item ${currentFilterValue === 'ARŞİV' 'active' ''} onclick=filterCategory('ARŞİV', this) style=border-styledashed;ARŞİVdiv`;
barContainer.innerHTML = barHTML;
if(categories.length === 0 && currentFilterValue !== 'ARŞİV') { filterCategory('ARŞİV', barContainer.lastChild); }
}
function filterCategory(cat, element) {
document.querySelectorAll('.cat-item').forEach(el = el.classList.remove('active'));
document.querySelectorAll('.sidebar-feed-item').forEach(el = el.classList.remove('active'));
if(element) element.classList.add('active');
renderFeed('KATEGORİ', cat);
}
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('active');
document.getElementById('sidebar-overlay').classList.toggle('active');
}
function renderSidebar() {
const container = document.getElementById('sidebar-feed-list');
container.innerHTML = '';
categories.forEach(catName = {
const catFeeds = feeds.filter(f = f.category === catName);
if(catFeeds.length 0) {
const block = document.createElement('div'); block.className = 'sidebar-category-block';
block.innerHTML = `div class=sidebar-cat-title cyber-font${escapeHTML(catName)}div`;
const ul = document.createElement('ul'); ul.className = 'sidebar-feed-list';
catFeeds.forEach(feed = {
const li = document.createElement('li'); li.className = 'sidebar-feed-item cyber-font'; li.innerText = feed.name;
li.onclick = () = {
document.querySelectorAll('.cat-item').forEach(el = el.classList.remove('active'));
renderFeed('KAYNAK', feed.name); toggleSidebar();
document.querySelectorAll('.sidebar-feed-item').forEach(el = el.classList.remove('active'));
li.classList.add('active');
};
ul.appendChild(li);
});
block.appendChild(ul); container.appendChild(block);
}
});
}
--- STREAMING_CHUNK Processing feed cards with dynamic animations... ---
function renderFeed(filterType, filterValue) {
currentFilterType = filterType; currentFilterValue = filterValue;
const container = document.getElementById('feed-container');
const emptyState = document.getElementById('empty-state');
document.querySelectorAll('.article-card').forEach(el = el.remove());
let baseData = filterValue === 'ARŞİV' archivedArticles articles;
let filtered = filterType === 'KATEGORİ' && filterValue !== 'ARŞİV' baseData.filter(a = a.category === filterValue)
filterType === 'KAYNAK' baseData.filter(a = a.source === filterValue) baseData;
if(filtered.length === 0) {
emptyState.classList.add('visible');
} else {
emptyState.classList.remove('visible');
filtered.forEach((article, index) = {
const card = document.createElement('div');
card.className = 'article-card'; card.dataset.id = article.id;
card.style.animationDelay = (index 0.08) + 's';
card.innerHTML = `
div class=swipe-bg swipe-deletesvg viewBox=0 0 24 24path d=M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4zsvgdiv
div class=swipe-bg swipe-archivesvg viewBox=0 0 24 24path d=M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12.14l.81 1H5.12zsvgdiv
div class=article-thumb style=background-image url('${escapeHTML(article.image)}');
${filterValue === 'ARŞİV' 'span class=article-badge cyber-font style=backgroundrgba(0,243,255,0.2); color#fff;ARŞİVLENDİspan' ''}
div
div class=article-content
div class=article-metaspan class=article-source${escapeHTML(article.source)}spanspan class=meta-dotspanspan class=meta-date${escapeHTML(article.date)}spanspan class=meta-dotspanspan class=meta-read${escapeHTML(article.readTime)}spandiv
h2 class=article-title${escapeHTML(article.title)}h2
p class=article-summary${escapeHTML(article.summary)}p
div
`;
card.addEventListener('click', () = { if (!card.dataset.suppressClick) openReader(article); });
addSwipeLogic(card, article, filterValue === 'ARŞİV');
container.appendChild(card);
});
}
}
--- STREAMING_CHUNK Initializing directional swipe locks... ---
function addSwipeLogic(card, articleObj, isArchiveView) {
let startX = 0, startY = 0, currentX = 0, isDragging = false, isVerticalScroll = false;
const bgDelete = card.querySelector('.swipe-delete');
const bgArchive = card.querySelector('.swipe-archive');
card.addEventListener('touchstart', e = {
startX = e.touches[0].clientX; startY = e.touches[0].clientY; currentX = startX;
isDragging = true; isVerticalScroll = false;
card.classList.add('swiping'); card.style.transition='none';
}, {passive true});
card.addEventListener('touchmove', e = {
if(!isDragging) return;
let diffX = e.touches[0].clientX - startX;
let diffY = e.touches[0].clientY - startY;
if(!isVerticalScroll) {
if(Math.abs(diffY) Math.abs(diffX) + 5) {
isVerticalScroll = true; isDragging = false;
card.style.transform = 'translateX(0)';
return;
}
}
if(isVerticalScroll) return;
currentX = e.touches[0].clientX;
card.style.transform = `translateX(${diffX}px)`;
if(diffX 0) { bgDelete.style.opacity = 1; bgArchive.style.opacity = 0; }
else if (diffX 0 && !isArchiveView) { bgDelete.style.opacity = 0; bgArchive.style.opacity = 1; }
}, {passive true});
card.addEventListener('touchend', e = {
if(isVerticalScroll) { card.classList.remove('swiping'); return; }
isDragging = false; card.style.transition = 'transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)'; card.classList.remove('swiping');
const diff = currentX - startX;
const threshold = window.innerWidth 0.35;
if (Math.abs(diff) 10) { card.dataset.suppressClick = '1'; setTimeout(() = { delete card.dataset.suppressClick; }, 300); }
if(diff -threshold) {
card.classList.add('deleted');
if(isArchiveView) { archivedArticles = archivedArticles.filter(a = a.id !== card.dataset.id); }
else { articles = articles.filter(a = a.id !== card.dataset.id); }
saveData(); showToast(Kayıt Silindi);
setTimeout(() = { card.remove(); if(document.querySelectorAll('.article-card').length === 0) document.getElementById('empty-state').classList.add('visible'); }, 400);
}
else if (diff threshold && !isArchiveView) {
card.classList.add('archived');
articles = articles.filter(a = a.id !== card.dataset.id);
archivedArticles.unshift(articleObj);
saveData(); showToast(Arşive Taşındı);
setTimeout(() = { card.remove(); if(document.querySelectorAll('.article-card').length === 0) document.getElementById('empty-state').classList.add('visible'); }, 400);
} else { card.style.transform = 'translateX(0)'; }
});
}
--- STREAMING_CHUNK Opening reading pane overlay... ---
function openReader(article) {
document.getElementById('reader-hero-img').style.backgroundImage = `url('${escapeHTML(article.image)}')`;
document.getElementById('reader-body').innerHTML = `
div class=meta-infospan style=colorvar(--neon-cyan); font-weightbold;${escapeHTML(article.source)}spanspan class=meta-dotspanspan${escapeHTML(article.date)}spandiv
h1${escapeHTML(article.title)}h1
p${article.content escapeHTML(article.summary)}p
`;
document.getElementById('reader-scroll-area').scrollTop = 0;
document.getElementById('reader-view').classList.add('active');
}
function closeReader() { document.getElementById('reader-view').classList.remove('active'); }
(function initReaderDrag() {
const reader = document.getElementById('reader-view');
const scrollArea = document.getElementById('reader-scroll-area');
let startY = 0, deltaY = 0, dragging = false;
reader.addEventListener('touchstart', e = {
if (scrollArea.scrollTop 5) { dragging = false; return; }
startY = e.touches[0].clientY; dragging = true; deltaY = 0; reader.classList.add('dragging');
}, {passive true});
reader.addEventListener('touchmove', e = {
if (!dragging) return;
deltaY = e.touches[0].clientY - startY;
if (deltaY 0) reader.style.transform = `translateY(${deltaY}px)`;
}, {passive true});
reader.addEventListener('touchend', () = {
if (!dragging) return;
dragging = false; reader.classList.remove('dragging'); reader.style.transform = '';
if (deltaY window.innerHeight 0.25) closeReader();
});
})();
script
body
html