5180 fichiers 38.5 Mo 0 téléchargements 17 vues mis à jour il y a 2 heures ui
nitro-v36-with-renderer-v36 / current-octane-cards.html
current-octane-cards.html 22.3 Ko Télécharger le fichier
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Octane Cards Current Snapshot</title>
    <style>
        :root {
            --page-bg: #1d1f24;
            --panel-bg: #2a2d33;
            --panel-border: #454a54;
            --text: #f3f4f6;
            --muted: #b9bec9;
            --card-border: #283f5d;
            --card-header: #1e7295;
            --card-body: #dfdfdf;
            --tab-bg: #b6bec5;
            --tab-active: #dfdfdf;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 24px;
            background: var(--page-bg);
            color: var(--text);
            font-family: Arial, sans-serif;
        }

        h1,
        h2 {
            margin: 0 0 12px;
        }

        h1 {
            font-size: 22px;
        }

        h2 {
            font-size: 16px;
        }

        p {
            margin: 0 0 16px;
            color: var(--muted);
        }

        .layout {
            display: grid;
            grid-template-columns: 420px minmax(480px, 1fr);
            gap: 24px;
            align-items: start;
        }

        .panel {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: 10px;
            padding: 16px;
        }

        .preview-stack {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .octane-card {
            resize: both;
            overflow: hidden;
            position: relative;
            border-radius: 4px;
            border: 1px solid var(--card-border);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            width: 100%;
            max-width: 380px;
        }

        .octane-card.theme-primary .octane-card-header {
            min-height: 33px;
            max-height: 33px;
            background: var(--card-header);
        }

        .octane-card.theme-primary-slim .octane-card-header {
            position: relative;
            min-height: 28px;
            max-height: 28px;
            background: repeating-linear-gradient(#2dabc2, #2dabc2 50%, #2b91a7 50%, #2b91a7 100%);
            border-bottom: 2px solid #257f92;
            box-shadow: 0 2px white;
            width: 100%;
            margin: 0;
            padding-top: 2px;
        }

        .octane-card.theme-primary-slim .octane-card-header::before {
            position: absolute;
            content: " ";
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.3);
        }

        .octane-card.theme-primary-slim .octane-card-header-text {
            color: #fff;
            text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
            font-size: 18px;
            min-height: 21px;
        }

        .octane-card-header {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .octane-card-header-inner {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .octane-card-header-text {
            font-size: 20px;
            color: #fff;
            text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
            font-weight: 700;
        }

        .ubuntu-close-button {
            position: absolute;
            right: 8px;
            width: 18px;
            height: 18px;
            cursor: pointer;
            padding: 2px;
            border-radius: 4px;
            box-shadow: 0 0 0 1.6px #fff;
            border: 2px solid #921911;
            background: repeating-linear-gradient(
                rgba(245, 80, 65, 1),
                rgba(245, 80, 65, 1) 50%,
                rgba(194, 48, 39, 1) 50%,
                rgba(194, 48, 39, 1) 100%
            );
        }

        .octane-card-tabs {
            display: flex;
            justify-content: center;
            gap: 2px;
            background: #185d79;
            min-height: 35px;
            max-height: 35px;
            padding: 4px 8px 0;
            border-bottom: 1px solid var(--card-border);
            margin-top: -1px;
        }

        .octane-card-tabs-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            cursor: pointer;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            background: var(--tab-bg);
            padding: 4px 12px;
            z-index: 1;
            border-top: 1px solid var(--card-border);
            border-left: 1px solid var(--card-border);
            border-right: 1px solid var(--card-border);
            color: #000;
            min-width: 96px;
        }

        .octane-card-tabs-item::before {
            content: "";
            position: absolute;
            width: 93%;
            height: 3px;
            border-radius: 4px;
            top: 1.5px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 1;
            background: #c2c9d1;
        }

        .octane-card-tabs-item.active {
            background: var(--tab-active);
            margin-bottom: -1px;
        }

        .octane-card-tabs-item.active::before {
            background: white;
        }

        .octane-card-content {
            height: 220px;
            padding: 8px;
            overflow: auto;
            background: var(--card-body);
            color: #000;
        }

        .octane-card-content p {
            color: #000;
            margin-bottom: 10px;
        }

        .code-block {
            width: 100%;
            min-height: 180px;
            resize: vertical;
            border: 1px solid #5a6170;
            border-radius: 8px;
            background: #14161a;
            color: #e9edf5;
            padding: 12px;
            font: 12px/1.5 Consolas, monospace;
            white-space: pre;
            overflow: auto;
        }

        .code-section {
            margin-bottom: 18px;
        }

        @media (max-width: 980px) {
            .layout {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h1>OctaneCard attuali</h1>
    <p>Questo file contiene una preview HTML modificabile e una copia esatta del codice sorgente attuale delle card nel progetto.</p>

    <div class="layout">
        <section class="panel">
            <h2>Preview</h2>
            <div class="preview-stack">
                <div class="octane-card theme-primary">
                    <div class="octane-card-header">
                        <div class="octane-card-header-inner">
                            <span class="octane-card-header-text">Primary Card</span>
                            <div class="ubuntu-close-button"></div>
                        </div>
                    </div>
                    <div class="octane-card-tabs">
                        <div class="octane-card-tabs-item active">Tab 1</div>
                        <div class="octane-card-tabs-item">Tab 2</div>
                        <div class="octane-card-tabs-item">Tab 3</div>
                    </div>
                    <div class="octane-card-content">
                        <p>Questo blocco riproduce la struttura visiva attuale delle OctaneCard del progetto.</p>
                        <p>Header blu, tabs grigie e content area chiara.</p>
                    </div>
                </div>

                <div class="octane-card theme-primary-slim">
                    <div class="octane-card-header">
                        <div class="octane-card-header-inner">
                            <span class="octane-card-header-text">Slim Card</span>
                            <div class="ubuntu-close-button"></div>
                        </div>
                    </div>
                    <div class="octane-card-content" style="height: 160px;">
                        <p>Versione slim con header a righe come nel CSS attuale.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="panel">
            <h2>Snapshot codice attuale</h2>

            <div class="code-section">
                <div class="code-block">octane/src/common/card/OctaneCardView.tsx

import { FC, useMemo, useRef } from 'react';
import { Column, ColumnProps } from '..';
import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../draggable-window';
import { OctaneCardContextProvider } from './OctaneCardContext';

export interface OctaneCardViewProps extends DraggableWindowProps, ColumnProps
{
    theme?: string;
    isResizable?: boolean;
}

export const OctaneCardView: FC&lt;OctaneCardViewProps&gt; = props =&gt;
{
    const { theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], isResizable = true, ...rest } = props;
    const elementRef = useRef&lt;HTMLDivElement&gt;();

    const getClassNames = useMemo(() =&gt;
    {
        const newClassNames: string[] = [ isResizable ? 'resize' : 'resize-none', 'rounded', 'shadow' ];

        // Card Theme Changer
        newClassNames.push('border border-[#283F5D]');

        if(classNames.length) newClassNames.push(...classNames);

        return newClassNames;
    }, [ classNames, isResizable ]);

    return (
        &lt;OctaneCardContextProvider value={ { theme } }&gt;
            &lt;DraggableWindow disableDrag={ disableDrag } handleSelector={ handleSelector } uniqueKey={ uniqueKey } windowPosition={ windowPosition }&gt;
                &lt;Column classNames={ getClassNames } gap={ gap } innerRef={ elementRef } overflow={ overflow } position={ position } { ...rest } /&gt;
            &lt;/DraggableWindow&gt;
        &lt;/OctaneCardContextProvider&gt;
    );
};</div>
            </div>

            <div class="code-section">
                <div class="code-block">octane/src/common/card/OctaneCardHeaderView.tsx

import { FC, MouseEvent } from 'react';
import { FaFlag } from 'react-icons/fa';
import { Base, Column, ColumnProps, Flex } from '..';

interface OctaneCardHeaderViewProps extends ColumnProps
{
    headerText: string;
    isGalleryPhoto?: boolean;
    noCloseButton?: boolean;
    isInfoToHabboPages?: boolean;
    onReportPhoto?: (event: MouseEvent) =&gt; void;
    onClickInfoHabboPages?: (event: MouseEvent) =&gt; void;
    onCloseClick: (event: MouseEvent) =&gt; void;
}

export const OctaneCardHeaderView: FC&lt;OctaneCardHeaderViewProps&gt; = props =&gt;
{
    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, isInfoToHabboPages = false, onReportPhoto = null, onClickInfoHabboPages = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;



    const onMouseDown = (event: MouseEvent&lt;HTMLDivElement&gt;) =&gt;
    {
        event.stopPropagation();
        event.nativeEvent.stopImmediatePropagation();
    };

    return (
        &lt;Column center className={ 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header bg-card-header' } { ...rest }&gt;
            &lt;Flex center fullWidth&gt;
                &lt;span className="text-xl text-white drop-shadow-lg"&gt;{ headerText }&lt;/span&gt;
                { isGalleryPhoto &amp;&amp;
                    &lt;Base className="inset-e-4 octane-card-header-report-camera" position="absolute" onClick={ onReportPhoto }&gt;
                        &lt;FaFlag className="fa-icon" /&gt;
                    &lt;/Base&gt;
                }
                { isInfoToHabboPages &amp;&amp;
                    &lt;Base className="absolute right-8 octane-card-header-info-habbopages cursor-pointer" position="absolute" onClick={ onClickInfoHabboPages } /&gt;
                }
                &lt;div className="absolute flex items-center justify-center cursor-pointer right-2 p-[2px] ubuntu-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown }&gt;
                &lt;/div&gt;

            &lt;/Flex&gt;
        &lt;/Column&gt;
    );
};</div>
            </div>

            <div class="code-section">
                <div class="code-block">octane/src/common/card/OctaneCardContentView.tsx

import { FC, useMemo } from 'react';
import { Column, ColumnProps } from '..';

export const OctaneCardContentView: FC&lt;ColumnProps&gt; = props =&gt;
{
    const { overflow = 'auto', classNames = [], ...rest } = props;

    const getClassNames = useMemo(() =&gt;
    {
        // Theme Changer
        const newClassNames: string[] = [ 'container-fluid', 'h-full p-[8px] overflow-auto', 'bg-light' ];

        if(classNames.length) newClassNames.push(...classNames);

        return newClassNames;
    }, [ classNames ]);

    return &lt;Column classNames={ getClassNames } overflow={ overflow } { ...rest } /&gt;;
};</div>
            </div>

            <div class="code-section">
                <div class="code-block">octane/src/common/card/tabs/OctaneCardTabsView.tsx

import { FC, useMemo } from 'react';
import { Flex, FlexProps } from '../..';

export const OctaneCardTabsView: FC&lt;FlexProps&gt; = props =&gt;
{
    const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;

    const getClassNames = useMemo(() =&gt;
    {
        const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px' ];

        if(classNames.length) newClassNames.push(...classNames);

        return newClassNames;
    }, [ classNames ]);

    return (
        &lt;Flex classNames={ getClassNames } gap={ gap } justifyContent={ justifyContent } { ...rest }&gt;
            { children }
        &lt;/Flex&gt;
    );
};</div>
            </div>

            <div class="code-section">
                <div class="code-block">octane/src/common/card/tabs/OctaneCardTabsItemView.tsx

import { FC, useMemo } from 'react';
import { Flex, FlexProps } from '../../Flex';
import { LayoutItemCountView } from '../../layout';

interface OctaneCardTabsItemViewProps extends FlexProps
{
    isActive?: boolean;
    count?: number;
}

export const OctaneCardTabsItemView: FC&lt;OctaneCardTabsItemViewProps&gt; = props =&gt;
{
    const { isActive = false, count = 0, overflow = 'hidden', position = 'relative', pointer = true, classNames = [], children = null, ...rest } = props;

    const getClassNames = useMemo(() =&gt;
    {
        const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-1 border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-1 before:bg-[#C2C9D1]',
            isActive &amp;&amp; 'bg-card-tab-item-active -mb-px before:bg-white' ];

        //if (isActive) newClassNames.push('bg-[#dfdfdf] border-b-[1px_solid_black]');

        if(classNames.length) newClassNames.push(...classNames);

        return newClassNames;
    }, [ isActive, classNames ]);

    return (
        &lt;Flex classNames={ getClassNames } overflow={ overflow } pointer={ pointer } position={ position } { ...rest }&gt;
            &lt;Flex center shrink&gt;
                { children }
            &lt;/Flex&gt;
            { (count &gt; 0) &amp;&amp;
                &lt;LayoutItemCountView count={ count } /&gt; }
        &lt;/Flex&gt;
    );
};</div>
            </div>

            <div class="code-section">
                <div class="code-block">octane/src/css/octanecard/OctaneCardView.css

.octane-card {
    resize: both;

    @include media-breakpoint-down(lg) {
        max-width: 100vw !important;
        max-height: 100vh !important;
    }

    &amp;.theme-primary {
        border: 1px solid #283F5D;

        .octane-card-header {
            min-height: 33px;
            max-height: 33px;
            background: #1E7295;

            .octane-card-header-text {
                color: #FFF;
                text-shadow: 0px 4px 4px rgba(#000, 0.25);
                @include font-size(1.35);
            }

            .octane-card-header-close {
                cursor: pointer;
                padding: 2px 2px;
                line-height: 1;
                border-radius: .25rem;
                box-shadow: 0 0 0 1.6px #FFF;
                border: 2px solid #921911;
                background: repeating-linear-gradient(
                    rgba(245, 80, 65, 1),
                    rgba(245, 80, 65, 1) 50%,
                    rgba(194, 48, 39, 1) 50%,
                    rgba(194, 48, 39, 1) 100%
                );

                &amp;:hover {
                    filter: brightness(1.2);
                }

                &amp;:active {
                    filter: brightness(0.8);
                }
            }

            .octane-card-header-report-camera {
                cursor: pointer;
                padding: 1px 3px;
                line-height: 1;
                border-radius: .25rem;
                box-shadow: 0 0 0 1.6px #FFF;
                border: 2px solid #921911;
                background: repeating-linear-gradient(
                    rgba(245, 80, 65, 1),
                    rgba(245, 80, 65, 1) 50%,
                    rgba(194, 48, 39, 1) 50%,
                    rgba(194, 48, 39, 1) 100%
                );

                &amp;:hover {
                    filter: brightness(1.2);
                }

                &amp;:active {
                    filter: brightness(0.8);
                }
            }
        }

        .octane-card-tabs {
            background-color: #185D79;

            .nav-item {
                padding: .2rem .8rm;
                background-color: #B6BEC5;
                color: #000;
                z-index: 1;
                margin-bottom: -1px;

                &amp;.active {
                    background-color: #DFDFDF;
                    border-color: #283F5D #283F5D #DFDFDF !important;
                    border-bottom: 1px solid black;

                    &amp;:before {
                        background: #FFF;
                    }
                }

                &amp;:before {
                    content: '';
                    position: absolute;
                    width: 93%;
                    height: 3px;
                    border-radius: 0.25rem;
                    top: 1.5px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    background: #c2c9d1;
                    z-index: 1;
                }
            }
        }

        .content-area {
            background-color: #DFDFDF;
        }
    }

    &amp;.theme-primary-slim {
        border: 1px solid #283F5D;

        .octane-card-header {
            position: relative;
            min-height: 28px;
            max-height: 28px;
            background: repeating-linear-gradient(#2DABC2, #2DABC2 50%, #2B91A7 50%, #2B91A7 100%);
            border-bottom: 2px solid darken(#2B91A7, 5);
            box-shadow: 0 2px white;
            width: 100%;
            margin: 0;
            padding-top:2px;

            &amp;:before {
                position: absolute;
                content: ' ';
                top: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: rgba(#FFF, 0.3);
            }

            .octane-card-header-text {
                color: #FFF;
                text-shadow: 0px 4px 4px rgba(#000, 0.25);
                @include font-size (1.125);
                min-height: 21px;
            }

            .octane-card-header-close {
                cursor: pointer;
                padding: 0px 2px;
                line-height: 1;
                @include font-size(.675);
                border-radius: .25rem;
                box-shadow: 0 0 0 1.6px #FFF;
                border: 2px solid #921911;
                background: repeating-linear-gradient(
                    rgba(245, 80, 65, 1),
                    rgba(245, 80, 65, 1) 50%,
                    rgba(194, 48, 39, 1) 50%,
                    rgba(194, 48, 39, 1) 100%
                );

                &amp;:hover {
                    filter: brightness(1.2);
                }

                &amp;:active {
                    filter: brightness(0.8);
                }
            }

            .octane-card-header-report-camera {
                cursor: pointer;
                padding: 0px 2px;
                margin-right: 4px;
                line-height: 1;
                @include font-size(.675);
                border-radius: .25rem;
                box-shadow: 0 0 0 1.6px #FFF;
                border: 2px solid #921911;
                background: repeating-linear-gradient(
                    rgba(245, 80, 65, 1),
                    rgba(245, 80, 65, 1) 50%,
                    rgba(194, 48, 39, 1) 50%,
                    rgba(194, 48, 39, 1) 100%
                );

                &amp;:hover {
                    filter: brightness(1.2);
                }

                &amp;:active {
                    filter: brightness(0.8);
                }
            }
        }

        .octane-card-tabs {
            background-color: #185D79;
        }

        .content-area {
            background-color: #DFDFDF;
        }
    }
}

.content-area {
    height: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: auto;

    &amp;.theme-dark {
        background-color: #1C323F !important;
    }
}

@include media-breakpoint-down(lg) {
    .content-area {
        height: 100% !important;
        min-height: auto !important;
        max-height: 100% !important;
    }
}

.octane-card-header {
    position: relative;
    height: 100%;
}

.octane-card-tabs {
    height: 100%;
    min-height: 133px;
    max-height: 133px;
    border-bottom: 1px solid #283F5D;
}

.octane-card-accordion-set {

    &amp;.active {
        height: 100%;
        overflow: hidden;
        background: rgba(#FFF, 0.5);
        border-bottom: 1px solid rgba(#000, 0.2);
    }

    .octane-card-accordion-set-header {
        border-bottom: 1px solid rgba(#000, 0.2);
    }
}</div>
            </div>
        </section>
    </div>
</body>
</html>
15Sujets
1Dépôts
20Membres
4En ligne
Profile
Inscrit
Dernière visite
Messages
0
Votes positifs
0
Votes négatifs
0

Nous utilisons des cookies pour assurer le bon fonctionnement du site et améliorer votre expérience. en savoir plus

Autoriser