RideAware/landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add development status on landing page

Browse Source
This commit is contained in:
Blake Ridgway
2025-11-23 08:41:19 -06:00
parent ac1d18f3a3
commit 97eec653fb
3 changed files with 650 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
scripts/build.sh Executable file
View File

@@ -0,0 +1,174 @@
#!/bin/bash
set -e
# Colors for output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color
# Default values
IMAGE_NAME="rideaware-landing"
IMAGE_TAG="latest"
NO_CACHE=false
RUN_CONTAINER=false
CONTAINER_NAME="rideaware-landing"
# Help function
show_help() {
cat << EOF
Usage: $0 [OPTIONS]
OPTIONS:
-t, --tag TAG Image tag (default: latest)
-n, --name NAME Image name (default: rideaware-landing)
-r, --run Run container after build
-c, --container NAME Container name when running (default: rideaware-landing)
--no-cache Build without cache
-h, --help Show this help message
EXAMPLES:
$0 # Build as rideaware:latest
$0 -t v1.0 # Build as rideaware:v1.0
$0 -t dev --run # Build and run
$0 --no-cache -t prod # Build without cache as rideaware:prod
EOF
exit 0
}
# Parse arguments
while [[ $# -gt 0 ]]; do
case $1 in
-t|--tag)
IMAGE_TAG="$2"
shift 2
;;
-n|--name)
IMAGE_NAME="$2"
shift 2
;;
-r|--run)
RUN_CONTAINER=true
shift
;;
-c|--container)
CONTAINER_NAME="$2"
shift 2
;;
--no-cache)
NO_CACHE=true
shift
;;
-h|--help)
show_help
;;
*)
echo -e "${RED}Unknown option: $1${NC}"
show_help
;;
esac
done
FULL_IMAGE="$IMAGE_NAME:$IMAGE_TAG"
BUILD_ARGS=""
if [ "$NO_CACHE" = true ]; then
BUILD_ARGS="--no-cache"
fi
# Function to stop and remove container
cleanup_container() {
local name=$1
if podman ps -a --format "{{.Names}}" | grep -q "^${name}\$"; then
echo -e "${YELLOW}Removing existing container: $name${NC}"
# Stop if running
if podman ps --format "{{.Names}}" | grep -q "^${name}\$"; then
echo " Stopping container..."
podman kill "$name" 2>/dev/null || true
fi
# Remove
echo " Removing container..."
if podman rm "$name" 2>/dev/null; then
echo -e "${GREEN} ✓ Container removed${NC}"
else
echo -e "${RED} ✗ Failed to remove container${NC}"
return 1
fi
fi
return 0
}
echo -e "${BLUE}╔════════════════════════════════════════╗${NC}"
echo -e "${BLUE}║ Building Podman Image ║${NC}"
echo -e "${BLUE}╚════════════════════════════════════════╝${NC}"
echo -e "${YELLOW}Image: $FULL_IMAGE${NC}"
echo ""
if ! podman build $BUILD_ARGS -f Containerfile -t "$FULL_IMAGE" .; then
echo -e "${RED}✗ Build failed${NC}"
exit 1
fi
echo -e "${GREEN}✓ Image built successfully${NC}"
echo ""
# Show image info
echo -e "${BLUE}╔════════════════════════════════════════╗${NC}"
echo -e "${BLUE}║ Image Details ║${NC}"
echo -e "${BLUE}╚════════════════════════════════════════╝${NC}"
podman images "$IMAGE_NAME:$IMAGE_TAG" \
--format "table {{.Repository}}:{{.Tag}}\t{{.Size}}\t{{.Created}}"
echo ""
if [ "$RUN_CONTAINER" = true ]; then
echo -e "${BLUE}╔════════════════════════════════════════╗${NC}"
echo -e "${BLUE}║ Starting Container ║${NC}"
echo -e "${BLUE}╚════════════════════════════════════════╝${NC}"
# Cleanup existing container
if ! cleanup_container "$CONTAINER_NAME"; then
echo -e "${RED}✗ Failed to clean up existing container${NC}"
exit 1
fi
echo ""
echo "Starting new container: $CONTAINER_NAME"
if podman run -d \
--name "$CONTAINER_NAME" \
-p 5000:5000 \
--env-file .env \
"$FULL_IMAGE"; then
echo -e "${GREEN}✓ Container running: $CONTAINER_NAME${NC}"
echo ""
# Wait for startup
sleep 2
echo -e "${YELLOW}Container logs:${NC}"
podman logs "$CONTAINER_NAME"
echo ""
echo -e "${GREEN}Site available at: http://localhost:5000${NC}"
echo -e "${YELLOW}To view logs: podman logs -f $CONTAINER_NAME${NC}"
echo -e "${YELLOW}To stop: podman kill $CONTAINER_NAME${NC}"
else
echo -e "${RED}✗ Failed to start container${NC}"
exit 1
fi
else
echo -e "${YELLOW}To run the container:${NC}"
echo " podman run -d --name $CONTAINER_NAME -p 5000:5000 --env-file .env $FULL_IMAGE"
echo ""
echo -e "${YELLOW}Or use this script with --run:${NC}"
echo " $0 -t $IMAGE_TAG --run"
fi
echo ""
echo -e "${GREEN}✓ Done!${NC}"

479
static/css/styles.css
View File

@@ -24,6 +24,7 @@
--shadow: 0 10px 30px rgba(30, 78, 156, 0.1); --shadow: 0 10px 30px rgba(30, 78, 156, 0.1);
--shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15); --shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15);
--navbar-height: 64px; --navbar-height: 64px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
html { html {
@@ -31,11 +32,13 @@ html {
} }
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.7; line-height: 1.7;
color: var(--text-dark); color: var(--text-dark);
overflow-x: hidden; overflow-x: hidden;
background: #fff; background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
/* ======================= /* =======================
@@ -50,7 +53,7 @@ body {
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
z-index: 1000; z-index: 1000;
padding: 1rem 0; padding: 1rem 0;
transition: all 0.3s ease; transition: var(--transition);
border-bottom: 1px solid rgba(2, 6, 23, 0.04); border-bottom: 1px solid rgba(2, 6, 23, 0.04);
min-height: var(--navbar-height); min-height: var(--navbar-height);
font-size: 1rem; font-size: 1rem;
@@ -58,6 +61,11 @@ body {
letter-spacing: 0; letter-spacing: 0;
} }
.navbar.scrolled {
box-shadow: var(--shadow);
background: rgba(255, 255, 255, 0.98);
}
.nav-container { .nav-container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
@@ -136,9 +144,9 @@ body {
height: 42px; height: 42px;
border: 1px solid rgba(2, 6, 23, 0.08); border: 1px solid rgba(2, 6, 23, 0.08);
border-radius: 10px; border-radius: 10px;
background: #ffffff; background: var(--white);
cursor: pointer; cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.2s ease; transition: var(--transition);
} }
.nav-toggle:hover { .nav-toggle:hover {
@@ -190,7 +198,7 @@ body {
.hero-content h1 { .hero-content h1 {
font-size: clamp(2.5rem, 5vw, 4rem); font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800; font-weight: 800;
color: #fff; color: var(--white);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
line-height: 1.2; line-height: 1.2;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
@@ -209,20 +217,55 @@ body {
padding: 2rem; padding: 2rem;
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
} }
.cta-section h3 { .cta-section h3 {
color: #fff; color: var(--white);
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: 600; font-weight: 600;
} }
.cta-section p { .cta-section > p {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1rem;
} }
/* Beta Badge */
.beta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 10px 16px;
border-radius: 50px;
margin-bottom: 20px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
}
.badge-icon {
font-size: 16px;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Email Form */
.email-form { .email-form {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@@ -234,19 +277,25 @@ body {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font-size: 1rem; font-size: 1rem;
outline: none; outline: none;
transition: all 0.3s ease; transition: var(--transition);
color: var(--text-dark);
}
.email-input::placeholder {
color: rgba(26, 26, 26, 0.5);
} }
.email-input:focus { .email-input:focus {
background: #fff; background: var(--white);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
} }
.notify-btn { .notify-btn,
.dev-btn {
padding: 1rem 2rem; padding: 1rem 2rem;
background: var(--white); background: var(--white);
color: var(--primary); color: var(--primary);
@@ -254,38 +303,56 @@ body {
border-radius: 50px; border-radius: 50px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: var(--transition);
white-space: nowrap; white-space: nowrap;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
} }
.notify-btn:hover { .notify-btn:hover,
transform: translateY(-2px); .dev-btn:hover {
box-shadow: var(--shadow-hover); transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
} }
.countdown { .notify-btn:active,
display: grid; .dev-btn:active {
grid-template-columns: repeat(4, 1fr); transform: translateY(-1px);
gap: 1rem;
margin-top: 1rem;
} }
.countdown-item { /* Beta Notice */
.beta-notice {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
border-left: 4px solid rgba(255, 193, 7, 0.6);
border-radius: 12px;
padding: 16px;
margin-top: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.beta-notice p {
margin: 0;
line-height: 1.6;
}
/* Dev Access Button */
.dev-access-button {
margin-top: 25px;
text-align: center; text-align: center;
color: #fff;
} }
.countdown-number { .dev-btn {
font-size: 2rem; display: inline-flex;
font-weight: 700; align-items: center;
display: block; gap: 10px;
text-decoration: none;
background: var(--white);
color: var(--primary);
} }
.countdown-label { .dev-btn-icon {
font-size: 0.875rem; font-size: 18px;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
} }
/* Phone mockup */ /* Phone mockup */
@@ -332,7 +399,7 @@ body {
} }
.app-interface { .app-interface {
color: #fff; color: var(--white);
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -355,6 +422,7 @@ body {
height: 32px; height: 32px;
display: block; display: block;
border-radius: 6px; border-radius: 6px;
background: rgba(255, 255, 255, 0.2);
} }
.app-logo { .app-logo {
@@ -362,7 +430,7 @@ body {
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
letter-spacing: -0.5px; letter-spacing: -0.5px;
color: #ffffff; color: var(--white);
} }
.screen .stats-grid { .screen .stats-grid {
@@ -386,7 +454,7 @@ body {
.screen .stat-number { .screen .stat-number {
font-size: 1.8rem !important; font-size: 1.8rem !important;
font-weight: 900 !important; font-weight: 900 !important;
color: #ffffff !important; color: var(--white) !important;
margin-bottom: 0.4rem !important; margin-bottom: 0.4rem !important;
display: block !important; display: block !important;
text-shadow: none !important; text-shadow: none !important;
@@ -399,7 +467,7 @@ body {
font-weight: 600 !important; font-weight: 600 !important;
text-transform: uppercase !important; text-transform: uppercase !important;
letter-spacing: 0.8px !important; letter-spacing: 0.8px !important;
color: #ffffff !important; color: var(--white) !important;
display: block !important; display: block !important;
opacity: 1 !important; opacity: 1 !important;
} }
@@ -409,7 +477,7 @@ body {
======================= */ ======================= */
.features { .features {
padding: 6rem 0; padding: 6rem 0;
background: var(--bg-light); background: var(--white);
position: relative; position: relative;
} }
@@ -449,11 +517,11 @@ body {
} }
.feature-card { .feature-card {
background: #fff; background: var(--white);
padding: 2.5rem; padding: 2.5rem;
border-radius: 20px; border-radius: 20px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: all 0.3s ease; transition: var(--transition);
border: 1px solid rgba(30, 78, 156, 0.05); border: 1px solid rgba(30, 78, 156, 0.05);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -472,6 +540,7 @@ body {
.feature-card:hover { .feature-card:hover {
transform: translateY(-10px); transform: translateY(-10px);
box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
border-color: rgba(30, 78, 156, 0.15);
} }
.feature-icon { .feature-icon {
@@ -483,7 +552,7 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: #fff; color: var(--white);
font-size: 1.5rem; font-size: 1.5rem;
} }
@@ -543,7 +612,7 @@ body {
margin: 0 auto 1rem; margin: 0 auto 1rem;
border-radius: 16px; border-radius: 16px;
background: var(--gradient); background: var(--gradient);
color: #fff; color: var(--white);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -576,17 +645,18 @@ body {
} }
.newsletter-card { .newsletter-card {
background: #fff; background: var(--white);
border: 1px solid rgba(30, 78, 156, 0.08); border: 1px solid rgba(30, 78, 156, 0.08);
border-radius: 16px; border-radius: 16px;
padding: 1.25rem 1.25rem 1rem; padding: 1.25rem 1.25rem 1rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: var(--transition);
} }
.newsletter-card:hover { .newsletter-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
border-color: rgba(30, 78, 156, 0.15);
} }
.newsletter-header { .newsletter-header {
@@ -601,7 +671,7 @@ body {
height: 44px; height: 44px;
border-radius: 12px; border-radius: 12px;
background: var(--gradient); background: var(--gradient);
color: #fff; color: var(--white);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -616,6 +686,7 @@ body {
.newsletter-info a { .newsletter-info a {
color: var(--text-dark); color: var(--text-dark);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease;
} }
.newsletter-info a:hover { .newsletter-info a:hover {
@@ -641,12 +712,18 @@ body {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
color: #fff; color: var(--white);
background: var(--gradient); background: var(--gradient);
padding: 0.55rem 0.9rem; padding: 0.55rem 0.9rem;
border-radius: 999px; border-radius: 999px;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
transition: var(--transition);
}
.read-more-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
} }
.back-navigation { .back-navigation {
@@ -659,10 +736,14 @@ body {
color: var(--secondary); color: var(--secondary);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: gap 0.3s ease;
} }
.back-link:hover { .back-link:hover {
text-decoration: underline; gap: 0.75rem;
} }
.newsletter-header h1 { .newsletter-header h1 {
@@ -701,7 +782,7 @@ body {
.newsletter-content { .newsletter-content {
margin-top: 1.25rem; margin-top: 1.25rem;
background: #fff; background: var(--white);
border: 1px solid rgba(30, 78, 156, 0.08); border: 1px solid rgba(30, 78, 156, 0.08);
border-radius: 16px; border-radius: 16px;
padding: 1.5rem; padding: 1.5rem;
@@ -749,24 +830,29 @@ body {
border: none; border: none;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
transition: var(--transition);
} }
.action-btn.primary { .action-btn.primary {
background: var(--gradient); background: var(--gradient);
color: #fff; color: var(--white);
} }
.action-btn.secondary { .action-btn.secondary {
background: #f1f5f9; background: var(--bg-light);
color: var(--text-dark); color: var(--text-dark);
} }
.action-btn:hover {
transform: translateY(-2px);
}
/* ======================= /* =======================
Footer Footer
======================= */ ======================= */
.footer { .footer {
background: var(--text-dark); background: var(--text-dark);
color: #fff; color: var(--white);
text-align: center; text-align: center;
padding: 2rem 0; padding: 2rem 0;
} }
@@ -776,7 +862,7 @@ body {
======================= */ ======================= */
.contact-about-page { .contact-about-page {
min-height: 100vh; min-height: 100vh;
background: #fff; background: var(--white);
padding-top: var(--navbar-height); padding-top: var(--navbar-height);
} }
@@ -784,7 +870,7 @@ body {
background: var(--gradient); background: var(--gradient);
padding: 6rem 2rem; padding: 6rem 2rem;
text-align: center; text-align: center;
color: #fff; color: var(--white);
} }
.hero-section h1 { .hero-section h1 {
@@ -843,7 +929,7 @@ body {
} }
.contact-form { .contact-form {
background: #fff; background: var(--white);
border: 1px solid rgba(30, 78, 156, 0.08); border: 1px solid rgba(30, 78, 156, 0.08);
border-radius: 16px; border-radius: 16px;
padding: 2rem; padding: 2rem;
@@ -881,7 +967,9 @@ body {
border-radius: 8px; border-radius: 8px;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
transition: all 0.3s ease; transition: var(--transition);
background: var(--white);
color: var(--text-dark);
} }
.form-group input:focus, .form-group input:focus,
@@ -967,13 +1055,13 @@ body {
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
background: var(--gradient); background: var(--gradient);
color: #fff; color: var(--white);
padding: 1rem 2.5rem; padding: 1rem 2.5rem;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: var(--transition);
font-size: 1rem; font-size: 1rem;
} }
@@ -982,6 +1070,10 @@ body {
box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
} }
.form-submit:active {
transform: translateY(-1px);
}
.form-submit i { .form-submit i {
font-size: 1.1rem; font-size: 1.1rem;
} }
@@ -994,6 +1086,18 @@ body {
border-radius: 8px; border-radius: 8px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
display: none; display: none;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
.form-success.show { .form-success.show {
@@ -1010,18 +1114,19 @@ body {
} }
.info-card { .info-card {
background: #fff; background: var(--white);
border: 1px solid rgba(30, 78, 156, 0.08); border: 1px solid rgba(30, 78, 156, 0.08);
border-radius: 16px; border-radius: 16px;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: all 0.3s ease; transition: var(--transition);
} }
.info-card:hover { .info-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
border-color: rgba(30, 78, 156, 0.15);
} }
.info-card-icon { .info-card-icon {
@@ -1032,7 +1137,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: var(--white);
font-size: 1.5rem; font-size: 1.5rem;
margin: 0 auto 1rem; margin: 0 auto 1rem;
} }
@@ -1052,10 +1157,11 @@ body {
color: var(--secondary); color: var(--secondary);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
transition: color 0.3s ease;
} }
.info-card a:hover { .info-card a:hover {
text-decoration: underline; color: var(--primary);
} }
.team-section { .team-section {
@@ -1087,11 +1193,11 @@ body {
} }
.team-member { .team-member {
background: #fff; background: var(--white);
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: all 0.3s ease; transition: var(--transition);
text-align: center; text-align: center;
} }
@@ -1103,12 +1209,12 @@ body {
.team-member-image { .team-member-image {
width: 100%; width: 100%;
height: 250px; height: 250px;
background: linear-gradient(135deg, var(--primary), var(--secondary)); background: var(--gradient);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 4rem; font-size: 4rem;
color: #fff; color: var(--white);
} }
.team-member-info { .team-member-info {
@@ -1135,7 +1241,7 @@ body {
.values-section { .values-section {
padding: 4rem 2rem; padding: 4rem 2rem;
background: #fff; background: var(--white);
} }
.values-grid { .values-grid {
@@ -1147,18 +1253,19 @@ body {
} }
.value-card { .value-card {
background: #fff; background: var(--white);
border: 1px solid rgba(30, 78, 156, 0.08); border: 1px solid rgba(30, 78, 156, 0.08);
border-radius: 16px; border-radius: 16px;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: all 0.3s ease; transition: var(--transition);
} }
.value-card:hover { .value-card:hover {
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
border-color: rgba(30, 78, 156, 0.15);
} }
.value-icon { .value-icon {
@@ -1169,7 +1276,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: var(--white);
font-size: 1.5rem; font-size: 1.5rem;
margin: 0 auto 1rem; margin: 0 auto 1rem;
} }
@@ -1207,15 +1314,20 @@ body {
.stat-box { .stat-box {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
background: #fff; background: var(--white);
border-radius: 16px; border-radius: 16px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: var(--transition);
}
.stat-box:hover {
transform: translateY(-4px);
} }
.stat-number { .stat-number {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 700; font-weight: 700;
color: #1e4e9c; color: var(--primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -1226,7 +1338,7 @@ body {
.faq-section { .faq-section {
padding: 4rem 2rem; padding: 4rem 2rem;
background: #fff; background: var(--white);
} }
.faq-container { .faq-container {
@@ -1239,13 +1351,14 @@ body {
border-radius: 12px; border-radius: 12px;
margin-bottom: 1rem; margin-bottom: 1rem;
overflow: hidden; overflow: hidden;
background: #fff; background: var(--white);
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: all 0.3s ease; transition: var(--transition);
} }
.faq-item.open { .faq-item.open {
box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
border-color: rgba(30, 78, 156, 0.15);
} }
.faq-question { .faq-question {
@@ -1255,6 +1368,7 @@ body {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: background 0.3s ease; transition: background 0.3s ease;
user-select: none;
} }
.faq-question:hover { .faq-question:hover {
@@ -1300,6 +1414,141 @@ body {
justify-content: center; justify-content: center;
} }
/* =======================
Development Status Section (Improved)
======================= */
.development-status {
padding: 60px 20px;
background: linear-gradient(135deg, #f8fafc 0%, #f0f4f9 100%);
border-top: 1px solid rgba(51, 124, 242, 0.1);
}
.status-container {
max-width: 1000px;
margin: 0 auto;
}
.development-status h2 {
font-size: 32px;
color: var(--text-dark);
margin-bottom: 15px;
text-align: center;
font-weight: 700;
}
.status-intro {
font-size: 16px;
color: var(--text-light);
text-align: center;
margin-bottom: 40px;
line-height: 1.7;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.status-item {
background: var(--white);
border-radius: 12px;
padding: 25px;
border: 1px solid rgba(51, 124, 242, 0.1);
position: relative;
transition: var(--transition);
}
.status-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: rgba(51, 124, 242, 0.2);
}
.status-badge {
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 6px;
margin-bottom: 15px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.status-item.ready .status-badge {
background: rgba(76, 175, 80, 0.15);
color: #2e7d32;
}
.status-item.in-progress .status-badge {
background: rgba(255, 193, 7, 0.15);
color: #f57f17;
}
.status-item.planned .status-badge {
background: rgba(51, 124, 242, 0.15);
color: var(--primary);
}
.status-item h4 {
color: var(--text-dark);
font-size: 16px;
margin: 0 0 8px 0;
font-weight: 600;
}
.status-item p {
color: var(--text-light);
font-size: 14px;
margin: 0;
line-height: 1.6;
}
.feedback-cta {
background: var(--white);
border: 2px solid rgba(51, 124, 242, 0.2);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: var(--transition);
}
.feedback-cta:hover {
border-color: rgba(51, 124, 242, 0.4);
box-shadow: var(--shadow);
}
.feedback-cta h3 {
color: var(--text-dark);
font-size: 20px;
margin: 0 0 12px 0;
font-weight: 700;
}
.feedback-cta p {
color: var(--text-light);
font-size: 15px;
margin: 0;
line-height: 1.7;
}
.feedback-cta a {
color: var(--secondary);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.feedback-cta a:hover {
color: var(--primary);
text-decoration: underline;
}
/* ======================= /* =======================
Article layout for newsletter detail Article layout for newsletter detail
======================= */ ======================= */
@@ -1319,7 +1568,7 @@ body {
} }
.article-meta { .article-meta {
background: #fff; background: var(--white);
border: 1px solid rgba(30, 78, 156, 0.08); border: 1px solid rgba(30, 78, 156, 0.08);
border-radius: 16px; border-radius: 16px;
padding: 1rem; padding: 1rem;
@@ -1330,6 +1579,7 @@ body {
.article-title { .article-title {
font-size: 1.1rem; font-size: 1.1rem;
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
font-weight: 600;
} }
.meta-row { .meta-row {
@@ -1359,7 +1609,7 @@ body {
.toc { .toc {
margin-top: 1rem; margin-top: 1rem;
background: #fff; background: var(--white);
border: 1px solid rgba(30, 78, 156, 0.08); border: 1px solid rgba(30, 78, 156, 0.08);
border-radius: 16px; border-radius: 16px;
padding: 0.75rem 0.75rem 0.75rem 1rem; padding: 0.75rem 0.75rem 0.75rem 1rem;
@@ -1385,6 +1635,7 @@ body {
text-decoration: none; text-decoration: none;
color: var(--text-dark); color: var(--text-dark);
font-size: 0.95rem; font-size: 0.95rem;
transition: color 0.3s ease;
} }
#toc-list a:hover { #toc-list a:hover {
@@ -1408,14 +1659,14 @@ body {
height: 44px; height: 44px;
border-radius: 12px; border-radius: 12px;
background: var(--gradient); background: var(--gradient);
color: #fff; color: var(--white);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* ======================= /* =======================
Responsive Responsive Design
======================= */ ======================= */
/* Tablet adjustments */ /* Tablet adjustments */
@@ -1437,24 +1688,28 @@ body {
/* Mobile layout and hamburger menu */ /* Mobile layout and hamburger menu */
@media (max-width: 768px) { @media (max-width: 768px) {
:root {
--navbar-height: 60px;
}
.nav-container { .nav-container {
padding: 0 1rem; padding: 0 1rem;
} }
.nav-toggle { .nav-toggle {
display: inline-flex; display: flex;
} }
.nav-links { .nav-links {
position: absolute; position: absolute;
top: 64px; top: 60px;
left: 16px; left: 1rem;
right: 16px; right: 1rem;
display: none; display: none;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
list-style: none; list-style: none;
background: #ffffff; background: var(--white);
border: 1px solid rgba(2, 6, 23, 0.08); border: 1px solid rgba(2, 6, 23, 0.08);
border-radius: 12px; border-radius: 12px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
@@ -1478,12 +1733,11 @@ body {
} }
.nav-links a:hover { .nav-links a:hover {
background: #f8fafc; background: var(--bg-light);
} }
.nav-links a::after { .nav-links a::after {
display: none; display: none;
content: none;
} }
.nav-toggle.active .bar:nth-child(1) { .nav-toggle.active .bar:nth-child(1) {
@@ -1509,7 +1763,6 @@ body {
.hero-visual { .hero-visual {
order: -1; order: -1;
height: 360px; height: 360px;
margin-top: 4px;
} }
.phone-mockup { .phone-mockup {
@@ -1517,7 +1770,7 @@ body {
height: 460px; height: 460px;
padding: 16px; padding: 16px;
border-radius: 36px; border-radius: 36px;
transform: rotate(-5deg) translateY(0); transform: rotate(-5deg);
} }
.screen { .screen {
@@ -1537,7 +1790,6 @@ body {
.app-logo { .app-logo {
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 0;
} }
.screen .stats-grid { .screen .stats-grid {
@@ -1622,15 +1874,25 @@ body {
.cta-section { .cta-section {
margin: 2rem 1rem !important; margin: 2rem 1rem !important;
padding: 2.5rem 1rem !important; padding: 1.5rem !important;
} }
.cta-section h2 { .cta-section h3 {
font-size: 1.5rem; font-size: 1.25rem;
} }
.cta-section p { .cta-section > p {
font-size: 0.95rem; font-size: 0.9rem;
}
.email-form {
flex-direction: column;
gap: 0.75rem;
}
.email-input,
.notify-btn {
width: 100%;
} }
.article-wrap { .article-wrap {
@@ -1639,6 +1901,18 @@ body {
.article-aside { .article-aside {
position: static; position: static;
} }
.status-grid {
grid-template-columns: 1fr;
}
.development-status h2 {
font-size: 24px;
}
.feedback-cta {
padding: 20px;
}
} }
/* Small phones */ /* Small phones */
@@ -1690,6 +1964,18 @@ body {
.screen .stat-label { .screen .stat-label {
font-size: 0.6rem; font-size: 0.6rem;
} }
.hero-content h1 {
font-size: 1.75rem;
}
.hero-content .subtitle {
font-size: 1rem;
}
.section-header h2 {
font-size: 1.5rem;
}
} }
/* Very narrow devices */ /* Very narrow devices */
@@ -1734,7 +2020,7 @@ body {
} }
} }
/* Anchor scroll offset so anchors are not hidden under fixed navbar */ /* Anchor scroll offset */
main, main,
.section, .section,
.page-header, .page-header,
@@ -1742,12 +2028,11 @@ main,
scroll-margin-top: calc(var(--navbar-height) + 12px); scroll-margin-top: calc(var(--navbar-height) + 12px);
} }
/* ======================= /* Hard guards for navbar */
Hard Guards for Navbar
======================= */
.navbar .logo { .navbar .logo {
color: var(--text-dark) !important; color: var(--text-dark) !important;
} }
.navbar .logo .logo-accent { .navbar .logo .logo-accent {
color: var(--accent) !important; color: var(--accent) !important;
} }
@@ -1757,5 +2042,5 @@ main,
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
line-height: normal; line-height: normal;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
} }

105
templates/index.html
View File

@@ -12,8 +12,12 @@
</p> </p>
<div class="cta-section"> <div class="cta-section">
<h3>Coming soon!</h3> <div class="beta-badge">
<p>Join us while waiting for launch</p> <span class="badge-icon">⚡</span>
<span class="badge-text">Development Build Available</span>
</div>
<h3>Join Our Newsletter</h3>
<p>Get updates on new features and development progress</p>
<div class="email-form"> <div class="email-form">
<input <input
@@ -23,7 +27,14 @@
placeholder="Enter your email address" placeholder="Enter your email address"
required required
/> />
<button class="notify-btn" id="notify-button">Notify Me</button> <button class="notify-btn" id="notify-button">Subscribe</button>
</div>
<div class="beta-notice">
<p>
<strong>Note:</strong> This is an early development build. Not all features are fully functional yet.
Your feedback helps us build better! 🚀
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -72,15 +83,15 @@
<!-- Features Section --> <!-- Features Section -->
{{if .IsHome}} {{if .IsHome}}
<section class="features" id="features"> <section class="features" id="features">
<div class="section-header">
<h2>Powerful Features for Every Cyclist</h2>
<p>
From beginners to professionals, RideAware provides comprehensive
tools to optimize your training and performance.
</p>
</div>
<div class="features-container"> <div class="features-container">
<div class="section-header">
<h2>Powerful Features for Every Cyclist</h2>
<p>
From beginners to professionals, RideAware provides comprehensive
tools to optimize your training and performance.
</p>
</div>
<div class="features-grid"> <div class="features-grid">
<div class="feature-card"> <div class="feature-card">
<div class="feature-icon"> <div class="feature-icon">
@@ -210,5 +221,77 @@
</div> </div>
</div> </div>
</section> </section>
<!-- Development Status Section -->
<section class="development-status">
<div class="status-container">
<h2>Current Development Status</h2>
<p class="status-intro">
RideAware is actively being built. This development build lets you experience the platform early
and help us refine it. Some features are still in progress.
</p>
<div class="status-grid">
<div class="status-item ready">
<span class="status-badge">✓ Live</span>
<h4>User Authentication</h4>
<p>Sign up, login, and user profiles fully functional</p>
</div>
<div class="status-item ready">
<span class="status-badge">✓ Live</span>
<h4>Equipment Management</h4>
<p>Add and manage your bikes and cycling gear</p>
</div>
<div class="status-item ready">
<span class="status-badge">✓ Live</span>
<h4>Training Zones</h4>
<p>HR and power zone calculations</p>
</div>
<div class="status-item in-progress">
<span class="status-badge">🔨 In Progress</span>
<h4>Workout Planning</h4>
<p>Structured workout builder with interval support</p>
</div>
<div class="status-item in-progress">
<span class="status-badge">🔨 In Progress</span>
<h4>Performance Analytics</h4>
<p>Detailed performance tracking and metrics</p>
</div>
<div class="status-item planned">
<span class="status-badge">📋 Planned</span>
<h4>Device Integration</h4>
<p>Sync with wearables and cycling computers</p>
</div>
<div class="status-item planned">
<span class="status-badge">📋 Planned</span>
<h4>Community Features</h4>
<p>Social sharing and competitive leaderboards</p>
</div>
<div class="status-item planned">
<span class="status-badge">📋 Planned</span>
<h4>Advanced Training</h4>
<p>AI-powered coaching and personalized plans</p>
</div>
</div>
<div class="feedback-cta">
<h3>Ready to Try RideAware?</h3>
<p>
Access the development build and start testing RideAware today. Your feedback helps us build the ultimate cycling training platform.
</p>
<a href="https://dev.rideaware.org" class="action-btn primary" target="_blank">
<i class="fas fa-rocket"></i>
Access Development Build
</a>
</div>
</div>
</section>
{{end}} {{end}}
{{end}} {{end}}