Files
gitea-template/preview-guest.html
2025-12-04 11:09:39 +01:00

839 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gitea - Home (Guest View)</title>
<!-- Custom header assets -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: #FFF8DE;
}
#navbar {
background: rgba(140, 169, 255, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(170, 196, 245, 0.3);
box-shadow: 0 12px 30px rgba(140, 169, 255, 0.2);
padding: 0.35rem 1.25rem;
border-radius: 18px;
margin: 2rem auto 0;
width: min(1080px, calc(100% - 2rem));
position: relative;
z-index: 1025;
}
#navbar .navbar-brand {
color: #e2e8f0 !important;
font-weight: 700;
font-size: 1.25rem;
}
#navbar .nav-link {
color: #e2e8f0 !important;
font-weight: 500;
border-radius: 999px !important;
padding: 0.55rem 1rem !important;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#navbar .item:hover,
#navbar .item.active {
background: rgba(255, 248, 222, 0.25) !important;
color: #f8fafc !important;
transform: translateY(-1px);
}
#navbar .btn-primary {
border-radius: 999px;
padding: 0.55rem 1.25rem;
}
.page-content {
margin-top: 1.25rem;
}
.home-hero {
min-height: 65vh;
display: flex;
align-items: center;
background: linear-gradient(to bottom, #AAC4F5 0%, #8CA9FF 40%, #AAC4F5 70%, #FFF8DE 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
/* Animated water waves */
.home-hero::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(to bottom,
transparent 0%,
rgba(170, 196, 245, 0.15) 30%,
rgba(140, 169, 255, 0.25) 60%,
rgba(140, 169, 255, 0.35) 100%);
animation: wave 20s linear infinite;
pointer-events: none;
}
.home-hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(to bottom,
transparent 0%,
rgba(170, 196, 245, 0.2) 40%,
rgba(140, 169, 255, 0.3) 70%,
rgba(140, 169, 255, 0.4) 100%);
animation: wave 15s linear infinite reverse;
pointer-events: none;
}
@keyframes wave {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Whale container */
.whale-container {
position: absolute;
top: 10%;
right: 2%;
width: 650px;
height: 520px;
animation: float 6s ease-in-out infinite;
z-index: 5;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-15px) rotate(-1deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
75% {
transform: translateY(15px) rotate(1deg);
}
}
/* Whale box */
.whale-box {
position: relative;
width: 100%;
height: 100%;
}
.whale-left {
position: absolute;
clip-path: polygon(3% 30%, 9% 23%, 37% 30%, 42% 64%, 30% 66%, 11% 47%);
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: #8CA9FF;
z-index: 2;
overflow: hidden;
}
.whale-middle {
position: absolute;
clip-path: polygon(89% 23%, 70% 13%, 37% 30%, 42% 64%, 50% 61%, 78% 27%);
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: #8CA9FF;
z-index: 2;
overflow: hidden;
}
.whale-tail {
position: absolute;
clip-path: polygon(83% 19%, 87% 14%, 95% 12%, 91% 23%, 97% 32%, 90% 37%, 82% 27%);
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: #6B8DD6;
z-index: 1;
transform-origin: center left;
animation: tail 0.8s ease-in-out infinite alternate;
}
@keyframes tail {
0% {
transform: rotate(-0.3deg);
}
100% {
transform: rotate(0.3deg);
}
}
.whale-belly {
position: absolute;
clip-path: polygon(7% 41%, 35% 52%, 58% 42%, 77% 23%, 90% 21%, 58% 70%, 30% 75%);
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.9);
z-index: 2;
}
.whale-eye {
position: absolute;
top: 40%;
left: 30%;
width: 5%;
height: 6%;
border-radius: 50%;
background: #292a2d;
z-index: 3;
animation: blink 3s ease-in-out infinite;
}
@keyframes blink {
0% {
transform: scaleY(1);
}
1% {
transform: scaleY(0.1);
}
2% {
transform: scaleY(1);
}
60% {
transform: scaleY(1);
}
61% {
transform: scaleY(0.1);
}
62% {
transform: scaleY(1);
}
100% {
transform: scaleY(1);
}
}
.whale-fin1 {
position: absolute;
clip-path: polygon(45% 53%, 41% 64%, 47% 77%, 58% 80%, 51% 69%);
top: -1%;
left: -10%;
width: 100%;
height: 100%;
background: #6B8DD6;
z-index: 2;
transform-origin: center top;
animation: fin 0.8s ease-in-out infinite alternate;
}
.whale-fin2 {
position: absolute;
clip-path: polygon(23% 60%, 20% 70%, 25% 86%, 28% 64%);
top: -10%;
left: -5%;
width: 100%;
height: 100%;
background: #6B8DD6;
z-index: 0;
transform-origin: center top;
animation: fin 1s ease-in-out infinite alternate;
}
@keyframes fin {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(-3deg);
}
}
/* Bubbles */
.bubble {
position: absolute;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.6);
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(200, 230, 255, 0.5));
opacity: 0;
z-index: 3;
}
.bubble-1 {
bottom: 10%;
left: 30%;
width: 50px;
height: 50px;
animation: bubbles 5s ease-in infinite;
animation-delay: 0.5s;
}
.bubble-2 {
bottom: 25%;
right: 35%;
width: 35px;
height: 35px;
animation: bubbles 4.5s ease-in infinite;
animation-delay: 1s;
}
.bubble-3 {
bottom: 40%;
right: 20%;
width: 45px;
height: 45px;
animation: bubbles 5.5s ease-in infinite;
animation-delay: 1.8s;
}
.bubble-4 {
bottom: 15%;
left: 15%;
width: 28px;
height: 28px;
animation: bubbles 4s ease-in infinite;
animation-delay: 0s;
}
.bubble-5 {
bottom: 30%;
left: 50%;
width: 38px;
height: 38px;
animation: bubbles 6s ease-in infinite;
animation-delay: 2.5s;
}
.bubble-6 {
bottom: 20%;
right: 45%;
width: 32px;
height: 32px;
animation: bubbles 4.8s ease-in infinite;
animation-delay: 1.2s;
}
@keyframes bubbles {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.6;
}
100% {
transform: translateY(-600px) scale(0.3);
opacity: 0;
}
}
/* Sun rays effect */
.sun-rays {
position: absolute;
top: 0;
left: 50%;
width: 300px;
height: 300px;
background: radial-gradient(ellipse at center,
rgba(255, 255, 200, 0.3) 0%,
rgba(255, 255, 200, 0.1) 30%,
transparent 70%);
transform: translateX(-50%);
animation: rays 10s ease-in-out infinite alternate;
}
@keyframes rays {
0% {
opacity: 0.3;
transform: translateX(-50%) scale(1);
}
100% {
opacity: 0.6;
transform: translateX(-50%) scale(1.2);
}
}
/* Ensure text is above ocean effects */
.home-hero .container {
position: relative;
z-index: 10;
}
.home-hero h1,
.home-hero .lead,
.home-hero .badge {
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
color: #ffffff;
}
.home-hero .card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
/* Hero CTA Buttons */
.hero-btn-primary {
background: linear-gradient(135deg, #8CA9FF, #AAC4F5);
color: #ffffff;
border: none;
padding: 0.9rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1.05rem;
box-shadow: 0 8px 20px rgba(140, 169, 255, 0.35);
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.hero-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(140, 169, 255, 0.5);
background: linear-gradient(135deg, #7B98EE, #99B3E4);
color: #ffffff;
}
.hero-btn-secondary {
background: rgba(255, 242, 198, 0.9);
color: #5a7bb8;
border: 2px solid #AAC4F5;
padding: 0.85rem 1.9rem;
border-radius: 50px;
font-weight: 600;
font-size: 1.05rem;
box-shadow: 0 4px 15px rgba(170, 196, 245, 0.25);
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.hero-btn-secondary:hover {
transform: translateY(-3px);
background: #FFF8DE;
border-color: #8CA9FF;
color: #4a6aa0;
box-shadow: 0 8px 25px rgba(170, 196, 245, 0.4);
}
.hero-btn-tertiary {
background: transparent;
color: #ffffff;
border: none;
padding: 0.9rem 1.5rem;
border-radius: 50px;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
position: relative;
}
.hero-btn-tertiary::before {
content: '';
position: absolute;
bottom: 8px;
left: 1.5rem;
right: 1.5rem;
height: 2px;
background: rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
}
.hero-btn-tertiary:hover {
color: #FFF2C6;
transform: translateY(-2px);
}
.hero-btn-tertiary:hover::before {
background: #FFF2C6;
height: 3px;
}
.home-hero .badge {
letter-spacing: 0.08em;
font-weight: 600;
}
.home-hero h1 {
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 3.75rem);
}
.home-hero p.lead {
color: rgba(15, 23, 42, 0.75);
font-size: 1.15rem;
}
.home-stat-card {
border-radius: 1rem;
border: none;
box-shadow: 0 14px 45px rgba(15, 23, 42, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-stat-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
}
.feature-icon {
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(170, 196, 245, 0.2);
color: #8CA9FF;
font-size: 1.5rem;
}
.section-title {
font-weight: 600;
}
.home-footer-cta {
background: linear-gradient(135deg, #8CA9FF, #AAC4F5);
border-radius: 1.25rem;
color: #fff;
padding: 3rem;
}
.home-footer-cta h2 {
font-weight: 700;
font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.bg-soft {
background: rgba(170, 196, 245, 0.15);
}
.custom-footer {
background: #0f172a;
color: #cbd5f5;
padding: 4rem 0 2.5rem;
margin-top: 4rem;
}
.custom-footer .footer-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2.5rem;
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
.custom-footer h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
color: #38bdf8;
}
.custom-footer p,
.custom-footer li,
.custom-footer a {
color: rgba(226, 232, 240, 0.8);
}
.custom-footer a {
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
}
.custom-footer a:hover {
color: #f8fafc;
transform: translateX(3px);
}
.custom-footer .footer-links {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.65rem;
}
.custom-footer .footer-divider {
border-top: 1px solid rgba(148, 163, 184, 0.2);
margin: 2.5rem auto 0;
max-width: 1100px;
}
.custom-footer .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem 0;
max-width: 1100px;
margin: 0 auto;
}
.custom-footer .social-links {
display: flex;
gap: 0.75rem;
}
.custom-footer .social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background: rgba(148, 163, 184, 0.15);
}
@media (max-width: 768px) {
#navbar {
margin-top: 0.75rem;
width: calc(100% - 1.25rem);
border-radius: 14px;
}
.custom-footer {
padding: 3rem 0 2rem;
}
.custom-footer .footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fa-solid fa-code-branch me-2"></i>Gitea
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#explore">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#help">Help</a>
</li>
<li class="nav-item ms-2">
<a class="btn btn-primary btn-sm" href="#signin">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<div role="main" class="page-content p-0">
<!-- Hero Section -->
<section class="home-hero">
<!-- Sun rays -->
<div class="sun-rays"></div>
<!-- Whale -->
<div class="whale-container">
<div class="whale-box">
<div class="whale-left">
<div class="whale-belly"></div>
</div>
<div class="whale-middle">
<div class="whale-belly"></div>
</div>
<div class="whale-tail"></div>
<div class="whale-fin1"></div>
<div class="whale-fin2"></div>
<div class="whale-eye"></div>
</div>
</div>
<!-- Bubbles -->
<div class="bubble bubble-1"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>
<div class="bubble bubble-4"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-6"></div>
<div class="container py-5">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<h1 class="mb-4">Build, collaborate and deliver with confidence.</h1>
<p class="lead mb-5">Lightweight, powerful and totally yours. Gitea gives your team a beautiful
code collaboration hub backed by open source freedom.</p>
<div class="d-flex flex-wrap gap-3">
<a class="hero-btn-primary" href="#signin">
<i class="fa-solid fa-right-to-bracket"></i>Sign in
</a>
<a class="hero-btn-secondary" href="#explore">
<i class="fa-solid fa-compass"></i>Explore projects
</a>
<a class="hero-btn-tertiary" href="https://docs.gitea.com/" target="_blank">
<i class="fa-solid fa-book-open"></i>Documentation
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-5 bg-white">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<div class="feature-icon mb-3"><i class="fa-solid fa-cloud-arrow-up"></i></div>
<h3 class="h5 fw-semibold mb-3">Ship faster</h3>
<p class="text-muted">Built-in CI runners and packages help your team move ideas to production
faster with less friction.</p>
</div>
<div class="col-md-4">
<div class="feature-icon mb-3"><i class="fa-solid fa-lock"></i></div>
<h3 class="h5 fw-semibold mb-3">Stay secure</h3>
<p class="text-muted">Enforce branch protections, SSO, fine-grained permissions and audit logs
to keep your codebase safe.</p>
</div>
<div class="col-md-4">
<div class="feature-icon mb-3"><i class="fa-solid fa-plug"></i></div>
<h3 class="h5 fw-semibold mb-3">Integrate everywhere</h3>
<p class="text-muted">Connect with runners, chatops and automation platforms using webhooks,
OAuth and a RESTful API.</p>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-5">
<div class="container">
<div class="home-footer-cta text-center text-lg-start">
<div class="row align-items-center g-4">
<div class="col-lg-8">
<h2 class="mb-3">Ready to solve real world problem?</h2>
<p class="mb-0">Sign in to your Gitea instance or invite your team to collaborate securely
with pull requests, packages and automation.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a class="btn btn-light btn-lg text-primary" href="#signup">
<i class="fa-solid fa-user-plus me-2"></i>Sign up
</a>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Custom Footer -->
<div class="custom-footer">
<div class="footer-inner">
<div>
<h3><i class="fa-solid fa-code-branch me-2"></i>Build together</h3>
<p>Deliver faster with lightweight workflows, protected branches and integrated automation. Gitea keeps
your DevOps stack on hardware you trust.</p>
</div>
<div>
<h3>Resources</h3>
<ul class="footer-links">
<li><a href="https://docs.gitea.com/" target="_blank" rel="noopener"><i
class="fa-solid fa-book-open me-2"></i>Product documentation</a></li>
<li><a href="https://blog.gitea.com/" target="_blank" rel="noopener"><i
class="fa-solid fa-newspaper me-2"></i>Release notes</a></li>
<li><a href="https://github.com/go-gitea/gitea" target="_blank" rel="noopener"><i
class="fa-brands fa-github me-2"></i>Source code</a></li>
</ul>
</div>
<div>
<h3>Get help</h3>
<ul class="footer-links">
<li><a href="https://docs.gitea.com/installation" target="_blank" rel="noopener"><i
class="fa-solid fa-server me-2"></i>Installation guide</a></li>
<li><a href="https://docs.gitea.com/administration" target="_blank" rel="noopener"><i
class="fa-solid fa-shield-halved me-2"></i>Admin handbook</a></li>
<li><a href="https://docs.gitea.com/usage" target="_blank" rel="noopener"><i
class="fa-solid fa-people-group me-2"></i>User onboarding</a></li>
</ul>
</div>
</div>
<div class="footer-divider"></div>
<div class="footer-bottom">
<span>© Gitea self-hosted Git, streamlined.</span>
<div class="social-links">
<a href="https://github.com/go-gitea" target="_blank" rel="noopener" aria-label="GitHub"><i
class="fa-brands fa-github"></i></a>
<a href="https://twitter.com/giteaio" target="_blank" rel="noopener" aria-label="X"><i
class="fa-brands fa-x-twitter"></i></a>
<a href="https://discord.gg/gitea" target="_blank" rel="noopener" aria-label="Discord"><i
class="fa-brands fa-discord"></i></a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>