home.html
html
<!DOCTYPE html><html lang="en" data-theme="dark"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SkyCode - Browser-Based Code Editor</title> <meta name="description" content="A lightweight, browser-based code editor with integrated terminal. Write, run, and test your code from anywhere."> <!-- Tailwind CSS & DaisyUI --> <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <!-- Particles.js --> <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <style> #particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hero-gradient { background: radial-gradient(ellipse at top, oklch(var(--p) / 0.15) 0%, transparent 50%); } .feature-card { transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px oklch(var(--p) / 0.25); } .logo-glow { filter: drop-shadow(0 0 30px oklch(var(--p) / 0.4)); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-animation { animation: float 6s ease-in-out infinite; } </style></head><body class="min-h-screen bg-base-300"> <!-- Particles Background --> <div id="particles-js"></div> <!-- Navbar --> <div class="navbar bg-base-300/80 backdrop-blur-md border-b border-base-100 sticky top-0 z-50"> <div class="flex-1"> <a href="/" class="btn btn-ghost gap-2"> <svg width="28" height="19" viewBox="0 0 510 343" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M223.703 0.92744C269.21 -4.37923 316.477 13.3274 346.73 47.8741C362.917 65.9674 374.477 88.3541 379.837 112.034C396.877 110.194 413.957 110.914 430.343 116.234C450.917 122.501 469.397 134.914 482.783 151.767C495.703 168.087 504.837 187.687 508.423 208.221C511.797 228.994 509.557 250.461 499.157 268.994C490.157 284.807 475.877 296.407 459.357 303.741C435.29 314.367 408.423 316.861 382.383 315.714C370.863 315.741 359.943 313.661 348.543 312.674C334.383 323.314 317.25 330.394 300.317 335.287C254.05 348.007 202.61 343.767 159.57 322.261C137.077 326.941 113.957 325.621 91.7166 320.167C66.17 313.674 41.8633 300.861 24.1433 281.074C12.3166 268.287 4.96997 251.927 1.71663 234.927C-2.51003 211.581 1.11664 187.007 12.0633 165.954C20.89 148.794 33.9166 134.114 50.9433 124.794C65.6633 116.874 83.1566 114.074 99.6233 116.887C105.903 82.6874 124.637 51.2608 152.197 29.9941C172.69 13.9808 197.837 3.74077 223.703 0.92744Z" fill="#2E2F33"/> <path d="M324.663 45.9142C357.237 74.2075 375.223 119.447 366.797 162.274C347.77 161.474 328.81 164.794 311.877 173.728C282.663 155.634 243.103 155.621 213.023 171.674C199.13 162.528 182.997 155.981 166.357 154.421C148.343 153.021 130.477 154.861 114.037 162.714C107.197 129.914 116.597 94.1542 135.997 67.1808C151.25 46.0742 173.103 29.7008 197.703 21.1008C240.597 6.03417 290.69 15.6342 324.663 45.9142Z" fill="#FFC72A"/> <path d="M455.183 144.688C473.503 158.541 486.397 179.794 492.33 201.821C497.33 220.528 497.09 240.794 488.623 258.461C482.637 271.074 472.437 280.834 460.277 287.474C439.543 298.901 413.69 302.008 390.357 301.461C376.383 301.848 362.85 299.514 349.01 298.234C343.157 297.301 340.303 301.608 335.743 304.314C313.73 318.434 287.023 325.927 261.05 327.701C229.423 329.914 197.703 324.914 169.197 310.728C165.503 308.981 162.623 306.781 158.303 307.994C144.65 310.901 130.863 311.114 116.983 310.288C92.57 307.941 68.41 299.368 48.85 284.421C34.01 273.248 22.3833 258.328 17.5566 240.168C13.9166 228.314 14.0766 216.421 14.9166 204.181C18.0766 178.274 32.89 152.381 55.37 138.581C68.17 130.754 82.8766 128.701 97.6233 130.434C97.53 144.034 97.45 157.154 101.917 170.221C97.73 173.874 91.2766 177.781 89.3566 183.168C87.73 188.808 93.61 194.061 98.9833 191.474C103.797 187.888 107.757 183.288 112.903 180.061C130.223 168.501 151.477 166.194 171.677 169.341C181.663 171.154 190.85 175.141 199.69 180.021C190.357 187.368 181.49 196.328 175.33 206.514C172.463 211.474 175.197 217.594 181.023 218.034C185.383 218.047 186.957 214.088 189.317 211.141C202.463 192.661 222.29 179.448 244.743 175.568C262.53 172.474 282.303 174.194 298.53 182.474C286.97 191.981 276.703 203.594 269.477 216.741C267.583 220.394 265.93 224.448 269.517 227.728C273.29 231.301 278.517 229.781 280.943 225.541C287.103 214.688 294.583 204.781 303.957 196.488C327.063 176.328 361.703 170.568 389.65 183.768C396.57 186.781 402.383 191.341 408.743 195.234C413.61 197.754 419.423 193.408 418.85 188.128C418.103 185.754 416.463 184.168 414.61 182.634C404.61 174.421 392.717 168.514 380.343 164.861C383.57 151.968 383.357 139.048 382.517 125.888C408.25 123.208 434.383 128.874 455.183 144.688Z" fill="white"/> </svg> <span class="font-bold text-lg">SkyCode</span> </a> </div> <div class="flex-none gap-2"> {{with CurrentUser}} <a href="/editor" class="btn btn-primary btn-sm">Open Editor</a> <div class="dropdown dropdown-end"> <div tabindex="0" role="button" class="btn btn-ghost btn-sm gap-1"> <div class="w-6 rounded-full overflow-hidden"> <img alt="{{.Name}}" src="{{.Avatar}}" class="w-full h-full object-cover" /> </div> <span class="text-xs text-base-content/70 hidden sm:inline">@{{.Handle}}</span> </div> <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow-xl"> <li><a href="https://theskyscape.com/user/{{.Handle}}" target="_blank">View Profile</a></li> {{if eq .Handle "connor"}}<li><a href="/admin">Admin</a></li>{{end}} <li><a href="/auth/logout">Logout</a></li> </ul> </div> {{else}} <a href="/auth/signin" class="btn btn-primary btn-sm">Sign In</a> {{end}} </div> </div> <!-- Hero Section --> <div class="hero min-h-[calc(100vh-4rem)] hero-gradient relative z-10"> <div class="hero-content text-center py-16"> <div class="max-w-3xl"> <!-- Logo --> <div class="flex justify-center mb-8"> <div class="float-animation logo-glow"> <svg width="120" height="81" viewBox="0 0 510 343" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M223.703 0.92744C269.21 -4.37923 316.477 13.3274 346.73 47.8741C362.917 65.9674 374.477 88.3541 379.837 112.034C396.877 110.194 413.957 110.914 430.343 116.234C450.917 122.501 469.397 134.914 482.783 151.767C495.703 168.087 504.837 187.687 508.423 208.221C511.797 228.994 509.557 250.461 499.157 268.994C490.157 284.807 475.877 296.407 459.357 303.741C435.29 314.367 408.423 316.861 382.383 315.714C370.863 315.741 359.943 313.661 348.543 312.674C334.383 323.314 317.25 330.394 300.317 335.287C254.05 348.007 202.61 343.767 159.57 322.261C137.077 326.941 113.957 325.621 91.7166 320.167C66.17 313.674 41.8633 300.861 24.1433 281.074C12.3166 268.287 4.96997 251.927 1.71663 234.927C-2.51003 211.581 1.11664 187.007 12.0633 165.954C20.89 148.794 33.9166 134.114 50.9433 124.794C65.6633 116.874 83.1566 114.074 99.6233 116.887C105.903 82.6874 124.637 51.2608 152.197 29.9941C172.69 13.9808 197.837 3.74077 223.703 0.92744Z" fill="#2E2F33"/> <path d="M324.663 45.9142C357.237 74.2075 375.223 119.447 366.797 162.274C347.77 161.474 328.81 164.794 311.877 173.728C282.663 155.634 243.103 155.621 213.023 171.674C199.13 162.528 182.997 155.981 166.357 154.421C148.343 153.021 130.477 154.861 114.037 162.714C107.197 129.914 116.597 94.1542 135.997 67.1808C151.25 46.0742 173.103 29.7008 197.703 21.1008C240.597 6.03417 290.69 15.6342 324.663 45.9142Z" fill="#FFC72A"/> <path d="M455.183 144.688C473.503 158.541 486.397 179.794 492.33 201.821C497.33 220.528 497.09 240.794 488.623 258.461C482.637 271.074 472.437 280.834 460.277 287.474C439.543 298.901 413.69 302.008 390.357 301.461C376.383 301.848 362.85 299.514 349.01 298.234C343.157 297.301 340.303 301.608 335.743 304.314C313.73 318.434 287.023 325.927 261.05 327.701C229.423 329.914 197.703 324.914 169.197 310.728C165.503 308.981 162.623 306.781 158.303 307.994C144.65 310.901 130.863 311.114 116.983 310.288C92.57 307.941 68.41 299.368 48.85 284.421C34.01 273.248 22.3833 258.328 17.5566 240.168C13.9166 228.314 14.0766 216.421 14.9166 204.181C18.0766 178.274 32.89 152.381 55.37 138.581C68.17 130.754 82.8766 128.701 97.6233 130.434C97.53 144.034 97.45 157.154 101.917 170.221C97.73 173.874 91.2766 177.781 89.3566 183.168C87.73 188.808 93.61 194.061 98.9833 191.474C103.797 187.888 107.757 183.288 112.903 180.061C130.223 168.501 151.477 166.194 171.677 169.341C181.663 171.154 190.85 175.141 199.69 180.021C190.357 187.368 181.49 196.328 175.33 206.514C172.463 211.474 175.197 217.594 181.023 218.034C185.383 218.047 186.957 214.088 189.317 211.141C202.463 192.661 222.29 179.448 244.743 175.568C262.53 172.474 282.303 174.194 298.53 182.474C286.97 191.981 276.703 203.594 269.477 216.741C267.583 220.394 265.93 224.448 269.517 227.728C273.29 231.301 278.517 229.781 280.943 225.541C287.103 214.688 294.583 204.781 303.957 196.488C327.063 176.328 361.703 170.568 389.65 183.768C396.57 186.781 402.383 191.341 408.743 195.234C413.61 197.754 419.423 193.408 418.85 188.128C418.103 185.754 416.463 184.168 414.61 182.634C404.61 174.421 392.717 168.514 380.343 164.861C383.57 151.968 383.357 139.048 382.517 125.888C408.25 123.208 434.383 128.874 455.183 144.688Z" fill="white"/> </svg> </div> </div> <!-- Free badge --> <div class="badge badge-primary badge-lg gap-2 mb-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> </svg> 100% Free </div> <h1 class="text-5xl sm:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-white/70 bg-clip-text text-transparent"> Code in the Cloud </h1> <p class="text-xl text-base-content/70 mb-4 max-w-xl mx-auto"> A full development environment in your browser. Edit code with Monaco, run commands in a real terminal, and push to Git — no installation needed. </p> <p class="text-base text-base-content/50 mb-10"> Sign in with your <a href="https://theskyscape.com" target="_blank" class="link link-primary">Skyscape</a> account to get started. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center mb-16"> {{with CurrentUser}} <a href="/editor" class="btn btn-primary btn-lg gap-2 shadow-lg shadow-primary/25"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /> </svg> Open Editor </a> {{else}} <a href="/auth/signin" class="btn btn-primary btn-lg gap-2 shadow-lg shadow-primary/25"> Get Started <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /> </svg> </a> {{end}} <a href="https://theskyscape.com" target="_blank" class="btn btn-ghost btn-lg gap-2"> Learn about Skyscape <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> </div> <!-- Features Grid --> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left"> <div class="feature-card card bg-base-100/60 backdrop-blur-sm border border-white/10 hover:border-primary/30"> <div class="card-body"> <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" /> </svg> </div> <h3 class="card-title text-lg">Monaco Editor</h3> <p class="text-sm text-base-content/60">The same powerful editor that powers VS Code. Syntax highlighting, IntelliSense, and multi-cursor support.</p> </div> </div> <div class="feature-card card bg-base-100/60 backdrop-blur-sm border border-white/10 hover:border-primary/30"> <div class="card-body"> <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary"> <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" /> </svg> </div> <h3 class="card-title text-lg">Full Terminal</h3> <p class="text-sm text-base-content/60">Real PTY terminal with xterm.js. Run Go, Python, Node.js, git, and any CLI tool directly in your browser.</p> </div> </div> <div class="feature-card card bg-base-100/60 backdrop-blur-sm border border-white/10 hover:border-primary/30"> <div class="card-body"> <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /> </svg> </div> <h3 class="card-title text-lg">Git Integration</h3> <p class="text-sm text-base-content/60">Clone repositories with one click. Built-in git panel for staging, committing, pushing, and pulling changes.</p> </div> </div> <div class="feature-card card bg-base-100/60 backdrop-blur-sm border border-white/10 hover:border-primary/30"> <div class="card-body"> <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" /> </svg> </div> <h3 class="card-title text-lg">Cloud Storage</h3> <p class="text-sm text-base-content/60">Files are automatically saved to the cloud. Access your projects from any device, anytime.</p> </div> </div> <div class="feature-card card bg-base-100/60 backdrop-blur-sm border border-white/10 hover:border-primary/30"> <div class="card-body"> <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary"> <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /> </svg> </div> <h3 class="card-title text-lg">Code Search</h3> <p class="text-sm text-base-content/60">Search across all your files with regex support. Jump directly to results with Ctrl+Shift+F.</p> </div> </div> <div class="feature-card card bg-base-100/60 backdrop-blur-sm border border-white/10 hover:border-primary/30"> <div class="card-body"> <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" /> </svg> </div> <h3 class="card-title text-lg">Customizable</h3> <p class="text-sm text-base-content/60">Choose your theme, font size, tab size, and more. Your settings sync across sessions.</p> </div> </div> </div> </div> </div> </div> <!-- Creator Section --> <div class="bg-base-300/50 py-16 border-t border-base-100 relative z-10"> <div class="max-w-lg mx-auto text-center px-4"> <p class="text-base text-base-content/50 mb-6">Created by</p> <a href="https://theskyscape.com/user/connor" target="_blank" class="card bg-base-100/80 backdrop-blur-sm border border-white/5 overflow-hidden group hover:bg-base-100 hover:shadow-xl hover:shadow-primary/5 hover:border-white/10 transition-all duration-300"> <div class="card-body items-center text-center py-8"> <div class="avatar mb-4"> <div class="w-20 p-0.5 rounded-full bg-base-100 border-2 border-white/20 group-hover:border-primary/30 transition-colors"> <img src="https://robots.skysca.pe/connor" alt="Connor" class="rounded-full"> </div> </div> <h3 class="text-xl font-semibold group-hover:text-primary transition-colors">Connor</h3> <p class="text-base-content/50">@connor on Skyscape</p> <div class="flex items-center gap-2 mt-2 text-sm text-primary"> <span>View Profile</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </div> </div> </a> </div> </div> <!-- Footer --> <footer class="footer footer-center p-6 bg-base-300 text-base-content/60 border-t border-base-100 relative z-10"> <div> <p>Part of <a href="https://theskyscape.com" class="link link-hover text-primary">The Skyscape</a> ecosystem</p> </div> </footer> <!-- Particles.js Configuration --> <script> particlesJS('particles-js', { particles: { number: { value: 60, density: { enable: true, value_area: 800 } }, color: { value: '#ffffff' }, shape: { type: 'circle' }, opacity: { value: 0.4, random: true, anim: { enable: true, speed: 0.5, opacity_min: 0.15 } }, size: { value: 3, random: true, anim: { enable: true, speed: 2, size_min: 0.5 } }, line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.12, width: 1 }, move: { enable: true, speed: 1, direction: 'none', random: true, straight: false, out_mode: 'out' } }, interactivity: { detect_on: 'canvas', events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: false }, resize: true }, modes: { grab: { distance: 140, line_linked: { opacity: 0.3 } } } }, retina_detect: true }); </script></body></html>
No comments yet.