geedback

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

about.ts (1809B)

      1 export const renderAbout = (app: HTMLDivElement) => {
      2   app.innerHTML = `
      3     <div class="about-container">
      4       <nav>
      5         <a href="#" id="back-home">← Back to App</a>
      6       </nav>
      7 
      8       <h1>About Geedback</h1>
      9 
     10       <section class="about-section">
     11         <h2>What is Geedback?</h2>
     12         <p>
     13           Geedback is a multi-oscillator synthesizer that uses smartphone feedback and gravity sensors
     14           to create unique soundscapes. It explores the interaction between movement and sound synthesis.
     15         </p>
     16       </section>
     17 
     18       <section class="about-section">
     19         <h2>Author</h2>
     20         <p>Created by <strong>tetsu AKA Minerva_Juppiter</strong></p>
     21       </section>
     22 
     23       <section class="about-section">
     24         <h2>Repository</h2>
     25         <p>
     26           You can find the source code on GitHub:
     27           <a href="https://github.com/minerva-jupiter/geedback" target="_blank" rel="noopener noreferrer">
     28             minerva-jupiter/geedback
     29           </a>
     30         </p>
     31       </section>
     32 
     33       <section class="about-section">
     34         <h2>Demo Video</h2>
     35         <div class="video-container">
     36           <iframe
     37             width="560"
     38             height="315"
     39             src="https://www.youtube.com/embed/8O0NMlRxeOw?si=wnrLWbrW070iwMPI"
     40             title="Geedback Demo"
     41             frameborder="0"
     42             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
     43             allowfullscreen>
     44           </iframe>
     45         </div>
     46       </section>
     47 
     48       <footer style="margin-top: 40px; font-size: 0.8em; color: #666;">
     49         &copy; 2026 Minerva_Juppiter
     50       </footer>
     51     </div>
     52   `;
     53 
     54   document.getElementById("back-home")?.addEventListener("click", (e) => {
     55     e.preventDefault();
     56     window.location.hash = "";
     57   });
     58 };