Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" | |
| crossorigin="anonymous" | |
| /> | |
| <link rel="stylesheet" href="./style.css" /> | |
| <script | |
| src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" | |
| crossorigin="anonymous" | |
| defer | |
| ></script> | |
| <script src="./main.js"></script> | |
| <title>Frequency Analysis</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <h2>Frequency Analysis</h2> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="mb-3"> | |
| <label for="cipher-text" class="form-label" | |
| >Cipher text (user input)</label | |
| > | |
| <textarea | |
| class="form-control" | |
| id="cipher-text" | |
| rows="5" | |
| placeholder="Enter your cipher text here..." | |
| ></textarea> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="row my-1"> | |
| <div class="col"> | |
| <button | |
| class="btn btn-dark my-1" | |
| onclick="document.getElementById('cipher-text').value = ''; document.getElementById('frequency-textarea').value = ''; document.getElementById('new-substitution').value = ''" | |
| > | |
| Reset | |
| </button> | |
| </div> | |
| </div> | |
| <div class="row my-1"> | |
| <div class="col"> | |
| <button | |
| class="btn btn-dark my-1" | |
| onclick="document.getElementById('cipher-text').value = removeWhitespaces(document.getElementById('cipher-text').value)" | |
| > | |
| Remove spaces | |
| </button> | |
| </div> | |
| </div> | |
| <div class="row my-1"> | |
| <div class="col"> | |
| <button | |
| class="btn btn-dark my-1" | |
| onclick="document.getElementById('frequency-textarea').value = getLetterFrequency(document.getElementById('cipher-text').value)" | |
| > | |
| Decrypt / convert | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <button | |
| class="btn btn-dark my-1 mx-2" | |
| onclick=" | |
| document.getElementById('frequency-textarea').value = countSingle(document.getElementById('cipher-text').value)" | |
| > | |
| Count Single Character | |
| </button> | |
| <button | |
| class="btn btn-dark my-1 mx-2" | |
| onclick="document.getElementById('frequency-textarea').value = countDigrams(document.getElementById('cipher-text').value)" | |
| > | |
| Count Digrams (2 CHARs) | |
| </button> | |
| <button | |
| class="btn btn-dark my-1 mx-2" | |
| onclick="document.getElementById('frequency-textarea').value = countTrigrams(document.getElementById('cipher-text').value)" | |
| > | |
| Count Tiagrams (3 CHARs) | |
| </button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col my-3"> | |
| <label for="frequency-textarea" class="my-3" | |
| >The frequencies of English language are: (generated by the | |
| system) [letter: frequency]</label | |
| > | |
| <textarea | |
| class="form-control" | |
| id="frequency-textarea" | |
| rows="10" | |
| ></textarea> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col my-3"> | |
| <button | |
| class="btn btn-dark my-1 mx-2" | |
| onclick="document.getElementById('substitute-area').classList.remove('d-none')" | |
| > | |
| Make new substitution | |
| </button> | |
| <button | |
| class="btn btn-dark my-1 mx-2" | |
| onclick="document.getElementById('new-substitution').value = document.getElementById('cipher-text').value = substituteCipherText(document.getElementById('cipher-text').value, document.getElementById('new-substitution').value)" | |
| > | |
| Decrypt / Convert | |
| </button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col my-3 d-none" id="substitute-area"> | |
| <label for="new-substitution" | |
| >The new substitution table (input by user - can multiple | |
| insert)</label | |
| > | |
| <p class="my-1 mx-1">Example input format -> (A:B) separated by ", ", excluding the ()</p> | |
| <textarea | |
| class="form-control" | |
| id="new-substitution" | |
| rows="10" | |
| placeholder="A:B, C:D" | |
| ></textarea> | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| <div class="row"> | |
| <div class="col pt-4"> | |
| <p> | |
| <!-- Hosted at HuggingFace Spaces using their own Git, my original | |
| repo is at | |
| <a href="https://github.com/noctwilliam/freq-analysis" target="_blank" | |
| >GitHub</a | |
| > | |
| <br> --> | |
| Pair work by Harith & Luqman | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |