Skip to content

Commit

Permalink
feat: pizza login success page style refresh
Browse files Browse the repository at this point in the history
  • Loading branch information
nickytonline committed Aug 29, 2024
1 parent 74b2fc5 commit 55bb521
Showing 1 changed file with 33 additions and 118 deletions.
151 changes: 33 additions & 118 deletions api/auth/success.html
Original file line number Diff line number Diff line change
@@ -1,123 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenSauced Pizza-CLI</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff9900, #ff5500);
font-family: Arial, sans-serif;
position: relative;
}
.container {
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s;
position: relative;
}
.container:hover {
transform: scale(1.05);
}
.pizza-icon {
font-size: 80px;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.title {
color: #ff5500;
font-size: 32px;
font-weight: bold;
margin: 0;
margin-bottom: 10px;
}
.message {
color: #555;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 15px;
}
.message-link {
color: #ff5500;
text-decoration: none;
font-weight: bold;
}
.opensauced-logo {
display: flex;
align-items: center;
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 28px;
font-weight: bold;
}
.logo-image {
width: 60px;
height: 60px;
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #ff9900;
cursor: pointer;
}
.close-button:hover {
color: #ff5500;
}
</style>
</head>
<body>
<div class="container">
<div class="close-button" id="closeButton">&#10005;</div>
<div class="pizza-icon">🍕</div>
<h1 class="title">Authentication Successful</h1>
<p class="message" id="counter">
<span>You'll be redirected to </span>
<a href="https://insights.opensauced.pizza/" class="message-link"
>&nbspInsights&nbsp</a
>
<span> in 30 seconds</span>
</p>
</div>
<a href="https://opensauced.pizza" target="_blank" rel="noreferrer">
<div class="opensauced-logo">
<img
src="https://raw.githubusercontent.com/open-sauced/assets/main/logos/slice-White.png"
alt="OpenSauced Logo"
class="logo-image"
/>
<div class="logo-text">OpenSauced</div>
</div>
</a>
<script>
const counterElement = document.getElementById("counter");
const closeButton = document.getElementById("closeButton");

let seconds = 30;
let interval = setInterval(() => {
if (seconds <= 1) {
clearInterval(interval);
window.open("https://insights.opensauced.pizza", "_self");
}
counterElement.innerHTML = `<span>You'll be redirected to </span>
<a href="https://insights.opensauced.pizza/" class="message-link">&nbspInsights&nbsp</a>
<span> in ${--seconds} second${seconds > 1 ? "s" : ""}</span>`;
}, 1000);
<head>
<title>OpenSauced Pizza-CLI</title>
<style>
body {
margin: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: black;
color: white;
}

.container {
display: grid;
place-content: center;
height: calc(100vh - 5.5rem);
overflow: hidden;
font-size: 1.5rem;
}
</style>
<meta http-equiv="refresh" content="10;url=https://opensauced.pizza/" />
</head>

<body>
<a href="https://opensauced.pizza">
<img height="24" width=""140" class="opensauced-logo" src="https://opensauced.pizza/_next/static/media/brandLogo.4259030a.svg">
</a>
<div class="container">
<div style="text-align: center;font-size: 5rem;">🍕</div>
<h1 class="title">Authentication Successful</h1>
<p style="text-align: center">
You'll be redirected to <a href="https://opensauced.pizza/" style="color: #ff5500;">OpenSauced</a> shortly
</p>
</div>
</body>

closeButton.addEventListener("click", () => {
window.close();
});
</script>
</body>
</html>

0 comments on commit 55bb521

Please sign in to comment.