chaoscraft/index.html at main · chainsquad/chaoscraft · 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
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex items-center justify-center">
    <div class="text-center relative z-10">
        <h1 class="text-6xl font-bold text-white drop-shadow-lg animate-pulse">
            Hello World
        </h1>
        <p class="mt-4 text-xl text-white/80">
            Welcome to ChaosCraft Demo
        </p>

        <section class="mt-8 sm:mt-12 md:mt-16 mb-8 sm:mb-12 md:mb-16 max-w-xl sm:max-w-2xl md:max-w-3xl lg:max-w-4xl mx-auto px-4 sm:px-6 md:px-8 py-8 sm:py-10 md:py-12 bg-gradient-to-br from-slate-900/40 via-slate-800/30 to-slate-900/40 rounded-2xl sm:rounded-3xl backdrop-blur-sm border border-white/10 shadow-xl hover:shadow-2xl transition-shadow duration-300">
            <!-- Decorative gradient accent line at top -->
            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 rounded-full"></div>

            <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-white mb-4 sm:mb-6 md:mb-8 tracking-tight">
                What is ChaosCraft?
            </h2>

            <div class="space-y-4 sm:space-y-5 md:space-y-6">
                <p class="text-base sm:text-lg md:text-xl text-gray-100 leading-relaxed sm:leading-loose md:leading-loose tracking-wide">
                    Imagine if 1,000 people each paid $1 to tell an AI to build whatever they wanted into a shared codebase.
                    A masterpiece? A disaster? A chaotic symphony of features nobody asked for? <strong class="text-white font-semibold">Nobody knows. That's the point.</strong>
                </p>

                <p class="text-base sm:text-lg md:text-xl text-gray-200 leading-relaxed sm:leading-loose md:leading-loose tracking-wide">
                    ChaosCraft is an experiment in collective creation. You pay $1, submit a 120-character request,
                    and watch as AI agents turn your idea into code that becomes part of a living, evolving project.
                </p>
            </div>

            <div class="bg-white/10 backdrop-blur-md rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-8 mt-6 sm:mt-8 md:mt-10 text-left border-2 border-cyan-400/30 shadow-xl hover:shadow-2xl hover:border-cyan-400/50 transition-all duration-300 ease-in-out">
                <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-cyan-300 mb-4 sm:mb-5 md:mb-6 text-center tracking-tight">
                    How It Works
                </h3>

                <ol class="space-y-3 sm:space-y-4 md:space-y-5 text-gray-100">
                    <li class="flex items-start gap-3 sm:gap-4 p-2 sm:p-3 rounded-lg hover:bg-white/5 transition-colors duration-200">
                        <span class="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center font-bold text-white text-xs sm:text-sm shadow-lg shadow-cyan-500/30">
                            1
                        </span>
                        <span class="text-sm sm:text-base md:text-lg leading-relaxed pt-0.5 sm:pt-1">
                            You submit a feature request (e.g., "Add dancing robot") and pay $1
                        </span>
                    </li>
                    <li class="flex items-start gap-3 sm:gap-4 p-2 sm:p-3 rounded-lg hover:bg-white/5 transition-colors duration-200">
                        <span class="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center font-bold text-white text-xs sm:text-sm shadow-lg shadow-cyan-500/30">
                            2
                        </span>
                        <span class="text-sm sm:text-base md:text-lg leading-relaxed pt-0.5 sm:pt-1">
                            A GitHub Issue is automatically created for your request
                        </span>
                    </li>
                    <li class="flex items-start gap-3 sm:gap-4 p-2 sm:p-3 rounded-lg hover:bg-white/5 transition-colors duration-200">
                        <span class="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center font-bold text-white text-xs sm:text-sm shadow-lg shadow-cyan-500/30">
                            3
                        </span>
                        <span class="text-sm sm:text-base md:text-lg leading-relaxed pt-0.5 sm:pt-1">
                            AI agents write specifications, generate code, and create a Pull Request
                        </span>
                    </li>
                    <li class="flex items-start gap-3 sm:gap-4 p-2 sm:p-3 rounded-lg hover:bg-white/5 transition-colors duration-200">
                        <span class="flex-shrink-0 w-7 h-7 sm:w-8 sm:h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center font-bold text-white text-xs sm:text-sm shadow-lg shadow-cyan-500/30">
                            4
                        </span>
                        <span class="text-sm sm:text-base md:text-lg leading-relaxed pt-0.5 sm:pt-1">
                            The PR is merged and the site is rebuilt with your feature live
                        </span>
                    </li>
                </ol>
            </div>

            <!-- Decorative sparkle elements -->
            <div class="flex justify-center gap-2 my-6">
                <span class="text-cyan-300 animate-pulse">✨</span>
                <span class="text-blue-300 animate-pulse" style="animation-delay: 0.2s">✨</span>
                <span class="text-purple-300 animate-pulse" style="animation-delay: 0.4s">✨</span>
            </div>

            <p class="text-base sm:text-lg md:text-xl text-cyan-200 mt-6 sm:mt-8 md:mt-10 italic leading-relaxed font-light border-t border-white/10 pt-6 sm:pt-7 md:pt-8">
                You're not just requesting code. You're planting a star in the ChaosCraft galaxy 🌌
            </p>
        </section>
    </div>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>