javascript
/
simondev.GeneticAlgorithm-Picture
mirror of https://github.com/simondevyoutube/GeneticAlgorithm-Picture


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<html>
  <body>
    <style>

      canvas {
        margin: 0.25em;
      }

      p {
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 2em;
        color: white;
        width: 256px;
        margin: 0.25em;
      }

      .right {
        text-align:right;
      }

      .vertical {
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height:100%;
      }

      .horizontal {
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
      }

      img {
        display: none;
      }

      html, body {
        padding: 0;
        margin: 0;
        background-color: black;
        width: 100%;
        height: 100%;
      }
    </style>

    <div class="vertical">
      <div class="horizontal">
        <canvas id="source"></canvas>
        <canvas id="target"></canvas>
      </div>
      <div class="horizontal">
        <p id="statsText" class="right"></p>
        <p id="numbersText"></p>
      </div>
    </div>

    <script src="main.js" type="module"></script>

    <img id="sourceImg"></img>
  </body>
</html>