Redesign the UI after the fitness reference and replace the logo
Light sage-to-cream ambient backdrop, frosted glass controls and painted SceneArt landscapes in place of photography. Home becomes a dashboard with a two-tone greeting, a frosted summary ring, category portraits, an up-next rail of image-led cards and a floating glass tab bar. The routine library gets an image header and painted cards; the player gets a scene stage, steps on an arc, a dotted clock and a night pill with a lime spark. Goals become painted cards in their own colour. New logo: a lime sun resting on a ground line under two arcs. The splash raises the sun and lights the arcs; launcher icons and native splash are regenerated to match. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KhQh614DMeYoQEH9SoMRUw
This commit is contained in:
104
frontend/lib/Grounded/designs/GlassSurface.dart
Normal file
104
frontend/lib/Grounded/designs/GlassSurface.dart
Normal file
@@ -0,0 +1,104 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../utils/Colors.dart';
|
||||
|
||||
/// Frosted glass: the background blurred through a translucent white panel
|
||||
/// with a bright hairline edge. Controls and floating chrome are built from it.
|
||||
class GlassSurface extends StatelessWidget {
|
||||
final Widget child;
|
||||
|
||||
final BorderRadius radius;
|
||||
|
||||
final EdgeInsets padding;
|
||||
|
||||
final Color? tint;
|
||||
|
||||
/// Over a dark or coloured stage the panel goes smoky instead of milky.
|
||||
final bool onDark;
|
||||
|
||||
final double blur;
|
||||
|
||||
const GlassSurface({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.radius = const BorderRadius.all(Radius.circular(20)),
|
||||
this.padding = EdgeInsets.zero,
|
||||
this.tint,
|
||||
this.onDark = false,
|
||||
this.blur = 18,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRRect(
|
||||
borderRadius: radius,
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
|
||||
child: Container(
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
color: tint ??
|
||||
(onDark ? colorWhite.withValues(alpha: 0.16) : colorGlass),
|
||||
borderRadius: radius,
|
||||
border: Border.all(
|
||||
color: onDark
|
||||
? colorWhite.withValues(alpha: 0.22)
|
||||
: colorGlassBorder,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A round frosted control — back, close, bell, more.
|
||||
Widget glassCircle(
|
||||
IconData icon,
|
||||
VoidCallback onTap, {
|
||||
double size = 42,
|
||||
bool onDark = false,
|
||||
bool dotted = false,
|
||||
Color? dotColor,
|
||||
}) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
GlassSurface(
|
||||
onDark: onDark,
|
||||
radius: BorderRadius.circular(size),
|
||||
child: SizedBox(
|
||||
width: size,
|
||||
height: size,
|
||||
child: Icon(
|
||||
icon,
|
||||
size: size * 0.42,
|
||||
color: onDark ? colorWhite : colorInk,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (dotted)
|
||||
Positioned(
|
||||
top: 2,
|
||||
right: 2,
|
||||
child: Container(
|
||||
width: 10,
|
||||
height: 10,
|
||||
decoration: BoxDecoration(
|
||||
color: dotColor ?? colorAccent,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: colorWhite, width: 1.5),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user