duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
450b0fface2f0f51bdcc8641133879ff3b8fe6bb
Nitro-V3/current-nitro-cards.html
T
Lorenzune 36c0221a54 chore: checkpoint current work
2026-04-03 05:22:26 +02:00

730 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nitro 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;
}
.nitro-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;
}
.nitro-card.theme-primary .nitro-card-header {
min-height: 33px;
max-height: 33px;
background: var(--card-header);
}
.nitro-card.theme-primary-slim .nitro-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;
}
.nitro-card.theme-primary-slim .nitro-card-header::before {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba(255, 255, 255, 0.3);
}
.nitro-card.theme-primary-slim .nitro-card-header-text {
color: #fff;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
font-size: 18px;
min-height: 21px;
}
.nitro-card-header {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nitro-card-header-inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.nitro-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%
);
}
.nitro-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;
}
.nitro-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;
}
.nitro-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;
}
.nitro-card-tabs-item.active {
background: var(--tab-active);
margin-bottom: -1px;
}
.nitro-card-tabs-item.active::before {
background: white;
}
.nitro-card-content {
height: 220px;
padding: 8px;
overflow: auto;
background: var(--card-body);
color: #000;
}
.nitro-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>NitroCard 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="nitro-card theme-primary">
<div class="nitro-card-header">
<div class="nitro-card-header-inner">
<span class="nitro-card-header-text">Primary Card</span>
<div class="ubuntu-close-button"></div>
</div>
</div>
<div class="nitro-card-tabs">
<div class="nitro-card-tabs-item active">Tab 1</div>
<div class="nitro-card-tabs-item">Tab 2</div>
<div class="nitro-card-tabs-item">Tab 3</div>
</div>
<div class="nitro-card-content">
<p>Questo blocco riproduce la struttura visiva attuale delle NitroCard del progetto.</p>
<p>Header blu, tabs grigie e content area chiara.</p>
</div>
</div>
<div class="nitro-card theme-primary-slim">
<div class="nitro-card-header">
<div class="nitro-card-header-inner">
<span class="nitro-card-header-text">Slim Card</span>
<div class="ubuntu-close-button"></div>
</div>
</div>
<div class="nitro-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">Nitro-V3/src/common/card/NitroCardView.tsx
import { FC, useMemo, useRef } from 'react';
import { Column, ColumnProps } from '..';
import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../draggable-window';
import { NitroCardContextProvider } from './NitroCardContext';
export interface NitroCardViewProps extends DraggableWindowProps, ColumnProps
{
theme?: string;
isResizable?: boolean;
}
export const NitroCardView: FC&lt;NitroCardViewProps&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;NitroCardContextProvider 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;/NitroCardContextProvider&gt;
);
};</div>
</div>
<div class="code-section">
<div class="code-block">Nitro-V3/src/common/card/NitroCardHeaderView.tsx
import { FC, MouseEvent } from 'react';
import { FaFlag } from 'react-icons/fa';
import { Base, Column, ColumnProps, Flex } from '..';
interface NitroCardHeaderViewProps 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 NitroCardHeaderView: FC&lt;NitroCardHeaderViewProps&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 nitro-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 nitro-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">Nitro-V3/src/common/card/NitroCardContentView.tsx
import { FC, useMemo } from 'react';
import { Column, ColumnProps } from '..';
export const NitroCardContentView: 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">Nitro-V3/src/common/card/tabs/NitroCardTabsView.tsx
import { FC, useMemo } from 'react';
import { Flex, FlexProps } from '../..';
export const NitroCardTabsView: 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">Nitro-V3/src/common/card/tabs/NitroCardTabsItemView.tsx
import { FC, useMemo } from 'react';
import { Flex, FlexProps } from '../../Flex';
import { LayoutItemCountView } from '../../layout';
interface NitroCardTabsItemViewProps extends FlexProps
{
isActive?: boolean;
count?: number;
}
export const NitroCardTabsItemView: FC&lt;NitroCardTabsItemViewProps&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">Nitro-V3/src/css/nitrocard/NitroCardView.css
.nitro-card {
resize: both;
@include media-breakpoint-down(lg) {
max-width: 100vw !important;
max-height: 100vh !important;
}
&amp;.theme-primary {
border: 1px solid #283F5D;
.nitro-card-header {
min-height: 33px;
max-height: 33px;
background: #1E7295;
.nitro-card-header-text {
color: #FFF;
text-shadow: 0px 4px 4px rgba(#000, 0.25);
@include font-size(1.35);
}
.nitro-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);
}
}
.nitro-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);
}
}
}
.nitro-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;
.nitro-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);
}
.nitro-card-header-text {
color: #FFF;
text-shadow: 0px 4px 4px rgba(#000, 0.25);
@include font-size (1.125);
min-height: 21px;
}
.nitro-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);
}
}
.nitro-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);
}
}
}
.nitro-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;
}
}
.nitro-card-header {
position: relative;
height: 100%;
}
.nitro-card-tabs {
height: 100%;
min-height: 133px;
max-height: 133px;
border-bottom: 1px solid #283F5D;
}
.nitro-card-accordion-set {
&amp;.active {
height: 100%;
overflow: hidden;
background: rgba(#FFF, 0.5);
border-bottom: 1px solid rgba(#000, 0.2);
}
.nitro-card-accordion-set-header {
border-bottom: 1px solid rgba(#000, 0.2);
}
}</div>
</div>
</section>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink