import React from 'react';

class PickYourPoo extends React.Component {
  constructor(props) {
    super(props);
  }

  render () {
    return (
      +<!DOCTYPE html>
 <html>
   <head>
     <title>Poop VR</title>
   </head>
   <link href='https://fonts.googleapis.com/css?family=Molle:400italic' rel='stylesheet' type='text/css'>
   <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

   <style type="text/css">
     body {
       text-align: center;
       background-color: #ddc78c;
     }
     h1 {
       font-family: 'Molle', cursive;
       text-align: center;
       font-size: 100px;
       margin-top: 100px;
       color: #6E401B;

     }
     i {
       font-size: 40px;
       margin: 10px;
     }
     .status {
       font-size: 50px;
       font-family: 'Molle', cursive;
       color: #6F6F6F;
       animation-name: color_change;
       animation-duration: 1s;
       animation-iteration-count: infinite;
       animation-direction: alternate;
     }

     @-webkit-keyframes color_change {
       from { color: #6E401B; }
       to { color: #ddc78c; }
     }
     @-moz-keyframes color_change {
       from { color: #6E401B; }
       to { color: #ddc78c; }
     }
     @-ms-keyframes color_change {
       from { color: #6E401B; }
       to { color: #ddc78c; }
     }
     @-o-keyframes color_change {
       from { color: #6E401B; }
       to { color: #ddc78c; }
     }
     @keyframes color_change {
       from { color: #6E401B; }
       to { color: #ddc78c; }
     }
   </style>

   <body>
     <h1 class="title">PoopVR</h1>
     <i class="em em-poop"></i>
     <div class="status">
       <p>Coming Soon!</p></div>

   </body>
 </html>
  }
};

module.exports = PickYourPoo;

@@ -148,1466 +148,258 @@
     
-+%3C!DOCTYPE html%3E%0A %3Chtml%3E%0A   %3Chead%3E%0A     %3C
+%3Cdiv%3E%0A        %3Ch1 class=%22
 title
+%22
 %3EPoop
- 
 VR%3C/
-title%3E%0A   %3C/head%3E%0A   %3Clink href='https://fonts.googleapis.com/css?family=Molle:400italic' rel='stylesheet' type='text/css'%3E%0A   %3Clink href=%22https://afeld.github.io/emoji-css/emoji.css%22 rel=%22stylesheet%22%3E%0A%0A   %3Cstyle type=%22text/css%22%3E%0A     body %7B%0A       text-align: center;%0A       background-color: #ddc78c;%0A     %7D%0A     h1 %7B%0A       font-family: 'Molle', cursive;%0A       text-align: center;%0A       font-size: 100px;%0A       margin-top: 100px;%0A       color: #6E401B;%0A%0A     %7D%0A     i %7B%0A       font-size: 40px;%0A       margin: 10px;%0A     %7D%0A     .status %7B%0A       font-size: 50px;%0A       font-family: 'Molle', cursive;%0A       color: #6F6F6F;%0A       animation-name: color_change;%0A       animation-duration: 1s;%0A       animation-iteration-count: infinite;%0A       animation-direction: alternate;%0A     %7D%0A%0A     @-webkit-keyframes color_change %7B%0A       from %7B color: #6E401B; %7D%0A       to %7B color: #ddc78c; %7D%0A     %7D%0A     @-moz-keyframes color_change %7B%0A       from %7B color: #6E401B; %7D%0A       to %7B color: #ddc78c; %7D%0A     %7D%0A     @-ms-keyframes color_change %7B%0A       from %7B color: #6E401B; %7D%0A       to %7B color: #ddc78c; %7D%0A     %7D%0A     @-o-keyframes color_change %7B%0A       from %7B color: #6E401B; %7D%0A       to %7B color: #ddc78c; %7D%0A     %7D%0A     @keyframes color_change %7B%0A       from %7B color: #6E401B; %7D%0A       to %7B color: #ddc78c; %7D%0A     %7D%0A   %3C/style%3E%0A%0A   %3Cbody%3E%0A     %3Ch1 class=%22title%22%3EPoopVR%3C/h1%3E%0A     %3Ci class=%22em em-poop%22%3E
+h1%3E%0A        %3Ci class=%22em em-poop%22%3E%3C/i%3E%0A        %3Cdiv class=%22status%22%3E%0A          %3Cp%3EComing Soon!%3C/p%3E%0A        %3C/div%3E%0A        %3Cul%3E%0A          %3Cli onClick=%7B%7D%3EWorld War Two%3C/li%3E%0A          %3Cli%3EPrehistoric Poo
 %3C/
+l
 i%3E%0A     
 %3Cdiv
@@ -398,82 +398,36 @@
     
-%3Cdiv class=%22status%22%3E%0A       %3Cp%3EComing Soon!%3C/p%3E
+   %3C/ul%3E%0A      
 %3C/div%3E%0A
-%0A
    
-%3C/body%3E%0A %3C/html%3E
+ );
 %0A  %7D

Add onclick to PickYourPoo