index.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>FPC CSS Parser Demo</title>
  8. <link href="bootstrap.min.css" rel="stylesheet">
  9. <link rel="stylesheet" href="style.css">
  10. <script src="bootstrap.bundle.min.js"></script>
  11. <script src="cssdemo.js"></script>
  12. </head>
  13. <body>
  14. <header>
  15. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  16. <div class="container">
  17. <a class="navbar-brand d-flex align-items-center" href="#">
  18. <span>Free Pascal Demo</span></a>
  19. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  20. <span class="navbar-toggler-icon"></span>
  21. </button>
  22. <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
  23. <ul class="navbar-nav">
  24. <li class="nav-item">
  25. <a class="nav-link" aria-current="page" href="https://www.freepascal.org/">
  26. <i class="bi bi-house-door"></i>
  27. Home</a>
  28. </li>
  29. <!-- If you only have one source code, use this
  30. <li class="nav-item">
  31. <a class="nav-link" href="#">
  32. <i class="bi bi-code-slash"></i>
  33. Source</a>
  34. </li> -->
  35. <li class="nav-item dropdown">
  36. <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  37. <i class="bi bi-code-slash"></i>
  38. Sources
  39. </a>
  40. <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
  41. <li>
  42. <a class="dropdown-item" href="cssdemo.lpr" target="_blank">cssdemo.lpr</a>
  43. </li>
  44. <li>
  45. <a class="dropdown-item" href="main.pas" target="_blank">main.pas</a>
  46. </li>
  47. </ul>
  48. </li>
  49. <li class="nav-item">
  50. <a class="nav-link" href="https://wiki.freepascal.org/pas2js" target="_blank">
  51. <i class="bi bi-globe2"></i>
  52. Wiki</a>
  53. </li>
  54. </ul>
  55. </div>
  56. </div>
  57. </nav>
  58. </header>
  59. <main class="container mb-4">
  60. <section class="py-5">
  61. <h1>CSS Parser</h1>
  62. <div class="row">
  63. <div class="col-md my-3">
  64. <form>
  65. <div class="my-3">
  66. <label for="userCss" class="form-label fw-bold">Please enter or copy & paste your CSS:</label>
  67. <textarea class="form-control" id="userCss" rows="10"></textarea>
  68. </div>
  69. <button id="btnMinimize" type="button" _click_="doMinimize" class="btn btn-outline-dark">Minimize CSS</button>
  70. <button id="btnClassNames" type="button" _click_="doExtract" class="ms-2 btn btn-outline-dark">Extract Class Names</button>
  71. </form>
  72. </div>
  73. <div class="col-md my-3">
  74. <div class="my-3">
  75. <label for="userCss" class="form-label fw-bold">Output:</label>
  76. <textarea class="form-control" id="processedCss" rows="10"></textarea>
  77. </div>
  78. </div>
  79. </div>
  80. </section>
  81. </main>
  82. <footer class="bg-light pt-3 fixed-bottom">
  83. <div class="container text-center">
  84. <p class="text-muted">© April 2022</p>
  85. </div>
  86. </footer>
  87. <script>
  88. window.onload=rtl.run;
  89. </script>
  90. </body>
  91. </html>