simple.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>SimpleApp</title>
  5. <meta charset = "UTF-8">
  6. <link rel = "shortcut icon" href = "tests/logo.png" type = "image/png" />
  7. <link rel = "stylesheet" type = "text/css" href="../style.css">
  8. <link rel = "stylesheet" type = "text/css" href="../dark.css" />
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. </head>
  11. <body>
  12. <header>
  13. <div class = "logo-and-title">
  14. <img src = "./logo.png" alt = "SimpleApp Logo" class = "logo">
  15. <h1>FemtoCrank</h1>
  16. </div>
  17. <nav class = "fg1">
  18. <ul role = "menubar">
  19. <li><a href = "../index.html" class = "active">Demo home</a></li>
  20. <li>
  21. <span>Dropdown</span>
  22. <div>
  23. <ul>
  24. <li><a href = "#">foo</a></li>
  25. <li><a href = "#">bar</a></li>
  26. </ul>
  27. </div>
  28. </li>
  29. </ul>
  30. </nav>
  31. <div>
  32. <p class = "subtle">Next page refresh:</p>
  33. <p><progress id = "next-update" value = "0" max = "30" title = "Time until next update"></progress></p>
  34. </div>
  35. <div id = "last-updated-container">
  36. <p class = "subtle">Last result:</p>
  37. <p id = "last-updated" class = "critical">
  38. Never updated
  39. </p>
  40. </div>
  41. <a href = "https://github.com/jamesread/uncomplicated-alert-receiver" target = "_blank" class = "aside icon">
  42. &#9829;
  43. </a>
  44. </header>
  45. <main>
  46. <section class = "with-header-and-content">
  47. <div class = "section-header">
  48. <h2>Welcome to SimpleApp</h2>
  49. <div role = "toolbar">
  50. <a class = "button neutral" href = "#">Test</a>
  51. </div>
  52. </div>
  53. <div class = "section-content padding">
  54. <p>
  55. SimpleApp is a demonstration of a simple web application that uses HTML, CSS, and JavaScript.
  56. It includes various UI components such as forms, buttons, and navigation.
  57. </p>
  58. </div>
  59. </section>
  60. <section>
  61. <h2>Forms</h2>
  62. <p>This is a form.</p>
  63. <form>
  64. <label for = "name">Name</label>
  65. <input type = "text" id = "name" name = "name" />
  66. <span class = "fake-label">Role</span>
  67. <div class = "radio-group">
  68. <label>
  69. <input type = "radio" name = "role" value = "sales" />
  70. <span>Sales</span>
  71. </label>
  72. <label>
  73. <input type = "radio" name = "role" value = "engineerig" />
  74. <span>Engineering</span>
  75. </label>
  76. <label>
  77. <input type = "radio" name = "role" value = "hr" />
  78. <span>HR</span>
  79. </label>
  80. </div>
  81. <label for = "salary">Salary</label>
  82. <select id = "salary" name = "salary">
  83. <option value = "0">Select a salary</option>
  84. <option value = "10000">£10,000</option>
  85. <option value = "20000">£20,000</option>
  86. <option value = "30000">£30,000</option>
  87. <option value = "40000">£40,000</option>
  88. <option value = "50000">£50,000</option>
  89. </select>
  90. <label for = "email">Email</label>
  91. <input type = "email" id = "email" name = "email" />
  92. <label>Is Administrator?</label>
  93. <input type = "checkbox" id = "is-admin" name = "is-admin" />
  94. <label>Website</label>
  95. <input type = "url" id = "website" name = "website" placeholder = "https://example.com" />
  96. <label>Favourite Colour</label>
  97. <input type = "color" id = "favourite-colour" name = "favourite-colour" value = "#dee3e7" />
  98. <label>Favourite Number</label>
  99. <input type = "number" id = "favourite-number" name = "favourite-number" min = "0" max = "100" step = "1" value = "50" />
  100. <span class = "fake-label">
  101. Newsletters
  102. </span>
  103. <div>
  104. <label>
  105. <input type = "checkbox" id = "newsletter1" name = "newsletter1" />
  106. <span>Newsletter 1</span>
  107. </label>
  108. <label>
  109. <input type = "checkbox" id = "newsletter2" name = "newsletter2" />
  110. <span>Newsletter 2</span>
  111. </label>
  112. </div>
  113. <label for = "comments">Comments</label>
  114. <textarea id = "comments" name = "comments"></textarea>
  115. <label>
  116. Datetime
  117. </label>
  118. <input type = "datetime-local" id = "datetime" name = "datetime" />
  119. <fieldset>
  120. <button type = "submit">Submit</button>
  121. <button type = "cancel">Cancel</button>
  122. <button type = "reset">Reset</button>
  123. <button type = "submit" disabled>Disabled</button>
  124. </fieldset>
  125. </form>
  126. </section>
  127. </main>
  128. <footer>
  129. <p>
  130. <span><a href = "https://github.com/jamesread">jamesread on GitHub</a></span>
  131. <span id = "current-version">Version 1337</span>
  132. </p>
  133. </footer>
  134. </body>
  135. </html>