fstring.html

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>資料處理線上工具</title>
  <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">
  <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link href="vendor/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/app.css" rel="stylesheet">
  <style>
    #mainArea{
      min-height: 850px;
    }
  </style>
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="bi bi-database-fill"></i> 資料處理愛好者俱樂部</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html"><i class="bi bi-list-ol"></i> 一維資料
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="sets.html"><i class="bi bi-intersect"></i> 集合運算
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="vlookup.html"><i class="bi bi-search"></i> 資料查閱
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="zipcode.html"><i class="bi bi-geo-alt"></i> 郵遞區號
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="fstring.html"><i class="bi bi-braces"></i> 字串格式化
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="dataparsing.html"><i class="bi bi-filetype-csv"></i> CSV 剖析
            </a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="sublime.html" target="_blank"><i class="bi bi-pencil-square"></i> 編輯器
              </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container" id="mainArea">

    <!-- Page Heading -->
    <!-- <h1 class="my-4">資料處理線上工具
      <small>Data Processing Online Tool</small>
    </h1> -->
    <div class="mb-4"></div>

    <div class="row">
      <div class="col-lg-12 portfolio-item">
        <div class="card h-100 border-primary">
          <div class="card-body">
            <h4 class="card-title">
              <a href="#"><i class="bi bi-braces text-primary"></i> 字串格式</a>
            </h4>
            <textarea class="form-control" style="font-size: 20px" rows="2" id="template" spellcheck="false" autofocus>This is an {} example, {}.</textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 portfolio-item">
        <div class="card h-100 border-primary">
          <div class="card-body">
            <h4 class="card-title">
              <a href="#"><i class="bi bi-table text-primary"></i> 填充資料</a>
            </h4>
            <textarea class="form-control" rows="4" id="paddingdata" spellcheck="false">a,b
c,d
e,f</textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="row mb-3">
      <div class="col-lg-12">
        <!-- CHECKBOX SECTION -->
        <!-- END OF CHECKBOX SECTION -->

        <!-- BUTTON SECTION -->
        <button id="fstringBtn" class="btn btn-info mr-3"><i class="bi bi-play-fill"></i> 格式化字串</button>
        <!-- END OF BUTTON SECTION -->
        <a href="fstringJson.html" class="btn btn-warning"><i class="bi bi-arrow-right-circle"></i> Switch to Json Padding</a>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 portfolio-item">
        <div class="card h-100 border-primary">
          <div class="card-body">
            <h4 class="card-title">
              <a href="#"><i class="bi bi-file-earmark-check text-success"></i> 格式化結果</a>
            </h4>
            <textarea class="form-control" rows="20" id="result"></textarea>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
  <!-- Footer -->
  <footer class="py-3 bg-dark">
    <div class="container text-white">
      <a class="text-info font-weight-bold" href="https://sdwh.github.io/about"><i class="bi bi-person-circle"></i> About Developer</a> /
      <a class="text-info font-weight-bold" href="https://github.com/sdwh/DataHelper"><i class="bi bi-github"></i> Github</a>
      <div class="float-right">
        Update: 2024-01-02
      </div>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="vendor/sweetalert/sweetalert.min.js"></script>
  <script src="vendor/lodash/lodash.min.js"></script>
  <script src="./js/jquery.hotkeys.js"></script> <!-- https://github.com/jeresig/jquery.hotkeys -->
  <script>
    var pageLock = "page/index";
  </script>
  <script src="./js/app.js"></script>
</body>

</html>