@noobsociety/nsds 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CHANGELOG.md +24 -3
  2. package/README.md +347 -193
  3. package/dist/components/hud/HUDBar.d.ts +17 -0
  4. package/dist/components/hud/HUDDivider.d.ts +11 -0
  5. package/dist/components/hud/HUDLabel.d.ts +17 -0
  6. package/dist/components/icons/RPGIcon.d.ts +42 -0
  7. package/dist/index.cjs +1 -0
  8. package/dist/index.d.ts +18 -0
  9. package/dist/index.js +587 -0
  10. package/{styles.css → dist/styles.css} +1 -0
  11. package/dist/tailwind/package.json +1 -0
  12. package/dist/tailwind/preset.js +144 -0
  13. package/{tokens → dist/tokens}/colors.css +25 -19
  14. package/dist/tokens/hud.css +133 -0
  15. package/{tokens → dist/tokens}/motion.css +9 -9
  16. package/{tokens → dist/tokens}/spacing.css +9 -16
  17. package/{tokens → dist/tokens}/typography.css +2 -2
  18. package/package.json +34 -62
  19. package/SKILL.md +0 -18
  20. package/assets/bg.png +0 -0
  21. package/assets/bloop.png +0 -0
  22. package/assets/hero.png +0 -0
  23. package/assets/lamp.png +0 -0
  24. package/assets/logo.png +0 -0
  25. package/assets/mailbox.png +0 -0
  26. package/assets/plaza.png +0 -0
  27. package/assets/prickle.png +0 -0
  28. package/assets/sign.png +0 -0
  29. package/components/buttons/Button.js +0 -55
  30. package/components/buttons/Button.prompt.md +0 -22
  31. package/components/buttons/buttons.card.html +0 -24
  32. package/components/cards/FeatureCard.js +0 -36
  33. package/components/cards/FeatureCard.prompt.md +0 -17
  34. package/components/cards/QuestCard.js +0 -27
  35. package/components/cards/QuestCard.prompt.md +0 -19
  36. package/components/cards/cards.card.html +0 -54
  37. package/components/navigation/SectionArrow.js +0 -28
  38. package/components/navigation/navigation.card.html +0 -29
  39. package/components/react/index.d.ts +0 -11
  40. package/components/react/index.js +0 -4
  41. package/components/shared/styles.js +0 -22
  42. package/guidelines/brand.card.html +0 -41
  43. package/guidelines/colors.card.html +0 -43
  44. package/guidelines/motion.card.html +0 -24
  45. package/guidelines/pixel-accents.card.html +0 -50
  46. package/guidelines/radii-shadows.card.html +0 -28
  47. package/guidelines/semantic-colors.card.html +0 -30
  48. package/guidelines/spacing.card.html +0 -53
  49. package/guidelines/sprites.card.html +0 -22
  50. package/guidelines/type.card.html +0 -24
  51. package/index.d.ts +0 -1
  52. package/index.js +0 -1
  53. package/mui-theme/ThemeProvider.js +0 -14
  54. package/mui-theme/ThemeProvider.tsx +0 -20
  55. package/mui-theme/examples/FeatureCard.tsx +0 -52
  56. package/mui-theme/examples/QuestStatusChip.tsx +0 -41
  57. package/mui-theme/examples/SectionHeader.tsx +0 -44
  58. package/mui-theme/index.d.ts +0 -49
  59. package/mui-theme/index.js +0 -2
  60. package/mui-theme/index.ts +0 -2
  61. package/mui-theme/preview.dc.html +0 -195
  62. package/mui-theme/support.js +0 -1513
  63. package/mui-theme/theme.js +0 -594
  64. package/mui-theme/theme.ts +0 -604
  65. package/references/noobsociety-monokai.dc.html +0 -360
  66. package/support.js +0 -1513
  67. package/ui-kits/homepage/index.html +0 -319
  68. /package/{components → dist/components}/buttons/Button.d.ts +0 -0
  69. /package/{components → dist/components}/cards/FeatureCard.d.ts +0 -0
  70. /package/{components → dist/components}/cards/QuestCard.d.ts +0 -0
  71. /package/{components → dist/components}/navigation/SectionArrow.d.ts +0 -0
  72. /package/{components → dist/components}/primitives.css +0 -0
  73. /package/{tokens → dist/tokens}/base.css +0 -0
package/guidelines/spacing.card.html DELETED
@@ -1,53 +0,0 @@
1
- <!-- @dsCard group="Spacing" viewport="700x260" name="Space scale" subtitle="4px grid in rem — plus fluid clamp tokens" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; }
9
- .label { font-family: var(--ns-font-pixel); font-size: 7px; color: var(--ns-ink-faint); margin: 0 0 0.5rem; }
10
- .scale { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
11
- .unit { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
12
- .bar { background: #e6db74; border-radius: 2px; width: 28px; }
13
- .token { font-family: var(--ns-font-pixel); font-size: 6px; color: var(--ns-ink-faint); }
14
- .val { font-family: var(--ns-font-pixel); font-size: 6px; color: var(--ns-ink-dim); }
15
- .fluid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
16
- .fluid-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.375rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
17
- .fluid-name { font-family: var(--ns-font-pixel); font-size: 7px; color: var(--ns-ink-dim); }
18
- .fluid-val { font-family: var(--ns-font-pixel); font-size: 6px; color: var(--ns-ink-faint); }
19
- </style>
20
- </head>
21
- <body>
22
- <div>
23
- <p class="label">Base scale (rem, 4px grid)</p>
24
- <div class="scale">
25
- <div class="unit"><div class="bar" style="height:4px"></div><div class="token">--1</div><div class="val">0.25r</div></div>
26
- <div class="unit"><div class="bar" style="height:8px"></div><div class="token">--2</div><div class="val">0.5r</div></div>
27
- <div class="unit"><div class="bar" style="height:12px"></div><div class="token">--3</div><div class="val">0.75r</div></div>
28
- <div class="unit"><div class="bar" style="height:16px"></div><div class="token">--4</div><div class="val">1r</div></div>
29
- <div class="unit"><div class="bar" style="height:20px"></div><div class="token">--5</div><div class="val">1.25r</div></div>
30
- <div class="unit"><div class="bar" style="height:24px"></div><div class="token">--6</div><div class="val">1.5r</div></div>
31
- <div class="unit"><div class="bar" style="height:28px"></div><div class="token">--7</div><div class="val">1.75r</div></div>
32
- <div class="unit"><div class="bar" style="height:32px"></div><div class="token">--8</div><div class="val">2r</div></div>
33
- <div class="unit"><div class="bar" style="height:40px"></div><div class="token">--10</div><div class="val">2.5r</div></div>
34
- <div class="unit"><div class="bar" style="height:48px"></div><div class="token">--12</div><div class="val">3r</div></div>
35
- <div class="unit"><div class="bar" style="height:56px"></div><div class="token">--14</div><div class="val">3.5r</div></div>
36
- <div class="unit"><div class="bar" style="height:64px"></div><div class="token">--16</div><div class="val">4r</div></div>
37
- </div>
38
- </div>
39
- <div>
40
- <p class="label">Fluid tokens (clamp — viewport-responsive)</p>
41
- <div class="fluid-grid">
42
- <div class="fluid-row"><span class="fluid-name">container pad</span><span class="fluid-val">clamp(1rem, 4vw, 2rem)</span></div>
43
- <div class="fluid-row"><span class="fluid-name">section top</span><span class="fluid-val">clamp(2.5rem, 8svh, 4rem)</span></div>
44
- <div class="fluid-row"><span class="fluid-name">section bottom</span><span class="fluid-val">clamp(4rem, 10svh, 5.5rem)</span></div>
45
- <div class="fluid-row"><span class="fluid-name">card gap</span><span class="fluid-val">clamp(0.75rem, 2vw, 1.5rem)</span></div>
46
- <div class="fluid-row"><span class="fluid-name">card pad</span><span class="fluid-val">clamp(1rem, 2vw, 1.25rem)</span></div>
47
- <div class="fluid-row"><span class="fluid-name">hero gap</span><span class="fluid-val">clamp(1.5rem, 4vw, 3rem)</span></div>
48
- <div class="fluid-row"><span class="fluid-name">footer gap</span><span class="fluid-val">clamp(2rem, 5vw, 3rem)</span></div>
49
- <div class="fluid-row"><span class="fluid-name">header h</span><span class="fluid-val">4rem (fixed)</span></div>
50
- </div>
51
- </div>
52
- </body>
53
- </html>
package/guidelines/sprites.card.html DELETED
@@ -1,22 +0,0 @@
1
- <!-- @dsCard group="Brand" viewport="700x200" name="World objects" subtitle="Pixel sprites used as in-world interactables" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 24px 32px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
9
- .unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
10
- .label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; }
11
- img { image-rendering: pixelated; }
12
- </style>
13
- </head>
14
- <body>
15
- <div class="unit"><img src="../assets/hero.png" style="height:96px;width:auto"><span class="label">Character</span></div>
16
- <div class="unit"><img src="../assets/bloop.png" style="height:48px;width:auto"><span class="label">Bloop</span></div>
17
- <div class="unit"><img src="../assets/lamp.png" style="height:80px;width:auto"><span class="label">Lamp</span></div>
18
- <div class="unit"><img src="../assets/sign.png" style="height:80px;width:auto"><span class="label">Sign</span></div>
19
- <div class="unit"><img src="../assets/mailbox.png" style="height:80px;width:auto"><span class="label">Mailbox</span></div>
20
- <div class="unit"><img src="../assets/prickle.png" style="height:80px;width:auto"><span class="label">Prickle</span></div>
21
- </body>
22
- </html>
package/guidelines/type.card.html DELETED
@@ -1,24 +0,0 @@
1
- <!-- @dsCard group="Type" viewport="700x380" name="Type scale" subtitle="Inter body + Press Start 2P pixel labels" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
9
- .row { display: flex; align-items: baseline; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 10px; }
10
- .meta { min-width: 120px; font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; white-space: nowrap; }
11
- </style>
12
- </head>
13
- <body>
14
- <div class="row"><span class="meta">pixel-2xl · hero</span><span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:2.5rem;color:#f8f8f2;line-height:1.08">NoobSociety</span></div>
15
- <div class="row"><span class="meta">pixel-xl · cta h2</span><span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:1.6rem;color:#f8f8f2;line-height:1.3">Discover it.</span></div>
16
- <div class="row"><span class="meta">2xl · section h2</span><span style="font-family:'Inter',system-ui,sans-serif;font-size:2.2rem;font-weight:700;color:#f8f8f2;letter-spacing:0">Not a card grid. A world.</span></div>
17
- <div class="row"><span class="meta">pixel-base · card h3</span><span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:11px;color:#f8f8f2;line-height:1.45">The site is a world</span></div>
18
- <div class="row"><span class="meta">lg · body lead</span><span style="font-family:'Inter',system-ui,sans-serif;font-size:1.2rem;font-weight:500;color:#f8f8f2">Inhabit a shared world. Express identity through portfolio.</span></div>
19
- <div class="row"><span class="meta">base · body</span><span style="font-family:'Inter',system-ui,sans-serif;font-size:1rem;color:#a8a28c;line-height:1.58">The site is a world, pages are maps, your cursor is a character.</span></div>
20
- <div class="row"><span class="meta">sm · caption</span><span style="font-family:'Inter',system-ui,sans-serif;font-size:14px;color:#a8a28c">Live now. No download or sign-up.</span></div>
21
- <div class="row"><span class="meta">pixel-xs · label</span><span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.05em">the-plaza.live</span></div>
22
- <div class="row"><span class="meta">eyebrow</span><span style="font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#e6db74">✦ Society of Beginners</span></div>
23
- </body>
24
- </html>
package/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './components/react/index.js';
package/index.js DELETED
@@ -1 +0,0 @@
1
- export * from './components/react/index.js';
package/mui-theme/ThemeProvider.js DELETED
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import CssBaseline from '@mui/material/CssBaseline';
3
- import { ThemeProvider } from '@mui/material/styles';
4
-
5
- import { theme } from './theme.js';
6
-
7
- export function NSThemeProvider({ children }) {
8
- return React.createElement(
9
- ThemeProvider,
10
- { theme },
11
- React.createElement(CssBaseline),
12
- children,
13
- );
14
- }
package/mui-theme/ThemeProvider.tsx DELETED
@@ -1,20 +0,0 @@
1
- /**
2
- * ThemeProvider wrapper — drop into your app root.
3
- *
4
- * import { NSThemeProvider } from './ThemeProvider';
5
- * <NSThemeProvider>{children}</NSThemeProvider>
6
- */
7
-
8
- import React from 'react';
9
- import { ThemeProvider } from '@mui/material/styles';
10
- import CssBaseline from '@mui/material/CssBaseline';
11
- import { theme } from './theme';
12
-
13
- export function NSThemeProvider({ children }: { children: React.ReactNode }) {
14
- return (
15
- <ThemeProvider theme={theme}>
16
- <CssBaseline />
17
- {children}
18
- </ThemeProvider>
19
- );
20
- }
package/mui-theme/examples/FeatureCard.tsx DELETED
@@ -1,52 +0,0 @@
1
- /**
2
- * Example: Feature card using MUI Card + the NS theme.
3
- */
4
-
5
- import Card from '@mui/material/Card';
6
- import CardContent from '@mui/material/CardContent';
7
- import Typography from '@mui/material/Typography';
8
- import Chip from '@mui/material/Chip';
9
- import Box from '@mui/material/Box';
10
- import type * as React from 'react';
11
- import { NS } from '../theme';
12
-
13
- interface FeatureCardProps {
14
- icon: React.ReactNode;
15
- title: string;
16
- body: string;
17
- tag?: string;
18
- tagColor?: 'default' | 'success' | 'warning' | 'info' | 'error' | 'secondary';
19
- iconColor?: string;
20
- }
21
-
22
- export function FeatureCard({
23
- icon, title, body, tag, tagColor = 'default', iconColor = NS.gold
24
- }: FeatureCardProps) {
25
- return (
26
- <Card sx={{ position: 'relative', display: 'flex', flexDirection: 'column', minHeight: '14rem' }}>
27
- <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: '1.125rem', flex: 1 }}>
28
- {/* Icon slot */}
29
- <Box sx={{
30
- display: 'flex', alignItems: 'center', justifyContent: 'center',
31
- width: 42, height: 42, background: NS.bg2, borderRadius: '6px', color: iconColor,
32
- flexShrink: 0,
33
- }}>
34
- {icon}
35
- </Box>
36
- {/* Content */}
37
- <Box>
38
- <Typography variant="h3" sx={{ mb: '0.5rem' }}>{title}</Typography>
39
- <Typography variant="body2">{body}</Typography>
40
- </Box>
41
- </CardContent>
42
- {tag && (
43
- <Chip
44
- label={tag}
45
- color={tagColor}
46
- size="small"
47
- sx={{ position: 'absolute', top: '0.875rem', right: '0.875rem' }}
48
- />
49
- )}
50
- </Card>
51
- );
52
- }
package/mui-theme/examples/QuestStatusChip.tsx DELETED
@@ -1,41 +0,0 @@
1
- /**
2
- * Example: How to use the NS status chip colors in the roadmap.
3
- *
4
- * MUI Chip color prop maps to Monokai semantic colors:
5
- * 'success' → green (#a6e22e) → HOLDS
6
- * 'warning' → orange (#fd971f) → BUILDING
7
- * 'info' → cyan (#66d9e8) → PLANNED
8
- * 'default' → gold (#e6db74) → generic tag
9
- * 'secondary'→ purple (#ae81ff) → personal
10
- * 'error' → pink (#f92672) → danger
11
- */
12
-
13
- import Chip from '@mui/material/Chip';
14
- import { alpha } from '@mui/material/styles';
15
- import { NS } from '../theme';
16
-
17
- type QuestStatus = 'done' | 'active' | 'planned' | 'locked';
18
-
19
- const STATUS_CONFIG = {
20
- done: { label: 'HOLDS', color: 'success' },
21
- active: { label: 'BUILDING', color: 'warning' },
22
- planned: { label: 'PLANNED', color: 'info' },
23
- locked: {
24
- label: 'LATER',
25
- color: 'default',
26
- sx: {
27
- color: NS.inkFaint,
28
- background: alpha(NS.ink, 0.05),
29
- borderColor: alpha(NS.ink, 0.1),
30
- },
31
- },
32
- } satisfies Record<QuestStatus, {
33
- label: string;
34
- color: 'success' | 'warning' | 'info' | 'default';
35
- sx?: object;
36
- }>;
37
-
38
- export function QuestStatusChip({ status }: { status: QuestStatus }) {
39
- const { label, color, sx } = STATUS_CONFIG[status];
40
- return <Chip label={label} color={color} size="small" sx={sx} />;
41
- }
package/mui-theme/examples/SectionHeader.tsx DELETED
@@ -1,44 +0,0 @@
1
- /**
2
- * Example: Section eyebrow using MUI Typography overline variant.
3
- *
4
- * The overline variant is pre-configured to:
5
- * font: Inter 700, 13px, letter-spacing 0.18em, uppercase, color: gold
6
- */
7
-
8
- import Typography from '@mui/material/Typography';
9
- import Box from '@mui/material/Box';
10
-
11
- // The ✦ star SVG eyebrow icon
12
- const StarIcon = () => (
13
- <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"
14
- fill="currentColor" style={{ display: 'block', flexShrink: 0 }}>
15
- <polygon points="5,0.5 6.2,3.8 9.8,3.8 6.9,5.9 8,9.2 5,7.1 2,9.2 3.1,5.9 0.2,3.8 3.8,3.8" />
16
- </svg>
17
- );
18
-
19
- interface SectionHeaderProps {
20
- eyebrow: string;
21
- title: string;
22
- subtitle?: string;
23
- }
24
-
25
- export function SectionHeader({ eyebrow, title, subtitle }: SectionHeaderProps) {
26
- return (
27
- <Box sx={{ mb: '2rem' }}>
28
- <Typography
29
- variant="overline"
30
- component="p"
31
- sx={{ display: 'flex', alignItems: 'center', gap: '8px', mb: '0.875rem' }}
32
- >
33
- <StarIcon />
34
- {eyebrow}
35
- </Typography>
36
- <Typography variant="h2" sx={{ mb: subtitle ? '0.75rem' : 0 }}>
37
- {title}
38
- </Typography>
39
- {subtitle && (
40
- <Typography variant="subtitle2">{subtitle}</Typography>
41
- )}
42
- </Box>
43
- );
44
- }
package/mui-theme/index.d.ts DELETED
@@ -1,49 +0,0 @@
1
- import type { ReactElement, ReactNode } from 'react';
2
- import type { Theme } from '@mui/material/styles';
3
-
4
- export declare const NS: {
5
- readonly bg0: '#1a1a16';
6
- readonly bg1: '#272822';
7
- readonly bg2: '#32332b';
8
- readonly glass: 'rgba(30, 31, 26, 0.88)';
9
- readonly glass2: 'rgba(30, 31, 26, 0.60)';
10
- readonly line: 'rgba(255, 255, 255, 0.12)';
11
- readonly lineStr: 'rgba(255, 255, 255, 0.22)';
12
- readonly ink: '#f8f8f2';
13
- readonly inkDim: '#a8a28c';
14
- readonly inkFaint: '#75715e';
15
- readonly gold: '#e6db74';
16
- readonly goldPale: '#f4f099';
17
- readonly goldDeep: '#cabb50';
18
- readonly goldShadow: '#b5a83f';
19
- readonly goldBtnFg: '#1c1c17';
20
- readonly green: '#a6e22e';
21
- readonly greenDeep: '#7fb81e';
22
- readonly orange: '#fd971f';
23
- readonly orangeDeep: '#c96f00';
24
- readonly cyan: '#66d9e8';
25
- readonly cyanDeep: '#5bc8d7';
26
- readonly pink: '#f92672';
27
- readonly purple: '#ae81ff';
28
- };
29
-
30
- export type NSTokens = typeof NS;
31
-
32
- declare module '@mui/material/styles' {
33
- interface Palette {
34
- ns: NSTokens;
35
- }
36
-
37
- interface PaletteOptions {
38
- ns?: NSTokens;
39
- }
40
- }
41
-
42
- export declare const theme: Theme;
43
- export default theme;
44
-
45
- export interface NSThemeProviderProps {
46
- children?: ReactNode;
47
- }
48
-
49
- export declare function NSThemeProvider(props: NSThemeProviderProps): ReactElement;
package/mui-theme/index.js DELETED
@@ -1,2 +0,0 @@
1
- export { default, NS, theme } from './theme.js';
2
- export { NSThemeProvider } from './ThemeProvider.js';
package/mui-theme/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default, NS, theme } from './theme';
2
- export { NSThemeProvider } from './ThemeProvider';
package/mui-theme/preview.dc.html DELETED
@@ -1,195 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <script src="./support.js"></script>
7
- </head>
8
- <body>
9
- <x-dc>
10
- <helmet>
11
- <link rel="preconnect" href="https://fonts.googleapis.com">
12
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
- <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
14
- <style>
15
- *,*::before,*::after{box-sizing:border-box}
16
- body{margin:0;font-family:'Inter',system-ui,sans-serif;color:#f8f8f2;background:#272822;background-image:radial-gradient(ellipse 80% 55% at 88% 2%,rgba(249,38,114,.11),transparent 58%),radial-gradient(ellipse 55% 45% at 8% 12%,rgba(174,129,255,.07),transparent 52%);background-attachment:fixed;-webkit-font-smoothing:antialiased}
17
- ::selection{background:rgba(249,38,114,.28)}
18
- </style>
19
- </helmet>
20
-
21
- <div style="max-width:900px;margin:0 auto;padding:clamp(2rem,6vw,4rem) clamp(1rem,4vw,2rem)">
22
-
23
- <!-- Header -->
24
- <div style="display:flex;align-items:center;gap:1rem;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.12)">
25
- <img src="../assets/logo.png" style="height:32px;width:auto">
26
- <div>
27
- <p style="margin:0;font-family:'Press Start 2P',system-ui,sans-serif;font-size:13px;color:#f8f8f2">Noob<b style="color:#e6db74">Society</b></p>
28
- <p style="margin:4px 0 0;font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e">MUI Theme Preview</p>
29
- </div>
30
- <span style="margin-left:auto;font-size:0.8125rem;color:#75715e">React + MUI v5 + TypeScript</span>
31
- </div>
32
-
33
- <!-- TYPOGRAPHY -->
34
- <section style="margin-bottom:3rem">
35
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">TYPOGRAPHY</p>
36
- <div style="display:flex;flex-direction:column;gap:1rem">
37
- <div style="display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.875rem">
38
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="h1"</span>
39
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:2.5rem;line-height:1.08;color:#f8f8f2">NoobSociety</span>
40
- </div>
41
- <div style="display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.875rem">
42
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="h2"</span>
43
- <span style="font-size:2.2rem;font-weight:700;letter-spacing:0;color:#f8f8f2">Not a card grid. A world.</span>
44
- </div>
45
- <div style="display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.875rem">
46
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="h3"</span>
47
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:11px;line-height:1.45;color:#f8f8f2">The site is a world</span>
48
- </div>
49
- <div style="display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.875rem">
50
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="overline"</span>
51
- <span style="font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#e6db74;display:flex;align-items:center;gap:8px"><svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor"><polygon points="5,0.5 6.2,3.8 9.8,3.8 6.9,5.9 8,9.2 5,7.1 2,9.2 3.1,5.9 0.2,3.8 3.8,3.8"/></svg>Society of Beginners</span>
52
- </div>
53
- <div style="display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.875rem">
54
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="subtitle1"</span>
55
- <span style="font-size:1.25rem;font-weight:500;color:#f8f8f2">Express identity and portfolio in a shared world.</span>
56
- </div>
57
- <div style="display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.875rem">
58
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="body1"</span>
59
- <span style="font-size:1rem;color:#f8f8f2;line-height:1.6">The site is a world, pages are maps, your cursor is a character.</span>
60
- </div>
61
- <div style="display:flex;align-items:baseline;gap:1.5rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.875rem">
62
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="body2"</span>
63
- <span style="font-size:0.875rem;color:#a8a28c;line-height:1.45">Walk to objects, click to open overlays — no new tabs.</span>
64
- </div>
65
- <div style="display:flex;align-items:baseline;gap:1.5rem">
66
- <span style="min-width:9rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">variant="caption"</span>
67
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;letter-spacing:.05em;color:#75715e">the-plaza.live</span>
68
- </div>
69
- </div>
70
- </section>
71
-
72
- <!-- BUTTONS -->
73
- <section style="margin-bottom:3rem">
74
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">BUTTON</p>
75
- <div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1rem">
76
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e;min-width:5rem">contained</span>
77
- <a href="#" style="display:inline-flex;align-items:center;gap:.6em;font-family:'Press Start 2P',system-ui,sans-serif;font-size:12px;color:#1c1c17;background:#e6db74;border:2px solid #cabb50;border-radius:9px;padding:1rem 1.625rem;box-shadow:0 3px 0 #b5a83f;text-decoration:none;transition:.15s ease-out"><svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>Enter the world</a>
78
- <a href="#" style="display:inline-flex;align-items:center;gap:.6em;font-family:'Press Start 2P',system-ui,sans-serif;font-size:9px;color:#1c1c17;background:#e6db74;border:2px solid #cabb50;border-radius:8px;padding:.625rem .875rem;box-shadow:0 3px 0 #b5a83f;text-decoration:none">size="small"</a>
79
- </div>
80
- <div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1rem">
81
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e;min-width:5rem">outlined</span>
82
- <a href="#" style="display:inline-flex;align-items:center;gap:.6em;font-family:'Press Start 2P',system-ui,sans-serif;font-size:12px;color:#e6db74;background:transparent;border:1px solid rgba(248,248,242,.45);border-radius:9px;padding:1rem 1.625rem;text-decoration:none"><svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor"><polygon points="5,0.5 6.2,3.8 9.8,3.8 6.9,5.9 8,9.2 5,7.1 2,9.2 3.1,5.9 0.2,3.8 3.8,3.8"/></svg>Star on GitHub</a>
83
- </div>
84
- <div style="display:flex;flex-wrap:wrap;gap:1rem;align-items:center">
85
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e;min-width:5rem">text</span>
86
- <a href="#" style="display:inline-flex;align-items:center;gap:.6em;font-family:'Press Start 2P',system-ui,sans-serif;font-size:12px;color:#e6db74;background:transparent;border:none;padding:.5rem .75rem;text-decoration:none">Devblog →</a>
87
- </div>
88
- </section>
89
-
90
- <!-- CHIPS -->
91
- <section style="margin-bottom:3rem">
92
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">CHIP — status semantic mapping</p>
93
- <div style="display:flex;flex-wrap:wrap;gap:.75rem;align-items:center">
94
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(166,226,46,.10);color:#a6e22e;border:1px solid rgba(166,226,46,.26)">HOLDS · success</span>
95
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(253,151,31,.12);color:#fd971f;border:1px solid rgba(253,151,31,.26)">BUILDING · warning</span>
96
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(102,217,232,.12);color:#66d9e8;border:1px solid rgba(102,217,232,.26)">PLANNED · info</span>
97
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(230,219,116,.08);color:#e6db74;border:1px solid rgba(230,219,116,.26)">Spatial · default</span>
98
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(249,38,114,.08);color:#f92672;border:1px solid rgba(249,38,114,.26)">Live · error</span>
99
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(174,129,255,.08);color:#ae81ff;border:1px solid rgba(174,129,255,.26)">Personal · secondary</span>
100
- </div>
101
- </section>
102
-
103
- <!-- CARDS -->
104
- <section style="margin-bottom:3rem">
105
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">CARD — MuiCard + CardContent</p>
106
- <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)">
107
- <div style="position:relative;display:flex;flex-direction:column;gap:1.125rem;min-height:14rem;padding:clamp(1rem,2vw,1.25rem) 3.5rem clamp(1rem,2vw,1.25rem) clamp(1rem,2vw,1.25rem);border-radius:10px;background:rgba(30,31,26,.88);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);box-shadow:none">
108
- <span style="display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:#32332b;border-radius:6px;color:#e6db74"><svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor"><path d="M5 2.6 L5 18.6 L9.2 14.7 L12 20.8 L14.4 19.6 L11.6 13.7 L17.4 13.7 Z"/></svg></span>
109
- <div><p style="margin:0 0 .5rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:11px;line-height:1.45;color:#f8f8f2">The site is a world</p><p style="margin:0;font-size:.8125rem;color:#a8a28c;line-height:1.45">Pages are maps, links are interactables.</p></div>
110
- <span style="position:absolute;top:.875rem;right:.875rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(230,219,116,.08);color:#e6db74;border:1px solid rgba(230,219,116,.26)">Spatial</span>
111
- </div>
112
- <div style="position:relative;display:flex;flex-direction:column;gap:1.125rem;min-height:14rem;padding:clamp(1rem,2vw,1.25rem) 3.5rem clamp(1rem,2vw,1.25rem) clamp(1rem,2vw,1.25rem);border-radius:10px;background:rgba(30,31,26,.88);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);box-shadow:none">
113
- <span style="display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:#32332b;border-radius:6px;color:#f92672"><svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor"><path d="M13 2.5 L5 13.6 H11 L10.2 21.5 L19 9.4 H12.4 Z"/></svg></span>
114
- <div><p style="margin:0 0 .5rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:11px;line-height:1.45;color:#f8f8f2">One typed bridge</p><p style="margin:0;font-size:.8125rem;color:#a8a28c;line-height:1.45">A map object in Phaser fires the matching React overlay.</p></div>
115
- <span style="position:absolute;top:.875rem;right:.875rem;font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;padding:4px 6px;border-radius:4px;background:rgba(249,38,114,.08);color:#f92672;border:1px solid rgba(249,38,114,.26)">Live</span>
116
- </div>
117
- </div>
118
- </section>
119
-
120
- <!-- ALERTS -->
121
- <section style="margin-bottom:3rem">
122
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">ALERT — standardSuccess/Warning/Info/Error</p>
123
- <div style="display:flex;flex-direction:column;gap:.75rem">
124
- <div style="padding:.875rem 1.125rem;border-radius:8px;border:1px solid rgba(166,226,46,.26);background:rgba(166,226,46,.10);color:#a6e22e;font-size:.875rem">Gate 1 · Space is holding. Walkable area confirmed.</div>
125
- <div style="padding:.875rem 1.125rem;border-radius:8px;border:1px solid rgba(253,151,31,.26);background:rgba(253,151,31,.10);color:#fd971f;font-size:.875rem">Gate 3 · Objects is actively building. React overlays in progress.</div>
126
- <div style="padding:.875rem 1.125rem;border-radius:8px;border:1px solid rgba(102,217,232,.26);background:rgba(102,217,232,.10);color:#66d9e8;font-size:.875rem">Gate 6 · Identity is planned for a future phase.</div>
127
- <div style="padding:.875rem 1.125rem;border-radius:8px;border:1px solid rgba(249,38,114,.26);background:rgba(249,38,114,.10);color:#f92672;font-size:.875rem">Build failed — check CI logs on GitHub.</div>
128
- </div>
129
- </section>
130
-
131
- <!-- PROGRESS -->
132
- <section style="margin-bottom:3rem">
133
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">LINEAR PROGRESS — roadmap gates</p>
134
- <div style="display:flex;flex-direction:column;gap:1.25rem">
135
- <div>
136
- <div style="display:flex;justify-content:space-between;margin-bottom:.5rem"><span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#a6e22e">3 holding · 2 building</span><span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e">of 9</span></div>
137
- <div style="height:8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden">
138
- <div style="position:absolute;inset-block:0;left:0;width:33%;background:#a6e22e"></div>
139
- <div style="position:absolute;inset-block:0;left:33%;width:22%;background:repeating-linear-gradient(45deg,#fd971f,#fd971f 4px,#c96f00 4px,#c96f00 8px)"></div>
140
- </div>
141
- </div>
142
- </div>
143
- </section>
144
-
145
- <!-- TEXT FIELD -->
146
- <section style="margin-bottom:3rem">
147
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">TEXT FIELD — MuiOutlinedInput</p>
148
- <div style="display:flex;gap:1rem;flex-wrap:wrap">
149
- <div style="position:relative;min-width:200px">
150
- <label style="position:absolute;top:-10px;left:12px;background:#272822;padding:0 4px;font-size:12px;color:#75715e">Gate name</label>
151
- <input style="width:100%;background:#32332b;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:13px 14px;color:#f8f8f2;font-family:'Inter',system-ui,sans-serif;font-size:1rem;outline:none" value="Identity">
152
- </div>
153
- <div style="position:relative;min-width:200px">
154
- <label style="position:absolute;top:-10px;left:12px;background:#272822;padding:0 4px;font-size:12px;color:#e6db74">Focused</label>
155
- <input style="width:100%;background:#32332b;border:2px solid #e6db74;border-radius:8px;padding:13px 14px;color:#f8f8f2;font-family:'Inter',system-ui,sans-serif;font-size:1rem;outline:none" value="Space">
156
- </div>
157
- </div>
158
- </section>
159
-
160
- <!-- DIVIDER -->
161
- <section style="margin-bottom:3rem">
162
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">DIVIDER</p>
163
- <div style="padding:1rem 0">
164
- <hr style="border:none;border-top:1px solid rgba(255,255,255,.12);margin:0">
165
- </div>
166
- <div style="display:flex;align-items:center;gap:1rem">
167
- <hr style="flex:1;border:none;border-top:1px solid rgba(255,255,255,.12)">
168
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:7px;color:#75715e">OR</span>
169
- <hr style="flex:1;border:none;border-top:1px solid rgba(255,255,255,.12)">
170
- </div>
171
- </section>
172
-
173
- <!-- PALETTE SWATCH -->
174
- <section>
175
- <p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:8px;color:#75715e;letter-spacing:.1em;margin:0 0 1.25rem">PALETTE — theme.palette.ns.*</p>
176
- <div style="display:flex;flex-wrap:wrap;gap:.625rem">
177
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#1a1a16;border:1px solid rgba(255,255,255,.1)"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">bg0</p></div>
178
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#272822;border:1px solid rgba(255,255,255,.1)"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">bg1</p></div>
179
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#32332b;border:1px solid rgba(255,255,255,.1)"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">bg2</p></div>
180
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#f8f8f2"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">ink</p></div>
181
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#a8a28c"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">inkDim</p></div>
182
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#75715e"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">faint</p></div>
183
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#e6db74"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">gold</p></div>
184
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#a6e22e"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">green</p></div>
185
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#fd971f"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">orange</p></div>
186
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#66d9e8"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">cyan</p></div>
187
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#f92672"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">pink</p></div>
188
- <div style="text-align:center"><div style="width:44px;height:32px;border-radius:6px;background:#ae81ff"></div><p style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:6px;color:#75715e;margin:5px 0 0">purple</p></div>
189
- </div>
190
- </section>
191
-
192
- </div>
193
- </x-dc>
194
- </body>
195
- </html>