• Dance Your Cares Away/Law Abiding Citizen

    There is a New Fraqqle Rock Thread for active posting while the original 9072 page mega thread has been archived at Dance Your Cares Away. The original thread was maxing out the sites resources. The information will not be lost, but posting has been moved.

Official Change Log

Official TFSF announcement
Status
Not open for further replies.
TheFiend

TheFiend

Jarl
Admin
Change Log
To ensure the long-term stability and performance of the community platform, this thread serves as a transparent summary log utility resource commencing from 10 Feb 2026 of front-end relevant maintenance, updates, and infrastructure optimisations.

Note: Please direct technical queries and report any unexpected issues encountered to administrators @shiv &/or @TheFiend via PM.
 
User Group Banners: Styling. (×7)
Screenshot_2026-02-11-07-19-04-56_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg

Screenshot_2026-02-11-08-24-15-01_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg

Screenshot_2026-02-18-15-36-31-90_e4424258c8b8649f6e67d283a50a2cbc.jpg

Screenshot_2026-02-13-17-47-49-00_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg

Screenshot_2026-02-15-12-16-59-23_e4424258c8b8649f6e67d283a50a2cbc.jpg

Screenshot_2026-02-18-15-52-55-69_e4424258c8b8649f6e67d283a50a2cbc.jpg

Screenshot_2026-02-11-08-45-33-48_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg
 
Last edited:
Community Notice: Respectfully removed > 'In Memory of Rebarcock.' header notice. | Resubstituted as > 'In memory of Pat Flood' footer memorial text (see post #4).
Before
Screenshot_2026-02-13-11-48-13-19_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg


After
Screenshot_2026-02-13-11-49-43-48_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg
Before
Screenshot_2026-02-13-11-48-33-55_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg


After
Screenshot_2026-02-13-11-49-57-47_cbf47468f7ecfbd8ebcc46bf9cc626da.jpg
 
Last edited:
Main Page Forum Containers: Minor layout tweak.
Before [No image]

After
Screenshot_2026-02-15-13-08-22-24_99c04817c0de5652397fc8b56c3b3817.jpg
Before
Screenshot_2026-02-15-13-08-37-40_99c04817c0de5652397fc8b56c3b3817.jpg


After
Screenshot_2026-02-15-13-08-57-55_99c04817c0de5652397fc8b56c3b3817.jpg
 
Last edited:
Default Theme Style Presets: Resolved non-global styling discrepancy. | Updated 'Style chooser' list.
[[[Work in progress....]]]
Screenshot_2026-02-17-02-22-53-78_e4424258c8b8649f6e67d283a50a2cbc.jpg
 
Last edited:
(rogue) Overlay Error Container: Reclaimed. | Reassigned. | Added phrase text 'Retard Mode Engaged' to override it's broken Phrase ID fallback title 'we_ran_into_some_problems'.
Screenshot_2026-02-25-12-00-13-65_99c04817c0de5652397fc8b56c3b3817.jpg
 
Desktop Postbit: Sticky scroll.
*Postbit sticks to the top while scrolling.
Screenshot_2026-03-03-21-18-04-96_e4424258c8b8649f6e67d283a50a2cbc.jpg
 
Last edited:
[TH] Donations Widgets: Title modifications. | Button label modification. | FA icons.
Donation Campaigns Widget
Screenshot_2026-03-04-16-14-19-24_e4424258c8b8649f6e67d283a50a2cbc.jpg


Top Donors & Top Donations Widgets
IMG_20260304_184945.jpg
 
Last edited:
Direct Messages New/Unread Items: FA icons + hover transition.
IMG_20260305_024405.jpg

Top envelope icon is the default state.
Second open envelope icon is the hovered state.
 
Last edited:
Sticky Threads: Chronological default override test. | Re-ordering test 1-7. | Needs more salt (kill the chrono)
Screenshot_2026-03-05-22-37-20-56_e4424258c8b8649f6e67d283a50a2cbc.jpg

CSS: 
/* STICKY THREAD RE-ORDERING */
.structItemContainer-group--sticky {
    display: flex;
    flex-direction: column;
    .structItem {
        order: 10;
    }
    .structItem:nth-child(1) {
        order: 7;
    }
    .structItem:nth-child(2) {
        order: 6;
    }
    .structItem:nth-child(3) {
        order: 6;
    }
    .structItem:nth-child(4) {
        order: 3;
    }
    .structItem:nth-child(5) {
        order: 5;
    }
    .structItem:nth-child(6) {
        order: 4;
    }
    .structItem:nth-child(7) {
        order: 1;
    }
}
/**********/

Note 1: Optimize titles/Reduce sticky bloat.
•Rules​
or/&: unsticky & add Rules link > Pub Nav > Sub Nav (Done✓)​
​
•Support our Community > Support Free Speech/or (?)​
or/&: remove & add Patreon link > Pub Nav > Sub Nav > Become a Patron tab (?)​
​
•Maintenance Log > Change Log​
or/&: unsticky & add Change Log link > Pub Nav > Sub Nav > (Done✓)​
​
•Thread Management > Guidelines​
or/&: unsticky & add Guidelines link > Pub Nav > Sub Nav > (Done✓)​
​
•RIP @Rebarcock. 12/5/1972 - 9/21/2025 > Patrick Flood 1972-2025/or (?)​
or/&: unsticky & add In Memory of Patrick Flood link/or In Memory of Rebarcock. link/or A Tribute To Rebarcock. link > Footercock.Memorial (?)​
​
•////STICKY//// REBARCOCK. TELLS A STORY > Tales of the Rebarcock./or The Legend of the Rebarcock./or Storytime With Rebarcock./ or (?)​
or/&: unsticky & optimize/or create refined pro version & add Tales With Rebarcock. link /or > Pub Nav > Sub Nav (?)​
​
•Dance Your Cares Away/Fraggle/Law Abiding Citizens > DYCA ep1/or DYCA pt1/or DYCA #1 (?)​
or/&: unsticky & create DYCA > Pub Nav tab > add DYCA 1 link > Pub Nav > Sub Nav > DYCA 1 tab (?)​
​
•New Fraqqle Rock Thread > DYCA ep2/or DYCA pt2/or DYCA #2 (?)​
or/&: add DYCA 2 link/or > Pub Nav > Sub Nav > DYCA 2 tab (?)​


Note 2: Rebarcock. prefix color > improvement (Done✓)
 
Last edited:
Dance Your Cares Away/Fraggle/Law Abiding Citizens thread: Locked due to excessive "bloat" to ensure system integrity. | New Fraqqle Rock Thread established to continue active posting.
Dance Your Cares Away/Fraggle/Law Abiding Citizens: Locked
Screenshot_2026-03-06-15-28-56-33_3aea4af51f236e4932235fdada7d1643.jpg


New Fraqqle Rock Thread: Open
Screenshot_2026-03-06-15-28-47-73_3aea4af51f236e4932235fdada7d1643.jpg
 
Last edited:
Community Notice: Set-up/Enabled Dance Your Cares Away/Law Abiding Citizen. | Including internal hyperlink redirects. | Set-up & applied necessary html template modifications to compensate for the 8 bugged style chooser presets.
Screenshot_2026-03-06-15-13-15-78_3aea4af51f236e4932235fdada7d1643.jpg
 
Last edited:
Public Navigation: Set-up Information, Rules, Guidelines, and Change Log thread linked tabs. | Unstickied & optimized respective linked threads. | Applied appropriate FA icons.
Mobile
Screenshot_2026-03-06-15-12-20-55_3aea4af51f236e4932235fdada7d1643.jpg


Desktop
Screenshot_2026-03-06-15-12-50-35_3aea4af51f236e4932235fdada7d1643.jpg
 
Member Tooltip: Implemented level progression bar.
*EXPERIMENTAL CONCEPT TEST*
Screenshot_2026-03-11-22-50-13-87_3aea4af51f236e4932235fdada7d1643.jpg

Screenshot_2026-03-11-22-50-31-51_3aea4af51f236e4932235fdada7d1643.jpg

Brief description: It's a basic level progression system using post & reaction counts to calculate leveling and experience points.

Experience Points (XP): Every post earns 2 XP, and every reaction received earns 1 XP.

Level: Total XP ÷ 100 = current level. For initial testing, only 100 XP is needed to progress to the next level.

Progress Bar: The bar fills from left to right based on total XP accumulated during the current level, with the progress percentage indicated below the right end of the bar.

The Reset: Once 100 XP is accumulated the bar resets to 0%, the EXP Level total increases +1, and progress towards the next level begins.

*Full copy of custom code block inserted in the member_tooltip template.
HTML: 
<!-- CUSTOM LEVEL HUD START -->
<div class="memberTooltip-blurb" style="margin-top: 10px; padding: 0 15px;">
    <xf:set var="$powerLevel" value="{{ ($user.message_count * 2) + $user.reaction_score }}" />
    <xf:set var="$levelNumber" value="{{ floor($powerLevel / 100) }}" />
    <xf:set var="$nextLevel" value="{{ 100 * ($levelNumber + 1) }}" />
    <xf:set var="$progress" value="{{ ($powerLevel % 100) }}" />
  
    <div style="display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; font-weight: bold; margin-bottom: 4px;">
        <span>Level: {$levelNumber}</span>
        <span>Total XP: {$powerLevel}</span>
    </div>
  
    <div style="background: rgba(0,0,0,0.1); border-radius: 4px; height: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); position: relative;">
        <div style="background: linear-gradient(90deg, #4a90e2, #50e3c2); width: {$progress}%; height: 100%; transition: width 0.5s ease-in-out;"></div>
    </div>
  
    <div style="display: flex; justify-content: space-between; font-size: 9px; color: #8c8c8c; margin-top: 2px;">
        <span>Progress to Level {{ $levelNumber + 1 }}</span>
        <span>{$progress}%</span>
    </div>
</div>
<hr class="memberTooltip-separator" />
<!-- CUSTOM LEVEL HUD END -->[/CODE=html]
[/SPOILER]
[/SPOILER]
 
Last edited:
LAC Continuity Thread Prefixes: Set-up. | Implementation.
*Will create more as necessary.
Screenshot_2026-03-11-22-02-18-38_3aea4af51f236e4932235fdada7d1643.jpg


Practical Application
Screenshot_2026-03-11-22-02-28-84_3aea4af51f236e4932235fdada7d1643.jpg
 
Last edited:
Widget Members Online: Hijack. | Design overhaul.
*EXPERIMENTAL CONCEPT TEST*
Screenshot_2026-03-12-02-36-04-25_3aea4af51f236e4932235fdada7d1643.jpg

HTML: 
<xf:css src="widget_members_online.less" />

<div class="block" {{ widget_data($widget) }} style="background: #1a1a1b; border: 1px solid #333; border-radius: 4px; overflow: hidden; position: relative;">
    <!-- Scanline Effect -->
    <div class="scanline" style="position: absolute; width: 100%; height: 2px; background: rgba(80, 227, 194, 0.1); z-index: 2; top: 0; pointer-events: none;"></div>

    <div class="block-body block-row" style="padding: 15px; position: relative; z-index: 1;">
        <div style="font-size: 9px; color: #50e3c2; letter-spacing: 2px; margin-bottom: 10px; border-bottom: 1px solid rgba(80, 227, 194, 0.2); padding-bottom: 4px;">
            LIVE_SESSION_MONITOR // v3.0
        </div>
    
        <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px;">
            <div style="flex: 1;">
                <div style="font-size: 28px; font-family: monospace; color: #fff; line-height: 1;">{{ number($online.counts.total) }}</div>
                <div style="font-size: 10px; color: #8c8c8c; text-transform: uppercase;">Active_Nodes</div>
            </div>
            <!-- Pulse Indicator -->
            <div style="display: flex; flex-direction: column; align-items: flex-end;">
                <div class="pulse-indicator" style="width: 10px; height: 10px; background: #50e3c2; border-radius: 50%; margin-bottom: 5px;"></div>
                <div style="font-size: 8px; color: #50e3c2; font-family: monospace;">UPLINK_STABLE</div>
            </div>
        </div>

        <div style="margin-bottom: 10px;">
            <xf:set var="$total" value="{{ $online.counts.total ?: 1 }}" />
            <xf:set var="$memberPercent" value="{{ ($online.counts.members / $total) * 100 }}" />
        
            <div style="display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 5px; font-family: monospace;">
                <span style="color: #4a90e2;">> AUTHENTICATED:</span>
                <span style="color: #fff;">{{ number($online.counts.members) }} ({{ $memberPercent|number(1) }}%)</span>
            </div>
        
            <!-- Ratio Bar: Members vs Guests -->
            <div style="display: flex; gap: 2px; height: 6px;">
                <xf:foreach loop="{{ range(1, 20) }}" value="$i">
                    <div style="flex: 1; background: {{ ($i * 5) <= $memberPercent ? '#4a90e2' : 'rgba(255,255,255,0.05)' }}; border-radius: 1px;"></div>
                </xf:foreach>
            </div>
        </div>

        <xf:if is="$online.users is not empty">
            <div style="font-size: 10px; color: #5c5c5c; margin-top: 10px; border-top: 1px dotted rgba(255,255,255,0.1); padding-top: 8px; max-height: 80px; overflow-y: auto;">
                <ul class="listInline listInline--comma">
                    <xf:foreach loop="$online.users" value="$user">
                        <li><xf:username user="$user" rich="true" class="{{ !$user.visible ? 'username--invisible' : '' }}" /></li>
                    </xf:foreach>
                </ul>
            </div>
        </xf:if>
    </div>
</div>

<style>
@keyframes scanlineMove {
    0% { top: 0%; }
    100% { top: 100%; }
}
.scanline {
    animation: scanlineMove 6s linear infinite;
}
.pulse-indicator {
    box-shadow: 0 0 0 0 rgba(80, 227, 194, 1);
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(80, 227, 194, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(80, 227, 194, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(80, 227, 194, 0); }
}
</style>
Screenshot_2026-03-12-02-48-47-05_3aea4af51f236e4932235fdada7d1643.jpg

HTML: 
<xf:css src="widget_members_online.less" />

<div class="block" {{ widget_data($widget) }} style="background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; position: relative; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
 
    <!-- Top Diagnostic Header -->
    <div style="background: #2c3e50; padding: 4px 12px; display: flex; justify-content: space-between; align-items: center;">
        <span style="font-size: 8px; color: #50e3c2; font-family: monospace; letter-spacing: 2px;">COMM_LINK // STABLE</span>
        <div style="display: flex; gap: 3px;">
            <div style="width: 4px; height: 4px; background: #50e3c2; border-radius: 50%;"></div>
            <div style="width: 4px; height: 4px; background: #4a90e2; border-radius: 50%;"></div>
        </div>
    </div>

    <div class="block-body block-row" style="padding: 15px;">
     
        <!-- Main Stat: Total Active Nodes -->
        <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;">
            <div>
                <div style="font-size: 32px; font-family: 'Courier New', monospace; font-weight: bold; color: #2c3e50; line-height: 0.9;">
                    {{ number($online.counts.total) }}
                </div>
                <div style="font-size: 10px; color: #7f8c8d; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px;">Active_Nodes_Connected</div>
            </div>
         
            <!-- Heartbeat Waveform SVG -->
            <svg width="60" height="30" viewBox="0 0 60 30" style="margin-bottom: 5px;">
                <polyline fill="none" stroke="#4a90e2" stroke-width="1.5" points="0,15 10,15 15,5 20,25 25,15 60,15" stroke-linecap="round">
                    <animate attributeName="stroke-dasharray" from="0,100" to="100,0" dur="1.5s" repeatCount="indefinite" />
                </polyline>
            </svg>
        </div>

        <!-- Ratio Metrics -->
        <xf:set var="$total" value="{{ $online.counts.total ?: 1 }}" />
        <xf:set var="$memberPerc" value="{{ ($online.counts.members / $total) * 100 }}" />
        <xf:set var="$guestPerc" value="{{ ($online.counts.guests / $total) * 100 }}" />

        <div style="margin-bottom: 15px;">
            <div style="display: flex; justify-content: space-between; font-size: 10px; font-family: monospace; margin-bottom: 6px;">
                <span style="color: #2980b9;">> AUTHENTICATED:</span>
                <span style="font-weight: bold; color: #2c3e50;">{{ number($online.counts.members) }} ({{ $memberPerc|number(1) }}%)</span>
            </div>
         
            <!-- Dual-Segmented Bar (Members vs Guests) -->
            <div style="display: flex; height: 10px; background: rgba(0,0,0,0.05); border-radius: 2px; overflow: hidden; border: 1px solid rgba(0,0,0,0.05);">
                <div style="width: {$memberPerc}%; background: linear-gradient(90deg, #3498db, #50e3c2); transition: width 1s ease;"></div>
                <div style="width: {$guestPerc}%; background: rgba(0,0,0,0.1);"></div>
            </div>
        </div>

        <!-- Animated Diagnostic Tape -->
        <div style="background: rgba(0,0,0,0.03); border-radius: 4px; padding: 8px; font-size: 9px; font-family: monospace; color: #7f8c8d; overflow: hidden; position: relative;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                <span>GUESTS_ANONYMOUS:</span>
                <span style="color: #2c3e50;">{{ number($online.counts.guests) }}</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
                <span>ENCRYPTION_LAYER:</span>
                <span style="color: #27ae60;">AES-256_ACTIVE</span>
            </div>
        </div>

        <!-- Username Scrollbox -->
        <xf:if is="$online.users is not empty">
            <div style="margin-top: 15px; border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 10px;">
                <div style="font-size: 9px; color: #95a5a6; margin-bottom: 5px;">MEMBER_INDEX:</div>
                <div style="max-height: 60px; overflow-y: auto; font-size: 11px;">
                    <ul class="listInline listInline--comma">
                        <xf:foreach loop="$online.users" value="$user">
                            <li><xf:username user="$user" rich="true" class="{{ !$user.visible ? 'username--invisible' : '' }}" /></li>
                        </xf:foreach>
                    </ul>
                </div>
            </div>
        </xf:if>
    </div>
</div>

<style>
/* Subtle pulse for the Comm_Link bar */
@keyframes comm-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
</style>
Screenshot_2026-03-12-03-25-22-26_3aea4af51f236e4932235fdada7d1643.jpg

HTML: 
<xf:css src="widget_members_online.less" />

<div class="block" {{ widget_data($widget) }} style="background: #1a1a1b; border: 1px solid #333; border-radius: 4px; overflow: hidden; font-family: monospace;">
  
    <!-- Header Bar -->
    <div style="background: #000; padding: 5px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333;">
        <span style="font-size: 9px; color: #50e3c2; letter-spacing: 1px;">CORE_ANALYTICS // LIVE_OS</span>
        <span style="font-size: 8px; color: #4a90e2;">SENSORS: NOMINAL</span>
    </div>

    <div class="block-body block-row" style="padding: 15px;">
      
        <!-- THE GRAPH BOX -->
        <div style="position: relative; height: 120px; background: rgba(0,0,0,0.3); border-left: 1px solid #444; border-bottom: 1px solid #444; margin-bottom: 15px; overflow: hidden;">
            <!-- Background Grid Lines -->
            <div style="position: absolute; width: 100%; height: 100%; background-image: linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3;"></div>
          
            <xf:set var="$total" value="{{ $online.counts.total ?: 1 }}" />
            <xf:set var="$mPerc" value="{{ ($online.counts.members / $total) * 100 }}" />
            <xf:set var="$gPerc" value="{{ ($online.counts.guests / $total) * 100 }}" />
          
            <!-- SVG Plotting Area -->
            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="position: absolute; top: 0; left: 0;">
                <!-- Total Nodes Line (White/High) -->
                <polyline points="0,80 20,40 40,60 60,20 80,50 100,30" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="0.5" />
              
                <!-- Authenticated Line (Blue/Mid) -->
                <path d="M0 100 L0 85 L20 70 L40 75 L60 50 L80 65 L100 60 L100 100 Z" fill="rgba(74, 144, 226, 0.2)" stroke="#4a90e2" stroke-width="1.5" />
              
                <!-- Guest Density Line (Green/Low) -->
                <polyline points="0,95 20,88 40,92 60,80 80,85 100,75" fill="none" stroke="#50e3c2" stroke-width="1" stroke-dasharray="2,1" />
            </svg>
          
            <!-- Floating Data Tags -->
            <div style="position: absolute; top: 5px; right: 8px; text-align: right; font-size: 8px; color: #8c8c8c;">
                <div style="color: #fff;">∑ TOTAL: {{ number($online.counts.total) }}</div>
                <div style="color: #4a90e2;">Δ AUTH: {{ number($online.counts.members) }}</div>
                <div style="color: #50e3c2;">Θ GUEST: {{ number($online.counts.guests) }}</div>
            </div>
        </div>

        <!-- Data Legend & Footer -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px dotted #333; padding-top: 10px;">
            <div>
                <div style="font-size: 18px; color: #fff;">{{ $mPerc|number(1) }}%</div>
                <div style="font-size: 9px; color: #4a90e2; text-transform: uppercase;">User_Affinity</div>
            </div>
            <div style="text-align: right;">
                <div style="font-size: 18px; color: #fff;">{{ $gPerc|number(1) }}%</div>
                <div style="font-size: 9px; color: #50e3c2; text-transform: uppercase;">Anon_Traffic</div>
            </div>
        </div>

        <xf:if is="$online.users is not empty">
            <div style="margin-top: 12px; font-size: 10px; max-height: 50px; overflow-y: auto; scrollbar-width: none;">
                <ul class="listInline listInline--comma">
                    <xf:foreach loop="$online.users" value="$user">
                        <li><xf:username user="$user" rich="true" class="{{ !$user.visible ? 'username--invisible' : '' }}" /></li>
                    </xf:foreach>
                </ul>
            </div>
        </xf:if>
    </div>
</div>

<style>
/* Scanline sweep for the graph */
@keyframes graph-scan {
    from { left: -100%; }
    to { left: 100%; }
}
</style>
Screenshot_2026-03-12-03-56-49-37_3aea4af51f236e4932235fdada7d1643.jpg

HTML: 
<xf:css src="widget_members_online.less" />

<div class="block" {{ widget_data($widget) }} style="background: @xf-contentAltBg; border: 1px solid @xf-borderColor; border-radius: @xf-borderRadiusMedium; overflow: hidden; font-family: monospace; box-shadow: @xf-blockBoxShadow;">
   
    <!-- Header Bar -->
    <div style="background: @xf-contentBg; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid @xf-borderColorLight;">
        <span style="font-size: 9px; color: @xf-badgeSuccess--background; letter-spacing: 1px; font-weight: bold;">CORE_ANALYTICS // LIVE_OS</span>
        <span style="font-size: 8px; color: @xf-textColorMuted;">STATUS: NOMINAL</span>
    </div>

    <div class="block-body block-row" style="padding: 15px;">
       
        <!-- THE GRAPH BOX -->
        <div style="position: relative; height: 120px; background: @xf-inlineModBg; border-left: 1px solid @xf-borderColor; border-bottom: 1px solid @xf-borderColor; margin-bottom: 15px; overflow: hidden;">
            <!-- Background Grid Lines -->
            <div style="position: absolute; width: 100%; height: 100%; background-image: linear-gradient(@xf-borderColorLight 1px, transparent 1px), linear-gradient(90deg, @xf-borderColorLight 1px, transparent 1px); background-size: 20px 20px; opacity: 0.2;"></div>
           
            <xf:set var="$total" value="{{ $online.counts.total ?: 1 }}" />
            <xf:set var="$mPerc" value="{{ ($online.counts.members / $total) * 100 }}" />
           
            <!-- SVG Plotting Area -->
            <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="position: absolute; top: 0; left: 0;">
                <!-- Shaded Authenticated Area -->
                <path d="M0 100 L0 85 L20 70 L40 75 L60 50 L80 65 L100 60 L100 100 Z" fill="@xf-paletteColor3" style="opacity: 0.15;" />
                <!-- Main Trend Line -->
                <polyline points="0,85 20,70 40,75 60,50 80,65 100,60" fill="none" stroke="@xf-linkColor" stroke-width="1.5" />
                <!-- Baseline Pulse -->
                <polyline points="0,95 20,88 40,92 60,80 80,85 100,75" fill="none" stroke="@xf-badgeSuccess--background" stroke-width="0.5" stroke-dasharray="2,1" />
            </svg>
           
            <!-- Floating Data Tags -->
            <div style="position: absolute; top: 8px; right: 10px; text-align: right; font-size: 9px; line-height: 1.4;">
                <div style="color: @xf-textColor; font-weight: bold;">TOTAL: {{ number($online.counts.total) }}</div>
                <div style="color: @xf-linkColor;">AUTH: {{ number($online.counts.members) }}</div>
                <div style="color: @xf-badgeSuccess--background;">GUEST: {{ number($online.counts.guests) }}</div>
            </div>
        </div>

        <!-- Data Legend -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px dotted @xf-borderColor; padding-top: 10px;">
            <div>
                <div style="font-size: 18px; color: @xf-textColor; font-weight: bold;">{{ $mPerc|number(1) }}%</div>
                <div style="font-size: 9px; color: @xf-linkColor; text-transform: uppercase;">User_Affinity</div>
            </div>
            <div style="text-align: right;">
                <div style="font-size: 18px; color: @xf-textColor; font-weight: bold;">{{ (100 - $mPerc)|number(1) }}%</div>
                <div style="font-size: 9px; color: @xf-badgeSuccess--background; text-transform: uppercase;">Anon_Traffic</div>
            </div>
        </div>

        <xf:if is="$online.users is not empty">
            <div style="margin-top: 12px; font-size: 10px; border-top: 1px solid @xf-borderColorLight; padding-top: 8px;">
                <ul class="listInline listInline--comma">
                    <xf:foreach loop="$online.users" value="$user">
                        <li><xf:username user="$user" rich="true" class="{{ !$user.visible ? 'username--invisible' : '' }}" /></li>
                    </xf:foreach>
                </ul>
            </div>
        </xf:if>
    </div>
</div>
 
Last edited:
Status
Not open for further replies.

Latest

Support Free Speech

Current cycle
$268.17
Total amount
$890.17
View
Back
Top Bottom