finalProject/Home.html at master · wLMEB/finalProject · 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
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
<head>
        <center> <img src="logofixed.png" height="200"width="200"> </center>


       <div class="container" onclick="myFunction(this),sidebar()">
     <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>

  <h1> <font color= "white">CleanerClosets</font> </h1>

  <body bgcolor = "#e3936e">
   <link rel="stylesheet" href="dessign.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="SideBarstyle.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>

</head>

<body>
  <header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
    <img class="w3-image" src="clothing.jpg" alt="Architecture" width="1264" height="400">
    <div class="w3-display-middle w3-margin-top w3-center">
    </div>
  </header>
</body>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
s
/* Full-width input fields */

/* Set a style for all buttons */

</style>
</head>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <link rel= "stylesheet" href=leaflet.css>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="SideBarstyle.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>

</head>
<style>
#map {
    width: 640px;
    height:500px;
}
</style>
<body bgcolor="e8e0cd">

  <div id="icon-bar">
      <a class="active" href="textColumns.html"><img type="image/svg+xml"
      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-40.5 73.5 41 41" style="enable-background:new -40.5 73.5 41 41;" xml:space="preserve">
      <path class="st0" d="M0,97.7c-0.2-0.5-0.5-0.9-0.8-1.3c-2.2-2.9-7.5-6.2-9.6-7.1c-0.9-0.4-1.8-0.7-2.7-1.2c-1.1-0.7-1.9-1.8-3-2.5  c-0.8-0.5-1.7-0.8-2.7-0.9c-0.2,0-0.3-0.1-0.3-0.3v-2.2c0-0.2,0.1-0.3,0.3-0.4c2-0.6,3.3-2.5,2.9-4.7c-0.3-1.6-1.6-3-3.2-3.3  c-2.7-0.6-5,1.5-5,4.1c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9c0-0.8,0.3-1.6,0.9-2c2.4-1.5,4.9,1.1,3.5,3.5  c-0.4,0.6-1.2,0.9-2,0.9c-0.5,0-0.9,0.4-0.9,0.9v3.3c0,0.2-0.1,0.3-0.3,0.3c-1.1,0.1-2,0.4-2.8,0.9c-1.1,0.7-1.9,1.8-3,2.5  c-0.8,0.5-1.8,0.9-2.7,1.2c-2,0.9-7.3,4.2-9.5,7.1c-0.4,0.4-0.6,0.9-0.8,1.3c-1.9,3.7,2.5,5,3.3,4.3c0.6-0.5,1.1-1.2,1.4-2  c0.1-0.1,0.1-0.1,0.2-0.1h4.9c0.2,0,0.4,0.2,0.4,0.4v10.7c0,0.1,0.1,0.3,0.1,0.4c1.4,1.9,4.5,3,9.7,3c4.6,0,8.4-2.3,9.5-3  c0.2-0.1,0.3-0.3,0.3-0.5v-10.7c0-0.2,0.2-0.4,0.4-0.4h4.9c0.1,0,0.2,0.1,0.3,0.2c0.4,0.8,0.7,1.5,1.3,1.9  C-2.4,102.7,1.9,101.4,0,97.7z M-6,98.2h-3.8c-0.2,0-0.4-0.2-0.4-0.4v-1.9c0-0.2-0.2-0.4-0.4-0.4h-18.7c-0.2,0-0.4,0.2-0.4,0.4v1.9  c0,0.2-0.2,0.4-0.4,0.4h-4c-0.1,0-0.2-0.1-0.2-0.2c0.6-1,1.1-2.1,1.8-2.9c2.2-2.9,5.5-4.8,9.1-5.3c1-0.1,5.2-0.1,5.9-0.1  c3.9,0.2,7.8,2.2,10.1,5.4c0.6,0.9,1.2,1.8,1.7,2.8C-5.6,97.9-5.8,98.2-6,98.2z/>
      </svg>
  "><br>Closet</a>
    <a href="Home.html"><i class="fa fa-home"></i><br>Home</a>
    <a href="mapapi.html"><i class="fa fa-globe"></i><br>Donate</a>
    <a href="notification.html"><i class="fa fa-envelope"></i><br>Notification</a>
    </div>

<body>

<div id="id01" class="modal">

  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
    </div>

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <button type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
    </div>
  </form>
</div>
<body>
  <h2>Our Mission Statement:</h2>
    <p>  <font size = "3"> Do you remember the awesome closet system owned by the main character Cher Horowitz,
      played by Alicia Silverstone, in the 1990s cult classic Clueless? Our team
      has decided to carry out that legendary closet idea to help solve a recurring
      problem in our society.  In this project we concocted a virtual closet organizer
      to refrain people from buying repeated/excessive items. Our idea was to  layout
      a website where people can personalize their own closet by logging in their garments in an inventory by filtering them by size, color, material, occasion, and etc. With this, people can know what they have specifically in their closet without having to buy the same or similar products, wasting money, material, and causing someone in a sweatshop to make that specific garment. We are  dedicated to improving working conditions and supporting the empowerment of workers in the global garment industries who work under these horrible working conditions are treated unfairly.
      Through the purchases we make, we have the power to create an economy where child labor
      and sweatshops cease to exist.  Through our voices and actions, together with others,
      we can help encourage companies here and abroad to ensure that all workers are
      paid fairly and treated with respect. By taking one of these minuscule steps,
            we can make a real difference. So here’s to Cleaner Closet!</font></p>
</body>
<body>
        <center> <h3> About Us </h3> </center>

        <center> <br><b> <font size = "5">Wanqi Li</font> </b> </br> </center>
                <center> <br><b> Web Developer</b> </br> </center>
         <center> <img src="wanqi pic.jpeg" height="200"width="200"> </center>
<p> <font size = "3"> Wanqi Li is an incoming junior at Bayonne High School. Before she joined Girls
Who Code, she viewed computer science as a really fascinating and difficult
concept. But after she learned languages such as Python, HTML, CSS, and
Javascript, she wants to explore more about the world of computer science and
she is determined to pursue a computer science bachelor degree in college. </font></p>

              <center> <br> <b> <font size = "5"> Ivette Munoz </font> </b> </br> </center>
       <center> <br> <b>  Web Developer</b> </br> </center>
         <center> <img src="ivypic.png" height="200"width="200"> </center>
<p> <font size = "3"> Ivette Munoz is currently a rising junior at North Bergen High School in NJ. She is the oldest sister of two siblings who inspire her everyday to be a role model who demonstrates the significance of education.She proves this by learning as much as she can whether it is martial arts, community involvement, dancing, technology, and the more to come! Knowledge is power! </font> </p>

        <center> <br> <b> <font size = "5"> Priscilla Ramos</font></b></br> </center>
             <center> <br> <b>  Web Developer</b></br> </center>
 <center> <img src="priscilla pic.jpg" height="150"width="200"> </center>
<p>  <font size = "3"> Priscilla Ramos is an incoming junior at the Academy of Enrichment and Advancement
in Union City, NJ. Before finding out about Girls Who Code, Priscilla understood
computer science as something super technical, complex, and something that would require
countless sleepless nights of coding and wiring,After joining Girls Who Code and broadening her horizons,
she quickly learned that it is so much more than that “geeky computer programing” stereotype.
Priscilla always wanted to pursue something in the technology field, and after
completing this program she is more eager to start her career in the computer science field.
        She hopes to excel and pursue through any obstacle to get where to she needs to be. </font> </p>

          <center> <br> <b> <font size = "5"> Bridget Torres </font> </b> </br> </center>
           <center> <br> <b> Web Developer </b> </br> </center>
 <center> <img src="bridget pic.jpg" height=200"width="200"> </center>
<p>  <font size = "3"> Bridget Torres entering Junior year at the Academy of Enrichment and Advancement
in Union. She is involved in multiple extracurricular activities and enjoys
exploring new fields of learning. Bridget had no experience with coding until
she got involved with the program Girls Who Code. Girls Who Code had broaden her
views on computer science, demonstrating her there is more in code than numbers and algorithms.
Being exposed to the STEM field she wants to explore more into the area and is
passionate of learning more, combining her interests and coding for a successful
        career in the future. </font> </p>
     <p>
        </body>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
<script src="sidebar.js"></script>