diff options
| -rw-r--r-- | about.html | 29 | ||||
| -rw-r--r-- | audio/western-cover.m4a | bin | 663447 -> 0 bytes | |||
| -rw-r--r-- | audio/western-cover.mp3 | bin | 0 -> 435945 bytes | |||
| -rw-r--r-- | images/pink-panther-lasso-rope.gif | bin | 756199 -> 0 bytes | |||
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | style.css | 19 |
6 files changed, 41 insertions, 14 deletions
@@ -13,23 +13,30 @@ <img class="flex" src="images/pixel-lasso.jpeg" max-width="50%" alt="Pixel art of a cowboy lassoing a dragon."> <div class="flex flex2" style="max-width: 500px; color: unset;"> <p> - This site uses word similarity to score all dragon names in terms of its - "closeness" to the given name. - The dragon name that is the "closest" is the one selected as the user's dragon.</p> + This site uses word similarity to score all dragon names from George R.R. Martin's + <a href="https://en.wikipedia.org/wiki/Game_of_Thrones" target="_blank">A Song of Ice and Fire</a> + universe in terms of their "closeness" to the given name. + The dragon name that is the "closest" is the one selected as the user's dragon. + </p> <p> - It uses three popular techniques to calculate similarity scores - - these are the <a href="https://en.wikipedia.org/wiki/Levenshtein_distance" target="_blank">Levenshtein Distance</a>, - <a href="https://en.wikipedia.org/wiki/Cosine_similarity" target="_blank">Cosine Similarity</a>, - and <a href="https://en.wikipedia.org/wiki/Jaccard_index" target="_blank">Jaccard Similarity</a>. + It uses three popular techniques in + <a href="https://en.wikipedia.org/wiki/Natural_language_processing" target="_blank">NLP</a> + to calculate similarity scores - these are the + <a href="https://en.wikipedia.org/wiki/Levenshtein_distance" target="_blank">Levenshtein Distance</a>, + <a href="https://en.wikipedia.org/wiki/Cosine_similarity" target="_blank">Cosine Similarity</a>, + and <a href="https://en.wikipedia.org/wiki/Jaccard_index" target="_blank">Jaccard Similarity</a>. </p> <p> - The final result shown to the user uses cosine similarity only, - but top ranking dragons from each of the other two techniques are - also shown as alternatives. + The final result shown to the user uses cosine similarity only, + but top ranking dragons from each of the other two techniques are + also shown as alternatives. </p> </div> </div> - <a href="index.html">Home</a> + <footer> + <a href="index.html">Home</a><br> + <a href="https://kumardamani.net" target="_blank">Author</a> + </footer> </center> </body> </html> diff --git a/audio/western-cover.m4a b/audio/western-cover.m4a Binary files differdeleted file mode 100644 index 193a465..0000000 --- a/audio/western-cover.m4a +++ /dev/null diff --git a/audio/western-cover.mp3 b/audio/western-cover.mp3 Binary files differnew file mode 100644 index 0000000..c735513 --- /dev/null +++ b/audio/western-cover.mp3 diff --git a/images/pink-panther-lasso-rope.gif b/images/pink-panther-lasso-rope.gif Binary files differdeleted file mode 100644 index 538ff06..0000000 --- a/images/pink-panther-lasso-rope.gif +++ /dev/null @@ -10,7 +10,7 @@ <center> <h1>Name my Dragon</h1> <audio id="audio-player" loop> - <source src="audio/western-cover.m4a" type="audio/mp4"> + <source src="audio/western-cover.mp3" type="audio/mp3"> Enable audio on your browser to get the best experience. </audio> <div class="alert"> @@ -39,7 +39,10 @@ <p>See a comparison of all the dragons here:</p> <img src="images/dragon-sizes.png" width="50%" alt="Comparison chart for all the dragons"> </div> - <a href="about.html">How it works</a> + <footer> + <a href="about.html">How it works</a><br> + <a href="https://kumardamani.net" target="_blank">Author</a> + </footer> </center> <script type="text/javascript" src="dragons.js"></script> @@ -3,8 +3,25 @@ src: url('fonts/gameofthrones.ttf'); } +html { + --s: 60px; /* control the size*/ + --c1: #b09f79; + --c2: #000000; + + --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%; + background: + radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s), + radial-gradient(27% 29% at left ,var(--_g)) calc(var(--s)/-2) var(--s), + radial-gradient(29% 27% at top ,var(--_g)) 0 calc(var(--s)/ 2), + radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2) + var(--c2); + background-size: calc(2*var(--s)) calc(2*var(--s)); +} + body { - background: #faf0e5 + background: #faf0e5; + opacity: 0.97; + padding: 10px; } h1 { |
