Frontend fich

store-service/static/css/base.css

@@ -63,6 +63,16 @@ input[type="password"] {
   background-color: var(--white-transparent);
 }
 
+.form {
+  display: none;
+}
+
+.form.active {
+  display: block;
+  padding: var(--spacing-sm);
+  text-align: center;
+}
+
 .search-bar {
   display: flex;
   justify-content: flex-end;
@@ -72,8 +82,6 @@ input[type="password"] {
 
 .search {
   margin-right: var(--spacing-md);
-  /* FIXME: */
-  /* width: 300px;  */
   width: 100%;
   padding: var(--spacing-sm);
   border-radius: var(--border-radius-sm);
@@ -82,4 +90,42 @@ input[type="password"] {
 
 .search-icon {
   cursor: pointer;
+}
+
+.chose-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.file-upload-container {
+  position: relative;
+}
+
+.file-upload-container input[type="file"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.file-upload-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px dashed black;
+  cursor: pointer;
+  color:black;
+  /* transition: border-color 0.3s ease; */
+  transition: border-color 3s cubic-bezier(0, 0.96, 1, -0.17);
+  min-height: 40px;
+}
+
+.file-upload-container:hover .file-upload-label {
+  border-color: red !important; 
 }

store-service/static/css/layout.css

@@ -22,18 +22,6 @@
   margin: 0 auto;
 }
 
-.container_store {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.container_game {
-  max-width: 50%;
-  height: 100%;
-  padding: var(--spacing-lg);
-}
-
 .container_user,
 .container_cart, 
 .container_library {
@@ -42,7 +30,7 @@
 
 .container_user,
 .container_cart {
-  max-width: 30%;
+  width: 30vw;
   min-width: 300px;
   display: flex;
   flex-direction: column;
@@ -81,4 +69,16 @@
         - var(--spacing-lg)
         - var(--spacing-sm));
   margin-bottom: var(--spacing-sm);
+}
+
+.container_store {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.container_game {
+  max-width: 50%;
+  height: 100%;
+  padding: var(--spacing-lg);
 }

store-service/static/css/user.css

@@ -47,4 +47,12 @@
   flex: 1;
   min-height: 60vh;
   overflow-y: auto;
+}
+
+.section_user input[type="tel"] {
+  width: 100%;
+}
+
+.section_user input[type=file]::file-selector-button {
+  display: none;
 }

store-service/static/javascripts/Studio.js

@@ -0,0 +1,11 @@
+function toggleEditMode() {
+  var gamesSection = document.getElementById('games-section');
+  var editForm = document.getElementById('edit-form');
+  if (gamesSection.style.display === 'none') {
+    gamesSection.style.display = 'block';
+    editForm.style.display = 'none';
+  } else {
+    gamesSection.style.display = 'none';
+    editForm.style.display = 'block';
+  }
+}

store-service/static/javascripts/User.js

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // File-upload-label change text
+  const fileInput = document.getElementById('profile-avatar');
+  const fileLabel = document.querySelector('.file-upload-label');
+
+  fileInput.addEventListener('change', function() {
+    if (fileInput.files.length > 0) {
+       fileLabel.textContent = fileInput.files[0].name
+    } else {
+        fileLabel.textContent = 'Click for download image'
+    }
+  });
+
+  // Change forms
+  const formButton = document.querySelectorAll('.button_form');
+  const forms = document.querySelectorAll('.form');  
+
+  function showForm(formId) {
+    forms.forEach(form => {
+      form.classList.remove('active');
+      if (form.id === formId) {
+        form.classList.add('active');
+      }
+    });
+  }
+
+  function setActiveButton(button) {
+    formButton.forEach(btn => btn.classList.remove('active'));
+      button.classList.add('active');
+  }
+
+  formButton.forEach(button => {
+    button.addEventListener('click', function () {
+      const formId = this.getAttribute('data-form');
+      showForm(formId);
+      setActiveButton(this);
+    });
+  });
+
+  const activeForm = document.querySelector('.form.active');
+  if (activeForm) {
+    const activeBtn = document.querySelector(`[data-form="${activeForm.id}"]`);
+    setActiveButton(activeBtn);
+  }
+});
+
+function check_int(value) {
+  value = Math.max(0, Math.min(2147483647 , parseInt(value)));
+  return isNaN(value) ? 0 : value;;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+
+
+
+});

store-service/templates/Studio.html

@@ -51,15 +51,16 @@ <h1 class="game-hub"></h1>
       <div class="section_user">
         <div class="games_section" id="games-section">
           <h2>Games by Studio Name{# TODO: {studio.name}#}</h2>
-          <!-- <div class="game-list"> -->
 						<ul>
 							{# TODO:
 							{% for game in user_games % }
-								<li onclick="loadGameDetails( {{ game }} )"><img src={{url_for('static', filename='images/games/{gid}/{gpic}'.format(gid=game.game_id, gpic=game.icon))}} class="game_icon"><span title="{{game.name}}">{{game.name}}</span></li>
+								<!-- <li onclick="loadGameDetails( {{ game }} )"><img src={{url_for('static', filename='images/games/{gid}/{gpic}'.format(gid=game.game_id, gpic=game.icon))}} class="game_icon"><span title="{{game.name}}">{{game.name}}</span></li> -->
 							{% endfor % }
 							#}
+              {%for i in range(20)%}
+              <li><img src="static/images/games/1/dota.ico" class="game_icon"><span title="DOTA-2">DOTA-2</span></li>
+              {%endfor%}
 						</ul>
-          <!-- </div> -->
         </div>
 
         <div id="edit-form" style="display: none;">
@@ -77,22 +78,12 @@ <h2>Games by Studio Name{# TODO: {studio.name}#}</h2>
             <button type="button" class="button_common" onclick="toggleEditMode()">Cancel</button>
           </form>
         </div>
+
       </div>
     </div>
   </main>
 
-  <script>
-    function toggleEditMode() {
-      var gamesSection = document.getElementById('games-section');
-      var editForm = document.getElementById('edit-form');
-      if (gamesSection.style.display === 'none') {
-        gamesSection.style.display = 'block';
-        editForm.style.display = 'none';
-      } else {
-        gamesSection.style.display = 'none';
-        editForm.style.display = 'block';
-      }
-    }
-  </script>
+  <script src="{{url_for('static', filename='javascripts/Studio.js')}}"></script>
+
 </body>
 </html>

store-service/templates/User.html

@@ -42,23 +42,68 @@ <h1 class="game-hub"></h1>
 					<div class="user_info_text ">Profile Name</div>
 				</div>
 				<div class="user_info_text ">Cash:<br/>0$</div>
-				<button class="button_common">Edit</button>
+				<button class="button_common button_form" data-form="edit">Edit</button>
 			</div>
 
 			<div class="button_container">
-				<button class="button_common">Something</button>
+				<button class="button_common button_form" data-form="replenishment">Replenishment</button>
 				<button class="button_common">Workshop</button>
 				<a href="{{url_for('routes.logout')}}">
 					<button class="button_common">Logout</button>
 				</a>
 			</div>
+
+
 			<div class="section_user">
-				<p>Placeholder Content (will change based on button click - you'll implement this logic)</p>
+				<div class="form active" id="initial-greeting">
+					<p>Placeholder Content (will change based on button click - you'll implement this logic)</p>
+				</div>
+
+				<div class="form" id="replenishment">
+					<input 	id="replenishment_nput" 
+									placeholder="Enter the amount to replenish" 
+									type="tel" 
+									step="1" 
+									onchange="this.value = check_int(this.value)">
+					<div class="chose-buttons">
+						<button type="submit" class="button_common">Save</button>
+						<button class="button_common button_form" data-form="initial-greeting">Cancel</button>
+					</div>
+				</div>
+
+				<div class="form" id="edit">
+					<label for="profile-avatar">Profile Avatar:</label>
+					<div class="file-upload-container">
+						<input type="file" id="profile-avatar" name="avatar" accept="image/*">
+						<label for="profile-avatar" class="file-upload-label">
+								Click for download
+						</label>
+					</div>
+
+					<div class="form-group">
+						<label for="reg_password">Password:</label>
+						<input type="password" id="reg_password" name="reg_password" placeholder="password" required>
+					</div>
+
+					<div class="form-group">
+						<label for="reg_repassword">Verify Password:</label>
+						<input type="password" id="reg_repassword" name="reg_repassword" placeholder="repeat password" required>
+					</div>
+
+					<div class="chose-buttons">
+						<button type="submit" class="button_common">Save</button>
+						<button class="button_common button_form" data-form="initial-greeting">Cancel</button>
+					</div>
+				</div>
+
 			</div>
+
+
 		</div>
   <!-- END USER DATA -->
   </div>
 
-
+	<script src="{{url_for('static', filename='javascripts/User.js')}}"></script>
+
 </body>
 </html>