manual-list-sorter.html

<!DOCTYPE html>
<html>
  <head>
    <title>Manual List Sorter</title>
    <script src="main.js?nocache=1"></script>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@300&display=swap" rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
  </head>
  <body class="manual-list-sorter">
    <main>
      <h1>Manual List Sorter Tool</h1>
      <br />

      <p>Insert your comma-seperated list here:</p>
      <textarea id="input" placeholder="example, example">
Lorem,ipsum,dolor,sit,amet,consetetur,sadipscing,elitr,sed,diam,nonumy,eirmod,tempor,invidunt,ut,labore,et,dolore,magna,aliquyam,erat,sed,diam,voluptua.,at,vero,eos,et,accusam,et,justo,duo,dolores,et,ea,rebum.,stet,clita,kasd,gubergren,no,sea,takimata,sanctus,est,Lorem,ipsum,dolor,sit,amet.</textarea
      >
      <b> choose a mode to start:</b>
      <button id="start"><span>ask for each</span></button>
      or
      <button id="select"><span>select manually</span></button>

      <div id="selects"></div>

      <br />

      <center id="manualsorting" style="display: none">
        <span id="word">click 'sort' to start</span>
        <br />
        <button id="sortInto1" disabled="disabled"><span>➜ List 1</span></button>
        <button id="sortInto2" disabled="disabled"><span>➜ List 2</span></button>
      </center>

      <div id="numberselected"></div>
      <button id="selectdone" style="display: none"><span>done! generate lists</span></button>

      <br />

      <p>Here are your two lists: <span id="outputNumber"></span></p>
      <div class="two-lists">
        <textarea id="output1" readonly></textarea>
        <textarea id="output2" readonly></textarea>
      </div>

      <br />
      <center>Refresh to reset.</center>
    </main>
    <div class="back-link" aria-hidden="true"><a href="/">⮪</a></div>
  </body>
</html>