bigger picture, footer

styles.css

@@ -72,6 +72,7 @@ body {
 
 .carousel-container {
     margin-top: 70px;
+    margin-bottom: 60px; /* Add some space for the footer */
     width: 100%;
     overflow: hidden;
     flex: 1;
@@ -84,13 +85,20 @@ body {
     height: calc(100vh - 70px);
 }
 
+/* Adjust the preview image in the modal to maintain consistency */
+#imagePreview.player-image {
+    width: 180px; /* Slightly smaller than the main display but still larger than original 120px */
+    height: 180px;
+    margin: 0.5rem auto;
+}
+
 .player-card {
     min-width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
+    padding: 2rem; /* Increased from 1rem for more spacing */
     transition: all 0.3s ease;
 }
 
@@ -143,15 +151,16 @@ body {
 }
 
 .player-image {
-    width: 120px;
-    height: 120px;
+    width: 240px;  /* Doubled from 120px */
+    height: 240px; /* Doubled from 120px */
     border-radius: 50%;
     background-color: #ddd;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem; /* Increased from 1rem */
     overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Added shadow for better visual presence */
 }
 
 .player-image img {
@@ -161,14 +170,15 @@ body {
 }
 
 .player-image i {
-    font-size: 3rem;
+    font-size: 6rem; /* Doubled from 3rem */
     color: #888;
 }
 
 .player-name {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
+    font-size: 3rem; /* Doubled from 1.5rem */
+    margin-bottom: 1rem; /* Increased from 0.5rem */
     font-weight: bold;
+    text-align: center;
 }
 
 .modal {
@@ -258,4 +268,103 @@ body {
     background-color: #e74c3c;
     color: white;
     width: 100%;
+}
+
+/* Add these styles to your styles.css file */
+
+.image-input-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.camera-button {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.camera-button:hover {
+    background-color: #2980b9;
+}
+
+/* Optional: Hide the default file input appearance and use a custom button */
+input[type="file"] {
+    max-width: 120px;
+}
+
+.camera-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    z-index: 30;
+    display: none;
+    flex-direction: column;
+}
+
+.camera-container.active {
+    display: flex;
+}
+
+.camera-view {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+.camera-view video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.camera-controls {
+    display: flex;
+    justify-content: space-around;
+    padding: 1rem;
+    background-color: #222;
+}
+
+.camera-button-large {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 3px solid #3498db;
+    cursor: pointer;
+}
+
+.camera-button-cancel {
+    background-color: #e74c3c;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.app-footer {
+    background-color: #2c3e50;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+    font-size: 0.9rem;
+    margin-top: auto; /* This pushes the footer to the bottom when possible */
+}
+
+.author-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
 }