bigger picture, footer

index.html

@@ -46,7 +46,12 @@
                 </div>
                 <div class="form-group">
                     <label for="playerImage">Image</label>
-                    <input type="file" id="playerImage" accept="image/*">
+                    <div class="image-input-container">
+                        <input type="file" id="playerImage" accept="image/*">
+                        <button type="button" id="cameraButton" class="camera-button">
+                            <i class="fas fa-camera"></i> Take Photo
+                        </button>
+                    </div>
                     <div id="imagePreview" class="player-image" style="margin-top: 0.5rem;">
                         <i class="fas fa-user"></i>
                     </div>
@@ -83,6 +88,17 @@
         </div>
     </div>
 
+    <div id="cameraContainer" class="camera-container">
+        <div class="camera-view">
+            <video id="cameraView" autoplay playsinline></video>
+            <canvas id="cameraCanvas" style="display: none;"></canvas>
+        </div>
+        <div class="camera-controls">
+            <button id="cameraCancelButton" class="camera-button-cancel">Cancel</button>
+            <button id="cameraCaptureButton" class="camera-button-large"></button>
+        </div>
+    </div>
+
     <script type="module" src="audio.js"></script>
     <script type="module" src="apps.js"></script>
     <script>
@@ -91,6 +107,12 @@
             .then(() => console.log("Service Worker Registered"))
             .catch((err) => console.log("Service Worker Failed", err));
         }
-      </script>     
+    </script>   
+    <footer class="app-footer">
+        <div class="author-info">
+            <p>Vibe coded by Martin</p>
+            <p>Version 0.0.1</p>
+        </div>
+    </footer>  
 </body>
 </html>