From cd66828ed8bc688491194db98a1e8fc3499058d4 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Wed, 14 Aug 2024 16:03:45 -0400 Subject: moved stuff around --- .gitignore | 1 - public/about.html | 42 ++++++++ public/audio/western-cover.mp3 | Bin 0 -> 435945 bytes public/dragons.js | 222 +++++++++++++++++++++++++++++++++++++++++ public/fonts/gameofthrones.ttf | Bin 0 -> 28784 bytes public/images/dragon-sizes.png | Bin 0 -> 374143 bytes public/images/hat-texas.gif | Bin 0 -> 161381 bytes public/images/pixel-lasso.jpeg | Bin 0 -> 23529 bytes public/index.html | 163 ++++++++++++++++++++++++++++++ public/style.css | 88 ++++++++++++++++ 10 files changed, 515 insertions(+), 1 deletion(-) create mode 100644 public/about.html create mode 100644 public/audio/western-cover.mp3 create mode 100644 public/dragons.js create mode 100644 public/fonts/gameofthrones.ttf create mode 100644 public/images/dragon-sizes.png create mode 100644 public/images/hat-texas.gif create mode 100644 public/images/pixel-lasso.jpeg create mode 100644 public/index.html create mode 100644 public/style.css diff --git a/.gitignore b/.gitignore index b33e988..6663e65 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ -public/ .direnv .devenv credentials diff --git a/public/about.html b/public/about.html new file mode 100644 index 0000000..138d1e9 --- /dev/null +++ b/public/about.html @@ -0,0 +1,42 @@ + + + + + + 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 from George R.R. Martin's + A Song of Ice and Fire + 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. +

+ It uses three popular techniques in + NLP + 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. +

+ + + + diff --git a/public/audio/western-cover.mp3 b/public/audio/western-cover.mp3 new file mode 100644 index 0000000..c735513 Binary files /dev/null and b/public/audio/western-cover.mp3 differ diff --git a/public/dragons.js b/public/dragons.js new file mode 100644 index 0000000..5dd3ecb --- /dev/null +++ b/public/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/public/fonts/gameofthrones.ttf b/public/fonts/gameofthrones.ttf new file mode 100644 index 0000000..793ddff Binary files /dev/null and b/public/fonts/gameofthrones.ttf differ diff --git a/public/images/dragon-sizes.png b/public/images/dragon-sizes.png new file mode 100644 index 0000000..064f1ff Binary files /dev/null and b/public/images/dragon-sizes.png differ diff --git a/public/images/hat-texas.gif b/public/images/hat-texas.gif new file mode 100644 index 0000000..b97734c Binary files /dev/null and b/public/images/hat-texas.gif differ diff --git a/public/images/pixel-lasso.jpeg b/public/images/pixel-lasso.jpeg new file mode 100644 index 0000000..c842197 Binary files /dev/null and b/public/images/pixel-lasso.jpeg differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..3e445c5 --- /dev/null +++ b/public/index.html @@ -0,0 +1,163 @@ + + + + + + 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:

+ + + + + + + diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..9e664c4 --- /dev/null +++ b/public/style.css @@ -0,0 +1,88 @@ +@font-face { + font-family: 'GOTFont'; + 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; + opacity: 0.97; + padding: 10px; +} + +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