diff --git a/ansible-sandbox.html b/ansible-sandbox.html index 44ce66d..f086a93 100644 --- a/ansible-sandbox.html +++ b/ansible-sandbox.html @@ -99,7 +99,7 @@ left: 0; right: 0; z-index: 1000; - padding: 1.25rem 0; + padding: 1rem 0; border-bottom: 1px solid var(--border); } @@ -190,24 +190,25 @@ gap: 1.25rem; } - .dashboard-link { + .back-link { display: flex; align-items: center; - gap: 0.75rem; - padding: 0.625rem 1.25rem; - font-size: 0.95rem; + gap: 0.5rem; + padding: 0.5rem 1rem; + background-color: rgba(59, 130, 246, 0.1); + border: 1px solid rgba(59, 130, 246, 0.3); + border-radius: 0.5rem; + font-size: 0.9rem; font-weight: 500; color: var(--text-primary); - background-color: rgba(59, 130, 246, 0.1); - border: 1px solid rgba(59, 130, 246, 0.2); - border-radius: 0.5rem; text-decoration: none; transition: all var(--transition-normal); } - .dashboard-link:hover { + .back-link:hover { background-color: rgba(59, 130, 246, 0.2); - border-color: rgba(59, 130, 246, 0.3); + border-color: var(--accent); + transform: translateY(-2px); } .live-indicator { @@ -1188,6 +1189,242 @@ transform: scale(1.05); } } + + /* Sandbox Specific Styles */ + .sandbox-content { + padding-top: 8rem; + max-width: 900px; + margin: 0 auto; + } + + .sandbox-title { + font-size: 2.5rem; + margin-bottom: 1rem; + text-align: center; + color: var(--text-primary); + background: var(--accent-gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } + + .sandbox-description { + text-align: center; + color: var(--text-secondary); + margin-bottom: 3rem; + font-size: 1.1rem; + } + + .sandbox-tabs { + display: flex; + justify-content: center; + margin-bottom: 2rem; + } + + .preview-tabs { + display: flex; + gap: 2rem; + border-bottom: 1px solid var(--border); + padding-bottom: 0.5rem; + width: 100%; + justify-content: center; + } + + .preview-tab { + font-size: 1.1rem; + font-weight: 500; + color: var(--text-secondary); + cursor: pointer; + position: relative; + padding: 0.5rem 1rem; + transition: color var(--transition-normal); + } + + .preview-tab::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + width: 0; + height: 3px; + background: var(--accent-gradient); + transition: width var(--transition-normal); + } + + .preview-tab:hover { + color: var(--text-primary); + } + + .preview-tab.active { + color: var(--accent); + } + + .preview-tab.active::after { + width: 100%; + } + + .preview-content { + background-color: var(--card-bg); + border-radius: 0.75rem; + overflow: hidden; + border: 1px solid var(--border); + margin-bottom: 2rem; + box-shadow: var(--card-shadow); + min-height: 400px; + } + + .tab-content { + display: none; + padding: 2rem; + } + + .tab-content.active { + display: block; + } + + .tab-content h3 { + margin-bottom: 1rem; + color: var(--text-primary); + } + + .preview-status { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1.5rem; + font-size: 1.1rem; + } + + .status-dot { + width: 12px; + height: 12px; + border-radius: 50%; + } + + .status-ready { + background-color: var(--info); + box-shadow: 0 0 5px var(--info); + } + + .status-running { + background-color: var(--warning); + box-shadow: 0 0 5px var(--warning); + animation: pulse 1.5s infinite; + } + + .status-success { + background-color: var(--success); + box-shadow: 0 0 5px var(--success); + } + + @keyframes pulse { + 0% { + opacity: 0.6; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.6; + } + } + + .time-remaining { + margin-bottom: 0.75rem; + color: var(--text-secondary); + } + + .time-progress { + height: 8px; + background-color: rgba(71, 85, 105, 0.2); + border-radius: 4px; + overflow: hidden; + margin-bottom: 2rem; + } + + .time-progress-bar { + height: 100%; + background: var(--accent-gradient); + width: 0; + transition: width 1s ease-in-out; + } + + .sandbox-controls { + display: flex; + gap: 1rem; + justify-content: center; + } + + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + padding: 0.75rem 1.5rem; + font-size: 1rem; + font-weight: 500; + border-radius: 0.5rem; + cursor: pointer; + transition: all var(--transition-normal); + border: none; + } + + .btn-primary { + background: var(--accent-gradient); + color: white; + } + + .btn-primary:hover { + box-shadow: var(--accent-glow); + transform: translateY(-2px); + } + + .btn-outline { + background-color: transparent; + border: 1px solid var(--accent); + color: var(--accent); + } + + .btn-outline:hover { + background-color: rgba(59, 130, 246, 0.1); + transform: translateY(-2px); + } + + /* Code editor styles */ + .code-editor { + font-family: 'JetBrains Mono', monospace; + background-color: rgba(15, 23, 42, 0.3); + border-radius: 0.5rem; + padding: 1.5rem; + font-size: 0.9rem; + line-height: 1.6; + max-height: 500px; + overflow-y: auto; + } + + /* Responsive styles */ + @media (max-width: 768px) { + .sandbox-title { + font-size: 2rem; + } + + .preview-tabs { + gap: 1rem; + } + + .preview-tab { + font-size: 0.9rem; + padding: 0.5rem; + } + + .sandbox-controls { + flex-direction: column; + } + + .btn { + width: 100%; + } + }
@@ -1196,26 +1433,14 @@ @@ -1228,192 +1453,56 @@ -