ChatGPT Interactive Components Examples
by skyrmionz
auth.html•5.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="0; url=https://www.target.com/login?client_id=ecom-web-1.0.0&ui_namespace=ui-default&back_button_action=browser&keep_me_signed_in=true&kmsi_default=false&actions=create_session_signin&amr=passkey_create&amr=email&amr=password&signin_amr=true&username=off%2A%2A%2A">
<title>Redirecting to Target Sign In</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
background: #f5f5f5;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
}
.disclaimer {
max-width: 420px;
width: 100%;
background: #e8f4fd;
border: 2px solid #4299e1;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
text-align: center;
}
.disclaimer p {
margin: 0;
font-size: 13px;
color: #1a365d;
line-height: 1.5;
font-weight: 500;
}
.disclaimer strong {
color: #2c5282;
font-weight: 600;
}
.container {
max-width: 420px;
width: 100%;
background: white;
border-radius: 12px;
padding: 32px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 32px;
}
.auth-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-size: 32px;
color: white;
}
h1 {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.subtitle {
color: #666;
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
color: #333;
}
input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: border-color 0.2s;
}
input:focus {
outline: none;
border-color: #4299e1;
}
.btn-primary {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.2s;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.hidden {
display: none;
}
.code-inputs {
display: flex;
gap: 8px;
margin-bottom: 20px;
justify-content: center;
}
.code-input {
width: 48px;
height: 56px;
text-align: center;
font-size: 24px;
font-weight: 600;
border: 2px solid #ddd;
border-radius: 8px;
}
.code-input:focus {
border-color: #4299e1;
}
.success-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: linear-gradient(135deg, #00c853 0%, #00e676 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
font-weight: bold;
}
.loading {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.error-message {
background: #ffebee;
color: #c62828;
padding: 12px;
border-radius: 6px;
margin-bottom: 16px;
font-size: 14px;
text-align: center;
}
.help-text {
text-align: center;
color: #999;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="auth-icon">🔐</div>
<h1>Redirecting to Target...</h1>
<p class="subtitle">You will be redirected to Target's secure login page</p>
</div>
<div style="text-align: center; padding: 20px;">
<div class="loading" style="display: inline-block;"></div>
<p style="margin-top: 16px; color: #666;">If you are not redirected automatically, <a href="https://www.target.com/login?client_id=ecom-web-1.0.0&ui_namespace=ui-default&back_button_action=browser&keep_me_signed_in=true&kmsi_default=false&actions=create_session_signin&amr=passkey_create&amr=email&amr=password&signin_amr=true&username=off%2A%2A%2A" style="color: #4299e1;">click here</a>.</p>
</div>
</div>
<script>
// Immediate redirect
window.location.href = 'https://www.target.com/login?client_id=ecom-web-1.0.0&ui_namespace=ui-default&back_button_action=browser&keep_me_signed_in=true&kmsi_default=false&actions=create_session_signin&amr=passkey_create&amr=email&amr=password&signin_amr=true&username=off%2A%2A%2A';
</script>
</body>
</html>
Latest Blog Posts
- Model Context Protocol Proxies: Enabling Enterprise Control with Virtual MCPsBy Om-Shree-0709 on .AI SecurityVirtual MCPKubernetes Operator
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/skyrmionz/chatgpt-mcp-server-interactive-components'
If you have feedback or need assistance with the MCP directory API, please join our Discord server