RepoReady/header-generator.html at main · OpenSource-Communities/RepoReady · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RepoReady Header Generator</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f0f0f0;
            font-family: system-ui, -apple-system, sans-serif;
        }

        .header-container {
            margin: 20px 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        }

        /* Option 1: GitHub-style gradient */
        .header-1 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 60px 40px;
            text-align: center;
        }

        /* Option 2: Vibrant multi-color */
        .header-2 {
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #f9ca24 75%, #6c5ce7 100%);
            padding: 60px 40px;
            text-align: center;
        }

        /* Option 3: Professional tech gradient */
        .header-3 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
            padding: 60px 40px;
            text-align: center;
        }

        /* Option 4: Ocean waves */
        .header-4 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #667eea 50%, #764ba2 75%, #667eea 100%);
            background-size: 400% 400%;
            animation: gradient 8s ease infinite;
            padding: 60px 40px;
            text-align: center;
        }

        /* Option 5: Sunset gradient */
        .header-5 {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 25%, #fecfef 50%, #ff9a9e 75%, #a8edea 100%);
            padding: 60px 40px;
            text-align: center;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .title {
            font-size: 4.5rem;
            font-weight: 800;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            margin: 0;
            letter-spacing: -2px;
        }

        .subtitle {
            font-size: 1.2rem;
            color: rgba(255,255,255,0.9);
            margin: 15px 0 0 0;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .instructions {
            max-width: 800px;
            margin: 40px auto;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }

        .option-label {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin: 30px 0 10px 0;
        }
    </style>
</head>
<body>
    <div class="instructions">
        <h2>🎨 RepoReady Header Generator</h2>
        <p>Choose your favorite gradient design below, then take a screenshot to use as your header image!</p>
        <p><strong>Recommended size:</strong> 1200x400px for GitHub repository headers</p>
        <p><strong>How to capture:</strong></p>
        <ul>
            <li>Right-click on your preferred header → "Inspect Element"</li>
            <li>Screenshot just the header area</li>
            <li>Or use your browser's screenshot tool to capture the specific section</li>
        </ul>
    </div>

    <div class="option-label">Option 1: Professional Purple-Blue</div>
    <div class="header-container">
        <div class="header-1">
            <h1 class="title">RepoReady</h1>
            <p class="subtitle">Evaluate & Create Contributor-Ready Repositories</p>
        </div>
    </div>

    <div class="option-label">Option 2: Vibrant Rainbow</div>
    <div class="header-container">
        <div class="header-2">
            <h1 class="title">RepoReady</h1>
            <p class="subtitle">Evaluate & Create Contributor-Ready Repositories</p>
        </div>
    </div>

    <div class="option-label">Option 3: Tech Gradient</div>
    <div class="header-container">
        <div class="header-3">
            <h1 class="title">RepoReady</h1>
            <p class="subtitle">Evaluate & Create Contributor-Ready Repositories</p>
        </div>
    </div>

    <div class="option-label">Option 4: Animated Ocean (will be static in screenshot)</div>
    <div class="header-container">
        <div class="header-4">
            <h1 class="title">RepoReady</h1>
            <p class="subtitle">Evaluate & Create Contributor-Ready Repositories</p>
        </div>
    </div>

    <div class="option-label">Option 5: Soft Sunset</div>
    <div class="header-container">
        <div class="header-5">
            <h1 class="title">RepoReady</h1>
            <p class="subtitle">Evaluate & Create Contributor-Ready Repositories</p>
        </div>
    </div>

</body>
</html>