From 133a6a974c383cc670250f18c275c6d11ba9ed40 Mon Sep 17 00:00:00 2001 From: v0 Date: Sun, 24 May 2026 09:50:56 +0000 Subject: [PATCH 1/2] feat: add "Coming Soon" page with animated gradient and selectors Create "Coming Soon" page with animated background and language selector. Co-authored-by: LCSOGthb <185141600+LCSOGthb@users.noreply.github.com> --- app/globals.css | 309 ++++++++++++++++++++-------------------- app/layout.tsx | 20 +-- app/page.tsx | 140 +++++++----------- components/GameCard.tsx | 34 ++--- 4 files changed, 233 insertions(+), 270 deletions(-) diff --git a/app/globals.css b/app/globals.css index d740fcc..db744f1 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,19 +1,14 @@ -@import "tailwindcss"; +@import 'tailwindcss'; :root { - --bg-base: #09090b; - --bg-surface: #18181b; - --bg-elevated: #27272a; - --text-primary: #fafafa; - --text-secondary: #a1a1aa; - --text-muted: #71717a; - --border-default: #3f3f46; - --border-subtle: #27272a; - --accent-blue: #3b82f6; - --accent-blue-hover: #2563eb; - --accent-blue-active: #1d4ed8; - --accent-violet: #8b5cf6; - --focus-ring: #60a5fa; + --bg-base: #0a0a0f; + --bg-surface: rgba(255, 255, 255, 0.05); + --bg-card: rgba(255, 255, 255, 0.08); + --text-primary: #ffffff; + --text-secondary: rgba(255, 255, 255, 0.7); + --border-default: rgba(255, 255, 255, 0.12); + --border-hover: rgba(255, 255, 255, 0.2); + --focus-ring: rgba(255, 255, 255, 0.5); } * { @@ -22,182 +17,210 @@ box-sizing: border-box; } +html, body { + height: 100%; + overflow: hidden; +} + html { background-color: var(--bg-base); color-scheme: dark; - scroll-behavior: smooth; } body { color: var(--text-primary); background-color: var(--bg-base); - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - Roboto, - "Helvetica Neue", - sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================== - TYPOGRAPHY HIERARCHY + ANIMATED GRADIENT BACKGROUND ======================================== */ -h1 { - font-size: 2rem; - font-weight: 700; - letter-spacing: -0.025em; - line-height: 1.2; - color: var(--text-primary); -} - -@media (min-width: 640px) { - h1 { - font-size: 2.5rem; +.animated-gradient { + position: fixed; + inset: 0; + z-index: 0; + background: linear-gradient( + 135deg, + #0a0a0f 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #0a0a0f 100% + ); + background-size: 400% 400%; + animation: gradientShift 15s ease infinite; +} + +@keyframes gradientShift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; } } -h2 { - font-size: 1.25rem; - font-weight: 600; - letter-spacing: -0.01em; - line-height: 1.3; - color: var(--text-primary); +/* Subtle overlay for depth */ +.animated-gradient::after { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient( + ellipse at center, + transparent 0%, + rgba(0, 0, 0, 0.3) 100% + ); + pointer-events: none; } -h3 { - font-size: 1.125rem; - font-weight: 600; - line-height: 1.4; - color: var(--text-primary); -} +/* ======================================== + CARD STYLING + ======================================== */ -p { - color: var(--text-secondary); - line-height: 1.65; +.coming-soon-card { + position: relative; + background: var(--bg-card); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--border-default); + border-radius: 1.5rem; + padding: 3rem 4rem; + text-align: center; + box-shadow: + 0 25px 50px -12px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.05) inset; +} + +@media (max-width: 640px) { + .coming-soon-card { + padding: 2rem 1.5rem; + margin: 0 1rem; + border-radius: 1rem; + } } /* ======================================== - FOCUS & ACCESSIBILITY + TYPOGRAPHY ======================================== */ -:focus-visible { - outline: 2px solid var(--focus-ring); - outline-offset: 2px; +.coming-soon-title { + font-size: 3rem; + font-weight: 700; + letter-spacing: -0.025em; + line-height: 1.1; + color: var(--text-primary); + margin-bottom: 0.75rem; } -button:focus-visible, -a:focus-visible, -input:focus-visible, -select:focus-visible, -textarea:focus-visible { - outline: 2px solid var(--focus-ring); - outline-offset: 2px; +@media (max-width: 640px) { + .coming-soon-title { + font-size: 2rem; + } +} + +.coming-soon-subtitle { + font-size: 1.125rem; + color: var(--text-secondary); + font-weight: 400; +} + +@media (max-width: 640px) { + .coming-soon-subtitle { + font-size: 1rem; + } } /* ======================================== - INTERACTIVE ELEMENTS + LANGUAGE SELECTOR ======================================== */ -button, -a, -input, -select, -textarea { - transition: all 0.15s ease-in-out; +.language-selector { + position: relative; + display: inline-block; } -/* Primary Button Base */ -.btn-primary { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.625rem 1rem; - font-size: 0.875rem; - font-weight: 600; - color: white; - background-color: var(--accent-blue); - border: none; +.language-selector select { + appearance: none; + background: var(--bg-surface); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--border-default); border-radius: 0.5rem; + padding: 0.5rem 2.25rem 0.5rem 0.875rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--text-primary); cursor: pointer; transition: all 0.15s ease-in-out; + min-width: 100px; } -.btn-primary:hover { - background-color: var(--accent-blue-hover); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); +.language-selector select:hover { + border-color: var(--border-hover); + background: rgba(255, 255, 255, 0.08); } -.btn-primary:active { - background-color: var(--accent-blue-active); - transform: translateY(0); - box-shadow: none; +.language-selector select:focus { + outline: none; + border-color: var(--focus-ring); + box-shadow: 0 0 0 2px var(--focus-ring); } -.btn-primary:focus-visible { - outline: 2px solid var(--focus-ring); - outline-offset: 2px; -} - -/* ======================================== - CARD / PANEL STYLING - ======================================== */ - -.card { - background-color: var(--bg-surface); - border: 1px solid var(--border-subtle); - border-radius: 0.75rem; - overflow: hidden; - transition: all 0.2s ease-in-out; +.language-selector select:focus-visible { + outline: none; + border-color: var(--focus-ring); + box-shadow: 0 0 0 2px var(--focus-ring); } -.card:hover { - border-color: var(--border-default); - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.05); - transform: translateY(-2px); +.language-selector::after { + content: ''; + position: absolute; + right: 0.75rem; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid var(--text-secondary); + pointer-events: none; } /* ======================================== - HEADER / NAVIGATION + VERSION LABEL ======================================== */ -.site-header { - background-color: rgba(24, 24, 27, 0.85); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-bottom: 1px solid var(--border-subtle); - position: sticky; - top: 0; - z-index: 50; +.version-label { + position: fixed; + bottom: 1.25rem; + right: 1.5rem; + z-index: 10; + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.02em; + color: #ffffff; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ======================================== - BADGE / TAG STYLING + FOCUS & ACCESSIBILITY ======================================== */ -.badge { - display: inline-flex; - align-items: center; - padding: 0.25rem 0.625rem; - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 0.01em; - border-radius: 0.375rem; - background-color: var(--accent-violet); - color: white; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +:focus-visible { + outline: 2px solid var(--focus-ring); + outline-offset: 2px; } /* ======================================== - SKIP LINK (Accessibility) + SKIP LINK ======================================== */ .skip-link { @@ -208,7 +231,7 @@ textarea { padding: 0.75rem 1rem; font-weight: 600; color: white; - background-color: var(--accent-blue); + background-color: #3b82f6; border-radius: 0.5rem; text-decoration: none; } @@ -216,27 +239,3 @@ textarea { .skip-link:focus { top: 1rem; } - -/* ======================================== - UTILITY CLASSES - ======================================== */ - -.text-muted { - color: var(--text-secondary); -} - -.text-subtle { - color: var(--text-muted); -} - -.bg-base { - background-color: var(--bg-base); -} - -.bg-surface { - background-color: var(--bg-surface); -} - -.bg-elevated { - background-color: var(--bg-elevated); -} diff --git a/app/layout.tsx b/app/layout.tsx index d628f0d..f07c031 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,25 +1,25 @@ -import type { Metadata, Viewport } from "next"; -import "./globals.css"; +import type { Metadata, Viewport } from 'next' +import './globals.css' export const metadata: Metadata = { - title: "Game Collection", - description: "Discover our selection of fun and challenging games to play", -}; + title: 'Coming Soon', + description: 'Something amazing is on the way', +} export const viewport: Viewport = { - themeColor: "#09090b", - width: "device-width", + themeColor: '#09090b', + width: 'device-width', initialScale: 1, -}; +} export default function RootLayout({ children, }: { - children: React.ReactNode; + children: React.ReactNode }) { return ( {children} - ); + ) } diff --git a/app/page.tsx b/app/page.tsx index 9420343..8f8b7fb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,104 +1,68 @@ -import GameCard from "@/components/GameCard"; +'use client' -const games = [ - { - id: 1, - title: "Chess Master", - description: "Play chess against AI or friends online in real time.", - image: "/placeholder.svg?height=200&width=300", - category: "Strategy", - }, - { - id: 2, - title: "Quick Quiz", - description: "Test your knowledge with fun trivia questions.", - image: "/placeholder.svg?height=200&width=300", - category: "Trivia", - }, - { - id: 3, - title: "Memory Match", - description: "Challenge your memory with this classic card-matching game.", - image: "/placeholder.svg?height=200&width=300", - category: "Puzzle", - }, - { - id: 4, - title: "Snake Game", - description: "Eat food, grow longer, and avoid running into yourself.", - image: "/placeholder.svg?height=200&width=300", - category: "Arcade", - }, - { - id: 5, - title: "Word Builder", - description: "Create as many words as you can from scrambled letters.", - image: "/placeholder.svg?height=200&width=300", - category: "Word", +import { useState } from 'react' + +const translations = { + en: { + title: 'Coming Soon', + subtitle: 'Something amazing is on the way', + language: 'English', }, - { - id: 6, - title: "Puzzle Solver", - description: "Solve challenging jigsaw puzzles of increasing difficulty.", - image: "/placeholder.svg?height=200&width=300", - category: "Puzzle", + zh: { + title: '即将上线', + subtitle: '精彩内容即将呈现', + language: '中文', }, -]; +} + +type Language = keyof typeof translations export default function Home() { + const [lang, setLang] = useState('en') + const t = translations[lang] + return ( <> - - Skip to game list + + Skip to main content -
-
-

Game Collection

-

- Discover our selection of fun and challenging games to play -

-
-
- -
-
-
-
-

- All Games -

- - {games.length} games available - -
+ {/* Animated gradient background */} +
+ {/* Language selector - top right */} +
+
+ +
-
+ -
-
-

- Game Collection - Built with Next.js -

+
+

{t.title}

+

{t.subtitle}

-
+ + + {/* Version label - bottom right */} +
+ Version: 0.1 Beta +
- ); + ) } diff --git a/components/GameCard.tsx b/components/GameCard.tsx index 791aa32..ddafdca 100644 --- a/components/GameCard.tsx +++ b/components/GameCard.tsx @@ -1,13 +1,13 @@ -"use client"; +'use client' interface GameCardProps { game: { - id: number; - title: string; - description: string; - image: string; - category: string; - }; + id: number + title: string + description: string + image: string + category: string + } } export default function GameCard({ game }: GameCardProps) { @@ -17,16 +17,16 @@ export default function GameCard({ game }: GameCardProps) { aria-label={`${game.title} — ${game.category} game`} > {/* Image Container */} -
{`Preview - + {/* Category badge */} {/* Content */} -
-

{game.title}

Category: {game.category}

-

{game.description}

@@ -65,5 +65,5 @@ export default function GameCard({ game }: GameCardProps) {
- ); + ) } From bf9c7839a6da98da6929487e2ae97d6d4c56d7fb Mon Sep 17 00:00:00 2001 From: "deepsource-autofix[bot]" <62050782+deepsource-autofix[bot]@users.noreply.github.com> Date: Sun, 24 May 2026 09:51:46 +0000 Subject: [PATCH 2/2] style: format code with Autopep8, Black, ClangFormat, dotnet-format, isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf This commit fixes the style issues introduced in 133a6a9 according to the output from Autopep8, Black, ClangFormat, dotnet-format, isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf. Details: https://github.com/LCSOGthb/Games/pull/49 --- app/globals.css | 20 ++++++++++++++------ app/layout.tsx | 20 ++++++++++---------- app/page.tsx | 26 +++++++++++++------------- components/GameCard.tsx | 34 +++++++++++++++++----------------- 4 files changed, 54 insertions(+), 46 deletions(-) diff --git a/app/globals.css b/app/globals.css index db744f1..4ced902 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,4 +1,4 @@ -@import 'tailwindcss'; +@import "tailwindcss"; :root { --bg-base: #0a0a0f; @@ -17,7 +17,8 @@ box-sizing: border-box; } -html, body { +html, +body { height: 100%; overflow: hidden; } @@ -30,7 +31,14 @@ html { body { color: var(--text-primary); background-color: var(--bg-base); - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -70,7 +78,7 @@ body { /* Subtle overlay for depth */ .animated-gradient::after { - content: ''; + content: ""; position: absolute; inset: 0; background: radial-gradient( @@ -94,7 +102,7 @@ body { border-radius: 1.5rem; padding: 3rem 4rem; text-align: center; - box-shadow: + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } @@ -181,7 +189,7 @@ body { } .language-selector::after { - content: ''; + content: ""; position: absolute; right: 0.75rem; top: 50%; diff --git a/app/layout.tsx b/app/layout.tsx index f07c031..8f8ee1b 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,25 +1,25 @@ -import type { Metadata, Viewport } from 'next' -import './globals.css' +import type { Metadata, Viewport } from "next"; +import "./globals.css"; export const metadata: Metadata = { - title: 'Coming Soon', - description: 'Something amazing is on the way', -} + title: "Coming Soon", + description: "Something amazing is on the way", +}; export const viewport: Viewport = { - themeColor: '#09090b', - width: 'device-width', + themeColor: "#09090b", + width: "device-width", initialScale: 1, -} +}; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( {children} - ) + ); } diff --git a/app/page.tsx b/app/page.tsx index 8f8b7fb..fd760a5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,25 +1,25 @@ -'use client' +"use client"; -import { useState } from 'react' +import { useState } from "react"; const translations = { en: { - title: 'Coming Soon', - subtitle: 'Something amazing is on the way', - language: 'English', + title: "Coming Soon", + subtitle: "Something amazing is on the way", + language: "English", }, zh: { - title: '即将上线', - subtitle: '精彩内容即将呈现', - language: '中文', + title: "即将上线", + subtitle: "精彩内容即将呈现", + language: "中文", }, -} +}; -type Language = keyof typeof translations +type Language = keyof typeof translations; export default function Home() { - const [lang, setLang] = useState('en') - const t = translations[lang] + const [lang, setLang] = useState("en"); + const t = translations[lang]; return ( <> @@ -64,5 +64,5 @@ export default function Home() { Version: 0.1 Beta - ) + ); } diff --git a/components/GameCard.tsx b/components/GameCard.tsx index ddafdca..791aa32 100644 --- a/components/GameCard.tsx +++ b/components/GameCard.tsx @@ -1,13 +1,13 @@ -'use client' +"use client"; interface GameCardProps { game: { - id: number - title: string - description: string - image: string - category: string - } + id: number; + title: string; + description: string; + image: string; + category: string; + }; } export default function GameCard({ game }: GameCardProps) { @@ -17,16 +17,16 @@ export default function GameCard({ game }: GameCardProps) { aria-label={`${game.title} — ${game.category} game`} > {/* Image Container */} -
{`Preview - + {/* Category badge */} {/* Content */} -
-

{game.title}

Category: {game.category}

-

{game.description}

@@ -65,5 +65,5 @@ export default function GameCard({ game }: GameCardProps) {
- ) + ); }