Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-513.24.1.lve.el8.x86_64

PHP Version:

8.2.23

User:

aptodayn

Directory:

/home/aptodayn/uturntime.com

Free Space:

1.4 TB

🔧 Quick Actions

✏️ Editing: epaper_view.php

<?php
// /janasena/epaper_view.php
require_once __DIR__ . '/config.php';

if (!function_exists('h')) {
    function h($s) {
        return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8');
    }
}

/**
 * SIMPLE per-page image helper
 */

function epaper_page_image(string $coverImg, int $page): string
{
    if ($coverImg === '') {
        return '';
    }

// Page 1 = cover image
    if ($page <= 1) {
        return $coverImg;
    }

// cover image unna pages folder
    $pos = strrpos($coverImg, '/');
    if ($pos === false) {
        return $coverImg;
    }

$pagesDir = substr($coverImg, 0, $pos);

// support all image extensions
    $extensions = ['jpg', 'jpeg', 'png', 'webp'];

foreach ($extensions as $ext) {

$pageImg = $pagesDir . '/p' . $page . '.' . $ext;

// correct filesystem path
        $fsPath = $_SERVER['DOCUMENT_ROOT'] . '/' . ltrim($pageImg, '/');

if (is_file($fsPath)) {
            return $pageImg;
        }
    }

// fallback to cover
    return $coverImg;
}

// ---------- GET EPAPER ID & PAGE ----------
$epaperId    = isset($_GET['id']) ? (int)$_GET['id'] : 0;
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;

if ($epaperId <= 0) {
    http_response_code(404);
    echo "Invalid ePaper.";
    exit;
}

// ---------- FETCH EPAPER RECORD ----------
$stmt = $conn->prepare("
    SELECT * 
    FROM epapers
    WHERE id = ? AND is_active = 1
    LIMIT 1
");
$stmt->bind_param("i", $epaperId);
$stmt->execute();
$res    = $stmt->get_result();
$epaper = $res->fetch_assoc();
$stmt->close();

if (!$epaper) {
    http_response_code(404);
    echo "ePaper not found.";
    exit;
}

// ---------- BASIC FIELDS ----------
$siteName = get_setting('site_name', 'Jana Sena News');

$title    = $epaper['title'] ?: ($siteName . ' ePaper');
$edition  = $epaper['edition'] ?: 'Edition';
$pubDate  = $epaper['published_date'] ?? null;
$niceDate = $pubDate ? date('d M Y', strtotime($pubDate)) : '';

$pdfUrl   = $epaper['pdf_url'] ?? '';
$coverImg = !empty($epaper['cover_image']) ? $epaper['cover_image'] : 'assets/images/epaper-placeholder.jpg';

$totalPagesRaw = isset($epaper['total_pages']) ? (int)$epaper['total_pages'] : 0;
$totalPages    = $totalPagesRaw > 0 ? $totalPagesRaw : 8;
if ($totalPages < 1) {
    $totalPages = 1;
}

$currentPage = max(1, min($currentPage, $totalPages));

$pageImageUrl = epaper_page_image($coverImg, $currentPage);

// ---------- PAGE META ----------
$baseMetaTitle = trim($siteName . ' ' . $edition . ' ePaper');
if ($niceDate !== '') {
    $baseMetaTitle .= ' â€“ ' . $niceDate;
}
if ($totalPages > 1) {
    $baseMetaTitle .= ' (Page ' . $currentPage . ' of ' . $totalPages . ')';
}

$pageTitleText   = $title;
$pageTitle       = $baseMetaTitle;
$pageDescription = 'Read the ' . $edition . ' edition of ' . $siteName
    . ($niceDate ? ' dated ' . $niceDate : '')
    . '. View page ' . $currentPage . ' online in high quality.';

$pageKeywords = get_setting(
    'default_meta_keywords',
    'jana sena, news, politics, telugu, epaper, ' . strtolower($edition)
);

// ---------- CANONICAL URL + SHARE URL ----------
$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$host   = $_SERVER['HTTP_HOST'] ?? 'localhost';

$scriptDir = rtrim(str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME'] ?? '/janasena/epaper_view.php')), '/');
if ($scriptDir === '') {
    $scriptDir = '/';
}

$canonicalPath = rtrim($scriptDir, '/') . '/epaper_view.php';

$currentUrl = $scheme . '://' . $host . $canonicalPath
            . '?id=' . $epaperId . '&page=' . $currentPage;

$pageCanonical = $currentUrl;

$shareTitle = urlencode($pageTitleText);
$shareUrl   = urlencode($currentUrl);

$archiveUrl = 'epaper.php';

// ---- SITE LOGO FOR CLIP HEADER / WATERMARK ----
$logoSetting = get_setting('site_logo', '');
$clipLogoUrl = '';
if ($logoSetting) {
    $p = ltrim($logoSetting, '/');
    if (preg_match('#^(admin/uploads|uploads)/#', $p)) {
        $clipLogoUrl = $p;
    } else {
        $clipLogoUrl = 'admin/uploads/' . $p;
    }
}

// footer text: domain + date
$clipFooterText = $host;
if ($niceDate) {
    $clipFooterText .= ' | ' . $niceDate;
}

// 🔹 DYNAMIC COLORS FROM SETTINGS
$clipBarColor    = get_setting('epaper_clip_bar_color', '#014da6');   // top & bottom bar
$clipBgColor     = get_setting('epaper_clip_bg_color', '#e5e7eb');    // background around curve
$clipBorderColor = get_setting('epaper_clip_border_color', '#d1d5db'); // 2px border
$clipTextColor   = get_setting('epaper_clip_text_color', '#000000'); // footer date/domain text

$noMainMargin = true;

include 'header.php';
?>

<style>

/* ===== SIDE PAGE NAV (NEWSPAPER STYLE) ===== */
.epview-side-nav {
    position: absolute;
    top: 50%;                      /* 🔹 MIDDLE lo petadam */
    transform: translateY(-50%);   /* 🔹 exact center */
    height: 10%;                   /* 🔹 strip height (nee value) */
    width: 34px;                   /* 🔹 strip width */
    background: rgba(0,0,0,0.18);
    z-index: 40;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epview-side-left {
    left: 0;
}

.epview-side-right {
    right: 0;
}

/* Arrow symbol */
.epview-side-left::after {
    content: '❮';
    font-size: 28px;
    color: #fff;
}

.epview-side-right::after {
    content: '❯';
    font-size: 28px;
    color: #fff;
}

.epview-side-nav:hover {
    background: rgba(0,0,0,0.4);
}

/* Clip mode ON lo hide */
.epview-side-nav.hide {
    display: none;
}

/* Mobile lo size thakkuva */
@media (max-width: 575.98px) {
    .epview-side-nav {
        width: 44px;
    }
}

/* ===== MAIN WRAPPER ===== */
.epview-wrap {
    padding: 12px 0 32px;
}
.epview-main {
    display: flex;
    gap: 18px;
}

/* ===== LEFT SIDEBAR â€“ THUMBNAILS ===== */
.epview-sidebar {
    flex: 0 0 150px;
    max-width: 170px;
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 10px;
    overflow-y: auto;
    max-height: 880px;
    box-shadow:
        0 14px 30px rgba(148, 163, 184, 0.35),
        0 0 0 1px rgba(243, 244, 246, 0.9);
    -webkit-overflow-scrolling: touch;
}
.epview-page-select {
    margin-bottom: 10px;
}
.epview-page-select select {
    font-size: 0.8rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    padding: 4px 10px;
}

.epview-sidebar::-webkit-scrollbar {
    width: 6px;
}
.epview-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.epview-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5f5;
    border-radius: 999px;
}

.epview-thumb-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.epview-thumb-item {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 4px;
    background: #ffffff;
    cursor: pointer;
    transition:
        border-color 0.18s ease-out,
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        background 0.18s ease-out;
}
.epview-thumb-item:hover {
    border-color: #f97316;
    box-shadow: 0 6px 14px rgba(249, 115, 22, 0.18);
    transform: translateY(-1px);
}
.epview-thumb-item.active {
    border-color: #f97316;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(249, 115, 22, 0.6);
    background: linear-gradient(180deg, #fff7ed, #ffffff);
}
.epview-thumb-img-wrap {
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.epview-thumb-img-wrap img {
    width: 100%;
    display: block;
}
.epview-thumb-caption {
    text-align: center;
    font-size: 0.75rem;
    color: #4b5563;
    margin-top: 3px;
}

/* ===== CENTER VIEWER CARD ===== */
.epview-viewer-container {
    flex: 1 1 auto;
}
.epview-viewer-wrap {
    background: #ffffff;
    border-radius: 16px;
    padding: 0;
    box-shadow:
        0 20px 40px rgba(148, 163, 184, 0.5),
        0 0 0 1px rgba(243, 244, 246, 0.9);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* ===== TITLE + TOOLS ===== */
.epview-topbar {
    padding: 10px 16px 8px;
    border-bottom: 1px solid #f97316;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}
.epview-top-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
}
.epview-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* ===== TOP TOOL BUTTONS ===== */
.epview-tools {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.epview-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.8rem;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #111827;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
}
.epview-tool-btn i {
    font-size: 0.8rem;
}
.epview-tool-btn:hover {
    background: #ffffff;
    border-color: #9ca3af;
    text-decoration: none;
    color: #111827;
}

/* ===== ROUND SOCIAL ICONS ===== */
.epview-round-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #dbe1ea;
    color: #0b2e63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow:
        0 3px 6px rgba(0,0,0,0.10),
        0 0 0 4px rgba(255,255,255,0.8) inset;
    transition: all 0.2s ease;
}
.epview-round-icon:hover {
    transform: translateY(-3px);
    box-shadow:
        0 6px 14px rgba(0,0,0,0.18),
        0 0 0 4px rgba(255,255,255,0.95) inset;
}
.epview-round-icon i {
    font-size: 1.05rem;
    color: #0b2e63;
}

/* bottom share bar â€“ center */
.epview-share-bottom {
    padding: 10px 16px 14px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== MAIN IMAGE AREA ===== */
.epview-viewer-inner {
    position: relative;
    background: #f3f4f6;
    border-radius: 0;
    overflow: auto;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
}
.epview-main-img-wrap {
    position: relative;
    display: inline-block;
}
.epview-main-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.25),
        0 0 0 1px rgba(229, 231, 235, 0.9);
}

/* fallback */
.epview-pdf-fallback {
    padding: 40px 20px;
    text-align: center;
    color: #4b5563;
}

/* ===== CLIP MODE ===== */
.clip-topbar {
    position: absolute;
    z-index: 20;
    display: none;
    align-items: center;
    gap: 8px;
    left: 10px;
    top: 10px;
}
.clip-topbar button {
    border: none;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 8px rgba(15,23,42,0.35);
}
.clip-btn-share {
    background: #ffffff;
    color: #111827;
    font-weight: 600;
}
.clip-btn-cancel {
    background: #a30909;
    color: #f9fafb;
    font-weight: 500;
}

/* selection rect â€“ inside light, outside dark */
.clip-rect {
    position: absolute;
    border: 2px solid #2563eb;
    border-radius: 7px;
    background: rgba(37, 99, 235, 0.06);
    pointer-events: none;
    display: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}

/* drag handles (square) */
.clip-handle {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 0;
    background: #03ffd5;
    border: 2px solid #111827;
    box-shadow: none;
    pointer-events: auto;
}
.clip-handle-tl { left: -5px; top: -5px; cursor: nwse-resize; }
.clip-handle-tr { right: -5px; top: -5px; cursor: nesw-resize; }
.clip-handle-bl { left: -5px; bottom: -5px; cursor: nesw-resize; }
.clip-handle-br { right: -5px; bottom: -5px; cursor: nwse-resize; }

.clip-handle-tm { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
.clip-handle-bm { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
.clip-handle-ml { top: 50%; left: -5px; transform: translateY(-50%); cursor: ew-resize; }
.clip-handle-mr { top: 50%; right: -5px; transform: translateY(-50%); cursor: ew-resize; }

/* ===== SHARE MODAL â€“ GLOSSY STYLE ===== */
#clipShareModal .modal-dialog {
    max-width: 380px;
}
#clipShareModal .modal-content {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.35);
    background:
        radial-gradient(circle at top left, rgba(248,250,252,0.95), rgba(226,232,240,0.96)),
        linear-gradient(135deg, rgba(15,23,42,0.96), rgba(30,64,175,0.96));
    background-blend-mode: screen;
    box-shadow:
        0 18px 45px rgba(15,23,42,0.9),
        0 0 0 1px rgba(148,163,184,0.7);
    overflow: hidden;
}
#clipShareModal .modal-header {
    border-bottom: 1px solid rgba(148,163,184,0.6);
    background: linear-gradient(90deg, rgba(15,23,42,0.96), rgba(30,64,175,0.95));
    color: #e5e7eb;
}
#clipShareModal .modal-title {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#clipShareModal .btn-close {
    filter: invert(1);
}
#clipShareModal .modal-body {
    background: radial-gradient(circle at top, rgba(248,250,252,0.97), rgba(229,231,235,0.97));
}

/* modal preview & inputs */
.clip-preview-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow:
        0 16px 32px rgba(15,23,42,0.55),
        0 0 0 1px rgba(209,213,219,0.95);
}
.clip-link-input {
    font-size: 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.9);
    background: rgba(255,255,255,0.9);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
}

/* glossy social buttons */
.clip-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-right: 6px;
    box-shadow:
        0 10px 18px rgba(15,23,42,0.55),
        0 0 0 3px rgba(255,255,255,0.85) inset;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.clip-share-btn.fb { background: #1877f2; color:#fff; }
.clip-share-btn.x  { background: #000;    color:#fff; }
.clip-share-btn.wa { background: #25d366; color:#fff; }
.clip-share-btn.pi { background: #e60023; color:#fff; }

.clip-share-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 14px 26px rgba(15,23,42,0.7),
        0 0 0 3px rgba(255,255,255,0.95) inset;
    filter: brightness(1.05);
}

/* main "Link" pill */
.clip-main-link-btn {
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #f9fafb;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow:
        0 10px 20px rgba(37,99,235,0.55),
        0 0 0 2px rgba(191,219,254,0.9) inset;
}
.clip-main-link-btn i {
    font-size: 0.8rem;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 992px) {
    .epview-wrap { padding-top: 18px; }
}

@media (max-width: 991.98px) {
    .epview-main { flex-direction: column; }

.epview-sidebar {
        order: 2;
        max-height: 180px;
        display: flex;
        flex-direction: row;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .epview-thumb-list { flex-direction: row; }
    .epview-thumb-item {
        min-width: 100px;
        flex-shrink: 0;
    }

.epview-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

.epview-top-right { align-items: flex-start; }
    .epview-tools { justify-content: flex-start; }
}

/* ðŸ”» MOBILE SPECIAL â€“ full glossy page only, thumbnails hide */
@media (max-width: 575.98px) {
    .epview-sidebar { display: none; }

.epview-viewer-inner {
        max-height: 70vh;
        overflow: hidden;
        padding: 10px;
    }
    .epview-main-img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        object-position: top center;
        border-radius: 12px;
    }
}

body.epaper-fs .epview-main-img {
    object-fit: cover !important;
}

/* ===== PAGE NUMBER NAV ===== */

.epview-page-nav {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
    flex-wrap: wrap;
}

.epview-page-btn {
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: #e5e7eb;
    color: #111;
    font-size: 14px;
    font-weight: 600;
}

.epview-page-btn.active {
    background: #111;
    color: #fff;
}

/* fullscreen overlay */
body.epaper-fs .epview-page-nav {
    position: fixed;
    top: 54px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    background: rgba(0,0,0,0.5);
    padding: 6px 10px;
    border-radius: 12px;
}

body.epaper-fs .epview-page-btn {
    background: rgba(255,255,255,0.9);
}

/* ===== DESKTOP PAGE NUMBERS ===== */
.epview-page-numbers {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 16px 0;
    font-size: 15px;
    font-weight: 600;
}

/* single page number */
.epview-page-numbers span {
    padding: 6px 14px;
    cursor: pointer;
    border-radius: 8px;
    background: #f1f5f9;
    color: #111;
    user-select: none;
}

.epview-page-numbers span.active {
    background: #111827;
    color: #fff;
}

/* ❌ MOBILE LO HIDE */
@media (max-width: 767px) {
    .epview-page-numbers {
        display: none;
    }
}

</style>

<aside class="epview-sidebar">
            <div class="epview-page-select">
                <select class="form-select form-select-sm" onchange="window.location.href=this.value;">
                    <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                        <option value="epaper_view.php?id=<?= $epaperId; ?>&page=<?= $i; ?>" 
                                <?= ($i === $currentPage) ? 'selected' : ''; ?>>
                            Page <?= $i; ?>
                        </option>
                    <?php endfor; ?>
                </select>
            </div>

<div class="epview-thumb-list">
                <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                    <?php $thumbImg = epaper_page_image($coverImg, $i); ?>
                    <a href="epaper_view.php?id=<?= $epaperId; ?>&page=<?= $i; ?>"
                       class="epview-thumb-item <?= ($i === $currentPage) ? 'active' : ''; ?>">
                        <div class="epview-thumb-img-wrap">
                            <img src="<?= h($thumbImg); ?>" alt="Page <?= $i; ?> thumbnail" loading="lazy">
                        </div>
                        <div class="epview-thumb-caption">Page <?= $i; ?></div>
                    </a>
                <?php endfor; ?>
            </div>
        </aside>

<div class="epview-viewer-container" id="epaperViewer">

<div class="epview-topbar">
                    <div class="epview-top-title">
                        <?= h($title); ?>
                    </div>
                    
                    
<div class="epview-page-numbers" id="pageNumbers"></div>

<div class="epview-top-right">
    <div class="epview-tools">
        <?php if (!empty($pdfUrl)): ?>
            <a href="<?= h($pdfUrl); ?>" target="_blank" rel="noopener"
               class="epview-tool-btn">
                <i class="fas fa-download"></i>
                <span>PDF</span>
            </a>
        <?php endif; ?>

<button type="button"
                class="epview-tool-btn"
                id="clipToggleBtn">
            <i class="fas fa-cut"></i>
            <span>Clip</span>
        </button>

<a href="<?= h($archiveUrl); ?>" class="epview-tool-btn">
            <i class="fas fa-archive"></i>
            <span>Archive</span>
        </a>

<button type="button"
                class="epview-tool-btn"
                id="fsBtn">
            <i class="fas fa-expand"></i>
            <span>Full</span>
        </button>
    </div>
</div>

<div class="epview-viewer-inner" id="clipViewer">
    <?php if (!empty($pageImageUrl)): ?>
        <div class="epview-main-img-wrap" id="clipImageContainer">
            <img src="<?= h($pageImageUrl); ?>"
                 alt="<?= h($pageTitleText); ?> - Page <?= $currentPage; ?>"
                 class="epview-main-img"
                 id="clipImage"
                 draggable="false">

<div class="epview-side-nav epview-side-left" id="sidePrev"></div>
            <div class="epview-side-nav epview-side-right" id="sideNext"></div>

<div class="clip-topbar" id="clipTopBar">
                <button type="button" class="clip-btn-share" id="clipShareBtn">
                    <i class="fas fa-share-alt"></i> Share
                </button>
                <button type="button" class="clip-btn-cancel" id="clipCancelBtn">
                    <i class="fas fa-times"></i> Cancel
                </button>
            </div>

<div class="clip-rect" id="clipRect">
                <div class="clip-handle clip-handle-tl" data-pos="tl"></div>
                <div class="clip-handle clip-handle-tr" data-pos="tr"></div>
                <div class="clip-handle clip-handle-bl" data-pos="bl"></div>
                <div class="clip-handle clip-handle-br" data-pos="br"></div>

<div class="clip-handle clip-handle-tm" data-pos="tm"></div>
                <div class="clip-handle clip-handle-bm" data-pos="bm"></div>
                <div class="clip-handle clip-handle-ml" data-pos="ml"></div>
                <div class="clip-handle clip-handle-mr" data-pos="mr"></div>
            </div>
        </div>
    <?php else: ?>
        <div class="epview-pdf-fallback">
            <p>No image configured for this ePaper.</p>
        </div>
    <?php endif; ?>
</div>

<div class="epview-share-bottom">
                    <a class="epview-round-icon"
                       href="https://www.facebook.com/sharer/sharer.php?u=<?= $shareUrl; ?>"
                       target="_blank" rel="noopener">
                        <i class="fab fa-facebook-f"></i>
                    </a>

<a class="epview-round-icon"
                       href="https://x.com/intent/tweet?url=<?= $shareUrl; ?>&text=<?= $shareTitle; ?>"
                       target="_blank" rel="noopener">
                        <i class="fab fa-x-twitter"></i>
                    </a>

<a class="epview-round-icon"
                       href="https://api.whatsapp.com/send?text=<?= $shareTitle; ?>%20<?= $shareUrl; ?>"
                       target="_blank" rel="noopener">
                        <i class="fab fa-whatsapp"></i>
                    </a>

<a class="epview-round-icon"
                       href="https://pinterest.com/pin/create/button/?url=<?= $shareUrl; ?>&description=<?= $shareTitle; ?>"
                       target="_blank" rel="noopener">
                        <i class="fab fa-pinterest-p"></i>
                    </a>

</div>
        </div>

</div>
</div>

<div class="modal fade" id="clipShareModal" tabindex="-1" aria-labelledby="clipShareLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title" id="clipShareLabel">Share Clip</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="" alt="Clip preview" id="clipPreviewImg" class="clip-preview-img mb-2">

<input type="text"
               class="form-control form-control-sm clip-link-input mb-2"
               id="clipShareLink"
               value="<?= h($currentUrl); ?>"
               readonly
               onclick="this.select();">

<div class="d-flex justify-content-between mt-2">
          <a href="<?= h($currentUrl); ?>"
             target="_blank"
             class="btn btn-outline-secondary btn-sm">
             Open
          </a>
          <a href="#"
             id="clipDownloadLink"
             class="btn btn-primary btn-sm">
             Download
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

// ==== CLIP LOGIC ====
    const img           = document.getElementById('clipImage');
    const rect          = document.getElementById('clipRect');
    const clipTopBar    = document.getElementById('clipTopBar');
    const clipToggleBtn = document.getElementById('clipToggleBtn');
    const clipShareBtn  = document.getElementById('clipShareBtn');
    const clipCancelBtn = document.getElementById('clipCancelBtn');
    const handles       = document.querySelectorAll('.clip-handle');

const logoSrc        = <?= json_encode($clipLogoUrl); ?>;
    const clipFooterText = <?= json_encode($clipFooterText); ?>;
    const clipSiteName   = <?= json_encode($siteName); ?>;

// ðŸ”¹ dynamic colors from settings
    const clipBarColor    = <?= json_encode($clipBarColor); ?>;
    const clipBgColor     = <?= json_encode($clipBgColor); ?>;
    const clipBorderColor = <?= json_encode($clipBorderColor); ?>;
    const clipTextColor = <?= json_encode($clipTextColor); ?>;

if (!img || !rect || !clipTopBar || !clipToggleBtn) return;

let isClipMode   = false;
    let isSelecting  = false;
    let isResizing   = false;
    let isMoving     = false;
    let resizeHandle = null;

let startX = 0, startY = 0;
    let selection = { x: 0, y: 0, w: 0, h: 0 };
    let startSelectionForResize = null;
    let moveOffsetX = 0, moveOffsetY = 0;

function enableClipMode() {
        isClipMode = true;

const box = img.getBoundingClientRect();

if (box.width > 0 && box.height > 0) {
            const w = box.width * 0.4;
            const h = box.height * 0.3;
            const x = (box.width - w) / 2;
            const y = (box.height - h) / 2;

selection.x = x;
            selection.y = y;
            selection.w = w;
            selection.h = h;

updateRectAndToolbar();
        } else {
            selection = { x: 0, y: 0, w: 0, h: 0 };
            rect.style.display = 'none';
            clipTopBar.style.display = 'none';
        }

img.style.cursor = 'crosshair';
        clipToggleBtn.classList.add('active');
    }

function disableClipMode() {
        isClipMode = false;
        isSelecting = false;
        isResizing = false;
        isMoving = false;
        rect.style.display = 'none';
        clipTopBar.style.display = 'none';
        img.style.cursor = 'default';
        clipToggleBtn.classList.remove('active');
    }

function updateRectAndToolbar() {
        if (selection.w <= 0 || selection.h <= 0) {
            rect.style.display = 'none';
            clipTopBar.style.display = 'none';
            return;
        }

rect.style.display = 'block';
        rect.style.left   = selection.x + 'px';
        rect.style.top    = selection.y + 'px';
        rect.style.width  = selection.w + 'px';
        rect.style.height = selection.h + 'px';

clipTopBar.style.display = 'flex';
        clipTopBar.style.left = (selection.x + 10) + 'px';
        clipTopBar.style.top  = Math.max(8, selection.y - 30) + 'px';
    }

function getOffset(e) {
        const box = img.getBoundingClientRect();
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;

let x = clientX - box.left;
        let y = clientY - box.top;

x = Math.max(0, Math.min(x, box.width));
        y = Math.max(0, Math.min(y, box.height));

return { x, y, box };
    }

function pointInsideSelection(px, py) {
        return (
            px >= selection.x &&
            px <= selection.x + selection.w &&
            py >= selection.y &&
            py <= selection.y + selection.h
        );
    }

function onDown(e) {
        if (!isClipMode) return;

if (e.target.classList && e.target.classList.contains('clip-handle')) {
            e.preventDefault();
            const handlePos = e.target.getAttribute('data-pos');
            resizeHandle = handlePos;
            isResizing = true;
            isSelecting = false;
            isMoving = false;
            const pos = getOffset(e);
            startX = pos.x;
            startY = pos.y;
            startSelectionForResize = {
                x: selection.x,
                y: selection.y,
                w: selection.w,
                h: selection.h
            };
            img.style.cursor = 'crosshair';
            return;
        }

const pos = getOffset(e);
        const px = pos.x;
        const py = pos.y;

if (selection.w > 0 && selection.h > 0 && pointInsideSelection(px, py)) {
            e.preventDefault();
            isMoving = true;
            isSelecting = false;
            isResizing = false;
            moveOffsetX = px - selection.x;
            moveOffsetY = py - selection.y;
            img.style.cursor = 'move';
            return;
        }

e.preventDefault();
        isSelecting = true;
        isResizing = false;
        isMoving = false;
        startX = px;
        startY = py;
        img.style.cursor = 'crosshair';

selection.x = startX;
        selection.y = startY;
        selection.w = 0;
        selection.h = 0;

updateRectAndToolbar();
    }

function onMove(e) {
        if (!isClipMode) return;

if (isMoving) {
            e.preventDefault();
            const pos = getOffset(e);
            const box = pos.box;

let newX = pos.x - moveOffsetX;
            let newY = pos.y - moveOffsetY;

newX = Math.max(0, Math.min(newX, box.width  - selection.w));
            newY = Math.max(0, Math.min(newY, box.height - selection.h));

selection.x = newX;
            selection.y = newY;

updateRectAndToolbar();
            return;
        }

if (isResizing && startSelectionForResize) {
            e.preventDefault();
            const pos = getOffset(e);
            const sx = startSelectionForResize.x;
            const sy = startSelectionForResize.y;
            const sw = startSelectionForResize.w;
            const sh = startSelectionForResize.h;
            let left   = sx;
            let top    = sy;
            let right  = sx + sw;
            let bottom = sy + sh;

switch (resizeHandle) {
                case 'tl':
                    left   = pos.x;
                    top    = pos.y;
                    break;
                case 'tr':
                    right  = pos.x;
                    top    = pos.y;
                    break;
                case 'bl':
                    left   = pos.x;
                    bottom = pos.y;
                    break;
                case 'br':
                    right  = pos.x;
                    bottom = pos.y;
                    break;
                case 'tm':
                    top    = pos.y;
                    break;
                case 'bm':
                    bottom = pos.y;
                    break;
                case 'ml':
                    left   = pos.x;
                    break;
                case 'mr':
                    right  = pos.x;
                    break;
            }

const x = Math.max(0, Math.min(left, right));
            const y = Math.max(0, Math.min(top, bottom));
            const w = Math.abs(right - left);
            const h = Math.abs(bottom - top);

selection.x = x;
            selection.y = y;
            selection.w = w;
            selection.h = h;

updateRectAndToolbar();
            return;
        }

if (!isSelecting) return;
        e.preventDefault();
        const pos = getOffset(e);

const x = Math.min(startX, pos.x);
        const y = Math.min(startY, pos.y);
        const w = Math.abs(pos.x - startX);
        const h = Math.abs(pos.y - startY);

selection.x = x;
        selection.y = y;
        selection.w = w;
        selection.h = h;

updateRectAndToolbar();
    }

function onUp(e) {
    if (!isClipMode) return;

if (isSelecting || isResizing || isMoving) {
        e.preventDefault();
    }

isSelecting = false;
    isResizing  = false;
    isMoving    = false;
    resizeHandle = null;

img.style.cursor = isClipMode ? 'crosshair' : 'default';

// 🔥 IMPORTANT: clean move listeners
    window.removeEventListener('mousemove', onMove);
    window.removeEventListener('mouseup', onUp);
    window.removeEventListener('touchmove', onMove);
    window.removeEventListener('touchend', onUp);
}

/* ================= IMAGE START EVENTS ================= */

// 🖥 Desktop start
img.addEventListener('mousedown', function (e) {
    onDown(e);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
});

// 📱 Mobile start
img.addEventListener('touchstart', function (e) {
    onDown(e);
    window.addEventListener('touchmove', onMove, { passive: false });
    window.addEventListener('touchend', onUp, { passive: false });
}, { passive: false });

/* ================= HANDLE EVENTS ================= */

handles.forEach(function(h) {

// 🖥 Desktop (unchanged)
    h.addEventListener('mousedown', function (e) {
        onDown(e);
        window.addEventListener('mousemove', onMove);
        window.addEventListener('mouseup', onUp);
    });

// 📱 Mobile (FIX)
    h.addEventListener('touchstart', function(e) {
        e.preventDefault();
        e.stopPropagation();
        onDown(e);
        window.addEventListener('touchmove', onMove, { passive: false });
        window.addEventListener('touchend', onUp, { passive: false });
    }, { passive: false });

});

clipToggleBtn.addEventListener('click', function() {
    if (isClipMode) {
        disableClipMode();
    } else {
        enableClipMode();
    }
});

clipCancelBtn.addEventListener('click', function() {
        disableClipMode();
    });

// helper: TOP-only rounded rect path
    function topRoundedRectPath(ctx, x, y, w, h, r) {
        r = Math.min(r, w / 2);
        ctx.beginPath();
        ctx.moveTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h);
        ctx.lineTo(x, y + h);
        ctx.closePath();
    }

// rounded canvas with top curve + border
    function createRoundedCanvas(srcCanvas) {
        const c   = document.createElement('canvas');
        c.width   = srcCanvas.width;
        c.height  = srcCanvas.height;
        const cx  = c.getContext('2d');

// background â€“ FROM SETTINGS
        cx.fillStyle = clipBgColor;
        cx.fillRect(0, 0, c.width, c.height);

const radius = Math.round(Math.min(c.width, c.height) * 0.05); // ~5% radius

// clip with top rounded rect
        cx.save();
        topRoundedRectPath(cx, 0, 0, c.width, c.height, radius);
        cx.clip();
        cx.drawImage(srcCanvas, 0, 0);
        cx.restore();

// 2px border slightly inside â€“ FROM SETTINGS
        cx.save();
        cx.strokeStyle = clipBorderColor;
        cx.lineWidth   = 2;
        topRoundedRectPath(cx, 1, 1, c.width - 2, c.height - 2, radius);
        cx.stroke();
        cx.restore();

return c;
    }

// Share button: create crop + open modal
    clipShareBtn.addEventListener('click', function() {
        if (selection.w < 10 || selection.h < 10) {
            alert('Please drag/resize the box to select area before sharing.');
            return;
        }

const naturalWidth  = img.naturalWidth;
        const naturalHeight = img.naturalHeight;
        const displayWidth  = img.getBoundingClientRect().width;
        const displayHeight = img.getBoundingClientRect().height;

if (!naturalWidth || !naturalHeight || !displayWidth || !displayHeight) {
            alert('Unable to read image size. Please try again.');
            return;
        }

const scaleX = naturalWidth / displayWidth;
        const scaleY = naturalHeight / displayHeight;

const sx = selection.x * scaleX;
        const sy = selection.y * scaleY;
        const sw = selection.w * scaleX;
        const sh = selection.h * scaleY;

// ---- canvas height = header + content + footer ----
        const headerH = Math.round(sh * 0.2); // 20% of clip height
        const footerH = Math.round(sh * 0.09); // 9% of clip height
        const totalH  = headerH + sh + footerH;

const canvas = document.createElement('canvas');
        canvas.width  = sw;
        canvas.height = totalH;

const ctx = canvas.getContext('2d');

// draw article content in the MIDDLE
        ctx.drawImage(img, sx, sy, sw, sh, 0, headerH, sw, sh);

const previewImg   = document.getElementById('clipPreviewImg');
        const downloadLink = document.getElementById('clipDownloadLink');
        const fbBtn        = document.getElementById('clipShareFb');
        const xBtn         = document.getElementById('clipShareX');
        const waBtn        = document.getElementById('clipShareWa');
        const piBtn        = document.getElementById('clipSharePi');
        const copyBtn      = document.getElementById('clipCopyBtn');
        const linkInput    = document.getElementById('clipShareLink');

const d = new Date();
        const stamp = d.getFullYear().toString()
            + ('0' + (d.getMonth() + 1)).slice(-2)
            + ('0' + d.getDate()).slice(-2)
            + '-'
            + ('0' + d.getHours()).slice(-2)
            + ('0' + d.getMinutes()).slice(-2);

const pageUrl   = encodeURIComponent(linkInput.value);
        const shareText = encodeURIComponent(clipSiteName);

function drawHeaderFooter(logoImg) {
            // TOP BAR â€“ COLOR FROM SETTINGS
            ctx.save();
            ctx.fillStyle = clipBarColor;
            ctx.fillRect(0, 0, canvas.width, headerH);

if (logoImg && logoImg.width && logoImg.height) {
                let lw = logoImg.width;
                let lh = logoImg.height;
                const maxW = canvas.width * 0.7;
                const maxH = headerH * 0.7;
                const s = Math.min(maxW / lw, maxH / lh);
                lw *= s;
                lh *= s;
                const lx = (canvas.width - lw) / 2;
                const ly = (headerH - lh) / 2;
                ctx.drawImage(logoImg, lx, ly, lw, lh);
            } else {
                ctx.fillStyle = '#ffffff';
                ctx.font = Math.max(18, headerH * 0.4) + 'px sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(clipSiteName, canvas.width / 2, headerH / 2);
            }
            ctx.restore();

// BOTTOM BAR â€“ COLOR FROM SETTINGS
            ctx.save();
            ctx.fillStyle = clipBarColor;
            ctx.fillRect(0, canvas.height - footerH, canvas.width, footerH);

ctx.fillStyle = clipTextColor;

ctx.font = Math.max(10, footerH * 0.32) + 'px sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(clipFooterText, canvas.width / 2, canvas.height - footerH / 2);
            ctx.restore();
        }

function finalizeCanvas() {
    // rounded-card canvas (top curve + border)
    const roundedCanvas = createRoundedCanvas(canvas);
    const dataURL       = roundedCanvas.toDataURL('image/jpeg', 0.95);

// TEMP preview (until upload finishes)
    previewImg.src = dataURL;

// 🔥 SAVE CLIP TO SERVER (MANDATORY for WhatsApp preview)
    fetch('/ajax/save_clip.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'image=' + encodeURIComponent(dataURL)
    })
    .then(res => res.json())
    .then(res => {
        if (!res.success || !res.url) {
            alert('Clip upload failed');
            return;
        }

const publicImageUrl = res.url;

// ✅ FINAL preview (server image)
        previewImg.src = publicImageUrl;

// ✅ Download
        downloadLink.href = publicImageUrl;
        downloadLink.download =
            'janasena-epaper-clip-page<?= $currentPage; ?>-' + stamp + '.jpg';

// Facebook
        fbBtn.onclick = function () {
            window.open(
                'https://www.facebook.com/sharer/sharer.php?u=' +
                encodeURIComponent(publicImageUrl),
                '_blank'
            );
        };

waBtn.onclick = function () {

fetch(publicImageUrl)
        .then(res => res.blob())
        .then(blob => {

const file = new File([blob], 'janasena-clip.jpg', { type: blob.type });
            const caption =
                clipSiteName + '\n' +
                'Read full news 👉 https://janasena.shotnews.in';

if (navigator.canShare && navigator.canShare({ files: [file] })) {
                navigator.share({
                    files: [file],
                    text: caption   // 👈 LINK GOES HERE
                });
            } else {
                window.open(publicImageUrl, '_blank');
            }
        });
};

// Copy link
        copyBtn.onclick = function () {
            const text = publicImageUrl;
            const setDone = function () {
                copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied';
                setTimeout(function () {
                    copyBtn.innerHTML = '<i class="fas fa-link"></i> Link';
                }, 1500);
            };

if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(setDone);
            } else {
                linkInput.value = text;
                linkInput.select();
                document.execCommand('copy');
                setDone();
            }
        };

// update input field also
        linkInput.value = publicImageUrl;

// show modal AFTER upload success
        var modal = new bootstrap.Modal(
            document.getElementById('clipShareModal')
        );
        modal.show();
    });
}

// load logo and draw banner
        if (logoSrc) {
            const logoImg = new Image();
            logoImg.onload = function () {
                drawHeaderFooter(logoImg);
                finalizeCanvas();
            };
            logoImg.onerror = function () {
                drawHeaderFooter(null);
                finalizeCanvas();
            };
            logoImg.src = logoSrc;
        } else {
            drawHeaderFooter(null);
            finalizeCanvas();
        }
    });
});

(function () {
    const fsBtn = document.getElementById('fsBtn');
    if (!fsBtn) return;

const target = document.documentElement;

fsBtn.addEventListener('click', function () {
        if (!document.fullscreenElement) {
            if (target.requestFullscreen) {
                target.requestFullscreen();
            } else if (target.webkitRequestFullscreen) {
                target.webkitRequestFullscreen();
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    });
})();

// ✅ BASE FOLDER PATH (PHP nundi exact ga vastundi)
const EPAPER_BASE_DIR = <?= json_encode(rtrim(dirname($pageImageUrl), '/') . '/'); ?>;

function changePage(page) {
    const img = document.getElementById('clipImage');
    if (!img) return;

let newSrc;

if (page === 1) {
        newSrc = EPAPER_BASE_DIR + 'cover.jpg';
    } else {
        newSrc = EPAPER_BASE_DIR + 'p' + page + '.jpg';
    }

/* 🔊 SOUND PLAY (NEW) */
    const snd = document.getElementById('pageFlipSound');
    if (snd) {
        snd.currentTime = 0;
        snd.volume = 0.4; // soft sound
        snd.play().catch(() => {});
    }

// only image change (NO reload)
    img.src = newSrc;

// update URL without reload
    const url = new URL(window.location.href);
    url.searchParams.set('page', page);
    window.history.pushState({}, '', url.toString());
}

(function () {

const viewer = document.getElementById('clipViewer'); // ✅ CORRECT TARGET
    if (!viewer) return;

let startX = 0;
    let endX   = 0;
    let isMouseDown = false;
    const swipeThreshold = 70;

function isClipActive() {
        const btn = document.getElementById('clipToggleBtn');
        return btn && btn.classList.contains('active');
    }

/* ---------- MOBILE ---------- */
    viewer.addEventListener('touchstart', function (e) {
        if (isClipActive()) return;
        if (e.touches.length === 1) {
            startX = e.touches[0].clientX;
        }
    }, { passive: true });

viewer.addEventListener('touchend', function (e) {
        if (isClipActive()) return;
        endX = e.changedTouches[0].clientX;
        handleSwipe();
    }, { passive: true });

/* ---------- DESKTOP ---------- */
    viewer.addEventListener('mousedown', function (e) {
        if (isClipActive()) return;
        isMouseDown = true;
        startX = e.clientX;
    });

window.addEventListener('mouseup', function (e) {
        if (!isMouseDown || isClipActive()) return;
        isMouseDown = false;
        endX = e.clientX;
        handleSwipe();
    });

function handleSwipe() {
        const diff = endX - startX;
        if (Math.abs(diff) < swipeThreshold) return;

const url = new URL(window.location.href);
        let page  = parseInt(url.searchParams.get('page') || 1);
        const totalPages = <?= (int)$totalPages; ?>;

// 👉 Swipe RIGHT = Previous
        if (diff > 0 && page > 1) page--;

// 👉 Swipe LEFT = Next
        if (diff < 0 && page < totalPages) page++;

url.searchParams.set('page', page);
        window.location.href = url.toString();
    }

})();

(function () {

const prevZone = document.getElementById('sidePrev');
    const nextZone = document.getElementById('sideNext');

function isClipActive() {
        const btn = document.getElementById('clipToggleBtn');
        return btn && btn.classList.contains('active');
    }

function goPage(step) {
        let page = parseInt(new URL(window.location.href).searchParams.get('page') || 1);
        const totalPages = <?= (int)$totalPages; ?>;

page += step;
        if (page < 1 || page > totalPages) return;

changePage(page); // ✅ NO FULL RELOAD
    }

if (prevZone) {
        prevZone.addEventListener('click', function () {
            if (isClipActive()) return;
            goPage(-1);
        });
    }

if (nextZone) {
        nextZone.addEventListener('click', function () {
            if (isClipActive()) return;
            goPage(1);
        });
    }

function toggleZones() {
        const hide = isClipActive();
        if (prevZone) prevZone.classList.toggle('hide', hide);
        if (nextZone) nextZone.classList.toggle('hide', hide);
    }

toggleZones();

const clipBtn = document.getElementById('clipToggleBtn');
    if (clipBtn) {
        clipBtn.addEventListener('click', function () {
            setTimeout(toggleZones, 10);
        });
    }

})();

(function () {

const totalPages = <?= (int)$totalPages; ?>;
    const container = document.getElementById('pageNumbers');

if (!container) return;

function renderPages(activePage) {
        container.innerHTML = '';

for (let i = 1; i <= totalPages; i++) {
            const span = document.createElement('span');
            span.textContent = i;

if (i === activePage) {
                span.classList.add('active');
            }

span.onclick = function () {
                changePage(i);       // 🔁 reload lekunda page change
                renderPages(i);      // active highlight update
            };

container.appendChild(span);
        }
    }

// initial render
    const currentPage =
        parseInt(new URL(window.location.href).searchParams.get('page')) || 1;

renderPages(currentPage);

})();

</script>

<?php include 'footer.php'; ?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: epaper_view.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation