Hand-Notes/index.html at main · dearabhin/Hand-Notes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hand Notes - Hand-Controlled Music Synthesizer</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Primary Meta Tags -->
    <meta name="title" content="Hand Notes - Hand-Controlled Music Synthesizer" />
    <meta
      name="description"
      content="A web-based music synthesizer controlled by hand gestures, featuring an arpeggiator, drum machine, and a real-time visualizer."
    />
    <script type="importmap">
      {
        "imports": {
          "three": "https://esm.sh/three@0.161.0?dev",
          "three/": "https://esm.sh/three@0.161.0&dev/"
        }
      }
    </script>
    <style>
        /* Styles for the new UI elements */
        .ui-button {
            position: absolute;
            z-index: 100;
            background-color: #FACC15; /* Yellow */
            backdrop-filter: blur(5px);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.5rem;
            padding: 0.75rem 1.5rem; /* Increased padding */
            font-family: sans-serif;
            font-weight: 600;
            font-size: 1rem; /* Increased font size */
            color: #000000; /* Black */
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.2s ease-in-out;
        }
        .ui-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        #instruction-btn {
            top: 20px;
            left: 20px;
        }

        #author-btn {
            top: 20px;
            right: 20px;
            text-decoration: none;
        }

        #instruction-panel {
            position: absolute;
            top: 85px; /* Adjusted top position */
            left: 20px;
            z-index: 99;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.75rem;
            padding: 2rem; /* Increased padding */
            width: 380px; /* Increased width */
            max-height: calc(100vh - 110px);
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        #instruction-panel.hidden {
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
        }

        /* Overriding the original #info-text from styles.css for better visibility */
        #info-text {
           font-size: clamp(24px, 5vw, 40px) !important; /* Increased font size */
        }
    </style>
  </head>
  <body style="width: 100%; height: 100%; overflow: hidden; margin: 0">
    <div id="renderDiv" style="width: 100%; height: 100%; margin: 0">

      <!-- New UI Elements -->
      <button id="instruction-btn" class="ui-button">Instructions</button>

      <a href="https://github.com/dearabhin/Hand-Notes/" target="_blank" id="author-btn" class="ui-button">
        By Team Coconut 🥥
      </a>

      <div id="instruction-panel" class="hidden">
        <h3 class="text-2xl font-bold mb-6 text-gray-800">How to Use</h3>

        <div class="mb-6">
            <h4 class="text-lg font-semibold text-gray-700">🎹 Your Left Hand: The Melody Maker</h4>
            <p class="text-base text-gray-600 mt-2">Controls the synthesizer arpeggio.</p>
            <ul class="list-disc list-inside text-base text-gray-600 mt-3 space-y-2">
                <li><b>Change Pitch:</b> Raise or lower your hand.</li>
                <li><b>Control Volume:</b> Change distance between thumb and index finger.</li>
                <li><b>Change Synth Sound:</b> Make a fist.</li>
            </ul>
        </div>

        <div>
            <h4 class="text-lg font-semibold text-gray-700">🥁 Your Right Hand: The Drummer</h4>
            <p class="text-base text-gray-600 mt-2">Controls the drum machine.</p>
            <ul class="list-disc list-inside text-base text-gray-600 mt-3 space-y-2">
                <li><b>Index Finger Up:</b> Activates the Kick Drum.</li>
                <li><b>Middle Finger Up:</b> Activates the Snare Drum.</li>
                <li><b>Ring Finger Up:</b> Activates the Hi-Hat.</li>
                <li><b>Pinky Finger Up:</b> Activates the Clap.</li>
            </ul>
        </div>
      </div>

      <!-- Info Text -->
      <span id="info-text">raise your hands to raise the roof</span>
    </div>

    <script type="module" src="main.js"></script>
    <script>
        // JavaScript for new UI functionality
        const instructionBtn = document.getElementById('instruction-btn');
        const instructionPanel = document.getElementById('instruction-panel');

        instructionBtn.addEventListener('click', () => {
            const isNowHidden = instructionPanel.classList.toggle('hidden');

            if (isNowHidden) {
                instructionBtn.textContent = 'Instructions';
            } else {
                instructionBtn.textContent = 'Hide';
            }
        });
    </script>
  </body>
</html>