mobile-snap 1.0.0 → 1.0.3

package/README.html

@@ -186,8 +186,14 @@
             gap: 1.5rem;
         }
 
+        .grid-4 {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 1.5rem;
+        }
+
         @media (max-width: 768px) {
-            .grid-2, .grid-3 {
+            .grid-2, .grid-3, .grid-4 {
                 grid-template-columns: 1fr;
             }
             h1 {
@@ -597,6 +603,22 @@
     </header>
 
     <div class="container">
+        <!-- Contoh Output (Mockup Premium) -->
+        <section class="glass-card">
+            <h2>📱 Contoh Output (Mockup Premium)</h2>
+            <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Visualisasi nyata dari tangkapan layar yang dibungkus otomatis ke dalam bingkai mockup perangkat premium menggunakan opsi <code>-m</code> atau <code>--mockup</code>:</p>
+            <div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;">
+                <div style="text-align: center; max-width: 45%; min-width: 280px;">
+                    <h4 style="margin-bottom: 0.5rem; color: #fff;">iOS (iPhone 6.7" Pro Max)</h4>
+                    <img src="./assets/ios_example.png" alt="iOS Mockup Example" style="max-width: 100%; border-radius: 12px; border: 1px solid var(--border-card); box-shadow: 0 10px 30px rgba(0,0,0,0.5);" />
+                </div>
+                <div style="text-align: center; max-width: 45%; min-width: 280px;">
+                    <h4 style="margin-bottom: 0.5rem; color: #fff;">Android Phone (Google Pixel 7)</h4>
+                    <img src="./assets/android_example.png" alt="Android Mockup Example" style="max-width: 100%; border-radius: 12px; border: 1px solid var(--border-card); box-shadow: 0 10px 30px rgba(0,0,0,0.5);" />
+                </div>
+            </div>
+        </section>
+
         <!-- Arsitektur Utama -->
         <section class="glass-card">
             <h2>🏗️ Arsitektur Aliran Kerja</h2>
@@ -721,15 +743,17 @@
             <p style="color: var(--text-muted);">Gunakan builder interaktif ini untuk membuat dan menyalin perintah sesuai kebutuhan pengembangan Anda:</p>
             
             <div class="builder-container">
-                <div class="grid-3">
+                <div class="grid-2">
                     <div class="form-group">
                         <label for="input-url">URL Dev Server Lokal</label>
                         <input type="text" id="input-url" class="form-control" value="http://localhost:4321" oninput="updateCommand()">
                     </div>
                     <div class="form-group">
                         <label for="input-paths">Rute / Paths (pisahkan koma)</label>
-                        <input type="text" id="input-paths" class="form-control" value="/, /scan, /profile" oninput="updateCommand()">
+                        <input type="text" id="input-paths" class="form-control" value="/" oninput="updateCommand()">
                     </div>
+                </div>
+                <div class="grid-4">
                     <div class="form-group">
                         <label for="input-platform">Platform Target</label>
                         <select id="input-platform" class="form-control" onchange="updateCommand()">
@@ -738,14 +762,26 @@
                             <option value="both">Both (iOS & Android Sekaligus)</option>
                         </select>
                     </div>
+                    <div class="form-group" style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;">
+                        <input type="checkbox" id="input-crawl" onchange="updateCommand()" style="width: 20px; height: 20px; accent-color: var(--primary);">
+                        <label for="input-crawl" style="margin-bottom: 0; cursor: pointer; color: var(--text-main); font-size: 0.85rem;">Auto-Crawl Links (-c)</label>
+                    </div>
+                    <div class="form-group" style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;">
+                        <input type="checkbox" id="input-detect" onchange="updateCommand()" style="width: 20px; height: 20px; accent-color: var(--primary);">
+                        <label for="input-detect" style="margin-bottom: 0; cursor: pointer; color: var(--text-main); font-size: 0.85rem;">Detect Astro Pages (-d)</label>
+                    </div>
+                    <div class="form-group" style="display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem;">
+                        <input type="checkbox" id="input-mockup" onchange="updateCommand()" style="width: 20px; height: 20px; accent-color: var(--primary);">
+                        <label for="input-mockup" style="margin-bottom: 0; cursor: pointer; color: var(--text-main); font-size: 0.85rem;">Device Mockup Frame (-m)</label>
+                    </div>
                 </div>
-                <div class="form-group">
+                <div class="form-group" style="margin-top: 1rem;">
                     <label for="input-output">Folder Output</label>
                     <input type="text" id="input-output" class="form-control" value="mobilesnap_output" oninput="updateCommand()">
                 </div>
 
                 <div class="builder-output">
-                    <div class="builder-cmd" id="cmd-preview">npx mobile-snap --url http://localhost:4321 --paths "/, /scan, /profile" --output mobilesnap_output</div>
+                    <div class="builder-cmd" id="cmd-preview">npx mobile-snap --url http://localhost:4321</div>
                     <button class="btn-action-copy" onclick="copyText('cmd-preview', true)">Copy Command</button>
                 </div>
             </div>
@@ -788,6 +824,48 @@
                         <td>Folder tujuan untuk menaruh berkas gambar hasil tangkapan.</td>
                         <td><code style="color: var(--secondary);">"mobilesnap_output"</code></td>
                     </tr>
+                    <tr>
+                        <td><span class="param-tag">--crawl</span></td>
+                        <td><span class="param-tag">-c</span></td>
+                        <td>Menelusuri secara otomatis semua link internal dari halaman beranda.</td>
+                        <td><code style="color: var(--secondary);">false</code></td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--detect-pages</span></td>
+                        <td><span class="param-tag">-d</span></td>
+                        <td>Memindai direktori folder proyek lokal (Astro/Next.js) untuk rute statis.</td>
+                        <td><code style="color: var(--secondary);">false</code></td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--email</span></td>
+                        <td>-</td>
+                        <td>Email / Username untuk autentikasi otomatis jika halaman memerlukan login.</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--password</span></td>
+                        <td>-</td>
+                        <td>Password untuk autentikasi otomatis jika halaman memerlukan login (input disensor).</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--login-path</span></td>
+                        <td>-</td>
+                        <td>Jalur rute URL ke halaman login.</td>
+                        <td><code style="color: var(--secondary);">"/login.html"</code></td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--html</span></td>
+                        <td>-</td>
+                        <td>Menambahkan ekstensi .html otomatis ke rute statis yang terdeteksi.</td>
+                        <td><code style="color: var(--secondary);">false</code></td>
+                    </tr>
+                    <tr>
+                        <td><span class="param-tag">--mockup</span></td>
+                        <td><span class="param-tag">-m</span></td>
+                        <td>Membungkus tangkapan layar dalam bingkai mockup perangkat (iPhone/Android) dengan status bar dan bayangan transparan.</td>
+                        <td><code style="color: var(--secondary);">false</code></td>
+                    </tr>
                 </tbody>
             </table>
         </section>
@@ -832,9 +910,12 @@
             const paths = document.getElementById('input-paths').value.trim();
             const output = document.getElementById('input-output').value.trim() || 'mobilesnap_output';
             const platform = document.getElementById('input-platform').value;
+            const crawl = document.getElementById('input-crawl').checked;
+            const detect = document.getElementById('input-detect').checked;
+            const mockup = document.getElementById('input-mockup').checked;
             
             let command = `npx mobile-snap --url ${url}`;
-            if (paths) {
+            if (paths && paths !== '/') {
                 command += ` --paths "${paths}"`;
             }
             if (platform !== 'ios') {
@@ -843,6 +924,15 @@
             if (output !== 'mobilesnap_output') {
                 command += ` --output ${output}`;
             }
+            if (crawl) {
+                command += ` --crawl`;
+            }
+            if (detect) {
+                command += ` --detect-pages`;
+            }
+            if (mockup) {
+                command += ` --mockup`;
+            }
             
             document.getElementById('cmd-preview').innerText = command;
         }

package/README.md

@@ -2,6 +2,14 @@
 
 MobileSnap adalah alat CLI (Command Line Interface) berbasis Node.js yang dirancang untuk mengotomatisasi pengambilan tangkapan layar (screenshot) App Store & Google Play Store dengan presisi piksel tinggi langsung dari server pengembangan lokal (seperti Astro, Next.js, React, atau Vue).
 
+### 📱 Contoh Output (Mockup Premium)
+
+Berikut adalah visualisasi nyata dari tangkapan layar yang dibungkus otomatis ke dalam bingkai mockup perangkat premium (menggunakan opsi `-m` atau `--mockup`):
+
+| iOS (iPhone 6.7" Pro Max) | Android Phone (Google Pixel 7) |
+| :---: | :---: |
+| ![iOS Mockup Example](./assets/ios_example.png) | ![Android Mockup Example](./assets/android_example.png) |
+
 ---
 
 ## 🏗️ Arsitektur Sistem
@@ -77,7 +85,7 @@ npm install -g mobile-snap
 
 ## 💻 Panduan Penggunaan CLI
 
-Aplikasi ini menerima 4 opsi utama:
+Aplikasi ini menerima opsi utama berikut:
 
 | Parameter | Singkatan | Deskripsi | Standar (Default) | Pilihan |
 | :--- | :--- | :--- | :--- | :--- |
@@ -85,6 +93,13 @@ Aplikasi ini menerima 4 opsi utama:
 | `--paths` | `-p` | Jalur/rute halaman yang dipisahkan tanda koma. | `/` | - |
 | `--output`| `-o` | Nama direktori tempat menyimpan gambar. | `mobilesnap_output` | - |
 | `--platform`| `-l`| Platform target tangkapan layar. | `ios` | `ios`, `android`, `both` |
+| `--crawl` | `-c` | Mengaktifkan penelusuran (crawl) otomatis tautan internal di halaman beranda. | `false` | - |
+| `--detect-pages` | `-d` | Memindai direktori halaman lokal (`src/pages` atau `pages`) untuk rute statis. | `false` | - |
+| `--email` | - | Email untuk autentikasi otomatis. | - | - |
+| `--password` | - | Password untuk autentikasi otomatis (disensor di terminal). | - | - |
+| `--login-path`| - | Jalur rute ke halaman login. | `/login.html` | - |
+| `--html` | - | Otomatis menambahkan akhiran `.html` pada rute statis terdeteksi. | `false` | - |
+| `--mockup` | `-m` | Membungkus tangkapan layar dalam bingkai mockup perangkat (iPhone/Android) yang premium dengan status bar dan bayangan transparan. | `false` | - |
 
 ### Contoh Perintah
 
@@ -93,13 +108,71 @@ Aplikasi ini menerima 4 opsi utama:
 npx mobile-snap --url http://localhost:4321
 ```
 
-#### 2. Pengambilan Halaman Android Saja
+#### 2. Pengambilan Halaman Android Saja dengan Mockup Bingkai Perangkat
 ```powershell
-npx mobile-snap --url http://localhost:4321 --platform android
+npx mobile-snap --url http://localhost:4321 --platform android --mockup
 ```
 
-#### 3. Pengambilan 2 Platform Sekaligus (iOS & Android)
+#### 3. Pengambilan Rute Tertentu untuk 2 Platform Sekaligus
 Mengambil gambar halaman utama `/` dan halaman `/scan` untuk kedua platform sekaligus ke folder `hasil_store`:
 ```powershell
 npx mobile-snap --url http://localhost:4321 --paths "/, /scan" --platform both --output hasil_store
 ```
+
+#### 4. Auto-Crawl Halaman Web & Login Interaktif dengan Mockup Bingkai Perangkat
+Menelusuri semua tautan internal secara otomatis dari beranda dan memotret setiap halaman yang ditemukan dengan bingkai mockup iPhone/Android:
+```powershell
+npx mobile-snap --url http://localhost:4321 --crawl --platform both --mockup
+```
+
+
+#### 5. Auto-Detect Rute Proyek Lokal (Astro / Next.js) dengan Auto-Login
+Jika Anda berada di dalam root direktori proyek Astro Anda, jalankan perintah ini untuk mendeteksi secara otomatis semua rute halaman statis dari folder `src/pages` dengan login otomatis:
+```powershell
+npx mobile-snap --url http://localhost:4321 --detect-pages --html --email "user@email.com" --password "rahasia"
+```
+
+---
+
+## 🔐 Autentikasi Otomatis & Interaktif
+
+MobileSnap secara cerdas membedakan halaman publik dan halaman terproteksi (yang membutuhkan login) berdasarkan pengalihan client-side ke rute login.
+
+Jika terdeteksi rute yang memerlukan login, MobileSnap akan:
+1. **Meminta Kredensial Secara Interaktif**: Jika opsi `--email` dan/atau `--password` tidak diberikan lewat CLI, sistem akan menanyakan email dan password secara interaktif di terminal dengan sensor password otomatis demi keamanan.
+2. **Auto-Login**: MobileSnap akan melakukan proses sign-in sebelum mengambil tangkapan layar untuk semua rute terproteksi.
+3. **Crawl Pasca-Login**: Jika opsi `--crawl` aktif, MobileSnap juga akan menjelajahi menu dan tautan internal yang baru muncul di dashboard pasca-login.
+
+---
+
+## ℹ️ Bantuan Perintah (`--help`)
+
+Anda selalu dapat memanggil opsi bantuan langsung dari terminal dengan menjalankan:
+
+```powershell
+npx mobile-snap --help
+```
+
+Output bantuan resmi:
+```text
+Usage: mobile-snap [options]
+
+⚡ MobileSnap CLI: Automate App Store & Google Play Store screenshots
+
+Options:
+  -V, --version              output the version number
+  -u, --url <url>            Base URL of the local development server (e.g. localhost:3000)
+  -p, --paths <paths>        Comma-separated list of routes to capture (default: "/")
+  -o, --output <output>      Output directory to save screenshots (default: "mobilesnap_output")
+  -l, --platform <platform>  Target platform: "ios", "android", or "both" (default: "ios")
+  -c, --crawl                Discover and screenshot all internal links automatically (default: false)
+  -d, --detect-pages         Scan local project pages directory (src/pages or pages) for static routes (default: false)
+  --email <email>            Email for automatic login authentication
+  --password <password>      Password for automatic login authentication
+  --login-path <path>        Path to the login page (default: "/login.html")
+  --html                     Auto append .html extension to detected routes (default: false)
+  -m, --mockup               Wrap screenshots in a beautiful iPhone/Android device mockup frame (default: false)
+  -h, --help                 display help for command
+```
+
+