Skip to content

Redesign DarkMoon website to dark theme #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
BlockChainCodeMaster1 wants to merge 17 commits into
base: dev
Choose a base branch
from
Draft

Redesign DarkMoon website to dark theme #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
77ba01c
Refactor: Update UI colors and styles to darkmoon theme
cursoragent Nov 22, 2025
9ed64d2
feat: Add text color palette to tailwind config
cursoragent Nov 22, 2025
43dd157
Refactor: Enhance UI and add new features
cursoragent Nov 22, 2025
3b86d68
Checkpoint before follow-up message
cursoragent Nov 23, 2025
416cbfc
Refactor: Enhance landing page with new sections and styling
cursoragent Nov 23, 2025
0f2247c
Refactor: Update UI and styling for landing page components
cursoragent Nov 23, 2025
58b5522
feat: Add dynamic background effects to landing page
cursoragent Nov 23, 2025
81594ab
Refactor: Implement canvas-based background effects
cursoragent Nov 23, 2025
61adba2
feat: Add 3D diamond animation to background effects
cursoragent Nov 23, 2025
59addbd
Checkpoint before follow-up message
cursoragent Nov 23, 2025
33c1d82
Refactor: Improve ruby gem rendering and wave effects
cursoragent Nov 23, 2025
e921598
Refactor: Improve ruby rendering and background waves
cursoragent Nov 23, 2025
571e89f
Refactor: Improve gem rendering and lighting effects
cursoragent Nov 23, 2025
71193f4
Refactor: Improve ruby rendering and performance
cursoragent Nov 23, 2025
7297ce6
Refactor: Boost background effects red glow and intensity
cursoragent Nov 24, 2025
d97da4d
Refactor: Adjust diamond facet geometry for better appearance
cursoragent Nov 24, 2025
1f4b52c
Refactor: Enhance background wave animation and visuals
cursoragent Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
785 changes: 216 additions & 569 deletions web/src/components/AILearning.tsx
View file
Open in desktop

Large diffs are not rendered by default.

2,652 changes: 0 additions & 2,652 deletions web/src/components/AITradersPage.tsx
View file
Open in desktop

This file was deleted.

120 changes: 31 additions & 89 deletions web/src/components/ComparisonChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {

if (isLoading) {
return (
<div className="text-center py-16" style={{ color: '#848E9C' }}>
<div className="text-center py-16 text-darkmoon-text-secondary">
<div className="spinner mx-auto mb-4"></div>
<div className="text-sm font-semibold">Loading comparison data...</div>
</div>
Expand All @@ -150,7 +150,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {

if (combinedData.length === 0) {
return (
<div className="text-center py-16" style={{ color: '#848E9C' }}>
<div className="text-center py-16 text-darkmoon-text-secondary">
<BarChart3 className="w-12 h-12 mx-auto mb-4 opacity-60" />
<div className="text-lg font-semibold mb-2">
{t('noHistoricalData', language)}
Expand Down Expand Up @@ -197,11 +197,8 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
if (active && payload && payload.length) {
const data = payload[0].payload
return (
<div
className="rounded p-3 shadow-xl"
style={{ background: '#1E2329', border: '1px solid #2B3139' }}
>
<div className="text-xs mb-2" style={{ color: '#848E9C' }}>
<div className="rounded p-3 shadow-xl bg-darkmoon-surface border border-darkmoon-border">
<div className="text-xs mb-2 text-darkmoon-text-secondary">
{data.time} - #{data.index}
</div>
{traders.map((trader) => {
Expand All @@ -218,15 +215,13 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
{trader.trader_name}
</div>
<div
className="text-sm mono font-bold"
style={{ color: pnlPct >= 0 ? '#0ECB81' : '#F6465D' }}
className={`text-sm mono font-bold ${
pnlPct >= 0 ? 'text-emerald-500' : 'text-red-500'
}`}
>
{pnlPct >= 0 ? '+' : ''}
{pnlPct.toFixed(2)}%
<span
className="text-xs ml-2 font-normal"
style={{ color: '#848E9C' }}
>
<span className="text-xs ml-2 font-normal text-darkmoon-text-secondary">
({equity?.toFixed(2)} USDT)
</span>
</div>
Expand All @@ -253,27 +248,9 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {

return (
<div>
<div
style={{
borderRadius: '8px',
overflow: 'hidden',
position: 'relative',
}}
>
<div className="rounded-lg overflow-hidden relative">
{/* NOFX Watermark */}
<div
style={{
position: 'absolute',
top: '20px',
right: '20px',
fontSize: '24px',
fontWeight: 'bold',
color: 'rgba(240, 185, 11, 0.15)',
zIndex: 10,
pointerEvents: 'none',
fontFamily: 'monospace',
}}
>
<div className="absolute top-5 right-5 text-2xl font-bold text-darkmoon-gold/15 z-10 pointer-events-none font-mono">
NOFX
</div>
<ResponsiveContainer width="100%" height={520}>
Expand Down Expand Up @@ -305,13 +282,13 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
))}
</defs>

<CartesianGrid strokeDasharray="3 3" stroke="#2B3139" />
<CartesianGrid strokeDasharray="3 3" stroke="#2A2A35" />

<XAxis
dataKey="time"
stroke="#5E6673"
tick={{ fill: '#848E9C', fontSize: 11 }}
tickLine={{ stroke: '#2B3139' }}
tick={{ fill: '#94A3B8', fontSize: 11 }}
tickLine={{ stroke: '#2A2A35' }}
interval={Math.floor(displayData.length / 12)}
angle={-15}
textAnchor="end"
Expand All @@ -320,8 +297,8 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {

<YAxis
stroke="#5E6673"
tick={{ fill: '#848E9C', fontSize: 12 }}
tickLine={{ stroke: '#2B3139' }}
tick={{ fill: '#94A3B8', fontSize: 12 }}
tickLine={{ stroke: '#2A2A35' }}
domain={calculateYDomain()}
tickFormatter={(value) => `${value.toFixed(1)}%`}
width={60}
Expand All @@ -336,7 +313,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
strokeWidth={1.5}
label={{
value: 'Break Even',
fill: '#848E9C',
fill: '#94A3B8',
fontSize: 11,
position: 'right',
}}
Expand Down Expand Up @@ -391,75 +368,40 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
</div>

{/* Stats */}
<div
className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 pt-5"
style={{ borderTop: '1px solid #2B3139' }}
>
<div
className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50"
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
>
<div
className="text-xs mb-1 uppercase tracking-wider"
style={{ color: '#848E9C' }}
>
<div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 pt-5 border-t border-darkmoon-border">
<div className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50 bg-darkmoon-gold/5">
<div className="text-xs mb-1 uppercase tracking-wider text-darkmoon-text-secondary">
{t('comparisonMode', language)}
</div>
<div
className="text-sm md:text-base font-bold"
style={{ color: '#EAECEF' }}
>
<div className="text-sm md:text-base font-bold text-darkmoon-text-primary">
PnL %
</div>
</div>
<div
className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50"
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
>
<div
className="text-xs mb-1 uppercase tracking-wider"
style={{ color: '#848E9C' }}
>
<div className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50 bg-darkmoon-gold/5">
<div className="text-xs mb-1 uppercase tracking-wider text-darkmoon-text-secondary">
{t('dataPoints', language)}
</div>
<div
className="text-sm md:text-base font-bold mono"
style={{ color: '#EAECEF' }}
>
<div className="text-sm md:text-base font-bold mono text-darkmoon-text-primary">
{t('count', language, { count: combinedData.length })}
</div>
</div>
<div
className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50"
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
>
<div
className="text-xs mb-1 uppercase tracking-wider"
style={{ color: '#848E9C' }}
>
<div className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50 bg-darkmoon-gold/5">
<div className="text-xs mb-1 uppercase tracking-wider text-darkmoon-text-secondary">
{t('currentGap', language)}
</div>
<div
className="text-sm md:text-base font-bold mono"
style={{ color: currentGap > 1 ? '#F0B90B' : '#EAECEF' }}
className={`text-sm md:text-base font-bold mono ${
currentGap > 1 ? 'text-darkmoon-gold' : 'text-darkmoon-text-primary'
}`}
>
{currentGap.toFixed(2)}%
</div>
</div>
<div
className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50"
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
>
<div
className="text-xs mb-1 uppercase tracking-wider"
style={{ color: '#848E9C' }}
>
<div className="p-2 md:p-3 rounded transition-all hover:bg-opacity-50 bg-darkmoon-gold/5">
<div className="text-xs mb-1 uppercase tracking-wider text-darkmoon-text-secondary">
{t('displayRange', language)}
</div>
<div
className="text-sm md:text-base font-bold mono"
style={{ color: '#EAECEF' }}
>
<div className="text-sm md:text-base font-bold mono text-darkmoon-text-primary">
{combinedData.length > MAX_DISPLAY_POINTS
? `${t('recent', language)} ${MAX_DISPLAY_POINTS}`
: t('allData', language)}
Expand Down
Loading