NIT-kurukshetra_SheCodeSquad/heroblueTshirt.html at main · NavvneetK/NIT-kurukshetra_SheCodeSquad · 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
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Try-On</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgba(236, 212, 199, 0.851);
    display: flex;
  }
  .container {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
  }
  #video {
    width: 100%;
    height: auto;
    display: block;
  }
  #overlay {
    position: absolute;
    top: 50px; /* Adjust positioning as needed */
    left: 50px;
    width: 200px; /* Set initial width */
    pointer-events: none; /* Ensure overlay doesn't interfere with camera interaction */
    transition: transform 0.2s ease-in-out; /* Smooth zoom transitions */
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
    height: 100vh;
    background-color:ivory;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  .sidebar button {
    background-color:rgb(178, 167, 125);
    color: white;
    border: none;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
  }
  .sidebar button#other {
    background-color: red;
  }
  .sidebar button#red {
    background-color: skyblue;
  }
</style>
</head>
<body>
<div class="sidebar">
  <p>Change color:</p>
  <button id="red" onclick="redTshirt()">Skyblue</button>
  <button id="other">Red</button>
  <p>Style:</p>
  <button>Cropped</button>
  <button>Basic</button>
  <p>Feedback:</p>
  <button>Liked</button>
  <button>Disliked</button>
  <p>Brand:</p>
  <button>H&M</button>
  <button>ZARA</button>
  <p>Share:</p>
  <button>Snapchat</button>
  <button>Instagram</button>

</div>
<div class="container">
  <video id="video" autoplay></video>
  <img id="overlay" src="tshirt.png" alt="Tshirt">
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Access the camera
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(function(stream) {
        var video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log("Error: " + err);
      });

    var overlay = document.getElementById('overlay');
    var container = document.querySelector('.container');
    var currentScale = 1; // Initial scale factor
    var minScale = 20 / overlay.clientWidth; // Minimum scale based on initial size

    function zoom(scale) {
      currentScale *= scale;

      // Apply minimum scale limit
      if (currentScale < minScale) {
        currentScale = minScale;
      }

      overlay.style.transform = `scale(${currentScale})`;
    }

    container.addEventListener('mousemove', function(event) {
      var rect = container.getBoundingClientRect();
      var x = event.clientX - rect.left - (overlay.clientWidth / 2);
      var y = event.clientY - rect.top - (overlay.clientHeight / 2);

      // Ensure overlay stays within bounds of the container
      if (x < 0) x = 0;
      if (y < 0) y = 0;
      var maxX = container.clientWidth - overlay.clientWidth;
      var maxY = container.clientHeight - overlay.clientHeight;
      if (x > maxX) x = maxX;
      if (y > maxY) y = maxY;

      // Update overlay position
      overlay.style.left = x + 'px';
      overlay.style.top = y + 'px';
    });

    container.addEventListener('wheel', function(event) {
      event.preventDefault();
      var scaleDelta = event.deltaY > 0 ? 0.9 : 1.1; // Adjust zoom sensitivity
      zoom(scaleDelta);
    });

    // Add event listener to the button to open tshirtred.html
    document.getElementById('red').addEventListener('click', function() {
      window.location.href = 'heroredtshirt.html';
    });
  });
</script>
</body>
</html>