Add industry mockup animator script for solutions page
- Enqueued new script `industry-animator.js` for animated device mockups. - Implemented animation logic for various industries including hospitality, retail, corporate, education, outdoor, and live data displays. - Utilized IntersectionObserver for performance optimization by pausing animations when off-screen.
This commit is contained in:
Matt Batchelder
@@ -558,6 +558,12 @@ add_action( 'init', function () {
|
||||
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'neverGoesDark'=> [ 'type' => 'boolean', 'default' => false ],
|
||||
'brandedAnim' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'industryHospitality' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'industryRetail' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'industryCorporate' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'industryEducation' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'industryOutdoor' => [ 'type' => 'boolean', 'default' => false ],
|
||||
'industryLiveData' => [ 'type' => 'boolean', 'default' => false ],
|
||||
],
|
||||
'supports' => $block_supports,
|
||||
'render_callback' => 'oribi_render_platform_row',
|
||||
@@ -1788,6 +1794,477 @@ function oribi_render_platform_row( $a ) {
|
||||
$ca .= '</div>'; // cam-stage
|
||||
$visual_html = $ca;
|
||||
$visual_cls = 'platform-visual has-camera';
|
||||
|
||||
/* ── Industry: Hospitality ─────────────────────────────── */
|
||||
} elseif ( ! empty( $a['industryHospitality'] ) ) {
|
||||
$visual_html = '<div class="ind-stage" data-industry-anim="hospitality" aria-hidden="true">'
|
||||
. '<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Hospitality signage environment">'
|
||||
/* ── Background: restaurant counter area ── */
|
||||
. '<rect x="0" y="0" width="400" height="300" rx="8" fill="#1a1a2e" />'
|
||||
. '<rect x="0" y="240" width="400" height="60" rx="0" fill="#12121f" />'
|
||||
/* ── Wall-mounted menu board (large display) ── */
|
||||
. '<g transform="translate(20,20)">'
|
||||
. '<rect x="0" y="0" width="220" height="150" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="6" y="6" width="208" height="138" rx="2" fill="#1c2333" />'
|
||||
/* Menu header */
|
||||
. '<rect x="14" y="14" width="80" height="8" rx="2" fill="#D83302" opacity=".8" />'
|
||||
. '<text x="14" y="35" font-size="7" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">TODAY\'S SPECIALS</text>'
|
||||
/* Menu items with prices */
|
||||
. '<text x="14" y="52" font-size="8" fill="rgba(255,255,255,.7)" font-family="Inter,sans-serif">Grilled Salmon</text>'
|
||||
. '<text class="ind-menu-price" x="192" y="52" font-size="8" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">$18.50</text>'
|
||||
. '<rect class="ind-menu-bar" x="14" y="55" width="40" height="3" rx="1" fill="#D83302" opacity=".4" />'
|
||||
. '<text x="14" y="72" font-size="8" fill="rgba(255,255,255,.7)" font-family="Inter,sans-serif">Wagyu Burger</text>'
|
||||
. '<text class="ind-menu-price" x="192" y="72" font-size="8" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">$22.00</text>'
|
||||
. '<rect class="ind-menu-bar" x="14" y="75" width="55" height="3" rx="1" fill="#D83302" opacity=".4" />'
|
||||
. '<text x="14" y="92" font-size="8" fill="rgba(255,255,255,.7)" font-family="Inter,sans-serif">Caesar Salad</text>'
|
||||
. '<text class="ind-menu-price" x="192" y="92" font-size="8" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">$12.00</text>'
|
||||
. '<rect class="ind-menu-bar" x="14" y="95" width="30" height="3" rx="1" fill="#D83302" opacity=".4" />'
|
||||
. '<text x="14" y="112" font-size="8" fill="rgba(255,255,255,.7)" font-family="Inter,sans-serif">Pasta Carbonara</text>'
|
||||
. '<text class="ind-menu-price" x="192" y="112" font-size="8" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">$15.00</text>'
|
||||
. '<rect class="ind-menu-bar" x="14" y="115" width="45" height="3" rx="1" fill="#D83302" opacity=".4" />'
|
||||
/* Promo banner */
|
||||
. '<rect x="6" y="126" width="208" height="18" fill="#D83302" opacity=".15" />'
|
||||
. '<text class="ind-promo-text" x="110" y="138" font-size="7" fill="#D83302" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">HAPPY HOUR 5-7PM</text>'
|
||||
. '</g>'
|
||||
/* ── Tablet on counter (POS integration) ── */
|
||||
. '<g transform="translate(270,60)">'
|
||||
. '<rect x="0" y="0" width="100" height="140" rx="6" fill="#222" stroke="#444" stroke-width="1" />'
|
||||
. '<rect x="6" y="8" width="88" height="110" rx="2" fill="#1c2333" />'
|
||||
. '<circle cx="50" cy="132" r="4" fill="#333" />'
|
||||
/* POS mini-UI */
|
||||
. '<rect x="12" y="16" width="76" height="6" rx="1" fill="#00757c" opacity=".6" />'
|
||||
. '<text x="50" y="38" font-size="6" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" text-anchor="middle">Order #47</text>'
|
||||
. '<rect x="12" y="44" width="76" height="1" fill="rgba(255,255,255,.1)" />'
|
||||
. '<text x="12" y="56" font-size="5.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">1x Salmon</text>'
|
||||
. '<text x="88" y="56" font-size="5.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="end">$18.50</text>'
|
||||
. '<text x="12" y="66" font-size="5.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">2x Lager</text>'
|
||||
. '<text x="88" y="66" font-size="5.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="end">$14.00</text>'
|
||||
. '<rect x="12" y="74" width="76" height="1" fill="rgba(255,255,255,.1)" />'
|
||||
. '<text x="12" y="86" font-size="6" fill="rgba(255,255,255,.7)" font-family="Inter,sans-serif" font-weight="600">Total</text>'
|
||||
. '<text x="88" y="86" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end" font-weight="600">$32.50</text>'
|
||||
. '<rect x="12" y="96" width="76" height="16" rx="3" fill="#4CAF50" opacity=".8" />'
|
||||
. '<text x="50" y="107" font-size="6" fill="#fff" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">PAY</text>'
|
||||
. '</g>'
|
||||
/* ── Ambient: counter top ── */
|
||||
. '<rect x="0" y="235" width="400" height="3" fill="#333" />'
|
||||
/* ── Label: wall screen type ── */
|
||||
. '<text x="130" y="185" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">MENU BOARD</text>'
|
||||
. '<text x="320" y="215" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">POS TABLET</text>'
|
||||
. '</svg></div>';
|
||||
$visual_cls = 'platform-visual has-industry';
|
||||
|
||||
/* ── Industry: Retail ──────────────────────────────────── */
|
||||
} elseif ( ! empty( $a['industryRetail'] ) ) {
|
||||
$visual_html = '<div class="ind-stage" data-industry-anim="retail" aria-hidden="true">'
|
||||
. '<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Retail signage environment">'
|
||||
. '<rect x="0" y="0" width="400" height="300" rx="8" fill="#1a1a2e" />'
|
||||
/* ── Large overhead promo display ── */
|
||||
. '<g transform="translate(20,15)">'
|
||||
. '<rect x="0" y="0" width="240" height="130" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="5" y="5" width="230" height="120" rx="2" fill="#1c2333" />'
|
||||
/* Promo content */
|
||||
. '<rect x="12" y="12" width="60" height="8" rx="2" fill="#D83302" opacity=".8" />'
|
||||
. '<text x="12" y="36" font-size="11" fill="rgba(255,255,255,.9)" font-family="Inter,sans-serif" font-weight="700">SPRING SALE</text>'
|
||||
. '<text x="12" y="50" font-size="7" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif">Up to 40% off selected items</text>'
|
||||
/* Product grid */
|
||||
. '<g transform="translate(12,60)">'
|
||||
. '<rect class="ind-product-slot" x="0" y="0" width="48" height="48" rx="3" fill="#252540" stroke="#D83302" stroke-width="0" />'
|
||||
. '<rect x="6" y="6" width="36" height="24" rx="2" fill="#333" />'
|
||||
. '<text class="ind-sale-tag" x="24" y="42" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="middle">$29.99</text>'
|
||||
. '<rect class="ind-product-slot" x="56" y="0" width="48" height="48" rx="3" fill="#252540" stroke="#D83302" stroke-width="0" />'
|
||||
. '<rect x="62" y="6" width="36" height="24" rx="2" fill="#333" />'
|
||||
. '<text class="ind-sale-tag" x="80" y="42" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="middle">$49.99</text>'
|
||||
. '<rect class="ind-product-slot" x="112" y="0" width="48" height="48" rx="3" fill="#252540" stroke="#D83302" stroke-width="0" />'
|
||||
. '<rect x="118" y="6" width="36" height="24" rx="2" fill="#333" />'
|
||||
. '<text class="ind-sale-tag" x="136" y="42" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="middle">$19.99</text>'
|
||||
. '<rect class="ind-product-slot" x="168" y="0" width="48" height="48" rx="3" fill="#252540" stroke="#D83302" stroke-width="0" />'
|
||||
. '<rect x="174" y="6" width="36" height="24" rx="2" fill="#333" />'
|
||||
. '<text class="ind-sale-tag" x="192" y="42" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="middle">$39.99</text>'
|
||||
. '</g>'
|
||||
. '</g>'
|
||||
/* ── Analytics monitor (small) ── */
|
||||
. '<g transform="translate(280,15)">'
|
||||
. '<rect x="0" y="0" width="100" height="80" rx="3" fill="#111" stroke="#333" stroke-width="1" />'
|
||||
. '<rect x="4" y="4" width="92" height="72" rx="2" fill="#1c2333" />'
|
||||
. '<text x="10" y="16" font-size="6" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" font-weight="600">FOOTFALL</text>'
|
||||
. '<text class="ind-footfall-val" x="10" y="32" font-size="14" fill="#D83302" font-family="Inter,sans-serif" font-weight="700">243</text>'
|
||||
. '<text x="10" y="42" font-size="5" fill="rgba(255,255,255,.3)" font-family="Inter,sans-serif">visitors today</text>'
|
||||
/* Revenue mini bars */
|
||||
. '<g transform="translate(10,48)">'
|
||||
. '<rect class="ind-rev-bar" x="0" y="35" width="10" height="5" fill="#4CAF50" />'
|
||||
. '<rect class="ind-rev-bar" x="14" y="30" width="10" height="10" fill="#4CAF50" />'
|
||||
. '<rect class="ind-rev-bar" x="28" y="25" width="10" height="15" fill="#4CAF50" />'
|
||||
. '<rect class="ind-rev-bar" x="42" y="20" width="10" height="20" fill="#D83302" />'
|
||||
. '<rect class="ind-rev-bar" x="56" y="28" width="10" height="12" fill="#4CAF50" />'
|
||||
. '<rect class="ind-rev-bar" x="70" y="22" width="10" height="18" fill="#4CAF50" />'
|
||||
. '</g>'
|
||||
. '</g>'
|
||||
/* ── Wayfinding pillar (floor standing) ── */
|
||||
. '<g transform="translate(290,110)">'
|
||||
. '<rect x="10" y="0" width="80" height="120" rx="3" fill="#111" stroke="#333" stroke-width="1" />'
|
||||
. '<rect x="14" y="4" width="72" height="112" rx="2" fill="#1c2333" />'
|
||||
. '<text x="50" y="18" font-size="6" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">FLOOR GUIDE</text>'
|
||||
. '<text x="22" y="34" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">\u2190 Menswear</text>'
|
||||
. '<text x="22" y="48" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">\u2192 Electronics</text>'
|
||||
. '<text x="22" y="62" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">\u2191 Food Court</text>'
|
||||
. '<text x="22" y="76" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">\u2190 Home & Garden</text>'
|
||||
. '<rect x="30" y="86" width="40" height="22" rx="3" fill="#D83302" opacity=".2" />'
|
||||
. '<text x="50" y="100" font-size="6" fill="#D83302" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">MAP</text>'
|
||||
. '</g>'
|
||||
/* ── Shelf edge (store floor) ── */
|
||||
. '<rect x="0" y="248" width="270" height="52" fill="#12121f" />'
|
||||
. '<rect x="20" y="250" width="230" height="4" fill="#333" />'
|
||||
. '<text x="135" y="270" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">PROMO DISPLAY</text>'
|
||||
. '<text x="340" y="245" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">WAYFINDING</text>'
|
||||
. '</svg></div>';
|
||||
$visual_cls = 'platform-visual has-industry';
|
||||
|
||||
/* ── Industry: Corporate Office ─────────────────────────── */
|
||||
} elseif ( ! empty( $a['industryCorporate'] ) ) {
|
||||
$visual_html = '<div class="ind-stage" data-industry-anim="corporate" aria-hidden="true">'
|
||||
. '<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Corporate office signage environment">'
|
||||
. '<rect x="0" y="0" width="400" height="300" rx="8" fill="#1a1a2e" />'
|
||||
/* ── Meeting room display (wall-mounted) ── */
|
||||
. '<g transform="translate(20,20)">'
|
||||
. '<rect x="0" y="0" width="170" height="120" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="5" y="5" width="160" height="110" rx="2" fill="#1c2333" />'
|
||||
/* Teams-style header */
|
||||
. '<rect x="10" y="10" width="150" height="14" rx="2" fill="#5b5fc7" opacity=".3" />'
|
||||
. '<text x="18" y="20" font-size="6" fill="rgba(255,255,255,.8)" font-family="Inter,sans-serif" font-weight="600">\uD83D\uDCF9 Room: Boardroom A</text>'
|
||||
/* Status */
|
||||
. '<circle class="ind-meet-dot" cx="18" cy="38" r="4" fill="#4CAF50" />'
|
||||
. '<text class="ind-meet-status" x="28" y="41" font-size="7" fill="rgba(255,255,255,.7)" font-family="Inter,sans-serif">Available</text>'
|
||||
/* Schedule */
|
||||
. '<text x="10" y="58" font-size="5.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">UPCOMING</text>'
|
||||
. '<text x="10" y="70" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">10:00 - Sprint Planning</text>'
|
||||
. '<text x="10" y="82" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">13:00 - Design Review</text>'
|
||||
. '<text x="10" y="94" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">15:30 - All Hands</text>'
|
||||
. '<rect x="10" y="100" width="150" height="10" rx="2" fill="#4CAF50" opacity=".15" />'
|
||||
. '<text x="85" y="108" font-size="5.5" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="middle">Book Now</text>'
|
||||
. '</g>'
|
||||
/* ── KPI Dashboard (large monitor on stand) ── */
|
||||
. '<g transform="translate(210,10)">'
|
||||
. '<rect x="0" y="0" width="170" height="130" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="5" y="5" width="160" height="120" rx="2" fill="#1c2333" />'
|
||||
. '<text x="12" y="18" font-size="6" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" font-weight="600">LIVE DASHBOARD</text>'
|
||||
/* KPI cards */
|
||||
. '<g transform="translate(12,26)">'
|
||||
. '<rect x="0" y="0" width="44" height="32" rx="2" fill="#252540" />'
|
||||
. '<text x="22" y="11" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">Uptime</text>'
|
||||
. '<text class="ind-kpi-val" x="22" y="24" font-size="10" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="middle" font-weight="700">99%</text>'
|
||||
. '</g>'
|
||||
. '<g transform="translate(62,26)">'
|
||||
. '<rect x="0" y="0" width="44" height="32" rx="2" fill="#252540" />'
|
||||
. '<text x="22" y="11" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">Users</text>'
|
||||
. '<text class="ind-kpi-val" x="22" y="24" font-size="10" fill="#D83302" font-family="Inter,sans-serif" text-anchor="middle" font-weight="700">240</text>'
|
||||
. '</g>'
|
||||
. '<g transform="translate(112,26)">'
|
||||
. '<rect x="0" y="0" width="44" height="32" rx="2" fill="#252540" />'
|
||||
. '<text x="22" y="11" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">Latency</text>'
|
||||
. '<text class="ind-kpi-val" x="22" y="24" font-size="10" fill="#f59e0b" font-family="Inter,sans-serif" text-anchor="middle" font-weight="700">22ms</text>'
|
||||
. '</g>'
|
||||
/* Trend line */
|
||||
. '<g transform="translate(12,66)">'
|
||||
. '<text x="0" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">REQUESTS / MIN</text>'
|
||||
. '<line x1="0" y1="10" x2="140" y2="10" stroke="rgba(255,255,255,.06)" stroke-width=".5" />'
|
||||
. '<line x1="0" y1="25" x2="140" y2="25" stroke="rgba(255,255,255,.06)" stroke-width=".5" />'
|
||||
. '<line x1="0" y1="40" x2="140" y2="40" stroke="rgba(255,255,255,.06)" stroke-width=".5" />'
|
||||
. '<path class="ind-corp-line" d="M0,25 L140,25" stroke="#4CAF50" stroke-width="1.5" fill="none" stroke-linecap="round" />'
|
||||
. '</g>'
|
||||
/* Monitor stand */
|
||||
. '<rect x="75" y="130" width="20" height="12" fill="#222" />'
|
||||
. '<rect x="55" y="140" width="60" height="4" rx="2" fill="#333" />'
|
||||
. '</g>'
|
||||
/* ── Announcement ticker (lobby display) ── */
|
||||
. '<g transform="translate(20,160)">'
|
||||
. '<rect x="0" y="0" width="360" height="40" rx="4" fill="#111" stroke="#333" stroke-width="1" />'
|
||||
. '<rect x="4" y="4" width="352" height="32" rx="2" fill="#0d1117" />'
|
||||
. '<rect x="8" y="8" width="60" height="12" rx="2" fill="#D83302" opacity=".2" />'
|
||||
. '<text x="38" y="17" font-size="6" fill="#D83302" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">COMPANY NEWS</text>'
|
||||
. '<text x="80" y="30" font-size="6.5" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Q4 Results exceed forecast \u2022 New office opening in March \u2022 Hackathon registrations open</text>'
|
||||
. '</g>'
|
||||
/* Labels */
|
||||
. '<text x="105" y="220" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">MEETING ROOM</text>'
|
||||
. '<text x="295" y="220" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">KPI DASHBOARD</text>'
|
||||
. '</svg></div>';
|
||||
$visual_cls = 'platform-visual has-industry';
|
||||
|
||||
/* ── Industry: Education ───────────────────────────────── */
|
||||
} elseif ( ! empty( $a['industryEducation'] ) ) {
|
||||
$visual_html = '<div class="ind-stage" data-industry-anim="education" aria-hidden="true">'
|
||||
. '<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Education signage environment">'
|
||||
. '<rect x="0" y="0" width="400" height="300" rx="8" fill="#1a1a2e" />'
|
||||
/* ── Timetable display (large wall-mount) ── */
|
||||
. '<g transform="translate(15,15)">'
|
||||
. '<rect x="0" y="0" width="230" height="160" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="5" y="5" width="220" height="150" rx="2" fill="#1c2333" />'
|
||||
. '<text x="12" y="18" font-size="7" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" font-weight="600">DAILY TIMETABLE</text>'
|
||||
. '<text x="200" y="18" font-size="6" fill="rgba(255,255,255,.3)" font-family="Inter,sans-serif" text-anchor="end">Tuesday</text>'
|
||||
/* Column headers */
|
||||
. '<g transform="translate(12,28)">'
|
||||
. '<rect x="0" y="0" width="200" height="10" rx="1" fill="rgba(255,255,255,.05)" />'
|
||||
. '<text x="6" y="7" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">TIME</text>'
|
||||
. '<text x="50" y="7" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">ROOM</text>'
|
||||
. '<text x="100" y="7" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">SUBJECT</text>'
|
||||
. '<text x="170" y="7" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">STATUS</text>'
|
||||
. '</g>'
|
||||
/* Schedule rows */
|
||||
. '<g transform="translate(12,44)">'
|
||||
. '<rect class="ind-sched-slot" x="0" y="0" width="200" height="18" rx="2" fill="#252540" />'
|
||||
. '<text x="6" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">09:00</text>'
|
||||
. '<text x="50" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">B201</text>'
|
||||
. '<text x="100" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Mathematics</text>'
|
||||
. '<circle cx="185" cy="9" r="3" fill="#4CAF50" />'
|
||||
. '</g>'
|
||||
. '<g transform="translate(12,66)">'
|
||||
. '<rect class="ind-sched-slot" x="0" y="0" width="200" height="18" rx="2" fill="#252540" />'
|
||||
. '<text x="6" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">10:30</text>'
|
||||
. '<text x="50" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Lab 3</text>'
|
||||
. '<text x="100" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Chemistry</text>'
|
||||
. '<circle cx="185" cy="9" r="3" fill="#f59e0b" />'
|
||||
. '</g>'
|
||||
. '<g transform="translate(12,88)">'
|
||||
. '<rect class="ind-sched-slot" x="0" y="0" width="200" height="18" rx="2" fill="#252540" />'
|
||||
. '<text x="6" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">13:00</text>'
|
||||
. '<text x="50" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Hall A</text>'
|
||||
. '<text x="100" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Literature</text>'
|
||||
. '<circle cx="185" cy="9" r="3" fill="#4CAF50" />'
|
||||
. '</g>'
|
||||
. '<g transform="translate(12,110)">'
|
||||
. '<rect class="ind-sched-slot" x="0" y="0" width="200" height="18" rx="2" fill="#252540" />'
|
||||
. '<text x="6" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">14:30</text>'
|
||||
. '<text x="50" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Gym</text>'
|
||||
. '<text x="100" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">PE</text>'
|
||||
. '<circle cx="185" cy="9" r="3" fill="#4CAF50" />'
|
||||
. '</g>'
|
||||
. '<g transform="translate(12,132)">'
|
||||
. '<rect class="ind-sched-slot" x="0" y="0" width="200" height="18" rx="2" fill="#252540" />'
|
||||
. '<text x="6" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">16:00</text>'
|
||||
. '<text x="50" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">C105</text>'
|
||||
. '<text x="100" y="12" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Art</text>'
|
||||
. '<circle cx="185" cy="9" r="3" fill="#4CAF50" />'
|
||||
. '</g>'
|
||||
. '</g>'
|
||||
/* ── Campus wayfinding (floor directory) ── */
|
||||
. '<g transform="translate(260,15)">'
|
||||
. '<rect x="0" y="0" width="120" height="100" rx="3" fill="#111" stroke="#333" stroke-width="1" />'
|
||||
. '<rect x="4" y="4" width="112" height="92" rx="2" fill="#1c2333" />'
|
||||
. '<text x="60" y="16" font-size="6" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">CAMPUS MAP</text>'
|
||||
/* Simplified building outlines with wayfinding dots */
|
||||
. '<rect x="15" y="24" width="30" height="20" rx="2" fill="#252540" stroke="rgba(255,255,255,.1)" stroke-width=".5" />'
|
||||
. '<rect x="55" y="28" width="25" height="16" rx="2" fill="#252540" stroke="rgba(255,255,255,.1)" stroke-width=".5" />'
|
||||
. '<rect x="90" y="22" width="18" height="24" rx="2" fill="#252540" stroke="rgba(255,255,255,.1)" stroke-width=".5" />'
|
||||
. '<rect x="30" y="54" width="45" height="18" rx="2" fill="#252540" stroke="rgba(255,255,255,.1)" stroke-width=".5" />'
|
||||
. '<circle class="ind-wf-dot" cx="30" cy="34" r="3" fill="#D83302" />'
|
||||
. '<circle class="ind-wf-dot" cx="67" cy="36" r="3" fill="#D83302" opacity=".2" />'
|
||||
. '<circle class="ind-wf-dot" cx="99" cy="34" r="3" fill="#D83302" opacity=".2" />'
|
||||
. '<circle class="ind-wf-dot" cx="52" cy="63" r="3" fill="#D83302" opacity=".2" />'
|
||||
. '<text x="60" y="86" font-size="5" fill="rgba(255,255,255,.3)" font-family="Inter,sans-serif" text-anchor="middle">You are here \u2022</text>'
|
||||
. '</g>'
|
||||
/* ── Emergency alert banner ── */
|
||||
. '<g transform="translate(260,130)">'
|
||||
. '<rect class="ind-alert-bar" x="0" y="0" width="120" height="30" rx="3" fill="#ef4444" opacity=".7" />'
|
||||
. '<text x="10" y="12" font-size="5" fill="#fff" font-family="Inter,sans-serif" font-weight="700">\u26A0 ALERT</text>'
|
||||
. '<text class="ind-alert-text" x="10" y="23" font-size="5.5" fill="rgba(255,255,255,.9)" font-family="Inter,sans-serif">Fire Drill 2:00 PM</text>'
|
||||
. '</g>'
|
||||
/* Labels */
|
||||
. '<text x="130" y="195" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">TIMETABLE</text>'
|
||||
. '<text x="320" y="180" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">WAYFINDING</text>'
|
||||
. '</svg></div>';
|
||||
$visual_cls = 'platform-visual has-industry';
|
||||
|
||||
/* ── Industry: Outdoor Marketplace ─────────────────────── */
|
||||
} elseif ( ! empty( $a['industryOutdoor'] ) ) {
|
||||
$visual_html = '<div class="ind-stage" data-industry-anim="outdoor" aria-hidden="true">'
|
||||
. '<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Outdoor marketplace signage environment">'
|
||||
. '<rect x="0" y="0" width="400" height="300" rx="8" fill="#1a1a2e" />'
|
||||
/* ── Market stall canopy ── */
|
||||
. '<path d="M30,100 L200,80 L370,100 L370,110 L30,110 Z" fill="#252540" />'
|
||||
. '<path d="M30,100 L200,80 L370,100" fill="none" stroke="#D83302" stroke-width="1.5" opacity=".4" />'
|
||||
/* ── Overhead digital sign (weather resistant) ── */
|
||||
. '<g transform="translate(60,20)">'
|
||||
. '<rect x="0" y="0" width="280" height="55" rx="4" fill="#111" stroke="#00757c" stroke-width="1.5" />'
|
||||
. '<rect x="4" y="4" width="272" height="47" rx="2" fill="#1c2333" />'
|
||||
/* Weather widget */
|
||||
. '<text class="ind-weather-icon" x="22" y="32" font-size="20" text-anchor="middle">\u2600</text>'
|
||||
. '<text class="ind-weather-temp" x="22" y="46" font-size="7" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif" text-anchor="middle">24\u00B0C</text>'
|
||||
/* Market info */
|
||||
. '<text x="55" y="18" font-size="6" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" font-weight="600">GREENFIELD MARKET</text>'
|
||||
. '<text x="55" y="30" font-size="8" fill="rgba(255,255,255,.8)" font-family="Inter,sans-serif" font-weight="700">Fresh Produce \u2022 Artisan Goods</text>'
|
||||
. '<text x="55" y="42" font-size="6" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">Open Today 8AM \u2013 4PM</text>'
|
||||
/* Busy indicator */
|
||||
. '<circle class="ind-busy-dot" cx="252" cy="25" r="5" fill="#4CAF50" />'
|
||||
. '<text class="ind-busy-label" x="252" y="40" font-size="5" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" text-anchor="middle">Quiet</text>'
|
||||
. '</g>'
|
||||
/* ── Vendor tablet (on counter) ── */
|
||||
. '<g transform="translate(40,120)">'
|
||||
. '<rect x="0" y="0" width="140" height="100" rx="4" fill="#111" stroke="#333" stroke-width="1" />'
|
||||
. '<rect x="4" y="4" width="132" height="92" rx="2" fill="#1c2333" />'
|
||||
. '<text x="10" y="16" font-size="6" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" font-weight="600">VENDOR: FARM FRESH</text>'
|
||||
. '<rect x="10" y="22" width="120" height="1" fill="rgba(255,255,255,.1)" />'
|
||||
/* Product categories */
|
||||
. '<text x="10" y="36" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Tomatoes</text>'
|
||||
. '<text x="110" y="36" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">$3/kg</text>'
|
||||
. '<text x="10" y="48" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Strawberries</text>'
|
||||
. '<text x="110" y="48" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">$5/punnet</text>'
|
||||
. '<text x="10" y="60" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Sourdough</text>'
|
||||
. '<text x="110" y="60" font-size="6" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">$8/loaf</text>'
|
||||
/* Activity mini chart */
|
||||
. '<text x="10" y="76" font-size="5" fill="rgba(255,255,255,.3)" font-family="Inter,sans-serif" font-weight="600">SALES TODAY</text>'
|
||||
. '<g transform="translate(10,80)">'
|
||||
. '<rect class="ind-vendor-bar" x="0" y="25" width="12" height="3" fill="#D83302" />'
|
||||
. '<rect class="ind-vendor-bar" x="16" y="20" width="12" height="8" fill="#D83302" />'
|
||||
. '<rect class="ind-vendor-bar" x="32" y="15" width="12" height="13" fill="#D83302" />'
|
||||
. '<rect class="ind-vendor-bar" x="48" y="10" width="12" height="18" fill="#4CAF50" />'
|
||||
. '<rect class="ind-vendor-bar" x="64" y="18" width="12" height="10" fill="#D83302" />'
|
||||
. '<rect class="ind-vendor-bar" x="80" y="12" width="12" height="16" fill="#D83302" />'
|
||||
. '<rect class="ind-vendor-bar" x="96" y="8" width="12" height="20" fill="#4CAF50" />'
|
||||
. '</g>'
|
||||
. '</g>'
|
||||
/* ── Second display – event board (standing) ── */
|
||||
. '<g transform="translate(220,120)">'
|
||||
. '<rect x="0" y="0" width="140" height="100" rx="3" fill="#111" stroke="#333" stroke-width="1" />'
|
||||
. '<rect x="4" y="4" width="132" height="92" rx="2" fill="#1c2333" />'
|
||||
. '<text x="70" y="16" font-size="6" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">UPCOMING EVENTS</text>'
|
||||
. '<rect x="10" y="22" width="120" height="1" fill="rgba(255,255,255,.1)" />'
|
||||
. '<text x="10" y="36" font-size="6" fill="#D83302" font-family="Inter,sans-serif">\u2022 Live Music 12:00</text>'
|
||||
. '<text x="10" y="48" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">\u2022 Cooking Demo 1:30</text>'
|
||||
. '<text x="10" y="60" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">\u2022 Kids Workshop 2:00</text>'
|
||||
. '<text x="10" y="72" font-size="6" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">\u2022 Prize Draw 3:30</text>'
|
||||
. '<rect x="10" y="78" width="120" height="12" rx="2" fill="#00757c" opacity=".2" />'
|
||||
. '<text x="70" y="87" font-size="5.5" fill="#00757c" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600">VIEW FULL SCHEDULE</text>'
|
||||
. '</g>'
|
||||
/* Ground/grass hint */
|
||||
. '<rect x="0" y="250" width="400" height="50" fill="#12121f" />'
|
||||
. '<text x="110" y="245" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">VENDOR DISPLAY</text>'
|
||||
. '<text x="290" y="245" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">EVENT BOARD</text>'
|
||||
. '</svg></div>';
|
||||
$visual_cls = 'platform-visual has-industry';
|
||||
|
||||
/* ── Industry: Live Data Displays ──────────────────────── */
|
||||
} elseif ( ! empty( $a['industryLiveData'] ) ) {
|
||||
$visual_html = '<div class="ind-stage" data-industry-anim="livedata" aria-hidden="true">'
|
||||
. '<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Live data display environment">'
|
||||
. '<defs>'
|
||||
. '<linearGradient id="indLdGrad" x1="0%" y1="0%" x2="0%" y2="100%">'
|
||||
. '<stop offset="0%" stop-color="#D83302" stop-opacity="1"/>'
|
||||
. '<stop offset="100%" stop-color="#4CAF50" stop-opacity=".8"/>'
|
||||
. '</linearGradient>'
|
||||
. '</defs>'
|
||||
. '<rect x="0" y="0" width="400" height="300" rx="8" fill="#1a1a2e" />'
|
||||
/* ── Monitor 1: Bar chart (left) ── */
|
||||
. '<g transform="translate(10,15)">'
|
||||
. '<rect x="0" y="0" width="125" height="130" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="4" y="4" width="117" height="122" rx="2" fill="#1c2333" />'
|
||||
. '<text x="10" y="16" font-size="5.5" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" font-weight="600">THROUGHPUT</text>'
|
||||
. '<g transform="translate(10,22)">'
|
||||
. '<rect class="ind-ld-bar" x="0" y="30" width="12" height="5" fill="url(#indLdGrad)" />'
|
||||
. '<rect class="ind-ld-bar" x="16" y="25" width="12" height="10" fill="url(#indLdGrad)" />'
|
||||
. '<rect class="ind-ld-bar" x="32" y="20" width="12" height="15" fill="url(#indLdGrad)" />'
|
||||
. '<rect class="ind-ld-bar" x="48" y="15" width="12" height="20" fill="url(#indLdGrad)" />'
|
||||
. '<rect class="ind-ld-bar" x="64" y="22" width="12" height="13" fill="url(#indLdGrad)" />'
|
||||
. '<rect class="ind-ld-bar" x="80" y="18" width="12" height="17" fill="url(#indLdGrad)" />'
|
||||
. '<rect class="ind-ld-bar" x="96" y="12" width="12" height="23" fill="url(#indLdGrad)" />'
|
||||
. '</g>'
|
||||
. '<g transform="translate(10,62)">'
|
||||
. '<text class="ind-ld-val" x="6" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">0</text>'
|
||||
. '<text class="ind-ld-val" x="22" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">0</text>'
|
||||
. '<text class="ind-ld-val" x="38" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">0</text>'
|
||||
. '<text class="ind-ld-val" x="54" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">0</text>'
|
||||
. '<text class="ind-ld-val" x="70" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">0</text>'
|
||||
. '<text class="ind-ld-val" x="86" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">0</text>'
|
||||
. '<text class="ind-ld-val" x="102" y="0" font-size="5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif" text-anchor="middle">0</text>'
|
||||
. '</g>'
|
||||
/* Status line */
|
||||
. '<g transform="translate(10,76)">'
|
||||
. '<circle class="ind-ld-alert" cx="4" cy="4" r="3" fill="#4CAF50" />'
|
||||
. '<text class="ind-ld-alert-text" x="12" y="7" font-size="5.5" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">All Systems OK</text>'
|
||||
. '</g>'
|
||||
/* Line chart below */
|
||||
. '<g transform="translate(10,90)">'
|
||||
. '<text x="0" y="0" font-size="5" fill="rgba(255,255,255,.3)" font-family="Inter,sans-serif">LATENCY</text>'
|
||||
. '<line x1="0" y1="8" x2="100" y2="8" stroke="rgba(255,255,255,.05)" stroke-width=".5" />'
|
||||
. '<line x1="0" y1="20" x2="100" y2="20" stroke="rgba(255,255,255,.05)" stroke-width=".5" />'
|
||||
. '<line x1="0" y1="32" x2="100" y2="32" stroke="rgba(255,255,255,.05)" stroke-width=".5" />'
|
||||
. '<path class="ind-ld-line" d="M0,20 L110,20" stroke="#4CAF50" stroke-width="1.5" fill="none" stroke-linecap="round" />'
|
||||
. '</g>'
|
||||
/* Monitor stand */
|
||||
. '<rect x="50" y="130" width="25" height="10" fill="#222" />'
|
||||
. '<rect x="35" y="138" width="55" height="3" rx="1" fill="#333" />'
|
||||
. '</g>'
|
||||
/* ── Monitor 2: Pie chart + KPIs (center) ── */
|
||||
. '<g transform="translate(145,15)">'
|
||||
. '<rect x="0" y="0" width="110" height="130" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="4" y="4" width="102" height="122" rx="2" fill="#1c2333" />'
|
||||
. '<text x="10" y="16" font-size="5.5" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" font-weight="600">DISTRIBUTION</text>'
|
||||
/* Pie chart */
|
||||
. '<g transform="translate(55,56)">'
|
||||
. '<path class="ind-ld-pie" d="M0,0 L0,-22 A22,22 0 0,1 15.56,-15.56 Z" fill="#D83302" opacity=".9"/>'
|
||||
. '<path class="ind-ld-pie" d="M0,0 L15.56,-15.56 A22,22 0 0,1 22,0 Z" fill="#4CAF50" opacity=".8"/>'
|
||||
. '<path class="ind-ld-pie" d="M0,0 L22,0 A22,22 0 0,1 0,22 Z" fill="#f59e0b" opacity=".7"/>'
|
||||
. '<path class="ind-ld-pie" d="M0,0 L0,22 A22,22 0 0,1 -22,0 Z" fill="#5b5fc7" opacity=".7"/>'
|
||||
. '<path class="ind-ld-pie" d="M0,0 L-22,0 A22,22 0 0,1 0,-22 Z" fill="#ef4444" opacity=".6"/>'
|
||||
. '<circle cx="0" cy="0" r="10" fill="#1c2333" stroke="rgba(255,255,255,.1)" stroke-width=".5"/>'
|
||||
. '</g>'
|
||||
/* Legend */
|
||||
. '<g transform="translate(10,88)">'
|
||||
. '<rect x="0" y="0" width="5" height="5" fill="#D83302"/><text x="8" y="5" font-size="4.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">API</text>'
|
||||
. '<rect x="30" y="0" width="5" height="5" fill="#4CAF50"/><text x="38" y="5" font-size="4.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">DB</text>'
|
||||
. '<rect x="58" y="0" width="5" height="5" fill="#f59e0b"/><text x="66" y="5" font-size="4.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">Cache</text>'
|
||||
. '<rect x="0" y="12" width="5" height="5" fill="#5b5fc7"/><text x="8" y="17" font-size="4.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">Queue</text>'
|
||||
. '<rect x="40" y="12" width="5" height="5" fill="#ef4444"/><text x="48" y="17" font-size="4.5" fill="rgba(255,255,255,.4)" font-family="Inter,sans-serif">Worker</text>'
|
||||
. '</g>'
|
||||
/* Monitor stand */
|
||||
. '<rect x="40" y="130" width="30" height="10" fill="#222" />'
|
||||
. '<rect x="25" y="138" width="60" height="3" rx="1" fill="#333" />'
|
||||
. '</g>'
|
||||
/* ── Monitor 3: Alert feed (right) ── */
|
||||
. '<g transform="translate(265,15)">'
|
||||
. '<rect x="0" y="0" width="125" height="130" rx="4" fill="#111" stroke="#333" stroke-width="1.5" />'
|
||||
. '<rect x="4" y="4" width="117" height="122" rx="2" fill="#1c2333" />'
|
||||
. '<text x="10" y="16" font-size="5.5" fill="rgba(255,255,255,.5)" font-family="Inter,sans-serif" font-weight="600">SYSTEM STATUS</text>'
|
||||
/* Status rows */
|
||||
. '<g transform="translate(10,24)">'
|
||||
. '<circle cx="5" cy="4" r="3" fill="#4CAF50"/>'
|
||||
. '<text x="12" y="7" font-size="5.5" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">API Gateway</text>'
|
||||
. '<text x="100" y="7" font-size="5" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">OK</text>'
|
||||
. '</g>'
|
||||
. '<g transform="translate(10,38)">'
|
||||
. '<circle cx="5" cy="4" r="3" fill="#4CAF50"/>'
|
||||
. '<text x="12" y="7" font-size="5.5" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Database</text>'
|
||||
. '<text x="100" y="7" font-size="5" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">OK</text>'
|
||||
. '</g>'
|
||||
. '<g transform="translate(10,52)">'
|
||||
. '<circle cx="5" cy="4" r="3" fill="#f59e0b"/>'
|
||||
. '<text x="12" y="7" font-size="5.5" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Cache Layer</text>'
|
||||
. '<text x="100" y="7" font-size="5" fill="#f59e0b" font-family="Inter,sans-serif" text-anchor="end">WARN</text>'
|
||||
. '</g>'
|
||||
. '<g transform="translate(10,66)">'
|
||||
. '<circle cx="5" cy="4" r="3" fill="#4CAF50"/>'
|
||||
. '<text x="12" y="7" font-size="5.5" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">CDN</text>'
|
||||
. '<text x="100" y="7" font-size="5" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">OK</text>'
|
||||
. '</g>'
|
||||
. '<g transform="translate(10,80)">'
|
||||
. '<circle cx="5" cy="4" r="3" fill="#4CAF50"/>'
|
||||
. '<text x="12" y="7" font-size="5.5" fill="rgba(255,255,255,.6)" font-family="Inter,sans-serif">Workers</text>'
|
||||
. '<text x="100" y="7" font-size="5" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="end">OK</text>'
|
||||
. '</g>'
|
||||
/* Uptime badge */
|
||||
. '<rect x="10" y="95" width="97" height="18" rx="3" fill="#252540" />'
|
||||
. '<text x="58" y="107" font-size="7" fill="#4CAF50" font-family="Inter,sans-serif" text-anchor="middle" font-weight="700">99.98% Uptime</text>'
|
||||
/* Monitor stand */
|
||||
. '<rect x="48" y="130" width="29" height="10" fill="#222" />'
|
||||
. '<rect x="33" y="138" width="59" height="3" rx="1" fill="#333" />'
|
||||
. '</g>'
|
||||
/* ── Desk surface ── */
|
||||
. '<rect x="0" y="160" width="400" height="4" fill="#333" />'
|
||||
/* Labels */
|
||||
. '<text x="72" y="180" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">THROUGHPUT</text>'
|
||||
. '<text x="200" y="180" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">DISTRIBUTION</text>'
|
||||
. '<text x="327" y="180" font-size="7" fill="rgba(255,255,255,.25)" font-family="Inter,sans-serif" text-anchor="middle" font-weight="600" letter-spacing=".1em">SYSTEM STATUS</text>'
|
||||
. '</svg></div>';
|
||||
$visual_cls = 'platform-visual has-industry';
|
||||
|
||||
} else {
|
||||
$visual_html = oribi_render_icon( $a['visual'] ?? '' );
|
||||
$visual_cls = 'platform-visual';
|
||||
|
||||
Reference in New Issue
Block a user