پیشنمایش زنده
کد HTML
<div class="no-deployments-container">
<input type="checkbox" id="deploy-trigger" class="deploy-checkbox" />
<div class="icon-wrapper" id="rocket-wrapper">
<svg
class="rocket-icon"
aria-hidden="true"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-label="Rocket"
stroke-width="1.5"
>
<path
d="M9 14H7M7.686 1.235C6.499 2.185 2.528 5.985 6 12h4c3.4-6.01-.513-9.809-1.687-10.763a.499.499 0 0 0-.627-.002v0Z"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="m4.617 6.96-1.96 2.351a.5.5 0 0 0-.104.429l.773 3.477a.5.5 0 0 0 .8.282L6 12M11.346 6.915l1.997 2.396a.499.499 0 0 1 .104.429l-.773 3.477a.5.5 0 0 1-.8.282L10 12"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M8 6.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
fill="currentColor"
></path>
</svg>
</div>
<div class="title-text">No Deployments</div>
<p class="description">
Connect your project with a GitHub repository to create your first
deployment
</p>
<label for="deploy-trigger" class="cta-button">
<svg
class="github-icon"
viewBox="0 0 16 16"
version="1.1"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
<span class="button-text">Connect to GitHub</span>
</label>
</div>
کد CSS
.no-deployments-container {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #ffffff;
padding: 3rem 1.5rem;
max-width: 20rem;
margin: 2rem auto;
position: relative;
border: 1px solid #e6e4e4;
border-radius: 0.5rem;
}
.icon-wrapper {
margin-bottom: 1.5rem;
}
.rocket-icon {
width: 2.5rem;
height: 2.5rem;
color: #0f172a;
}
.title-text {
font-size: 1.25rem;
font-weight: 600;
color: #0f172a;
margin: 0 0 0.5rem 0;
}
.description {
font-size: 1rem;
color: #475569;
line-height: 1.5;
margin: 0 0 1.5rem 0;
max-width: 25rem;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(to bottom, #055ffc, #004ecc);
color: #ffffff;
box-shadow: 0 2px 4px rgba(5, 95, 252, 0.3);
font-size: 0.875rem;
font-weight: 600;
padding: 0.625rem 1.25rem;
border: 1px solid #0044bb;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
overflow: visible;
}
.cta-button:hover {
background: linear-gradient(to bottom, #004ecc, #003aa0);
box-shadow: 0 4px 8px rgba(5, 95, 252, 0.4);
transform: translateY(-1px);
}
/* Pulse effect */
.cta-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 0.375rem;
background-color: rgba(5, 95, 252, 0.3);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
pointer-events: none;
}
.deploy-checkbox:checked ~ .description ~ .cta-button::after {
animation: pulse 1s ease-out;
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.8);
opacity: 0;
}
}
.github-icon {
width: 1rem;
height: 1rem;
fill: currentColor;
}
.deploy-checkbox {
display: none;
}
#rocket-wrapper {
transition: transform 1.5s ease-out;
}
.deploy-checkbox:checked ~ #rocket-wrapper {
animation: floatUp 2s ease-out forwards;
}
@keyframes floatUp {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-6.25rem);
opacity: 0;
}
}