outfitbuddy.github.io/index.html at main · OutfitBuddy/outfitbuddy.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outfit Buddy | AI-Powered Sustainable Stylist</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f172a; /* Dark Navy Background matching screenshots */
            color: #ffffff;
        }
        .gradient-text {
            background: linear-gradient(to right, #a855f7, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glass-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body class="flex flex-col min-h-screen justify-center items-center p-6 relative overflow-hidden">

    <!-- Background Decoration -->
    <div class="absolute top-0 left-0 w-96 h-96 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
    <div class="absolute top-0 right-0 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>

    <!-- Main Content -->
    <main class="z-10 text-center max-w-3xl mx-auto">

        <!-- Logo / Icon Placeholder -->
        <div class="mb-6 flex justify-center">
            <div class="w-20 h-20 bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-500/30">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
        </div>

        <h1 class="text-5xl md:text-6xl font-bold mb-4 tracking-tight">
            Outfit <span class="gradient-text">Buddy</span>
        </h1>

        <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
            The AI-powered stylist that helps you look your best, saves you time, and promotes sustainable fashion habits.
        </p>

        <!-- Links Section -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-2xl mx-auto">

            <!-- Link 1: Live App -->
            <a href="https://outfitbuddy.netlify.app/" target="_blank" class="group relative px-6 py-4 bg-purple-600 hover:bg-purple-700 rounded-xl transition-all duration-200 flex flex-col items-center justify-center shadow-lg hover:shadow-purple-500/25">
                <span class="font-semibold text-lg">Launch App</span>
                <span class="text-xs text-purple-200 mt-1">Try the Demo</span>
            </a>

            <!-- Link 2: GitHub -->
            <a href="https://github.com/OutfitBuddy/outfit-buddy" target="_blank" class="group glass-card hover:bg-slate-800 rounded-xl px-6 py-4 transition-all duration-200 flex flex-col items-center justify-center">
                <span class="font-semibold text-lg">GitHub Repo</span>
                <span class="text-xs text-gray-400 mt-1">View Source Code</span>
            </a>

            <!-- Link 3: Deliverables -->
            <a href="https://github.com/OutfitBuddy/deliverables" target="_blank" class="group glass-card hover:bg-slate-800 rounded-xl px-6 py-4 transition-all duration-200 flex flex-col items-center justify-center">
                <span class="font-semibold text-lg">Deliverables</span>
                <span class="text-xs text-gray-400 mt-1">Docs & Reports</span>
            </a>
        </div>

    </main>

    <footer class="mt-16 text-gray-500 text-sm z-10">
        <p>Designed by Outfit Buddies - Team 2</p>
    </footer>

</body>
</html>