commit

sujanthapa01 · Feb 1, 2024 · 4ace13d · 4ace13d
1 parent 2d226b7
commit 4ace13d
Show file tree

Hide file tree

Showing 7 changed files with 476 additions and 154 deletions.
diff --git a/index.html b/index.html
@@ -1,36 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-    <link rel="stylesheet" href="/src/style.css" />
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="/src/style.css" />
   <!-- Include Firebase Compatibility Build -->
-  <script type="module"  src="/src/script.js"></script>
+  <script type="module" src="/src/script.js"></script>
+  <script src="src/profile.js"></script>
 
 </head>
-  </head>
-  <body>
-    <main>
-      <div class="container">
+</head>
 
-        <input class="name-input" type="text">
-        <input class="insta-input" type="text">
+<body>
+
+  <main>
+    <div class="container">
+      <header class="header"><span class="head">Hit The Like Button</span></header>
+      <div class="input-wrapper">
+        <div>
+          <div>
+            <label class="label-name" for="name-input">Name</label>
+          </div>
+          <input id="name-input" class="name-input input" type="text">
+        </div>
+        <div>
+          <div>
+            <label class="label-insta" for="insta-input">Insta Id</label>
+          </div>
+          <input id="insta-input" class="insta-input input" type="text">
+        </div>
         <div class="msg-wrapper">
           <span class="msg">this is messege</span>
         </div>
 
-        <div class="like-wrapper">
-          <button class="btn">
-            <img class="like-btn" src="/src/greylike.png" alt="" />
-            <span>like</span>
-          </button>
+      </div>
+
+
+      <div class="like-wrapper">
+
+        <button class="btn">
+          <svg class="empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="10" height="10">
+            <path fill="none" d="M0 0H24V24H0z"></path>
+            <path
+              d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z">
+            </path>
+          </svg>
+          <svg class="filled" height="30" width="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 0H24V24H0z" fill="none"></path>
+            <path
+              d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z">
+            </path>
+          </svg>
+        </button>
+
+      </div>
+
+      <div class="credit">
+        <div><span>Thanks For Your Like</span></div>
+
+        <div class="credit-conatiner">
+
+          <div><span class="credit-head">credit</span></div>
+          <div class="credit-wrapper">
+
+            <div class="credit-img-div"><img class="credit-img" src="src/credit.webp" alt=""></div>
+            <div class="credit-para">
+              <div><span class="developer-credit">developed by sujan thapa</span></div>
+              <div><span class="bio">made with love</span></div>
+
+            </div>
+          </div>
+
+
 
-          <div class="like-count">Likes: <span id="likeCount">0</span></div>
         </div>
+
+
+
+
       </div>
-    </main>
 
-    </script>
-  </body>
-</html>
+
+    </div>
+
+    <div class="user-names">
+      <div class="like-count">Likes: <span id="likeCount">0</span></div>
+      <div id="nameBackground"></div>
+    </div>
+  </main>
+
+  </script>
+</body>
+
+</html>
diff --git a/public/index.html b/public/index.html
@@ -11,14 +11,19 @@
 </head>
   </head>
   <body>
+    <div>
+      <img class="profile" src="/src/profile.jpg" alt="">
+    </div>
     <main>
       <div class="container">
-
-        <input class="name-input" type="text">
-        <input class="insta-input" type="text">
-        <div class="msg-wrapper">
-          <span class="msg">this is messege</span>
+        <div>
+          <div class="card" id="imageCard">
+            <div class="close-card" onclick="closeCard()"><p>X</p></div>
+            <div class="card-image" id="cardImage"></div>
+          </div>
+          <div><button onclick="openCard()">Add Image</button></div>
         </div>
+
 
         <div class="like-wrapper">
           <button class="btn">

diff --git a/src/credit.webp b/src/credit.webp
diff --git a/src/profile.jpg b/src/profile.jpg
diff --git a/src/profile.js b/src/profile.js
@@ -0,0 +1,43 @@
+function handleImageInputChange() {
+  const imageInput = document.getElementById('imageInput');
+  const selectedImage = imageInput.files[0];
+  const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+
+  // Clear previous previews
+  imagePreviewContainer.innerHTML = '';
+
+  if (selectedImage) {
+    // Display the selected image preview
+    displayImagePreview(selectedImage, imagePreviewContainer);
+  } else {
+    // Display a random image preview
+    displayRandomImage(imagePreviewContainer);
+  }
+}
+
+function displayImagePreview(imageFile, container) {
+  const reader = new FileReader();
+
+  reader.onload = function (e) {
+    const imagePreview = document.createElement('img');
+    imagePreview.src = e.target.result;
+    imagePreview.style.maxWidth = '100%';
+    container.appendChild(imagePreview);
+  };
+
+  reader.readAsDataURL(imageFile);
+}
+
+function displayRandomImage(container) {
+  const randomImages = [
+    'https://via.placeholder.com/300',
+    'https://via.placeholder.com/300/0000FF/808080?text=Random+Image',
+    // Add more random image URLs as needed
+  ];
+
+  const randomImageUrl = randomImages[Math.floor(Math.random() * randomImages.length)];
+  const randomImage = document.createElement('img');
+  randomImage.src = randomImageUrl;
+  randomImage.style.maxWidth = '100%';
+  container.appendChild(randomImage);
+}