Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>DeepShell — Contact</title> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0a0a0a; | |
| --panel: #161616; | |
| --border: #2a2a2a; | |
| --text: #e0e0e0; | |
| --muted: #888888; | |
| --accent: #00a832; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'JetBrains Mono', 'Courier New', monospace; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 24px 40px; | |
| } | |
| header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 40px; | |
| } | |
| .brand { | |
| font-weight: 700; | |
| font-size: 18px; | |
| letter-spacing: 1px; | |
| color: var(--accent); | |
| text-shadow: 0 0 10px #00ff4155; | |
| text-decoration: none; | |
| } | |
| nav { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| nav a { | |
| padding: 5px 14px; | |
| font-size: 12px; | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| color: var(--muted); | |
| text-decoration: none; | |
| font-family: 'JetBrains Mono', monospace; | |
| transition: all 0.2s; | |
| } | |
| nav a:hover { | |
| color: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| nav a.active { | |
| color: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| /* Hero */ | |
| .hero { | |
| text-align: center; | |
| padding: 40px 0 50px; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 50px; | |
| } | |
| .hero-tag { | |
| display: inline-block; | |
| font-size: 11px; | |
| letter-spacing: 2px; | |
| color: var(--accent); | |
| border: 1px solid var(--accent); | |
| padding: 4px 14px; | |
| border-radius: 2px; | |
| margin-bottom: 20px; | |
| } | |
| .hero h1 { | |
| font-size: 36px; | |
| font-weight: 700; | |
| color: var(--accent); | |
| text-shadow: 0 0 20px #00ff4133; | |
| margin-bottom: 16px; | |
| } | |
| .hero p { | |
| font-size: 14px; | |
| color: var(--muted); | |
| max-width: 540px; | |
| margin: 0 auto; | |
| line-height: 1.8; | |
| } | |
| /* Cards grid */ | |
| .cards-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| margin-bottom: 50px; | |
| } | |
| .card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 28px; | |
| } | |
| .card-title { | |
| font-size: 11px; | |
| letter-spacing: 3px; | |
| color: var(--accent); | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .card-title::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| /* Contact items */ | |
| .contact-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 14px; | |
| margin-bottom: 20px; | |
| } | |
| .contact-icon { | |
| font-size: 20px; | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .contact-label { | |
| font-size: 10px; | |
| letter-spacing: 2px; | |
| color: var(--muted); | |
| margin-bottom: 4px; | |
| } | |
| .contact-value { | |
| font-size: 13px; | |
| color: var(--text); | |
| } | |
| .contact-value a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .contact-value a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Feedback box */ | |
| .feedback-box { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| padding: 20px; | |
| margin-top: 8px; | |
| } | |
| .feedback-box p { | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.8; | |
| margin-bottom: 16px; | |
| } | |
| .feedback-btn { | |
| display: inline-block; | |
| padding: 8px 20px; | |
| font-size: 12px; | |
| border: 1px solid var(--accent); | |
| border-radius: 4px; | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-weight: 700; | |
| transition: all 0.2s; | |
| letter-spacing: 1px; | |
| } | |
| .feedback-btn:hover { | |
| background: var(--accent); | |
| color: #000; | |
| } | |
| /* Footer */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| margin-top: 40px; | |
| padding: 24px 0; | |
| text-align: center; | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| footer a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <a class="brand" href="/">>_ DeepShell</a> | |
| <nav> | |
| <a href="/">Assistant</a> | |
| <a href="/about.html">About</a> | |
| <a href="/contact.html" class="active">Contact</a> | |
| </nav> | |
| </header> | |
| <!-- Hero --> | |
| <div class="hero"> | |
| <div class="hero-tag">● GET IN TOUCH ●</div> | |
| <h1>>_ Contact Us</h1> | |
| <p>Have a question, feedback, or feature request? We'd love to hear from you.</p> | |
| </div> | |
| <!-- Cards --> | |
| <div class="cards-grid"> | |
| <!-- Get In Touch --> | |
| <div class="card"> | |
| <div class="card-title">GET IN TOUCH</div> | |
| <div class="contact-item"> | |
| <div class="contact-icon">📧</div> | |
| <div> | |
| <div class="contact-label">GENERAL ENQUIRIES</div> | |
| <div class="contact-value"><a href="mailto:contact@deepshell.cloud">contact@deepshell.cloud</a></div> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon">🐙</div> | |
| <div> | |
| <div class="contact-label">GITHUB</div> | |
| <div class="contact-value"><a href="https://github.com/muralipala1504" target="_blank">github.com/muralipala1504</a></div> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon">▶️</div> | |
| <div> | |
| <div class="contact-label">YOUTUBE — SYSTELLIGENCE</div> | |
| <div class="contact-value"><a href="https://youtube.com/@murlipalam" target="_blank">@murlipalam</a></div> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon">🌐</div> | |
| <div> | |
| <div class="contact-label">WEBSITE</div> | |
| <div class="contact-value"><a href="https://deepshell.cloud">deepshell.cloud</a></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feedback --> | |
| <div class="card"> | |
| <div class="card-title">FEEDBACK & FEATURES</div> | |
| <div class="feedback-box"> | |
| <p>Found a bug? Have a feature idea? Want to suggest a new DevOps topic for DeepShell to cover?</p> | |
| <p>Send us an email — we read everything and respond to every genuine message.</p> | |
| <a href="mailto:contact@deepshell.cloud?subject=DeepShell Feedback" class="feedback-btn"> | |
| 📩 SEND FEEDBACK | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| © 2026 DeepShell — <a href="/">deepshell.cloud</a> | Built with ❤️ and Linux | Follow <a href="https://youtube.com/@murlipalam" target="_blank">@murlipalam</a> on YouTube | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |