settings.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Settings</title>

  <!-- CSS  -->
  <style>
  body {
      word-wrap: break-word !important;    }
  </style>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link id="styleSheet" href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>


</head>

<body>
  <!-- NAVBAR -->
  <nav class="grey lighten-1">
    <div class="nav-wrapper">
      <a style="font-size: 1.7em; font-weight: 300;" class="black-text brand-logo center">Settings</a>
      <!-- Mobile -->
      <a href="index.html" class="left hide-on-large-only black-text"><i style="font-size: 24px" class="material-icons">&nbsp;chevron_left</i></a>
      <!-- Full-width -->
      <ul class="right hide-on-med-and-down">
        <li><a class="black-text" href="index.html"><i class="material-icons left">view_agenda</i>Challenges</a></li>
        <li class="active"><a class="black-text" href="settings.html"><i class="material-icons left">settings</i>Settings</a></li>
        <li><a class="black-text" href="credits.html"><i class="material-icons left">info</i>About</a></li>
      </ul>
    </div>
  </nav>


  <div class="row">
  <div class="col s12">
  <br>
  <form action="#">
      <a style="font-size:24px"> Theme:
      <input name="group1" type="radio" id="light" />
      <label style="font-size:24px" for="light">Light</label>
      <input name="group1" type="radio" id="dark" />
      <label style="font-size:24px" for="dark">Dark</label>
      </a>
      <br>
      <a class="black-text">The dark theme uses the Monokai color scheme for code blocks.</a>

  </form>

  <!-- Switch 
  <div class="switch">
  <a style="font-size:24px"> Enable Alpha version </a>
    <label>
      
      <input checked="false" type="checkbox">
      <span class="lever"></span>
    </label>
  </div>
  -->
  <!--<div class="switch">
  <a style="font-size:24px"> Enable Code Highlightning </a>
    <label>
      
      <input checked="false" type="checkbox">
      <span class="lever"></span>
    </label>
  </div>
-->
  <br>
  <a id="sub" onclick="apply()" class="waves-effect waves-light btn">Apply</a>
  

</div>
</div>

  <!--  Scripts  -->
  <script src="js/jquery.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
  <script src="js/styler.js"></script>
  <script src="js/analytics.js"></script>
  <script src="js/settings.js"></script>

  </body>
</html>