lvl0/incr
lvl0/incr
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Add number font

Browse source
This commit is contained in:
myrmidex 2025-07-12 21:55:55 +02:00
parent 6435900079
commit ce6b6e00c5
6 changed files with 38 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/fonts/7segment.woff Normal file
View file

Binary file not shown.

13
resources/css/app.css
View file

@ -5,12 +5,23 @@
@source '../views'; @source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@font-face {
font-family: '7Segment';
src: url('/fonts/7segment.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.font-digital {
font-family: '7Segment', monospace;
}
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@theme { @theme {
--font-sans: --font-sans:
'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono-display: --font-mono-display:
'Major Mono Display', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 'Major Mono Display', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

42
resources/js/components/Display/LedCounter.tsx
View file

@ -15,9 +15,9 @@ interface LedCounterProps {
onAddMilestone?: () => void; onAddMilestone?: () => void;
} }
export default function LedCounter({ export default function LedCounter({
value, value,
className, className,
animate = true, animate = true,
currentPrice, currentPrice,
onHover, onHover,
@ -45,13 +45,13 @@ export default function LedCounter({
// Milestone navigation // Milestone navigation
const nextMilestone = () => { const nextMilestone = () => {
setCurrentMilestoneIndex((prev) => setCurrentMilestoneIndex((prev) =>
prev < milestones.length - 1 ? prev + 1 : 0 prev < milestones.length - 1 ? prev + 1 : 0
); );
}; };
const prevMilestone = () => { const prevMilestone = () => {
setCurrentMilestoneIndex((prev) => setCurrentMilestoneIndex((prev) =>
prev > 0 ? prev - 1 : milestones.length - 1 prev > 0 ? prev - 1 : milestones.length - 1
); );
}; };
@ -72,7 +72,7 @@ export default function LedCounter({
const duration = 1000; // 1 second animation const duration = 1000; // 1 second animation
const steps = 60; // 60fps const steps = 60; // 60fps
const stepValue = (value - displayValue) / steps; const stepValue = (value - displayValue) / steps;
if (Math.abs(stepValue) < 0.01) { if (Math.abs(stepValue) < 0.01) {
setDisplayValue(value); setDisplayValue(value);
return; return;
@ -101,7 +101,7 @@ export default function LedCounter({
// Otherwise show up to 6 decimal places, removing trailing zeros // Otherwise show up to 6 decimal places, removing trailing zeros
return value.toFixed(6).replace(/\.?0+$/, ''); return value.toFixed(6).replace(/\.?0+$/, '');
}; };
const formattedValue = formatValue(displayValue); const formattedValue = formatValue(displayValue);
const formatCurrency = (amount: number) => { const formatCurrency = (amount: number) => {
@ -113,7 +113,7 @@ export default function LedCounter({
}; };
return ( return (
<div <div
className={cn( className={cn(
"font-mono text-center select-none relative group cursor-pointer", "font-mono text-center select-none relative group cursor-pointer",
"bg-black text-red-500", "bg-black text-red-500",
@ -142,15 +142,15 @@ export default function LedCounter({
> >
<div className="relative"> <div className="relative">
{/* Background glow effect */} {/* Background glow effect */}
<div className="absolute inset-0 text-red-500/20 blur-sm font-mono-display text-6xl md:text-8xl lg:text-9xl tracking-widest"> <div className="absolute inset-0 text-red-500/20 blur-sm font-digital text-6xl md:text-8xl lg:text-9xl tracking-widest">
{formattedValue} {formattedValue}
</div> </div>
{/* Main LED text */} {/* Main LED text */}
<div className={cn( <div className={cn(
"relative z-10", "relative z-10",
"text-6xl md:text-8xl lg:text-9xl", "text-6xl md:text-8xl lg:text-9xl",
"font-mono-display font-normal tracking-widest", "font-digital font-normal tracking-widest",
"text-red-500", "text-red-500",
"drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]", "drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]",
"filter brightness-110" "filter brightness-110"
@ -205,7 +205,7 @@ export default function LedCounter({
)}> )}>
<div className="relative"> <div className="relative">
{/* Progress Bar */} {/* Progress Bar */}
<div <div
className="h-2 bg-gray-800 cursor-pointer relative overflow-hidden" className="h-2 bg-gray-800 cursor-pointer relative overflow-hidden"
onClick={handleProgressBarClick} onClick={handleProgressBarClick}
> >
@ -213,9 +213,9 @@ export default function LedCounter({
{isCompleted && ( {isCompleted && (
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" /> <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-pulse" />
)} )}
{/* Progress fill */} {/* Progress fill */}
<div <div
className={cn( className={cn(
"h-full transition-all duration-1000 ease-out", "h-full transition-all duration-1000 ease-out",
currentMilestone.color, currentMilestone.color,
@ -224,9 +224,9 @@ export default function LedCounter({
)} )}
style={{ width: `${progress}%` }} style={{ width: `${progress}%` }}
/> />
{/* Glow effect */} {/* Glow effect */}
<div <div
className={cn( className={cn(
"absolute top-0 h-full transition-all duration-1000 ease-out", "absolute top-0 h-full transition-all duration-1000 ease-out",
"bg-gradient-to-r from-transparent to-white/30", "bg-gradient-to-r from-transparent to-white/30",
@ -252,11 +252,11 @@ export default function LedCounter({
<div className="text-red-400 text-sm font-mono"> <div className="text-red-400 text-sm font-mono">
{value.toFixed(2)} / {currentMilestone.target} {value.toFixed(2)} / {currentMilestone.target}
</div> </div>
<div className="text-red-500 font-bold text-sm"> <div className="text-red-500 font-bold text-sm">
{currentMilestone.label} {currentMilestone.label}
</div> </div>
<div className="text-red-400 text-sm"> <div className="text-red-400 text-sm">
{isCompleted ? 'COMPLETED' : `${(100 - progress).toFixed(1)}% TO GO`} {isCompleted ? 'COMPLETED' : `${(100 - progress).toFixed(1)}% TO GO`}
</div> </div>
@ -287,7 +287,7 @@ export default function LedCounter({
<span className="font-mono">MILE</span> <span className="font-mono">MILE</span>
</button> </button>
)} )}
<button <button
onClick={nextMilestone} onClick={nextMilestone}
className="text-red-400 hover:text-red-300 transition-colors p-1" className="text-red-400 hover:text-red-300 transition-colors p-1"
@ -295,7 +295,7 @@ export default function LedCounter({
> >
<ChevronRight className="w-4 h-4" /> <ChevronRight className="w-4 h-4" />
</button> </button>
{/* Stats indicator */} {/* Stats indicator */}
<div className={cn( <div className={cn(
"text-xs text-red-400/60 cursor-pointer transition-colors", "text-xs text-red-400/60 cursor-pointer transition-colors",
@ -309,4 +309,4 @@ export default function LedCounter({
</div> </div>
</div> </div>
); );
} }

4
resources/js/components/Display/LedDisplay.tsx
View file

@ -73,7 +73,7 @@ export default function LedDisplay({
> >
<div className="relative"> <div className="relative">
{/* Background glow effect */} {/* Background glow effect */}
<div className="absolute inset-0 text-red-500/20 blur-sm font-mono-display text-6xl md:text-8xl lg:text-9xl tracking-widest"> <div className="absolute inset-0 text-red-500/20 blur-sm font-digital text-6xl md:text-8xl lg:text-9xl tracking-widest">
{formattedValue} {formattedValue}
</div> </div>
@ -81,7 +81,7 @@ export default function LedDisplay({
<div className={cn( <div className={cn(
"relative z-10", "relative z-10",
"text-6xl md:text-8xl lg:text-9xl", "text-6xl md:text-8xl lg:text-9xl",
"font-mono-display font-normal tracking-widest", "font-digital font-normal tracking-widest",
"text-red-500", "text-red-500",
"drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]", "drop-shadow-[0_0_10px_rgba(239,68,68,0.8)]",
"filter brightness-110" "filter brightness-110"

2
resources/js/components/Settings/UserMenuContent.tsx
View file

@ -1,4 +1,4 @@
import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu'; import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/DropdownMenu';
import { UserInfo } from '@/components/Settings/UserInfo'; import { UserInfo } from '@/components/Settings/UserInfo';
import { useMobileNavigation } from '@/hooks/use-mobile-navigation'; import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
import { type User } from '@/types'; import { type User } from '@/types';

2
resources/views/app.blade.php
View file

@ -38,6 +38,8 @@
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600|major-mono-display:400" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600|major-mono-display:400" rel="stylesheet" />
<link rel="preload" href="/fonts/7segment.woff" as="font" type="font/woff" crossorigin>
@routes @routes
@viteReactRefresh @viteReactRefresh