nk-gears/00-hello-world.html

## 00-hello-world.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
    class App extends React.Component {
      render() {
        return <h2>Hello React</h2>;
      }
    }

    ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</body>
</html>

## 01-hello-world-text-babel.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    Before &lt;div&gt;
    <div id="root"></div>
    After &lt;div&gt;
    <!-- intentional misspelling of text/babel -->
    <script type="text/babelx">
    class App extends React.Component {
      render() {
        return <h2>Hello React</h2>;
      }
    }

    ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</body>
</html>

## 02-hello-world-state.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Greeting extends React.Component {
        state = {
          message: `Hello React`
        };

        render() {
          // Must use "this.state" to access state
          return <h2>{this.state.message}</h2>;
        }
      }

      ReactDOM.render(<Greeting />, document.getElementById('root'));
    </script>
  </body>
</html>

## 04-hello-world-props.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Greeting extends React.Component {
        constructor(props) {
          super(props);
          // Must use this.state to define state
          this.state = {
            message: `Hello ${props.who}`
          };
        }
        render() {
          return <h2>{this.state.message}</h2>;
        }
      }

      ReactDOM.render(
        <Greeting who="React" lang="en" />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 06-hello-world-props.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Greeting extends React.Component {
        constructor(props) {
          super(props);
          // Must use this.state to define state
          this.state = {
            message: `Hello ${props.who}`
          };
        }
        render() {
          return <h2>{this.state.message}</h2>;
        }
      }

      class App extends React.Component {
        render() {
          return <div>
            <Greeting who="World" />
            <Greeting who="React" />
            </div>;
        }
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 08-hello-world-css-class.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <style>
      #text {
        font-size: 150%;
      }
    .greeting {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      border: 2px solid brown;
      border-radius: 8px;
      padding: 0.5em;
      margin: 8px;
    }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Greeting extends React.Component {
        constructor(props) {
          super(props);
          // Must use this.state to define state
          this.state = {
            message: `${props.text}`
          };
        }

        render() {
          const url = `https://www.countryflags.io/${this.props.flag}/flat/48.png`;

          return <div className="greeting">
              <img src={url} />
              <b id="text">{this.state.message}</b>
            </div>;
        }
      }

      class App extends React.Component {
        render() {
          return <div>
            <Greeting text="Hello World" flag="gb"/>
            <Greeting text="Hola Mundo" flag="es"/>
            <Greeting text="Ciao Mondo" flag="it"/>
            </div>;
        }
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 10-setstate-simple.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <style>
    .huge {
      display: inline-block;
      font-size: 500%;
      border-radius: 8px;
      border: 2px dashed blue;
      padding: 0.25em;
    }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class JustNumber extends React.Component {
        constructor(props) {
          super(props);
          // Must use this.state to define state
          const initValue = Math.floor(1 + Math.random() * 10);
          this.state = {
            number: initValue
          };
        }

        changeNum() {
          // random number between 1 - 10
          const nextVal = Math.floor(1 + Math.random() * 10);
          this.setState({number: nextVal});
          console.log("Old value is ", this.state.number);
        }

        render() {

          return <div>
              <span className="huge">{this.state.number}</span>
              <button onClick={() => this.changeNum()}>Random Number</button>
            </div>;
        }
      }


      ReactDOM.render(
        <JustNumber />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 15-setstate-field-of-object.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <style>

    .content {
      display: grid;
      grid-template-columns: 5em 3em;
      font-size: 150%;
    }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Person extends React.Component {
        constructor(props) {
          super(props);
          // Must use this.state to define state
          this.state = {
            user: {
              name: "Alice",
              age: 25
            }
          };
        }

        changeAge() {
          // random number between 10 - 39
          const nextAge = Math.floor(10 + Math.random() * 30);
          const info = { ...this.state.user, age: nextAge};
          // this.state.user.age = nextAge;
          this.setState({user: info});
        }

        render() {

          return <div>
              <div className="content">
                <span>Name</span>
                <span>{this.state.user.name}</span>
                <span>Age</span>
                <span>{this.state.user.age}</span>
              </div>
              <button onClick={() => this.changeAge()}>Random Age</button>
            </div>;
        }
      }


      ReactDOM.render(
        <Person />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 20-setstate-update-array.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <style>
    .content {
      display: grid;
      grid-template-columns: 5em 3em;
      font-size: 150%;
    }
    .odd {
      color: brown;
    }
    .even {
      color: royalblue;
    }

    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Person extends React.Component {
        constructor(props) {
          super(props);
          // Must use this.state to define state
          this.state = {
            numbers : []
          };
        }

        insertNumber() {
          this.setState((state) => {
            // random number between 10 - 39
            const nextVal = Math.floor(1 + Math.random() * 100);
            let vals = state.numbers.slice();
            vals.push(nextVal);
            return {numbers: vals};
          });
        }

        removeOdd() {
          this.setState((state) => {
            const evenOnly = state.numbers.filter (x => x % 2 == 0);
            return { numbers: evenOnly };
          });
        }

        removeEven() {
          this.setState((state) => {
            const oddOnly = state.numbers.filter (x => x % 2 != 0);
            return { numbers: oddOnly };
          });
        }

        render() {

          return <div>
              <button onClick={() => this.insertNumber()}>Insert</button>
              <button onClick={() => this.removeOdd ()}>Remove Odd</button>
              <button onClick={() => this.removeEven ()}>Remove Even</button>
              <div className="content">
                <ul>
                  { this.state.numbers.map((x,pos) => {
                    const style = x % 2 == 0 ? "even" : "odd";
                    return <li className={style} key={pos}>{x}</li>;
                  }) }
                </ul>
              </div>
            </div>;
        }
      }


      ReactDOM.render(
        <Person />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 25-setstate-update-array-of-objects.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <style>
    .content {
      display: grid;
      grid-template-columns: 2em 5em;
      font-size: 150%;
    }

    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class JustArray extends React.Component {
        constructor(props) {
          super(props);
          // Must use this.state to define state
          this.state = {
            numbers : []
          };
        }

        insertNumber() {
          this.setState((state) => {
            // random number between 10 - 39
            const nextVal = Math.floor(1 + Math.random() * 100);
            const r = Math.floor(Math.random() * 256).toString(16);
            const g = Math.floor(Math.random() * 256).toString(16);
            const b = Math.floor(Math.random() * 256).toString(16);
            let vals = state.numbers.slice();
            vals.push({val: nextVal, color: `#${r}${g}${b}`});
            return {numbers: vals};
          });
        }

        removeOdd() {
          this.setState((state) => {
            const evenOnly = state.numbers.filter (x => x.val % 2 == 0);
            return { numbers: evenOnly };
          });
        }

        removeEven() {
          this.setState((state) => {
            const oddOnly = state.numbers.filter (x => x.val % 2 != 0);
            return { numbers: oddOnly };
          });
        }

        randomHex() {
          const h = Math.floor(Math.random() * 256).toString(16);
          return h.length === 1 ? `0${h}` : h;
        }

        updateColor(whichRow) {
          this.setState((state) => {
            /* create a copy of the array */
            const arr = state.numbers.slice();

            /* generate random RGB color */
            const r = this.randomHex();
            const g = this.randomHex();
            const b = this.randomHex();
            arr[whichRow].color = `#${r}${g}${b}`;
            return { numbers: arr };
          });
        }

        render() {

          return <div>
              <button onClick={() => this.insertNumber()}>Insert</button>
              <button onClick={() => this.removeOdd ()}>Remove Odd</button>
              <button onClick={() => this.removeEven ()}>Remove Even</button>
              <div className="content">
                  { this.state.numbers.map((x,pos) => {
                    const style = x % 2 == 0 ? "even" : "odd";
                    /* React.Fragment is like Vue <template> */
                    return <React.Fragment key={pos}>
                      <span className={style} key={pos} style={ {color: x.color} }>{x.val}</span>
                      <button onClick={() => this.updateColor(pos)}>Change Color</button>
                      </React.Fragment>;
                  }) }
              </div>
            </div>;
        }
      }


      ReactDOM.render(
        <JustArray />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 30-world-clock.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-joda/1.10.1/js-joda.min.js"></script>
    <style>
      #text {
        font-size: 150%;
      }
    .time {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      border: 2px solid brown;
      border-radius: 8px;
      padding: 0.5em;
      margin: 8px;
    }
    .utcmarker {
      font-family: Consolas;
      font-size: 70%;
      margin-left: 1em;
    }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
    // console.log(JSJoda.ZonedDateTime.now().toString());
      class Clock extends React.Component {
        constructor(props) {
          super(props);
          let tz;
          let offset = props.utcOffset;
          if (offset < 0) {
            offset *= -1;
            tz = `-${offset.toString().padStart(2, '0')}:00`;
          } else {
            tz = `+${offset.toString().padStart(2, '0')}:00`;
          }
          const zone = JSJoda.ZoneId.of(tz);
          console.log(JSJoda.LocalTime.now(zone).toString());
          this.state = {
            zone: tz,
            currentTime: JSJoda.LocalTime.now(zone).toString()
          };
        }

        render() {
          return <div className="time">
             <b id="text">{this.state.currentTime.substr(0,8)}</b>
             <span className="utcmarker">UTC{this.state.zone}</span>
          </div>;
        }
      }

      class App extends React.Component {
        render() {
          return <div>
            <Clock utcOffset={-5}/>
            <Clock utcOffset={6}/>
            </div>;
        }
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 35-world-clock-live.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-joda/1.10.1/js-joda.min.js"></script>
    <style>
      #text {
        font-size: 150%;
      }
    .time {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      border: 2px solid brown;
      border-radius: 8px;
      padding: 0.5em;
      margin: 8px;
    }
    .utcmarker {
      font-family: Consolas;
      font-size: 70%;
      margin-left: 1em;
    }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Clock extends React.Component {
        constructor(props) {
          super(props);
          let tz;
          let offset = props.utcOffset;
          if (offset < 0) {
            offset *= -1;
            tz = `-${offset.toString().padStart(2, '0')}:00`;
          } else {
            tz = `+${offset.toString().padStart(2, '0')}:00`;
          }
          const zone = JSJoda.ZoneId.of(tz);
          console.log(JSJoda.LocalTime.now(zone).toString());
          this.state = {
            zone: tz,
            currentTime: JSJoda.LocalTime.now(zone).toString().substr(0,8)
          };
        }

        render() {
          const val = this.state.utcOffset;
          return <div className="time">
             <b id="text">{this.state.currentTime}</b>
             <span className="utcmarker">UTC{this.state.zone}</span>
          </div>;
        }

        // Use React Lifecycle hook function to perform certain tasks
        componentDidMount() {
          setInterval(() => {
            const zone = JSJoda.ZoneId.of(this.state.zone);
            const nextTime = JSJoda.LocalTime.now(zone).toString().substr(0,8);
            this.setState({ currentTime: nextTime });
          }
          , 1000); // update every 1000 milliseconds
        }
      }

      class App extends React.Component {
        render() {
          return <div>
             <!-- utcOffset="-5" will pass data as a String
                  utcOffset={-5} will pass data as a Number
             -->
            <Clock utcOffset={-5}/>
            <Clock utcOffset={6}/>
            </div>;
        }
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 40-color-slider.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <style>
    .slider {
     display: inline-block;
      border-radius: 8px;
      border-width: 2px;
      border-style: solid;
      padding: 0.5em;
      margin: 8px;
    }

    .group {
      display: inline-flex;
      flex-direction: column;
    }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class ColorSlider extends React.Component {
        constructor(props) {
          // props: value, channel, onUpdated
          super(props);
          this.state = {
            current: props.value
          };
        }

        render() {
          const hex = Number(this.state.current).toString(16);
          let hexColor;
          switch (this.props.channel) {
            case "R":
              hexColor = `#${hex}0000`;
              break;
            case "G":
              hexColor = `#00${hex}00`;
              break;
            case "B":
              hexColor = `#0000${hex}`;
              break;
          }
          return <div className="slider" style={{ borderColor: hexColor }}>
             <span>{this.state.current}</span>
             <input type="range" value={this.state.current} min="0" max="255"
             onChange={(e) => this.sliderUpdated(e)}/>
          </div>;
        }

        sliderUpdated(e) {
          this.setState({current:e.target.value});
          // notify the parent
          this.props.onUpdated(this.props.channel, e.target.value);
        }
      }

      class App extends React.Component {
        constructor(props) {
          super(props);
          const r = Math.floor(Math.random() * 256);
          const g = Math.floor(Math.random() * 256);
          const b = Math.floor(Math.random() * 256);
          this.state = {
            red: r,
            green: g,
            blue: b
          }
        }

        changeColor(channel, val) {
          // console.log(`${channel} => ${val}`);
          switch(channel) {
          case "R":
            this.setState({red: val});
            break;
          case "G":
            this.setState({green: val});
            break;
          case "B":
            this.setState({blue: val});
            break;
          }
        }

        render() {
          const rHex = Number(this.state.red).toString(16).padStart(2, '0');
          const gHex = Number(this.state.green).toString(16).padStart(2, '0');
          const bHex = Number(this.state.blue).toString(16).padStart(2, '0');
          const hexColor = `#${rHex}${gHex}${bHex}`;
          return <div className="group" style={{background: hexColor}}>
            <ColorSlider value={this.state.red} channel="R"
              onUpdated={this.changeColor.bind(this)}/>
            <ColorSlider value={this.state.green} channel="G"
              onUpdated={this.changeColor.bind(this)}/>
            <ColorSlider value={this.state.blue} channel="B"
              onUpdated={this.changeColor.bind(this)}/>
            </div>;
        }
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

## 99-input-events.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Greeting extends React.Component {
        state = {
          name1: "",
          name2: ""
        };

        handleInput(ev) {
          this.setState({ name1: ev.target.value });
        }

        handleBlur(ev) {
          this.setState({ name2: ev.target.value });
        }

        render() {
          return (
            <div>
              <h3>You enter: {this.state.name1} {this.state.name2}</h3>
              <input type="text" onChange={e => this.handleInput(e)} />
              <input type="text" onBlur={e => this.handleBlur(e)} />
            </div>
          );
        }
      }

      ReactDOM.render(
        <Greeting who="React" lang="en" />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Hello React</title>
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/babel">
	class App extends React.Component {
	render() {
	return <h2>Hello React</h2>;
	}
	}

	ReactDOM.render(<App />, document.getElementById('root'));
	</script>
	</body>
	</body>
	</html>