color-game-dain/og-image.html at main · vibe-ai-coding-club/color-game-dain · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 1200px;
            height: 630px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Arial', sans-serif;
            color: white;
        }
        .title {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 1rem;
            text-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        .subtitle {
            font-size: 1.8rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        .game-preview {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 2rem;
        }
        .color-box {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .color-box:nth-child(1) { background: #ff6b6b; }
        .color-box:nth-child(2) { background: #4ecdc4; }
        .color-box:nth-child(3) { background: #45b7d1; }
        .color-box:nth-child(4) { background: #96ceb4; }
        .color-box:nth-child(5) { background: #feca57; }
        .color-box:nth-child(6) { background: #ff9ff3; }
        .color-box:nth-child(7) { background: #54a0ff; }
        .color-box:nth-child(8) { background: #5f27cd; }
        .color-box:nth-child(9) { background: #00d2d3; }
    </style>
</head>
<body>
    <div class="title">🎨 절대색감 게임</div>
    <div class="subtitle">색상 차이를 찾아보세요!</div>
    <div class="game-preview">
        <div class="color-box"></div>
        <div class="color-box"></div>
        <div class="color-box"></div>
        <div class="color-box"></div>
        <div class="color-box"></div>
        <div class="color-box"></div>
        <div class="color-box"></div>
        <div class="color-box"></div>
        <div class="color-box"></div>
    </div>
</body>
</html>