-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
114 lines (113 loc) · 8.73 KB
/
Copy pathindex.html
File metadata and controls
114 lines (113 loc) · 8.73 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GenColoring AI GitHub Developer Hub</title>
<meta name="description" content="Official GitHub hub for GenColoring AI printable coloring pages, classroom worksheets, and online coloring workflows.">
<link rel="canonical" href="https://gencoloringai.github.io/">
<meta property="og:title" content="GenColoring AI GitHub Developer Hub">
<meta property="og:description" content="Official GitHub hub for GenColoring AI printable coloring pages, classroom worksheets, and online coloring workflows.">
<meta property="og:url" content="https://gencoloringai.github.io/">
<meta property="og:type" content="website">
<style>
:root { --accent: #e11d48; --dark: #1f2937; --ink: #18212f; --muted: #5b6472; --line: #d9dee8; --soft: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #ffffff; line-height: 1.55; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { background: var(--dark); color: #fff; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.hero { min-height: 82vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 44px; align-items: center; padding: 52px 0 42px; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; color: #e7edf7; font-weight: 700; }
.brand img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; padding: 5px; }
h1 { margin: 0 0 18px; font-size: clamp(42px, 6vw, 72px); line-height: 1.02; letter-spacing: 0; }
.lead { font-size: 20px; max-width: 720px; color: #d7deea; margin: 0 0 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 6px; font-weight: 700; background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.button:hover { text-decoration: none; filter: brightness(.96); }
.ghost { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 6px; font-weight: 700; color: #fff; border: 1px solid rgba(255,255,255,.42); }
.ghost:hover { text-decoration: none; background: rgba(255,255,255,.08); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { border: 1px solid rgba(255,255,255,.25); color: #e7edf7; padding: 6px 10px; border-radius: 999px; font-size: 14px; }
.hero-media { display: grid; gap: 12px; }
.hero-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.32); background: #fff; }
section { padding: 62px 0; }
section:nth-child(even) { background: var(--soft); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h2 { margin: 0; font-size: 30px; letter-spacing: 0; }
.section-head p { margin: 0; color: var(--muted); max-width: 560px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
article { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: #fff; }
article h3 { margin: 0 0 8px; font-size: 17px; }
article p { margin: 0; color: var(--muted); }
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
figcaption { padding: 10px 12px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; padding: 0; margin: 0; list-style: none; }
.links li { border-bottom: 1px solid var(--line); padding: 11px 0; }
.notice { border-left: 4px solid var(--accent); background: #fff; padding: 18px 20px; border-radius: 0 8px 8px 0; color: var(--muted); }
footer { padding: 30px 0; color: #667085; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .hero { min-height: auto; grid-template-columns: 1fr; padding: 34px 0; } .grid, .screens, .links { grid-template-columns: 1fr; } .section-head { display: block; } h1 { font-size: 42px; } }
</style>
</head>
<body>
<header>
<div class="wrap hero">
<div>
<div class="brand"><img src="assets/logo.png" alt="GenColoring AI logo"><span>GenColoring AI on GitHub</span></div>
<h1>GenColoring AI Developer Hub</h1>
<p class="lead">GenColoring AI turns photos, names, and prompts into printable coloring pages, then supports online coloring and downloads. This site routes GitHub users to the official repo, feedback channels, and platform mirrors.</p>
<div class="actions">
<a class="button" href="https://gencoloring.ai">Official website</a>
<a class="ghost" href="https://github.com/GenColoringAI/gencoloring">Main GitHub repository</a>
<a class="ghost" href="https://gencoloring.ai/coloring-page-generator">Coloring Page Generator</a>
</div>
<div class="chips"><span>Photo to coloring page</span><span>Prompt coloring pages</span><span>Name coloring pages</span><span>Online coloring editor</span></div>
</div>
<div class="hero-media">
<img src="assets/screenshots/homepage.png" alt="GenColoring AI homepage">
</div>
</div>
</header>
<main>
<section>
<div class="wrap">
<div class="section-head"><h2>Coloring Page Paths</h2><p>Product-specific entry points for GitHub visitors who want to understand what to report and where to go next.</p></div>
<div class="grid"><article><h3>Printable pages</h3><p>Create clean line art for family, classroom, seasonal, and hobby use.</p></article>
<article><h3>Name designs</h3><p>Generate name coloring sheets with different lettering styles.</p></article>
<article><h3>Online coloring</h3><p>Use browser coloring tools before saving or printing.</p></article>
<article><h3>Public feedback</h3><p>Report output clarity, print readability, editor, or download issues.</p></article></div>
</div>
</section>
<section>
<div class="wrap">
<div class="section-head"><h2>Product Screens</h2><p>Visual context from the live product so feedback starts from the real user-facing surface.</p></div>
<div class="screens"><figure><img src="assets/screenshots/homepage.png" alt="GenColoring AI homepage" loading="lazy"><figcaption>GenColoring AI homepage</figcaption></figure>
<figure><img src="assets/screenshots/coloring-page-generator.png" alt="Coloring page generator" loading="lazy"><figcaption>Coloring page generator</figcaption></figure>
<figure><img src="assets/screenshots/online-coloring.png" alt="Online coloring editor" loading="lazy"><figcaption>Online coloring editor</figcaption></figure></div>
</div>
</section>
<section>
<div class="wrap">
<div class="section-head"><h2>Official Repositories And Mirrors</h2><p>GitHub is the canonical public repository. Other platforms are official discovery and feedback mirrors.</p></div>
<ul class="links"><li><a href="https://github.com/GenColoringAI">GitHub organization</a></li>
<li><a href="https://github.com/GenColoringAI/gencoloring">Canonical public repository</a></li>
<li><a href="https://gitlab.com/nano-products/gencoloring">GitLab mirror</a></li>
<li><a href="https://codeberg.org/nano-products/gencoloring">Codeberg mirror</a></li>
<li><a href="https://gitee.com/nano-products/gencoloring">Gitee mirror</a></li>
<li><a href="https://gitcode.com/weixin_52314137/gencoloring">GitCode mirror</a></li>
<li><a href="https://git.sr.ht/~chrisv/gencoloring">SourceHut mirror</a></li></ul>
</div>
</section>
<section>
<div class="wrap">
<div class="section-head"><h2>Feedback And Security</h2><p>Use public issues for product feedback that can be discussed openly. Keep private account, billing, uploaded media, logs, and vulnerability details out of public tickets.</p></div>
<div class="notice">For private support or security-sensitive reports, contact <a href="mailto:contact@gencoloring.ai">contact@gencoloring.ai</a>. Production source code, provider credentials, billing configuration, and deployment secrets are not published in the public repository.</div>
</div>
</section>
</main>
<footer><div class="wrap">GenColoring AI official GitHub developer hub. Website: <a href="https://gencoloring.ai">gencoloring.ai</a>.</div></footer>
</body>
</html>