biheng
/
uppy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://transloadit.edgly.net/releases/uppy/v0.30.0/dist/uppy.css">
    <style>
      body {
        font-family: Roboto, Open Sans;
        background: #f4f5f6;
      }
      h1, h2, h3, h4, h5, h6 {
        font-family: Oxygen, Raleway, Open Sans;
      }

      header {
        width: 800px;
        margin: auto;
      }
      header h1 { text-align: center; }

      main {
        background: white;
        margin: auto;
        width: 800px;
        border: 2px solid #e8eaee;
        padding: 36px;
        border-radius: 5px;
      }

      main h2 { margin-top: 0 }
      label {
        display: flex;
        padding-bottom: 16px;
        border-bottom: 1px solid #e8eaee;
        margin-bottom: 16px;
      }
      .label-text {
        width: 25%;
        text-transform: uppercase;
        color: #888888;
        line-height: 34px;
      }
      label input, label textarea {
        flex-grow: 1;
        height: 34px;
      }
      label textarea {
        box-sizing: border-box;
        padding: 6px;
        border-radius: 5px;
        border: 1px solid #b7b7b4;
        font-family: Roboto, Open Sans;
        min-height: 160px;
        width: 100%;
        resize: vertical;
      }

      .form-createSnippet {
        border: 1px solid #2e6da4;
        border-bottom-width: 3px;
        padding: 8px;
        border-radius: 5px;
        background-color: #337ab7;
        color: white;
        width: 100%;
      }

      .mdtxt {
        width: 100%;
        height: 100%;
      }
      .mdtxt-controls {
      }
      .mdtxt-upload {
        box-sizing: border-box;
        width: 100%;
        border-radius: 0 0 5px 5px;
        border: 1px solid #b7b7b4;
        border-top-width: 0;
        padding: 4px 8px;
        cursor: pointer;
      }
      .mdtxt textarea {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
      .mdtxt-upload .error {
        border-color: red;
        color: red;
      }
      .mdtxt-upload .error .message {
        margin-right: 8px;
      }

      .snippet {
        margin-top: 25px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Markdown Bin</h1>
    </header>
    <main>
      <form id="new">
        <h2>Create a new snippet</h2>
        <label>
          <span class="label-text">Snippet Title</span>
          <input type="text" name="title" placeholder="Snippet Title">
        </label>
        <label>
          <textarea name="snippet"></textarea>
        </label>
        <p>
          <button class="form-createSnippet" type="submit">
            Create
          </button>
        </p>
      </form>
      <div id="snippets"></div>
    </main>
    <template id="snippet">
      <div class="snippet">
        <h3 class="snippet-title"></h3>
        <div class="snippet-content"></div>
      </div>
    </template>
    <script src="bundle.js"></script>
  </body>
</html>