Hugging Face's logo

Spaces:
muralipala
/
deepshell
Running

App Files Community
deepshell / about.html
muralipala1504
Add About and Contact pages with navbar links
2ed385e
raw
history blame contribute delete
11.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>DeepShell — About</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: 640px;
 margin: 0 auto;
 line-height: 1.8;
 }
 /* Section */
 .section {
 margin-bottom: 50px;
 }
 .section-title {
 font-size: 11px;
 letter-spacing: 3px;
 color: var(--accent);
 margin-bottom: 20px;
 display: flex;
 align-items: center;
 gap: 12px;
 }
 .section-title::after {
 content: '';
 flex: 1;
 height: 1px;
 background: var(--border);
 }
 /* Mission */
 .mission-box {
 background: var(--panel);
 border: 1px solid var(--border);
 border-left: 3px solid var(--accent);
 border-radius: 8px;
 padding: 24px 28px;
 font-size: 14px;
 line-height: 1.9;
 color: var(--text);
 }
 /* Features grid */
 .features-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 }
 .feature-card {
 background: var(--panel);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 20px;
 transition: border-color 0.2s;
 }
 .feature-card:hover {
 border-color: var(--accent);
 }
 .feature-icon {
 font-size: 24px;
 margin-bottom: 10px;
 }
 .feature-title {
 font-size: 13px;
 font-weight: 700;
 color: var(--accent);
 margin-bottom: 6px;
 }
 .feature-desc {
 font-size: 12px;
 color: var(--muted);
 line-height: 1.7;
 }
 /* Built for */
 .builtfor-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 }
 .builtfor-tag {
 background: var(--panel);
 border: 1px solid var(--border);
 border-radius: 4px;
 padding: 6px 16px;
 font-size: 12px;
 color: var(--text);
 }
 /* Builder */
 .builder-box {
 background: var(--panel);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 24px 28px;
 display: flex;
 align-items: center;
 gap: 24px;
 }
 .builder-avatar {
 font-size: 48px;
 flex-shrink: 0;
 }
 .builder-name {
 font-size: 16px;
 font-weight: 700;
 color: var(--accent);
 margin-bottom: 6px;
 }
 .builder-roles {
 font-size: 12px;
 color: var(--muted);
 line-height: 1.8;
 }
 /* Thanks grid */
 .thanks-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 }
 .thanks-card {
 background: var(--panel);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 14px 18px;
 display: flex;
 flex-direction: column;
 gap: 4px;
 }
 .thanks-name {
 font-size: 13px;
 font-weight: 700;
 color: var(--accent);
 }
 .thanks-role {
 font-size: 11px;
 color: var(--muted);
 }
 /* Footer */
 footer {
 border-top: 1px solid var(--border);
 margin-top: 60px;
 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="/">&gt;_ DeepShell</a>
 <nav>
 <a href="/">Assistant</a>
 <a href="/about.html" class="active">About</a>
 <a href="/contact.html">Contact</a>
 </nav>
 </header>
<!-- Hero -->
 <div class="hero">
 <div class="hero-tag">● ABOUT DEEPSHELL ●</div>
 <h1>&gt;_ About DeepShell</h1>
 <p>An AI-powered Linux and DevOps assistant built for engineers who want fast, accurate, copy-paste-ready answers — without leaving the terminal mindset.</p>
 </div>
<!-- Mission -->
 <div class="section">
 <div class="section-title">OUR MISSION</div>
 <div class="mission-box">
 DeepShell was built for one reason — to give Linux and DevOps engineers a fast, focused AI assistant that speaks their language. No generic chatbot noise. No off-topic answers. Just clean, accurate, production-aware responses for the command line world. Think of it as an AI-thrusted co-pilot for your infrastructure work.
 </div>
 </div>
<!-- Features -->
 <div class="section">
 <div class="section-title">KEY FEATURES</div>
 <div class="features-grid">
 <div class="feature-card">
 <div class="feature-icon">🤖</div>
 <div class="feature-title">Assistant Mode</div>
 <div class="feature-desc">Fast DevOps answers. Copy-paste ready commands. Instant response.</div>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🎓</div>
 <div class="feature-title">Trainer Mode</div>
 <div class="feature-desc">Structured learning with explanations, examples, and step-by-step guidance.</div>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🔊</div>
 <div class="feature-title">Voice TTS</div>
 <div class="feature-desc">English and Hindi text-to-speech. Listen while you work.</div>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🌐</div>
 <div class="feature-title">Translation</div>
 <div class="feature-desc">Hindi translation powered by LibreTranslate. Inclusive by design.</div>
 </div>
 <div class="feature-card">
 <div class="feature-icon">📥</div>
 <div class="feature-title">Export</div>
 <div class="feature-desc">Save any session as a Markdown reference document. Offline ready.</div>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🔒</div>
 <div class="feature-title">Secure</div>
 <div class="feature-desc">Rate limiting, CORS locking, input validation. Hardened by design.</div>
 </div>
 </div>
 </div>
<!-- Built For -->
 <div class="section">
 <div class="section-title">BUILT FOR</div>
 <div class="builtfor-grid">
 <span class="builtfor-tag">Linux Administrators</span>
 <span class="builtfor-tag">DevOps Engineers</span>
 <span class="builtfor-tag">Cloud Engineers</span>
 <span class="builtfor-tag">Site Reliability Engineers</span>
 <span class="builtfor-tag">Infrastructure Engineers</span>
 <span class="builtfor-tag">Docker & Kubernetes Users</span>
 <span class="builtfor-tag">Bash Scripters</span>
 <span class="builtfor-tag">Students & Learners</span>
 </div>
 </div>
<!-- Builder -->
 <div class="section">
 <div class="section-title">THE BUILDER</div>
 <div class="builder-box">
 <div class="builder-avatar">🖥️</div>
 <div>
 <div class="builder-name">Muralidhar M Pala</div>
 <div class="builder-roles">
 🪖 Indian Air Force Veteran — 13.5 years service<br>
 ⚙️ Senior DevOps & Linux Engineer — 20+ years experience<br>
 🔓 Open Source Enthusiast<br>
 📍 Ajman, UAE
 </div>
 </div>
 </div>
 </div>
<!-- Special Thanks -->
 <div class="section">
 <div class="section-title">SPECIAL THANKS</div>
 <div class="thanks-grid">
 <div class="thanks-card">
 <div class="thanks-name">Groq</div>
 <div class="thanks-role">LLM inference engine</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">Cerebras</div>
 <div class="thanks-role">Failover LLM provider</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">HuggingFace</div>
 <div class="thanks-role">Hosting platform</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">Claude — Anthropic</div>
 <div class="thanks-role">AI development partner</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">DeepSeek</div>
 <div class="thanks-role">Architecture consultation</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">OpenAI</div>
 <div class="thanks-role">Early inspiration</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">Piper TTS</div>
 <div class="thanks-role">Hindi voice engine</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">LibreTranslate</div>
 <div class="thanks-role">Translation engine</div>
 </div>
 <div class="thanks-card">
 <div class="thanks-name">Cloudflare</div>
 <div class="thanks-role">Proxy + Email routing</div>
 </div>
 </div>
 </div>
<footer>
 &copy; 2026 DeepShell — <a href="/">deepshell.cloud</a> &nbsp;|&nbsp; Built with ❤️ and Linux &nbsp;|&nbsp; Follow <a href="https://youtube.com/@murlipalam" target="_blank">@murlipalam</a> on YouTube
 </footer>
 </div>
</body>
</html>