Add cover SVG

shai-almog · shai-almog · commit 41758d4045a9 · 2025-10-21T18:22:38.000+03:00
diff --git a/docs/developer-guide/book-cover.svg b/docs/developer-guide/book-cover.svg
@@ -0,0 +1,269 @@
+<!--
+  Codename One Developer Guide — A4 Front Cover with 3 mm bleed
+  Total canvas: 216 x 303 mm (includes 3 mm bleed on all sides)
+  Trim area:    210 x 297 mm
+  Safe area:    15 mm inset from TRIM on all sides
+  Notes:
+  - Bleed extends only the background/art, not text.
+  - All measurements are in millimetres via the viewBox.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="216mm" height="303mm" viewBox="0 0 216 303" version="1.1">
+
+    <title>Codename One Developer Guide — A4 Cover with Bleed</title>
+
+    <!-- =========================
+         VARIABLES & STYLES
+         ========================= -->
+    <defs>
+        <style>
+            :root{
+            /* Core sizes (mm) */
+            --bleed: 3;                 /* bleed on each side */
+            --trim-w: 210;
+            --trim-h: 297;
+            --safe: 15;                 /* safe margin inside trim */
+
+            /* Colors */
+            --bg1: #0f1223;
+            --bg2: #0b0e1a;
+            --accent: #36d1dc;
+            --accent2: #5b86e5;
+            --ink: #ffffff;
+            --muted: #96a0b8;
+
+            /* Typography */
+            --title-font: -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
+            --mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+            }
+
+            .title {
+            font-family: var(--title-font);
+            fill: var(--ink);
+            font-size: 19px;      /* tuned for A4 */
+            font-weight: 500;
+            letter-spacing: 0.5px;
+            }
+            .subtitle {
+            font-family: var(--title-font);
+            fill: var(--ink);
+            opacity: 0.9;
+            font-size: 7px;
+            font-weight: 500;
+            letter-spacing: 0.3px;
+            }
+            .series {
+            font-family: var(--mono-font);
+            fill: var(--muted);
+            font-size: 5px;
+            letter-spacing: 0.35px;
+            }
+            .author {
+            font-family: var(--title-font);
+            fill: var(--ink);
+            font-size: 8px;
+            font-weight: 650;
+            letter-spacing: 0.3px;
+            }
+            .tag {
+            font-family: var(--mono-font);
+            fill: var(--ink);
+            font-size: 5px;
+            letter-spacing: 0.3px;
+            }
+            .small {
+            font-family: var(--mono-font);
+            fill: var(--muted);
+            font-size: 4.2px;
+            letter-spacing: 0.2px;
+            }
+        </style>
+
+        <!-- Soft glow -->
+        <filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
+            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+
+        <!-- Subtle shadow -->
+        <filter id="shadow" x="-30%" y="-30%" width="160%" height="160%">
+            <feDropShadow dx="0" dy="1" stdDeviation="1.2" flood-opacity="0.35"/>
+        </filter>
+
+        <!-- Background gradient -->
+        <linearGradient id="bg-sweep" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0" stop-color="var(--bg1)"/>
+            <stop offset="1" stop-color="var(--bg2)"/>
+        </linearGradient>
+
+        <!-- Accent gradient -->
+        <linearGradient id="accent-grad" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0" stop-color="var(--accent)"/>
+            <stop offset="1" stop-color="var(--accent2)"/>
+        </linearGradient>
+
+        <!-- Reusable rounded app icon -->
+        <symbol id="app-icon" viewBox="0 0 10 10">
+            <rect x="0.5" y="0.5" width="9" height="9" rx="2"
+                  fill="none" stroke="url(#accent-grad)" stroke-width="1"/>
+            <circle cx="7.6" cy="2.1" r="0.5" fill="url(#accent-grad)"/>
+            <circle cx="6.1" cy="2.1" r="0.5" fill="url(#accent-grad)" opacity="0.6"/>
+            <circle cx="4.6" cy="2.1" r="0.5" fill="url(#accent-grad)" opacity="0.35"/>
+        </symbol>
+    </defs>
+
+    <!-- =========================
+         REFERENCE BOXES
+         ========================= -->
+    <!-- Outer bleed box (216x303) -->
+    <g id="bleed-area">
+        <rect x="0" y="0" width="216" height="303" fill="url(#bg-sweep)"/>
+        <!-- decorative bleeds (extend beyond trim) -->
+        <circle cx="28" cy="34" r="22" fill="url(#accent-grad)" opacity="0.18" filter="url(#soft-glow)"/>
+        <circle cx="210" cy="290" r="24" fill="url(#accent-grad)" opacity="0.15" filter="url(#soft-glow)"/>
+    </g>
+
+    <!-- Trim area positioned inside bleed -->
+    <!-- TRIM origin -->
+    <g id="trim" transform="translate(3,3)">
+        <!-- Optional: invisible rect showing trim bounds -->
+        <rect x="0" y="0" width="210" height="297" fill="none"/>
+
+
+        <!-- =========================
+             ART & LAYOUT (kept inside safe area)
+             ========================= -->
+        <!-- Icon pattern -->
+        <g id="icon-pattern" opacity="0.55" transform="translate(22,38)">
+            <!-- 7 columns × 7 rows, spaced to stay well inside safe area -->
+            <!-- Each icon 8mm, step 10mm -->
+            <g>
+                <!-- rows -->
+                <!-- Build with simple loops manually to avoid external scripting -->
+                <!-- y = 0..60 step 10; x = 0..60 step 10 -->
+                <!-- Row 0 -->
+                <use href="#app-icon" x="0"  y="0"  width="8" height="8"/>
+                <use href="#app-icon" x="10" y="0"  width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="20" y="0"  width="8" height="8" opacity="0.7"/>
+                <use href="#app-icon" x="30" y="0"  width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="40" y="0"  width="8" height="8"/>
+                <use href="#app-icon" x="50" y="0"  width="8" height="8" opacity="0.8"/>
+                <use href="#app-icon" x="60" y="0"  width="8" height="8" opacity="0.65"/>
+                <!-- Row 1 -->
+                <use href="#app-icon" x="0"  y="10" width="8" height="8" opacity="0.8"/>
+                <use href="#app-icon" x="10" y="10" width="8" height="8"/>
+                <use href="#app-icon" x="20" y="10" width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="30" y="10" width="8" height="8" opacity="0.65"/>
+                <use href="#app-icon" x="40" y="10" width="8" height="8"/>
+                <use href="#app-icon" x="50" y="10" width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="60" y="10" width="8" height="8" opacity="0.7"/>
+                <!-- Row 2 -->
+                <use href="#app-icon" x="0"  y="20" width="8" height="8" opacity="0.65"/>
+                <use href="#app-icon" x="10" y="20" width="8" height="8" opacity="0.8"/>
+                <use href="#app-icon" x="20" y="20" width="8" height="8"/>
+                <use href="#app-icon" x="30" y="20" width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="40" y="20" width="8" height="8" opacity="0.65"/>
+                <use href="#app-icon" x="50" y="20" width="8" height="8"/>
+                <use href="#app-icon" x="60" y="20" width="8" height="8" opacity="0.8"/>
+                <!-- Row 3 -->
+                <use href="#app-icon" x="0"  y="30" width="8" height="8"/>
+                <use href="#app-icon" x="10" y="30" width="8" height="8" opacity="0.65"/>
+                <use href="#app-icon" x="20" y="30" width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="30" y="30" width="8" height="8"/>
+                <use href="#app-icon" x="40" y="30" width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="50" y="30" width="8" height="8" opacity="0.65"/>
+                <use href="#app-icon" x="60" y="30" width="8" height="8"/>
+                <!-- Row 4 -->
+                <use href="#app-icon" x="0"  y="40" width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="10" y="40" width="8" height="8"/>
+                <use href="#app-icon" x="20" y="40" width="8" height="8" opacity="0.75"/>
+                <use href="#app-icon" x="30" y="40" width="8" height="8"/>
+                <use href="#app-icon" x="40" y="40" width="8" height="8" opacity="0.8"/>
+                <use href="#app-icon" x="50" y="40" width="8" height="8"/>
+                <use href="#app-icon" x="60" y="40" width="8" height="8" opacity="0.7"/>
+                <!-- Row 5 -->
+                <use href="#app-icon" x="0"  y="50" width="8" height="8" opacity="0.65"/>
+                <use href="#app-icon" x="10" y="50" width="8" height="8" opacity="0.85"/>
+                <use href="#app-icon" x="20" y="50" width="8" height="8"/>
+                <use href="#app-icon" x="30" y="50" width="8" height="8" opacity="0.7"/>
+                <use href="#app-icon" x="40" y="50" width="8" height="8"/>
+                <use href="#app-icon" x="50" y="50" width="8" height="8" opacity="0.8"/>
+                <use href="#app-icon" x="60" y="50" width="8" height="8" opacity="0.7"/>
+                <!-- Row 6 -->
+                <use href="#app-icon" x="0"  y="60" width="8" height="8" opacity="0.7"/>
+                <use href="#app-icon" x="10" y="60" width="8" height="8"/>
+                <use href="#app-icon" x="20" y="60" width="8" height="8" opacity="0.8"/>
+                <use href="#app-icon" x="30" y="60" width="8" height="8"/>
+                <use href="#app-icon" x="40" y="60" width="8" height="8" opacity="0.75"/>
+                <use href="#app-icon" x="50" y="60" width="8" height="8"/>
+                <use href="#app-icon" x="60" y="60" width="8" height="8" opacity="0.8"/>
+            </g>
+        </g>
+
+        <!-- Right-side device outline (positioned to stay inside safe area) -->
+        <g id="device" transform="translate(135,58)" filter="url(#shadow)" opacity="0.35">
+            <rect x="0" y="0" width="52" height="110" rx="9"
+                  fill="none" stroke="url(#accent-grad)" stroke-width="1.4"/>
+            <rect x="19" y="-0.8" width="14" height="3.4" rx="1.4"
+                  fill="url(#accent-grad)" opacity="0.85"/>
+            <circle cx="18" cy="1.5" r="0.6" fill="url(#accent-grad)" opacity="0.8"/>
+            <!-- App grid -->
+            <g opacity="0.45" transform="translate(7,12)">
+                <!-- 5 rows x 3 cols -->
+                <rect x="0"  y="0"  width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="14" y="0"  width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="28" y="0"  width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+
+                <rect x="0"  y="14" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="14" y="14" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="28" y="14" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+
+                <rect x="0"  y="28" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="14" y="28" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="28" y="28" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+
+                <rect x="0"  y="42" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="14" y="42" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="28" y="42" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+
+                <rect x="0"  y="56" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="14" y="56" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+                <rect x="28" y="56" width="10" height="10" rx="2.2" stroke="url(#accent-grad)" fill="none" stroke-width="0.7"/>
+            </g>
+            <rect x="18" y="97" width="16" height="2.6" rx="1.3" fill="url(#accent-grad)" opacity="0.7"/>
+        </g>
+
+        <!-- TEXT BLOCKS (aligned to a 10 mm baseline grid) -->
+        <g id="text" transform="translate(30,120)">
+            <!-- Series line -->
+            <text class="series" x="0" y="0">CODENAME ONE • MOBILE DEVELOPMENT FOR JAVA</text>
+
+            <!-- Title -->
+            <g transform="translate(0,18)">
+                <text class="title" x="0" y="0">
+                    <tspan x="0" dy="0">Codename One</tspan>
+                    <tspan x="0" dy="16">Developer Guide</tspan>
+                </text>
+            </g>
+
+            <!-- Subtitle (two lines, spaced to avoid overlap) -->
+            <g transform="translate(0,56)">
+                <text class="subtitle" x="0" y="0">Build cross-platform mobile apps in Java,</text>
+                <text class="subtitle" x="0" y="12">from UI to native services and deployment</text>
+            </g>
+
+            <!-- Tag pill -->
+            <g transform="translate(0,86)">
+                <rect x="0" y="-8" width="110" height="16" rx="8" fill="url(#accent-grad)" opacity="0.25"/>
+                <text class="tag" x="6" y="2">iOS • Android • Desktop • Web</text>
+            </g>
+
+            <!-- Author & kicker -->
+            <g transform="translate(0,116)">
+                <text class="author" x="0" y="0">Shai Almog, Steve Hannah &amp; others</text>
+                <text class="small"  x="0" y="10.5">Version 7.0.207 - October 10th 2025</text>
+            </g>
+        </g>
+
+    </g> <!-- /trim -->
+</svg>
