1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Home - The Pocket Piano</title> 7 <style> 8 body { 9 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 10 margin: 0; 11 padding: 0; 12 background-color: #f9fafb; 13 color: #111827; 14 display: flex; 15 flex-direction: column; 16 min-height: 100vh; 17 } 18 header { 19 background-color: #0175C2; 20 color: white; 21 padding: 40px 20px; 22 text-align: center; 23 } 24 header h1 { 25 margin: 0; 26 font-size: 2.5rem; 27 font-weight: 800; 28 letter-spacing: -1px; 29 } 30 header a { 31 color: white; 32 text-decoration: none; 33 } 34 .content { 35 flex: 1; 36 padding: 40px 20px; 37 max-width: 800px; 38 margin: 0 auto; 39 width: 100%; 40 box-sizing: border-box; 41 line-height: 1.6; 42 } 43 .content h1, .content h2, .content h3 { 44 color: #1f2937; 45 } 46 .content a { 47 color: #0175C2; 48 text-decoration: none; 49 } 50 .content a:hover { 51 text-decoration: underline; 52 } 53 footer { 54 background-color: #111827; 55 color: #d1d5db; 56 padding: 50px 20px 30px; 57 text-align: center; 58 margin-top: 40px; 59 } 60 .footer-links { 61 display: flex; 62 justify-content: center; 63 gap: 30px; 64 flex-wrap: wrap; 65 margin-bottom: 30px; 66 } 67 .footer-links a { 68 color: #9ca3af; 69 text-decoration: none; 70 transition: color 0.2s; 71 font-weight: 500; 72 } 73 .footer-links a:hover { 74 color: white; 75 } 76 /* Marketing specific styles */ 77 .marketing-header { 78 padding: 80px 20px; 79 } 80 .marketing-header h1 { 81 font-size: 3.5rem; 82 margin-bottom: 15px; 83 } 84 .marketing-header p { 85 font-size: 1.25rem; 86 margin-bottom: 40px; 87 opacity: 0.9; 88 max-width: 600px; 89 margin-left: auto; 90 margin-right: auto; 91 } 92 .cta-buttons { 93 display: flex; 94 gap: 15px; 95 justify-content: center; 96 flex-wrap: wrap; 97 } 98 .btn { 99 display: inline-block; 100 padding: 14px 28px; 101 border-radius: 8px; 102 text-decoration: none; 103 font-weight: 600; 104 font-size: 1.1rem; 105 transition: all 0.2s ease; 106 } 107 .btn-primary { 108 background-color: white; 109 color: #0175C2; 110 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 111 } 112 .btn-primary:hover { 113 background-color: #f3f4f6; 114 transform: translateY(-2px); 115 box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); 116 } 117 .btn-secondary { 118 background-color: transparent; 119 color: white; 120 border: 2px solid rgba(255, 255, 255, 0.8); 121 } 122 .btn-secondary:hover { 123 background-color: rgba(255, 255, 255, 0.1); 124 border-color: white; 125 transform: translateY(-2px); 126 } 127 .marketing-content { 128 text-align: center; 129 padding: 60px 20px; 130 } 131 .marketing-content h2 { 132 font-size: 2.5rem; 133 margin-bottom: 20px; 134 } 135 .marketing-content p { 136 font-size: 1.1rem; 137 } 138 139 /* Markdown specific styles */ 140 .markdown-body { 141 background: white; 142 padding: 40px; 143 border-radius: 8px; 144 box-shadow: 0 1px 3px rgba(0,0,0,0.1); 145 text-align: left; 146 } 147 .markdown-body pre { 148 background: #f3f4f6; 149 padding: 16px; 150 border-radius: 6px; 151 overflow-x: auto; 152 } 153 .markdown-body code { 154 background: #f3f4f6; 155 padding: 2px 6px; 156 border-radius: 4px; 157 font-family: monospace; 158 } 159 .markdown-body blockquote { 160 border-left: 4px solid #e5e7eb; 161 margin-left: 0; 162 padding-left: 16px; 163 color: #6b7280; 164 } 165 .markdown-body table { 166 border-collapse: collapse; 167 width: 100%; 168 margin-bottom: 20px; 169 } 170 .markdown-body th, .markdown-body td { 171 border: 1px solid #e5e7eb; 172 padding: 8px 12px; 173 } 174 .markdown-body th { 175 background-color: #f9fafb; 176 } 177 .markdown-body img { 178 max-width: 100%; 179 border-radius: 8px; 180 } 181 </style> 182</head> 183<body> 184 <header class="marketing-header"> 185 <div style="margin-bottom: 24px;"> 186 <a href="/"> 187 <img src="/icons/Icon-192.png" alt="The Pocket Piano Logo" style="width: 128px; height: 128px; border-radius: 32px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);"> 188 </a> 189 </div> 190 <h1><a href="/">The Pocket Piano</a></h1> 191 <p>Piano in your pocket with support for hardware keyboard playback and sustain.</p> 192 <div class="cta-buttons"> 193 <a href="/web/" class="btn btn-primary">Try Now (Web)</a> 194 <a href="https://apps.apple.com/us/app/the-pocket-piano/id1453992672" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">Download on App Store</a> 195 <a href="https://play.google.com/store/apps/details?id=com.appleeducate.flutter_piano&hl=en_US" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">Get it on Google Play</a> 196 </div> 197</header> 198 199<div class="content marketing-content"> 200 <h2>
200Access anywhere, anytime</h2> 201 <p>Works across iOS, Android, and Web. Play any note on a piano, always in your pocket.</p> 202</div> 203 204 205 <footer> 206 <div class="footer-links"> 207 <!-- Link to the markdown pages locally if they exist, else remote --> 208 <a href="/privacy-policy">Privacy Policy</a> 209 <a href="/changelog">Changelog</a> 210 </div> 211 <p>© 2026 The Pocket Piano. All rights reserved.</p> 212 </footer> 213</body> 214</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.