|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GiniGen AI</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
background: linear-gradient(135deg, #fef9f3 0%, #f0e6fa 50%, #e6f0fa 100%); |
|
|
min-height: 100vh; |
|
|
padding: 40px; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.header h1 { |
|
|
color: #6b5b7a; |
|
|
font-size: 2.8rem; |
|
|
margin-bottom: 10px; |
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
.header p { |
|
|
color: #8b7b9b; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
|
|
|
.sota-section { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto 30px auto; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
border-radius: 20px; |
|
|
padding: 30px 40px; |
|
|
color: white; |
|
|
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
.sota-section h2 { |
|
|
font-size: 1.6rem; |
|
|
margin-bottom: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
.sota-section p { |
|
|
font-size: 1.05rem; |
|
|
line-height: 1.7; |
|
|
opacity: 0.95; |
|
|
} |
|
|
.model-tags { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 10px; |
|
|
margin-top: 15px; |
|
|
} |
|
|
.model-tag { |
|
|
background: rgba(255,255,255,0.2); |
|
|
padding: 8px 16px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 600; |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
|
|
|
.hugwarts-section { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto 30px auto; |
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); |
|
|
border-radius: 20px; |
|
|
padding: 25px 40px; |
|
|
color: white; |
|
|
box-shadow: 0 10px 40px rgba(240, 147, 251, 0.3); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 20px; |
|
|
} |
|
|
.hugwarts-icon { |
|
|
font-size: 3rem; |
|
|
} |
|
|
.hugwarts-content h3 { |
|
|
font-size: 1.4rem; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
.hugwarts-content p { |
|
|
font-size: 1rem; |
|
|
opacity: 0.95; |
|
|
line-height: 1.6; |
|
|
} |
|
|
.hugwarts-name { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
margin-top: 10px; |
|
|
font-size: 0.9rem; |
|
|
opacity: 0.9; |
|
|
} |
|
|
.hugwarts-name span { |
|
|
background: rgba(255,255,255,0.25); |
|
|
padding: 4px 12px; |
|
|
border-radius: 15px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.container { |
|
|
display: flex; |
|
|
gap: 40px; |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
align-items: flex-start; |
|
|
} |
|
|
.left-section { |
|
|
flex: 1; |
|
|
text-align: center; |
|
|
} |
|
|
.image-wrapper { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.image-wrapper::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
left: -10px; |
|
|
right: -10px; |
|
|
bottom: -10px; |
|
|
background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c); |
|
|
border-radius: 20px; |
|
|
z-index: -1; |
|
|
opacity: 0.7; |
|
|
filter: blur(15px); |
|
|
} |
|
|
.left-section img { |
|
|
width: 100%; |
|
|
max-width: 600px; |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.2); |
|
|
cursor: pointer; |
|
|
transition: transform 0.3s ease; |
|
|
border: 3px solid white; |
|
|
} |
|
|
.left-section img:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
.visit-btn { |
|
|
display: inline-block; |
|
|
margin-top: 25px; |
|
|
padding: 18px 50px; |
|
|
background: linear-gradient(90deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
border-radius: 30px; |
|
|
font-weight: 700; |
|
|
font-size: 1.2rem; |
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.visit-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5); |
|
|
} |
|
|
.right-section { |
|
|
flex: 1; |
|
|
background: white; |
|
|
border-radius: 20px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.1); |
|
|
} |
|
|
.right-section h2 { |
|
|
color: #6b5b7a; |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 20px; |
|
|
text-align: center; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 10px; |
|
|
} |
|
|
.service-list { |
|
|
list-style: none; |
|
|
} |
|
|
.service-list li { |
|
|
padding: 12px 15px; |
|
|
margin-bottom: 8px; |
|
|
background: linear-gradient(135deg, #f8f4ff 0%, #f0f4ff 100%); |
|
|
border-radius: 10px; |
|
|
color: #5a4a6a; |
|
|
font-size: 0.95rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease; |
|
|
border-left: 3px solid #667eea; |
|
|
} |
|
|
.service-list li:hover { |
|
|
transform: translateX(5px); |
|
|
box-shadow: 0 4px 15px rgba(107, 91, 122, 0.15); |
|
|
} |
|
|
.service-icon { |
|
|
font-size: 1.2rem; |
|
|
width: 30px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 900px) { |
|
|
.container { |
|
|
flex-direction: column; |
|
|
} |
|
|
.hugwarts-section { |
|
|
flex-direction: column; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="header"> |
|
|
<h1>GiniGen AI</h1> |
|
|
<p>All-in-One AI Creative Platform</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sota-section"> |
|
|
<h2>Powered by State-of-the-Art AI Models</h2> |
|
|
<p> |
|
|
GiniGen AI integrates the latest and highest-performing SOTA models with powerful Custom Add-ons, |
|
|
delivering an unparalleled creative experience. Experience next-generation AI capabilities |
|
|
that push the boundaries of what's possible. |
|
|
</p> |
|
|
<div class="model-tags"> |
|
|
<span class="model-tag">Nano Banana Pro</span> |
|
|
<span class="model-tag">Kling 2.6</span> |
|
|
<span class="model-tag">Kling o1</span> |
|
|
<span class="model-tag">Seedream 4.5</span> |
|
|
<span class="model-tag">Seedance-1-Pro</span> |
|
|
<span class="model-tag">Custom Add-ons</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hugwarts-section"> |
|
|
<div class="hugwarts-icon">πͺ</div> |
|
|
<div class="hugwarts-content"> |
|
|
<h3>Hugwarts Banana - Magical Custom Add-on</h3> |
|
|
<p> |
|
|
Hugwarts Banana pushes AI technology to its absolute limits, implementing magical custom add-on |
|
|
features that transform the impossible into reality. Unlock extraordinary creative powers |
|
|
that feel like pure wizardry. |
|
|
</p> |
|
|
<div class="hugwarts-name"> |
|
|
<span>HUG</span> from Hugging Face + <span>WARTS</span> from Hogwarts = <span>HUGWARTS</span> Magic! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container"> |
|
|
<div class="left-section"> |
|
|
<div class="image-wrapper"> |
|
|
<a href="https://ginigen.ai/en" target="_blank"> |
|
|
<img src="screenshot.png" alt="GiniGen AI Preview"> |
|
|
</a> |
|
|
</div> |
|
|
<br> |
|
|
<a href="https://ginigen.ai/en" target="_blank" class="visit-btn"> |
|
|
Visit GiniGen AI |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="right-section"> |
|
|
<h2>13 AI Services</h2> |
|
|
<ul class="service-list"> |
|
|
<li><span class="service-icon">π¨</span> Image Generation & Editing</li> |
|
|
<li><span class="service-icon">π¬</span> Image to Video Generation</li> |
|
|
<li><span class="service-icon">π€</span> Voice Clone / TTS</li> |
|
|
<li><span class="service-icon">π΅</span> Music & Song Generation</li> |
|
|
<li><span class="service-icon">π</span> Lip-Sync Video (Image + Audio)</li> |
|
|
<li><span class="service-icon">π°</span> Card News Generation</li> |
|
|
<li><span class="service-icon">π</span> Card Toon (Toon-style Card News)</li> |
|
|
<li><span class="service-icon">ποΈ</span> Movie Storyboard Generation</li> |
|
|
<li><span class="service-icon">π±</span> Short Toon Generation</li> |
|
|
<li><span class="service-icon">πΉ</span> Short-Form Video Generation</li> |
|
|
<li><span class="service-icon">π</span> Diagram Generation</li> |
|
|
<li><span class="service-icon">π</span> Movie Scenario Generation</li> |
|
|
<li><span class="service-icon">π₯</span> Video Editing & Generation</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
