templates/website/page/indexes/reviews.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="dark">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1"/>
  6.     <title>Vrshikyans — Reviews</title>
  7.     <meta name="description" content="Real student reviews for TOEFL, SAT, IELTS, ACT. Scores, photos, and honest feedback."/>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
  11.     <link rel="icon" href="{{ asset('students/Vrshikyan_logo.ico') }}" />
  12.     <meta name="color-scheme" content="dark light">
  14.     <style>
  15.         :root{
  16.             --bg:#0e1220; --bg-2:#0c152b; --surface:rgba(255,255,255,.07);
  17.             --surface-strong:rgba(12,18,40,.72); --card:rgba(20,26,52,.85); --border:rgba(140,170,255,.18);
  18.             --text:#f5f8ff; --muted:#c7d1f2; --accent:#78a6ff; --accent-2:#66e6d2; --green:#35d49f; --violet:#a06bff;
  19.             --shadow-1:0 10px 24px rgba(0,0,0,.28); --shadow-2:0 22px 60px rgba(0,0,0,.40);
  20.             --radius:18px; --blur:14px; --speed:.25s; --fast:.15s; --g1:#1c2550; --g2:#142762; --nav-h:64px;
  21.         }
  22.         html[data-theme="light"]{
  23.             --bg:#f7f8fd; --bg-2:#eef2ff; --surface:rgba(255,255,255,.65); --surface-strong:rgba(255,255,255,.92);
  24.             --card:rgba(255,255,255,.95); --border:rgba(23,32,58,.12); --text:#0f1428; --muted:#3e4a74;
  25.             --shadow-1:0 8px 20px rgba(23,32,58,.10); --shadow-2:0 24px 60px rgba(23,32,58,.16);
  26.             --g1:#dfe7ff; --g2:#cfe0ff;
  27.         }
  28.         *{box-sizing:border-box}
  29.         html,body{height:100%;margin:0}
  30.         body{
  31.             font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  32.             color:var(--text); line-height:1.65; overflow-x:hidden;
  33.             background:
  34.                     radial-gradient(160vw 120vh at -20vw -20vh, var(--g1) 0%, rgba(0,0,0,0) 60%),
  35.                     radial-gradient(160vw 120vh at 120vw -10vh, var(--g2) 0%, rgba(0,0,0,0) 55%),
  36.                     linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  37.             background-attachment:fixed,fixed,fixed;
  38.             -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  39.         }
  40.         /* Film grain */
  41.         body::before{
  42.             content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  43.             background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNjQnIGhlaWdodD0nNjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGZpbHRlciBpZD0nbi1uJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0nd2hpdGUnIGZpbHRlcj0ndXJsKCMnKyc+PC9yZWN0Pjwvc3ZnPg==");
  44.             background-size:240px 240px;
  45.         }
  47.         /* Nav */
  48.         .nav{ position:sticky; top:0; z-index:10; height:var(--nav-h); background:var(--surface-strong);
  49.             border-bottom:1px solid var(--border); backdrop-filter:blur(var(--blur)) saturate(140%) }
  50.         .nav-inner{ width:min(1120px,92%); margin:0 auto; height:100%; display:flex; align-items:center; gap:14px }
  51.         .brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--text); font-weight:900; letter-spacing:.2px }
  52.         .logo{ width:38px; height:38px; border-radius:12px; background:linear-gradient(180deg,#6ea3ff,#4b82ff); box-shadow:0 10px 22px rgba(76,130,255,.22) }
  53.         .spacer{flex:1}
  54.         .theme-btn,.cta{ display:inline-flex; align-items:center; justify-content:center; height:40px; border-radius:12px }
  55.         .theme-btn{ width:40px; border:1px solid var(--border); background:rgba(255,255,255,.08); color:var(--text); cursor:pointer }
  56.         .cta{ padding:0 22px; background:linear-gradient(180deg,#35d49f,#18b98a); color:#061a11; font-weight:900; text-decoration:none; border:0; box-shadow:0 10px 24px rgba(24,185,138,.22) }
  58.         .inner{ width:min(1120px,92%); margin:28px auto }
  59.         .h1{ margin:10px 0 4px; font-size:clamp(34px,4.8vw,58px); font-weight:900; text-shadow:0 2px 16px rgba(0,0,0,.28) }
  60.         .lead{ margin:0; color:var(--muted) }
  62.         .band{ margin-top:16px; border:1px solid var(--border); border-radius:var(--radius);
  63.             background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  64.             padding:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
  66.         /* CARD / FORM */
  67.         .card{ padding:16px; border-radius:var(--radius); border:1px solid var(--border);
  68.             background:var(--card); box-shadow:var(--shadow-1) }
  69.         .card h3{ margin:0 0 8px }
  70.         label{ font-weight:800; display:block; margin:10px 0 6px }
  71.         input[type="text"], input[type="number"], select, textarea{
  72.             width:100%; border:1px solid var(--border); background:rgba(255,255,255,.06);
  73.             padding:10px 12px; color:var(--text); border-radius:12px; outline:none;
  74.         }
  75.         textarea{ min-height:120px; resize:vertical }
  76.         .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  77.         @media (max-width:640px){ .row{ grid-template-columns:1fr } }
  78.         .chips{ display:flex; flex-wrap:wrap; gap:8px }
  79.         .chip{ padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  80.             background:rgba(255,255,255,.08); font-weight:800; font-size:13px }
  81.         .help{ color:var(--muted); font-size:14px; margin-top:6px }
  82.         .btn{ height:44px; padding:0 16px; border-radius:12px; border:0; font-weight:900; cursor:pointer }
  83.         .btn.primary{ background:linear-gradient(180deg,#78a6ff,#4b82ff); color:#08152c; box-shadow:0 10px 26px rgba(120,166,255,.26) }
  84.         .btn.ghost{ background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text) }
  86.         /* Uploader */
  87.         .uploader{ border:1px dashed var(--border); border-radius:14px; padding:12px; text-align:center; background:rgba(255,255,255,.04) }
  88.         .uploader input{ display:none }
  89.         .uploader .hint{ color:var(--muted); font-size:14px }
  90.         .thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
  91.         .thumb{
  92.             position:relative; width:100px; height:100px; border-radius:10px; overflow:hidden; border:1px solid var(--border);
  93.             background:rgba(255,255,255,.06); display:grid; place-items:center;
  94.         }
  95.         .thumb img{ width:100%; height:100%; object-fit:cover }
  96.         .thumb .pin{
  97.             position:absolute; top:6px; right:6px; background:rgba(0,0,0,.45); border:1px solid var(--border);
  98.             color:#fff; font-size:12px; border-radius:999px; padding:2px 6px; cursor:pointer;
  99.         }
  100.         option{
  101.             color: navy;
  102.         }
  103.         /* Phone-like single column stack */
  104.         #mainStack { display:block; }
  105.         /* --- Mobile overflow fixes for reviews page --- */
  107.         /* Let the header row wrap on small screens */
  108.         .review .head { flex-wrap: wrap; }
  110.         /* Allow children to actually shrink instead of pushing the card wider */
  111.         .review .head > div { min-width: 0; }
  113.         /* The right-hand badges container: allow wrapping and prevent overflow */
  114.         .review .head > div:last-child{
  115.             display: flex;           /* it already is, but ensure here */
  116.             flex-wrap: wrap;
  117.             gap: 6px;
  118.             margin-left: 0;          /* stop forcing it off-screen on tiny widths */
  119.             max-width: 100%;
  120.         }
  121.         @media (min-width: 600px){
  122.             .review .head > div:last-child{ margin-left: auto; } /* restore on wider */
  123.         }
  125.         /* Long text can break lines instead of widening the layout */
  126.         .review p,
  127.         .meta-line { overflow-wrap: anywhere; word-break: break-word; }
  129.         /* Global safety: no media should exceed its container */
  130.         img, video { max-width: 100%; height: auto; }
  132.         /* Review photos: wrap nicely and never overflow */
  133.         .review .photos{
  134.             display: flex;
  135.             flex-wrap: wrap;
  136.             gap: 8px;
  137.             max-width: 100%;
  138.         }
  139.         .review .photos img{
  140.             width: 100%;            /* keep your aesthetic */
  141.             /*height: 120px;*/
  142.             object-fit: cover;
  143.         }
  145.         /* Pinned grid: make it denser on small phones to avoid horizontal push */
  146.         @media (max-width: 480px){
  147.             .pinned { grid-template-columns: repeat(2, 1fr); }
  148.             .pinned figure{ height: 120px; }
  149.         }
  151.         /* Absolute safety net: if anything still overflows, clip it */
  152.         .feed, .review, .pinned { overflow: hidden; max-width: 100%; }
  154.         /* Pinned gallery */
  155.         .pinned{
  156.           display: grid;
  157.           grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  158.           gap: 12px;
  159.         }
  160.         
  161.         .pinned figure{
  162.           margin: 0;
  163.           border-radius: 14px;
  164.           overflow: hidden;
  165.           border: 1px solid var(--border);
  166.           background: rgba(255,255,255,.06);
  167.           aspect-ratio: 16 / 9;
  168.           display: flex;
  169.           align-items: center;
  170.           justify-content: center;
  171.         }
  172.         
  173.         .pinned img{
  174.           width: 100%;
  175.           height: 100%;
  176.           object-fit: contain; /* 👈 KEY CHANGE */
  177.         }
  180.         /* Feed one column */
  181.         .feed.onecol { display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px }
  182.         .review{max-width: 100% ;position:relative; padding:18px; border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); box-shadow:var(--shadow-1) }
  183.         .review .head{ display:flex; align-items:center; gap:12px }
  184.         .avatar{ width:44px; height:44px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:rgba(255,255,255,.06); display:grid; place-items:center; font-weight:900; color:var(--muted) }
  185.         .badge{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.1); font-weight:900; color:var(--muted) }
  186.         .rating{ font-weight:900 }
  187.         .score{ font-weight:900; color:var(--green) }
  188.         .review .photos{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap }
  189.         .review .photos img{ width: 290px; border-radius:12px; border:1px solid var(--border); object-fit:cover }
  190.         .meta-line{ color:var(--muted); font-size:14px }
  192.         /* Footer */
  193.         footer{ margin:34px 0 18px }
  194.         .foot{ width:min(1120px,92%); margin:0 auto; border:1px solid var(--border); border-radius:var(--radius);
  195.             background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); padding:16px;
  196.             display:grid; grid-template-columns:1fr 1fr; gap:14px }
  197.     </style>
  199.     <link rel="stylesheet" href="{{ asset('css/navbar.css') }}" />
  200.     <script>
  201.   (() => {
  202.     const saved = localStorage.getItem('theme');
  203.     if (saved) {
  204.       document.documentElement.setAttribute('data-theme', saved);
  205.     } else {
  206.       document.documentElement.setAttribute(
  207.         'data-theme',
  208.         matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  209.       );
  210.     }
  211.   })();
  212. </script>
  213. </head>
  214. <body>
  215.   <nav class="nav" role="navigation" aria-label="Primary">
  216.   <div class="nav-inner">
  217.     <a class="brand" href="/" aria-label="Exam-hub">
  218.       <span class="logo" aria-hidden="true" style="overflow: hidden;">
  219.         <img src="../students/Vrshikyan_logo.ico" width="39px" alt="Vrshikyans logo">
  220.       </span>
  221.       <span>Vrshikyans</span>&nbsp;&nbsp;
  222.     </a>
  224.     <div class="nav-links">
  225.       <a class="nav-link" data-section="toefl" href="./test-selection?type=toefl" id="toeflNav">TOEFL</a>
  226.       <a class="nav-link" data-section="sat" href="./test-sat-selection#sat" >SAT</a>
  227.       <a class="nav-link" data-section="act" href="./test-sat-selection#act">ACT</a>
  228.       <a class="nav-link" data-section="reading" href="./test-selection?type=readingPractice" id="readingPrNav">Reading Practice</a>
  229.       <a class="nav-link" data-section="support" href="./support">Support</a>
  230.       <a class="nav-link active" data-section="reviews" href="./reviews">Reviews</a>
  231.     </div>
  233.     <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
  235.     <div class="spacer"></div>
  236.     <button id="themeToggle" class="theme-btn" aria-label="Toggle theme">🌑</button>
  237.     <a class="cta" id="startTop" href="../indexes/account" aria-label="Account"
  238.       style="width: 40px; height: 40px; background: whitesmoke;">👤</a>
  239.   </div>
  240. </nav>
  241. <div class="mobile-menu" id="mobileMenu">
  242.   <div class="mobile-nav-links">
  243.     <a class="mobile-nav-link" href="./test-selection?type=toefl">TOEFL</a>
  244.     <a class="mobile-nav-link" href="./test-sat-selection#sat">SAT</a>
  245.     <a class="mobile-nav-link" href="./test-sat-selection#act">ACT</a>
  246.     <a class="mobile-nav-link" href="./test-selection?type=readingPractice">Reading Practice</a>
  247.     <a class="mobile-nav-link" href="./support">Support</a>
  248.     <a class="mobile-nav-link" href="./reviews">Reviews</a>
  249.   </div>
  250. </div>
  252. <!-- HEADER -->
  253. <header class="inner">
  254.     <h1 class="h1">Student Reviews</h1>
  255.     <p class="lead">Real scores. Real experiences. Add yours — photos welcome.</p>
  256.     <div class="band">
  257.         <div class="toolbar" role="group" aria-label="Filters" style="display:flex; gap:8px; flex-wrap:wrap; align-items:center">
  258.             <select id="filterExam" aria-label="Filter by exam">
  259.                 <option value="">All exams</option>
  260.                 <option value="1">TOEFL</option>
  261.                 <option value="2">IELTS</option>
  262.                 <option value="3">SAT</option>
  263.                 <option value="4">ACT</option>
  264.             </select>
  265.             <select id="sortBy" aria-label="Sort reviews">
  266.                 <option value="new">Newest</option>
  267.                 <option value="top">Highest rating</option>
  268.                 <option value="score">Highest score</option>
  269.             </select>
  270.             <button class="btn ghost" id="clearAll">Clear filters</button>
  271.         </div>
  272.         <a class="cta" href="#write">Write a review</a>
  273.     </div>
  274. </header>
  276. <!-- MAIN STACK -->
  277. <main class="inner" id="mainStack">
  278.     <!-- FORM FIRST -->
  279.     <section class="card" id="write" aria-label="Write a review">
  280.         <h3>Share your experience</h3>
  281.         <p class="lead" style="margin:.2rem 0 10px 0">Scores, tips, and a photo from test day or your notes help others.</p>
  283.         <form id="reviewForm" autocomplete="on">
  284.             <div class="row">
  285.                 <div>
  286.                     <label for="name">Your name</label>
  287.                     <input id="name" name="name" type="text" placeholder="e.g., Ani G." required/>
  288.                 </div>
  289.                 <div>
  290.                     <label for="exam">Exam</label>
  291.                     <select id="exam" name="exam" required>
  292.                         <option value="">Select exam</option>
  293.                         <option value="1">TOEFL</option>
  294.                         <option value="2">IELTS</option>
  295.                         <option value="3">SAT</option>
  296.                         <option value="4">ACT</option>
  297.                     </select>
  298.                 </div>
  299.             </div>
  301.             <div class="row">
  302.                 <div>
  303.                     <label for="score">Score</label>
  304.                     <input id="score" name="score" type="text" placeholder="e.g., 115 / 8.5 / 1540 / 34"/>
  305.                     <div class="help">Write it in your exam’s format (optional).</div>
  306.                 </div>
  307.                 <div>
  308.                     <label>Rating</label>
  309.                     <div class="chips" role="radiogroup" aria-label="Rating out of 5">
  310.                         <label class="chip"><input type="radio" name="rating" value="5" required/> ⭐⭐⭐⭐⭐</label>
  311.                         <label class="chip"><input type="radio" name="rating" value="4"/> ⭐⭐⭐⭐</label>
  312.                         <label class="chip"><input type="radio" name="rating" value="3"/> ⭐⭐⭐</label>
  313.                         <label class="chip"><input type="radio" name="rating" value="2"/> ⭐⭐</label>
  314.                         <label class="chip"><input type="radio" name="rating" value="1"/> ⭐</label>
  315.                     </div>
  316.                 </div>
  317.             </div>
  319.             <label for="message">Your message</label>
  320.             <textarea id="message" name="message" placeholder="What helped you? Which tasks felt hardest? Would you recommend Vrshikyans? (min 10 chars)" minlength="10" required></textarea>
  322.             <label>Photos</label>
  323.             <div class="uploader" id="uploader">
  324.                 <p><strong>Drop images here</strong> or <label style="text-decoration:underline; cursor:pointer;"><input type="file" id="photos" accept="image/*" multiple>browse</label></p>
  325.                 <div class="hint">PNG/JPG up to ~1MB each recommended for now.</div>
  326.                 <div class="thumbs" id="thumbs"></div>
  327.             </div>
  329.             <div style="display:flex; gap:8px; margin-top:12px">
  330.                 <button type="submit" class="btn primary">Post review</button>
  331.                 <button type="button" id="resetForm" class="btn ghost">Reset</button>
  332.             </div>
  333.         </form>
  335.         <p class="help" style="margin-top:10px">
  336.             No account yet — this writes to your device only. When we add accounts, your reviews will sync.
  337.         </p>
  338.     </section>
  340.     <!-- PINNED PHOTOS (optional highlight band) -->
  341.     <section id="pinnedSection" style="display:none; padding:0; margin-top:18px">
  342.         <h2 style="margin:0 0 8px">Pinned photos</h2>
  343.         <p class="lead" style="margin:0 0 8px">Photos you pin will appear here for everyone.</p>
  344.         <div class="pinned" id="pinnedGrid" aria-live="polite"></div>
  345.     </section>
  347.     <!-- FEED BELOW -->
  348.     <section aria-label="Reviews feed" style="margin-top:18px">
  349.         <div id="feed" class="feed onecol" aria-live="polite"></div>
  350.         <div style="display:flex; justify-content:center; margin-top:12px; gap:8px">
  351.             <button class="btn ghost" id="loadMore">Load more</button>
  352.         </div>
  353.     </section>
  354. </main>
  356. <!-- FOOTER -->
  357. <footer>
  358.     <div class="foot">
  359.         <div>
  360.             <b>Contact</b>
  361.             <p class="lead" style="margin:.4rem 0 0 0">examHubYerevan@gmail.com</p>
  362.             <p class="lead" style="margin:.2rem 0 0 0">+374 96 361 236</p>
  363.         </div>
  364.         <div>
  365.             <b>Vrshikyans</b>
  366.             <p class="lead" style="margin:.4rem 0 0 0">Yerevan • Since 2025</p>
  367.             <small>© <span id="year"></span> Vrshikyans — All rights reserved.</small>
  368.         </div>
  369.     </div>
  370. </footer>
  371. <script src="{{ asset('js/navbar.js') }}"></script>
  372. <script>
  373.     document.getElementById('year').textContent = new Date().getFullYear();
  375.     // ---------- Minimal “Backend Adapter” (swap later) ----------
  376.     // Replace these with real fetch() calls when your API is ready.
  377.     const api = {
  378.         KEY: 'vrshikyans_reviews_v1',
  380.         async _request(url, method = 'GET', params = {}) {
  381.             const reqParams = {
  382.                 method: method,
  383.             }
  385.             if (Object.keys(params).length) {
  386.                 reqParams.body = JSON.stringify(params)
  387.             }
  388.             if (params instanceof FormData) {
  389.                 reqParams.body = params
  390.             }
  392.             const response = await fetch(url, reqParams);
  393.             return await response.json();
  394.         },
  395.         async list({offset=0, limit=10, exam='', sort='new'}={}){
  396.             // const all = JSON.parse(localStorage.getItem(this.KEY) || '[]');
  397.             // let data = [...all];
  398.             // if (exam) data = data.filter(r => r.exam === exam);
  399.             // if (sort === 'new') data.sort((a,b)=> b.createdAt - a.createdAt);
  400.             // if (sort === 'top') data.sort((a,b)=> b.rating - a.rating || b.createdAt - a.createdAt);
  401.             // if (sort === 'score'){
  402.             //     const num = x => parseInt(String(x.score||'').match(/\d+/)?.[0]||'0',10);
  403.             //     data.sort((a,b)=> num(b)-num(a));
  404.             // }
  405.             return await this._request(`/review/list?sort=${sort}&exam=${exam}`);
  408.             // return { items: data.slice(offset, offset+limit), total: data.length };
  409.         },
  410.         async create(review){
  411.             const files = photosInput.files;
  412.             const formData = new FormData();
  414.             delete review.photos
  415.             for (const key in review) {
  416.                 const value = review[key];
  417.                 formData.append(key, value);
  418.             }
  420.             for (let i = 0; i < files.length; i++) {
  421.                 formData.append('photos[]', files[i]);
  422.             }
  424.             return await this._request(`/review/create`, 'POST', formData);
  425.         },
  426.         async pinPhoto(reviewId, photoIdx, pin=true){
  427.             return await this._request(`/review/${reviewId}/photos/${photoIdx}/pin`, 'POST');
  428.         }
  429.         // Later:
  430.         // list()  -> fetch('/api/reviews?...').then(r=>r.json())
  431.         // create() -> fetch('/api/reviews',{method:'POST', body:FormData|JSON })
  432.         // pinPhoto() -> fetch(`/api/reviews/${id}/photos/${idx}/pin`,{method:'POST',body:{pin}})
  433.     };
  435.     // ---------- State ----------
  436.     const state = {
  437.         files: [],          // {file, dataUrl, pinAfter?:bool}
  438.         page: 0,
  439.         pageSize: 6,
  440.         currentExam: '',
  441.         sortBy: 'new',
  442.         loading: false
  443.     };
  445.     // ---------- Uploader ----------
  446.     const photosInput = document.getElementById('photos');
  447.     const thumbs = document.getElementById('thumbs');
  448.     const uploader = document.getElementById('uploader');
  450.     function addFiles(list){
  451.         const toArray = [...list];
  452.         toArray.forEach(file=>{
  453.             if(!file.type.startsWith('image/')) return;
  454.             const reader = new FileReader();
  455.             reader.onload = () => {
  456.                 state.files.push({ file, dataUrl: reader.result, pinAfter:false });
  457.                 renderThumbs();
  458.             };
  459.             reader.readAsDataURL(file);
  460.         });
  461.     }
  462.     photosInput.addEventListener('change', e=> addFiles(e.target.files));
  464.     uploader.addEventListener('dragover', e=>{ e.preventDefault(); uploader.style.borderColor = 'var(--accent)'; });
  465.     uploader.addEventListener('dragleave', ()=> uploader.style.borderColor = 'var(--border)');
  466.     uploader.addEventListener('drop', e=>{
  467.         e.preventDefault(); uploader.style.borderColor = 'var(--border)';
  468.         addFiles(e.dataTransfer.files);
  469.     });
  471.     function renderThumbs(){
  472.         thumbs.innerHTML = '';
  473.         state.files.forEach((f, idx)=>{
  474.             const el = document.createElement('div');
  475.             el.className = 'thumb';
  476.             el.innerHTML = `
  477.           <img alt="preview ${idx+1}"/>
  478.           <button class="pin" type="button" title="Remove this photo">✕</button>
  479.           <label style="
  480.             position:absolute; left:6px; bottom:6px; display:flex; gap:6px; align-items:center;
  481.             background:rgba(0,0,0,.45); padding:2px 6px; border-radius:999px; border:1px solid var(--border); color:#fff; font-size:12px;">
  482.             <input type="checkbox" ${f.pinAfter ? 'checked' : ''} style="margin:0"/>
  483.             Pin after posting
  484.           </label>
  485.         `;
  486.             el.querySelector('img').src = f.dataUrl;
  487.             el.querySelector('.pin').addEventListener('click', ()=>{
  488.                 state.files.splice(idx,1);
  489.                 renderThumbs();
  490.             });
  491.             el.querySelector('input[type="checkbox"]').addEventListener('change', (e)=>{
  492.                 state.files[idx].pinAfter = e.target.checked;
  493.             });
  494.             thumbs.appendChild(el);
  495.         });
  496.     }
  498.     // ---------- Form submit ----------
  499.     const form = document.getElementById('reviewForm');
  500.     const resetBtn = document.getElementById('resetForm');
  502.     function initials(name){
  503.         const parts = String(name||'').trim().split(/\s+/);
  504.         return (parts[0]?.[0]||'V').toUpperCase() + (parts[1]?.[0]||'R').toUpperCase();
  505.     }
  507.     form.addEventListener('submit', async (e)=>{
  508.         e.preventDefault();
  509.         if(state.loading) return;
  510.         const name = form.name.value.trim();
  511.         const exam = form.exam.value.trim();
  512.         const score = form.score.value.trim();
  513.         const rating = Number(new FormData(form).get('rating'));
  514.         const message = form.message.value.trim();
  516.         if(!name || !exam || !message || !rating) return;
  518.         state.loading = true;
  519.         try{
  520.             const id = 'r_' + Math.random().toString(36).slice(2);
  521.             const photos = state.files.map(f => ({ url: f.dataUrl, pinned: !!f.pinAfter }));
  522.             const review = { id, name, exam, score, rating, message, photos, createdAt: Date.now() };
  523.             await api.create(review);
  525.             state.files = []; renderThumbs();
  526.             form.reset();
  527.             state.page = 0;
  528.             document.getElementById('feed').innerHTML = '';
  529.             await loadNextPage(true);
  530.             location.hash = '#feed';
  531.         } finally {
  532.             state.loading = false;
  533.         }
  534.     });
  536.     resetBtn.addEventListener('click', ()=>{
  537.         form.reset();
  538.         state.files = [];
  539.         renderThumbs();
  540.     });
  542.     // ---------- Feed + Pinned ----------
  543.     const feed = document.getElementById('feed');
  544.     const pinnedGrid = document.getElementById('pinnedGrid');
  545.     const pinnedSection = document.getElementById('pinnedSection');
  547.     function starIcons(n){ return '⭐'.repeat(n); }
  549.     function reviewCard(r){
  550.         const el = document.createElement('article');
  551.         el.className = 'review';
  552.         el.innerHTML = `
  553.         <div class="head">
  554.           <div class="avatar">${initials(r.name)}</div>
  555.           <div>
  556.             <div style="font-weight:900">${escapeHtml(r.name)}</div>
  557.             <div class="meta-line">${new Date(r.createdAt).toLocaleString()}</div>
  558.           </div>
  559.           <div style="margin-left:auto; display:flex; gap:8px; align-items:center">
  560.             <span class="badge">${escapeHtml(r.exam)}</span>
  561.             ${r.score ? `<span class="badge score">${escapeHtml(r.score)}</span>`:''}
  562.             <span class="badge rating">${starIcons(r.rating)}</span>
  563.           </div>
  564.         </div>
  565.         <p style="margin:10px 0 10px 0">${escapeHtml(r.message)}</p>
  566.         ${r.photos?.length ? `<div class="photos">${r.photos.map((p,idx)=>`
  567.             <figure style="margin:0; position:relative">
  568.               <img src="${p.url}" alt="review photo ${idx+1}">
  569.               <button class="pinBtn" data-idx="${idx}" data-pinned="${p.pinned ? '1':'0'}" title="${p.pinned?'Unpin from top':'Pin to top'}" style="
  570.                 position:absolute; right:6px; top:6px; border:1px solid var(--border); border-radius:999px;
  571.                 background:rgba(0,0,0,.55); color:#fff; font-weight:900; font-size:12px; padding:3px 8px; cursor:pointer">
  572.                 ${p.pinned ? '📌 Unpin' : '📍 Pin'}
  573.               </button>
  574.             </figure>
  575.         `).join('')}</div>` : ``}
  576.       `;
  577.         // wire pin buttons
  578.         el.querySelectorAll('.pinBtn').forEach(btn=>{
  579.             btn.addEventListener('click', async ()=>{
  580.                 const idx = Number(btn.dataset.idx);
  581.                 const currentlyPinned = btn.dataset.pinned === '1';
  582.                 await api.pinPhoto(r.id, idx, !currentlyPinned);
  583.                 await refreshPinned();
  584.                 await refreshSingleCard(el, r.id);
  585.             });
  586.         });
  587.         return el;
  588.     }
  590.     async function refreshSingleCard(container, id){
  591.         const all = (await api.list()).items;
  592.         const r = all.find(x=>x.id===id);
  593.         if(!r) return;
  594.         const fresh = reviewCard(r);
  595.         container.replaceWith(fresh);
  596.     }
  598.     async function refreshPinned(){
  599.         const all = (await api.list()).items;
  600.         const pinned = all.flatMap(r => r.photos?.filter(p=>p.pinned) || []);
  601.         pinnedGrid.innerHTML = '';
  602.         if(pinned.length){
  603.             pinnedSection.style.display = '';
  604.             pinned.forEach(p=>{
  605.                 const fig = document.createElement('figure');
  606.                 fig.innerHTML = `<img src="${p.url}" alt="Pinned review photo">`;
  607.                 pinnedGrid.appendChild(fig);
  608.             });
  609.         }else{
  610.             pinnedSection.style.display = 'none';
  611.         }
  612.     }
  614.     async function loadNextPage(reset=false){
  615.         const offset = state.page * state.pageSize;
  616.         const { items, total } = await api.list({
  617.             offset,
  618.             limit: state.pageSize,
  619.             exam: state.currentExam,
  620.             sort: state.sortBy
  621.         });
  622.         if(reset) feed.innerHTML = '';
  623.         items.forEach(r => feed.appendChild(reviewCard(r)));
  624.         const more = (offset + items.length) < total;
  625.         document.getElementById('loadMore').style.display = more ? '' : 'none';
  626.         if(items.length) state.page += 1;
  627.         await refreshPinned();
  628.     }
  630.     // ---------- Filters & Sorting ----------
  631.     const filterExam = document.getElementById('filterExam');
  632.     const sortBy = document.getElementById('sortBy');
  633.     const clearAll = document.getElementById('clearAll');
  634.     const loadMore = document.getElementById('loadMore');
  636.     filterExam.addEventListener('change', async ()=>{
  637.         state.currentExam = filterExam.value;
  638.         state.page = 0;
  639.         await loadNextPage(true);
  640.     });
  641.     sortBy.addEventListener('change', async ()=>{
  642.         state.sortBy = sortBy.value;
  643.         state.page = 0;
  644.         await loadNextPage(true);
  645.     });
  646.     clearAll.addEventListener('click', async ()=>{
  647.         filterExam.value = '';
  648.         sortBy.value = 'new';
  649.         state.currentExam = '';
  650.         state.sortBy = 'new';
  651.         state.page = 0;
  652.         await loadNextPage(true);
  653.     });
  654.     loadMore.addEventListener('click', ()=> loadNextPage(false));
  656.     // ---------- Utils ----------
  657.     function escapeHtml(s){
  658.         return String(s)
  659.             .replaceAll('&','&amp;')
  660.             .replaceAll('<','&lt;')
  661.             .replaceAll('>','&gt;')
  662.             .replaceAll('"','&quot;')
  663.             .replaceAll("'","&#39;");
  664.     }
  666.     // ---------- Init ----------
  667.     (async ()=>{
  668.         // if(!localStorage.getItem(api.KEY)){
  669.         //     const seed = [
  670.         //         { id:'r_seed1', name:'Arman K.', exam:'TOEFL', score:'113', rating:5, message:'Clean UI and very close to the real thing. Listening sets felt realistic.', photos:[], createdAt: Date.now()-1000*60*60*24*2 },
  671.         //         { id:'r_seed2', name:'Mariam S.', exam:'SAT', score:'1540', rating:5, message:'Loved the math layout. Short sessions daily worked for me.', photos:[], createdAt: Date.now()-1000*60*60*6 }
  672.         //     ];
  673.         //     localStorage.setItem(api.KEY, JSON.stringify(seed));
  674.         // }
  675.         await loadNextPage(true);
  676.     })();
  677. </script>
  678. </body>
  679. </html>