From a223c3fdaa7861d5f932ba2079dab5dfcf63bec5 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Wed, 14 Aug 2024 00:49:54 -0400 Subject: Initial commit --- about.html | 35 ++++++ audio/western-cover.m4a | Bin 0 -> 663447 bytes dragons.js | 222 +++++++++++++++++++++++++++++++++++++ fonts/gameofthrones.ttf | Bin 0 -> 28784 bytes images/dragon-sizes.png | Bin 0 -> 374143 bytes images/hat-texas.gif | Bin 0 -> 161381 bytes images/pink-panther-lasso-rope.gif | Bin 0 -> 756199 bytes images/pixel-lasso.jpeg | Bin 0 -> 23529 bytes index.html | 160 ++++++++++++++++++++++++++ style.css | 71 ++++++++++++ 10 files changed, 488 insertions(+) create mode 100644 about.html create mode 100644 audio/western-cover.m4a create mode 100644 dragons.js create mode 100644 fonts/gameofthrones.ttf create mode 100644 images/dragon-sizes.png create mode 100644 images/hat-texas.gif create mode 100644 images/pink-panther-lasso-rope.gif create mode 100644 images/pixel-lasso.jpeg create mode 100644 index.html create mode 100644 style.css diff --git a/about.html b/about.html new file mode 100644 index 0000000..c0536e2 --- /dev/null +++ b/about.html @@ -0,0 +1,35 @@ + + + + + + Name my Dragon - About + + + + +

How it works

Pixel art of a cowboy lassoing a dragon.

+ 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.

+ It uses three popular techniques to calculate similarity scores - + these are the Levenshtein Distance, + Cosine Similarity, + and Jaccard Similarity. +

+ 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. +

+ Home + + + diff --git a/audio/western-cover.m4a b/audio/western-cover.m4a new file mode 100644 index 0000000..193a465 Binary files /dev/null and b/audio/western-cover.m4a differ diff --git a/dragons.js b/dragons.js new file mode 100644 index 0000000..5dd3ecb --- /dev/null +++ b/dragons.js @@ -0,0 +1,222 @@ +const dragons = [ + { + name: "Drogon", + description: "The largest and most aggressive of Daenerys' dragons. Black with red markings.", + rider: "Daenerys Targaryen", + imageId: "drogon", + size: "Very large, wingspan over 100 feet by adulthood", + primaryColor: "#000000", + secondaryColor: "#8B0000", + age: "About 7 years by end of series", + notableAbilities: ["Extremely hot flame", "Largest of Daenerys' dragons"] + }, + { + name: "Rhaegal", + description: "Green-scaled with bronze accents. Named after Daenerys' brother Rhaegar.", + rider: "Daenerys Targaryen", + imageId: "rhaegal", + size: "Large, smaller than Drogon", + primaryColor: "#008000", + secondaryColor: "#704214", + age: "About 7 years by end of series", + notableAbilities: ["Agile flyer"] + }, + { + name: "Viserion", + description: "Cream and gold colored. Named after Daenerys' brother Viserys.", + rider: "Daenerys Targaryen", + imageId: "viserion", + size: "Large, similar to Rhaegal", + primaryColor: "#FFFDD0", + secondaryColor: "#B8860B", + age: "About 7 years by end of series", + notableAbilities: ["Ice breath (after death and reanimation)"] + }, + { + name: "Balerion the Black Dread", + description: "The largest known dragon, black-scaled.", + rider: "Aegon the Conqueror", + imageId: "balerion", + size: "Immense, could swallow a mammoth whole", + primaryColor: "#000000", + secondaryColor: "#2F4F4F", + age: "Approximately 200 years at time of death", + notableAbilities: ["Extremely hot flame", "Largest known dragon"] + }, + { + name: "Vhagar", + description: "One of the three dragons used in the conquest of Westeros. Bronze with greenish-blue highlights.", + rider: "Visenya Targaryen", + imageId: "vhagar", + size: "Nearly as large as Balerion in old age", + primaryColor: "#CD7F32", + secondaryColor: "#2F4F4F", + age: "Approximately 181 years at time of death", + notableAbilities: ["One of the largest dragons", "Veteran of many battles"] + }, + { + name: "Meraxes", + description: "Silver-scaled dragon ridden by Rhaenys Targaryen during the conquest.", + rider: "Rhaenys Targaryen", + imageId: "meraxes", + size: "Large, but smaller than Balerion", + primaryColor: "#C0C0C0", + secondaryColor: "#4B0082", + age: "Unknown", + notableAbilities: ["One of the dragons of Aegon's Conquest"] + }, + { + name: "Caraxes", + description: "Known as the Blood Wyrm, red-scaled and fierce.", + rider: "Daemon Targaryen", + imageId: "caraxes", + size: "Large", + primaryColor: "#FF0000", + secondaryColor: "#8B0000", + age: "Unknown", + notableAbilities: ["Fierce in battle", "Formidable fighter"] + }, + { + name: "Syrax", + description: "Yellow-scaled dragon ridden by Rhaenyra Targaryen.", + rider: "Rhaenyra Targaryen", + imageId: "syrax", + size: "Medium to large", + primaryColor: "#FFFF00", + secondaryColor: "#8B4513", + age: "Unknown", + notableAbilities: ["Swift flyer"] + }, + { + name: "Meleys", + description: "Called the Red Queen, red-scaled with pink wings.", + rider: "Rhaenys Targaryen (the Queen Who Never Was)", + imageId: "meleys", + size: "Large", + primaryColor: "#FF0000", + secondaryColor: "#8B008B", + age: "Unknown", + notableAbilities: ["Swift and fearsome in battle"] + }, + { + name: "Sunfyre", + description: "Described as the most beautiful dragon, with golden scales and pink wing membranes.", + rider: "Aegon II Targaryen", + imageId: "sunfyre", + size: "Medium to large", + primaryColor: "#FFD700", + secondaryColor: "#8B4513", + age: "Young adult during the Dance of the Dragons", + notableAbilities: ["Exceptional beauty", "Formidable in combat"] + }, + { + name: "Vermithor", + description: "Bronze-scaled with tan wings. One of the larger dragons.", + rider: "King Jaehaerys I Targaryen", + imageId: "vermithor", + size: "Very large, third largest after Balerion and Vhagar", + primaryColor: "#CD7F32", + secondaryColor: "#8B4513", + age: "Approximately 100 years during the Dance of the Dragons", + notableAbilities: ["Extremely large and powerful"] + }, + { + name: "Silverwing", + description: "Silver-scaled dragon, often paired with Vermithor.", + rider: "Queen Alysanne Targaryen", + imageId: "silverwing", + size: "Large", + primaryColor: "#C0C0C0", + secondaryColor: "#4B0082", + age: "Approximately 80-90 years during the Dance of the Dragons", + notableAbilities: ["Gentle temperament"] + }, + { + name: "Dreamfyre", + description: "Slender, pale blue dragon with silver markings.", + rider: "Helaena Targaryen", + imageId: "dreamfyre", + size: "Medium", + primaryColor: "#ADD8E6", + secondaryColor: "#4169E1", + age: "Unknown", + notableAbilities: ["Agile flyer"] + }, + { + name: "Tessarion", + description: "Called the Blue Queen, with dark blue scales and wings.", + rider: "Prince Daeron Targaryen", + imageId: "tessarion", + size: "Medium", + primaryColor: "#00008B", + secondaryColor: "#4B0082", + age: "Young during the Dance of the Dragons", + notableAbilities: ["Beautiful appearance"] + }, + { + name: "Sheepstealer", + description: "An aggressive wild dragon with a taste for sheep, brown-scaled.", + rider: "Nettles", + imageId: "sheepstealer", + size: "Medium to large", + primaryColor: "#8B4513", + secondaryColor: "#2F4F4F", + age: "Unknown, but old", + notableAbilities: ["Wild and hard to tame", "Preference for eating sheep"] + }, + { + name: "Seasmoke", + description: "Pale silver-grey dragon ridden by Laenor Velaryon.", + rider: "Laenor Velaryon", + imageId: "seasmoke", + size: "Medium", + primaryColor: "#C0C0C0", + secondaryColor: "#4682B4", + age: "Young adult during the Dance of the Dragons", + notableAbilities: ["Swift flyer"] + }, + { + name: "Moondancer", + description: "Young, slender green dragon ridden by Baela Targaryen.", + rider: "Baela Targaryen", + imageId: "moondancer", + size: "Small to medium", + primaryColor: "#00FF00", + secondaryColor: "#006400", + age: "Very young during the Dance of the Dragons", + notableAbilities: ["Quick and nimble"] + }, + { + name: "Vermax", + description: "Young dragon ridden by Jacaerys Velaryon during the Dance of the Dragons.", + rider: "Jacaerys Velaryon", + imageId: "vermax", + size: "Small to medium", + primaryColor: "#808080", + secondaryColor: "#2F4F4F", + age: "Young during the Dance of the Dragons", + notableAbilities: ["Unknown"] + }, + { + name: "Arrax", + description: "Young dragon ridden by Lucerys Velaryon, described as swift.", + rider: "Lucerys Velaryon", + imageId: "arrax", + size: "Small", + primaryColor: "#808080", + secondaryColor: "#2F4F4F", + age: "Very young during the Dance of the Dragons", + notableAbilities: ["Swift flyer"] + }, + { + name: "Tyraxes", + description: "Young dragon ridden by Joffrey Velaryon, not much is known about its appearance.", + rider: "Joffrey Velaryon", + imageId: "tyraxes", + size: "Small", + primaryColor: "#808080", + secondaryColor: "#2F4F4F", + age: "Very young during the Dance of the Dragons", + notableAbilities: ["Unknown"] + } +]; diff --git a/fonts/gameofthrones.ttf b/fonts/gameofthrones.ttf new file mode 100644 index 0000000..793ddff Binary files /dev/null and b/fonts/gameofthrones.ttf differ diff --git a/images/dragon-sizes.png b/images/dragon-sizes.png new file mode 100644 index 0000000..064f1ff Binary files /dev/null and b/images/dragon-sizes.png differ diff --git a/images/hat-texas.gif b/images/hat-texas.gif new file mode 100644 index 0000000..b97734c Binary files /dev/null and b/images/hat-texas.gif differ diff --git a/images/pink-panther-lasso-rope.gif b/images/pink-panther-lasso-rope.gif new file mode 100644 index 0000000..538ff06 Binary files /dev/null and b/images/pink-panther-lasso-rope.gif differ diff --git a/images/pixel-lasso.jpeg b/images/pixel-lasso.jpeg new file mode 100644 index 0000000..c842197 Binary files /dev/null and b/images/pixel-lasso.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..785667b --- /dev/null +++ b/index.html @@ -0,0 +1,160 @@ + + + + + + Name my Dragon - Home + + + + +

Name my Dragon

+ Warning: The button below will play some sweet tunes! + Hit the "Stop music" button to stop it or just mute your device. + × +

+ +

And your Dragon is...

See a comparison of all the dragons here:

+ How it works + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..9445212 --- /dev/null +++ b/style.css @@ -0,0 +1,71 @@ +@font-face { + font-family: 'GOTFont'; + src: url('fonts/gameofthrones.ttf'); +} + +body { + background: #faf0e5 +} + +h1 { + font-family: 'GOTFont', Georgia, serif; +} + +.legible { + color: white; + text-shadow: + 0.05em 0 black, + 0 0.05em black, + -0.05em 0 black, + 0 -0.05em black, + -0.05em -0.05em black, + -0.05em 0.05em black, + 0.05em -0.05em black, + 0.05em 0.05em black; +} + +.container { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.flex { + padding: 10px; + border: 3px solid #faf0e5; + color: white; + font-size: 14px; + text-align: center; + position: relative; + margin-bottom: 33px; +} + +.flex1 { + min-width: 150px; +} + +.flex2 { + font-size: large; + text-align: left; +} + +.alert { + margin-bottom: 15px; + padding: 20px; + background-color: orange; /* Red */ + color: white; +} + +/* The close button */ +.closebtn { + margin-left: 15px; + color: white; + font-weight: bold; + float: right; + font-size: 22px; + line-height: 20px; + cursor: pointer; + transition: 0.3s; +} -- cgit v1.2.3