Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aussie Language Guide</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .tab-btn.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .term-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .term-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-blue-800 mb-2">Aussie Language Guide</h1> | |
| <p class="text-lg text-gray-600">From slang to business lingo - understand the true blue Aussie way</p> | |
| <div class="flex justify-center mt-4"> | |
| <div class="w-24 h-1 bg-yellow-400 rounded-full"></div> | |
| </div> | |
| </header> | |
| <!-- Tabs Navigation --> | |
| <div class="flex flex-wrap justify-center mb-8 bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="tab-btn active px-6 py-3 font-medium text-sm md:text-base flex items-center" data-tab="slang"> | |
| <i class="fas fa-kiwi-bird mr-2"></i> Aussie Slang | |
| </button> | |
| <button class="tab-btn px-6 py-3 font-medium text-sm md:text-base flex items-center" data-tab="business"> | |
| <i class="fas fa-briefcase mr-2"></i> Business Phrases | |
| </button> | |
| <button class="tab-btn px-6 py-3 font-medium text-sm md:text-base flex items-center" data-tab="phrasal"> | |
| <i class="fas fa-comments mr-2"></i> Phrasal Verbs | |
| </button> | |
| </div> | |
| <!-- Search Box --> | |
| <div class="mb-8 max-w-2xl mx-auto"> | |
| <div class="relative"> | |
| <input type="text" id="search" placeholder="Search terms..." class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button class="absolute right-3 top-3 text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <!-- Aussie Slang Tab --> | |
| <div id="slang" class="tab-content active p-6"> | |
| <h2 class="text-2xl font-bold text-blue-800 mb-6 flex items-center"> | |
| <i class="fas fa-kiwi-bird mr-3 text-yellow-500"></i> Australian Slang Dictionary | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Slang terms will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Business Phrases Tab --> | |
| <div id="business" class="tab-content p-6"> | |
| <h2 class="text-2xl font-bold text-blue-800 mb-6 flex items-center"> | |
| <i class="fas fa-briefcase mr-3 text-green-500"></i> Business Phrases (Australian) | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-green-700 mb-2">"Let's touch base"</h3> | |
| <p class="text-gray-600 mb-3">Meaning to meet or contact someone to discuss something.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "We should touch base next week about the project timeline."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-green-700 mb-2">"Run it up the flagpole"</h3> | |
| <p class="text-gray-600 mb-3">To test an idea or proposal with others to get their opinion.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "Let's run this marketing strategy up the flagpole with the team."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-green-700 mb-2">"On the same page"</h3> | |
| <p class="text-gray-600 mb-3">Agreement or shared understanding about something.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "Before we proceed, I want to make sure we're all on the same page."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-green-700 mb-2">"Blue sky thinking"</h3> | |
| <p class="text-gray-600 mb-3">Creative thinking without limitations or constraints.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "In our brainstorming session, let's do some blue sky thinking."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-green-700 mb-2">"Take it offline"</h3> | |
| <p class="text-gray-600 mb-3">To discuss something privately or outside of the current meeting.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "That's an interesting point - let's take it offline after the meeting."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-green-700 mb-2">"Bang for your buck"</h3> | |
| <p class="text-gray-600 mb-3">Getting good value for money spent.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "This software gives us the most bang for our buck."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phrasal Verbs Tab --> | |
| <div id="phrasal" class="tab-content p-6"> | |
| <h2 class="text-2xl font-bold text-blue-800 mb-6 flex items-center"> | |
| <i class="fas fa-comments mr-3 text-purple-500"></i> Phrasal Verbs for Business | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-purple-700 mb-2">"Follow up"</h3> | |
| <p class="text-gray-600 mb-3">To pursue or check on something previously discussed.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "I'll follow up with the client next week about their decision."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-purple-700 mb-2">"Phase out"</h3> | |
| <p class="text-gray-600 mb-3">To gradually discontinue something.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "We're phasing out the old software system by the end of the year."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-purple-700 mb-2">"Scale up"</h3> | |
| <p class="text-gray-600 mb-3">To increase in size, amount, or production.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "We need to scale up production to meet the increased demand."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-purple-700 mb-2">"Break down"</h3> | |
| <p class="text-gray-600 mb-3">To analyze or separate something into smaller parts.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "Let's break down the project into manageable tasks."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-purple-700 mb-2">"Draw up"</h3> | |
| <p class="text-gray-600 mb-3">To prepare or write a document or plan.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "The legal team will draw up the contract by Friday."</p> | |
| </div> | |
| <div class="term-card bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-bold text-lg text-purple-700 mb-2">"Run by"</h3> | |
| <p class="text-gray-600 mb-3">To present an idea or proposal to someone for their opinion.</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "I'd like to run these figures by you before the meeting."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab functionality | |
| const tabBtns = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Remove active class from all buttons and contents | |
| tabBtns.forEach(b => b.classList.remove('active')); | |
| tabContents.forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked button and corresponding content | |
| btn.classList.add('active'); | |
| const tabId = btn.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Slang terms data | |
| const slangTerms = [ | |
| { term: "A Cold One", meaning: "Beer", example: "Let's grab a cold one after work." }, | |
| { term: "Accadacca", meaning: "How Aussies refer to Australian band ACDC", example: "Accadacca is playing at the pub tonight!" }, | |
| { term: "Ankle Biter", meaning: "Child", example: "I can't come out, I've got the ankle biters this weekend." }, | |
| { term: "Arvo", meaning: "Afternoon (S'Arvo = this afternoon!)", example: "See you this arvo for the barbie." }, | |
| { term: "Aussie Salute", meaning: "Wave to scare the flies", example: "You'll see plenty of Aussie salutes in the outback." }, | |
| { term: "Avo", meaning: "Avocado", example: "Put some avo on my toast, please." }, | |
| { term: "Bail", meaning: "To cancel plans", example: "Bruce bailed on us again." }, | |
| { term: "Barbie", meaning: "Barbecue", example: "Bring some snags for the barbie." }, | |
| { term: "Bathers", meaning: "Swimsuit", example: "Don't forget your bathers - we're going to the beach." }, | |
| { term: "Beauty!", meaning: "Great! Most often exclaimed as 'You Beauty'", example: "You beauty! We got the tickets!" }, | |
| { term: "Billabong", meaning: "A pond in a dry riverbed", example: "We camped by the billabong last night." }, | |
| { term: "Billy", meaning: "Teapot (In the Outback on the fire)", example: "Put the billy on for some tea." }, | |
| { term: "Bloody", meaning: "Very. Used to extenuate a point", example: "That's bloody brilliant!" }, | |
| { term: "Bloody oath", meaning: "yes or its true", example: "'You right mate?'... 'Bloody Oath'" }, | |
| { term: "Bludger", meaning: "Someone who's lazy, generally also who relies on others", example: "Stop being a bludger and help out!" }, | |
| { term: "Bogan", meaning: "This word is used for people who are rednecks", example: "He's such a bogan with his mullet and flannie." }, | |
| { term: "Booze Bus", meaning: "Police vehicle used to catch drunk drivers", example: "Watch out for the booze bus on Friday nights." }, | |
| { term: "Bottle-O", meaning: "Bottle Shop, basically a place to buy alcohol", example: "I'm just ducking to the bottle-o for some goon." }, | |
| { term: "Brekky", meaning: "Breakfast", example: "Let's meet for brekky before work." }, | |
| { term: "Brolly", meaning: "Umbrella", example: "Better take your brolly - it might rain." }, | |
| { term: "Bruce", meaning: "An Aussie Bloke", example: "Bruce is coming over for a coldie." }, | |
| { term: "Buckleys Chance", meaning: "little chance", example: "You've got Buckleys chance of getting a ticket now." }, | |
| { term: "Budgie Smugglers", meaning: "Speedos", example: "Check out Bruce in his budgie smugglers!" }, | |
| { term: "Buggered", meaning: "Exhausted", example: "I'm absolutely buggered after that hike." }, | |
| { term: "Bush", meaning: "Out in the countryside away from civilisation", example: "He's gone bush for the weekend." }, | |
| { term: "Cab Sav", meaning: "Cabernet Sauvignon", example: "I'll have a glass of Cab Sav, thanks." }, | |
| { term: "Cactus", meaning: "Dead, Broken", example: "My phone's cactus after I dropped it." }, | |
| { term: "Choc A Bloc", meaning: "Full", example: "The pub was choc a bloc on Friday night." }, | |
| { term: "Choccy Biccy", meaning: "Chocolate Biscuit", example: "Want a choccy biccy with your tea?" }, | |
| { term: "Chook", meaning: "Chicken", example: "We're having roast chook for dinner." }, | |
| { term: "Chrissie", meaning: "Christmas", example: "What are you doing for Chrissie this year?" }, | |
| { term: "Ciggy", meaning: "a Cigarette", example: "I'm just going out for a quick ciggy." }, | |
| { term: "Clucky", meaning: "feeling maternal", example: "She's gone all clucky since her sister had a baby." }, | |
| { term: "Cobber", meaning: "Very good friend", example: "Alright me 'ol cobber, how ya going?" }, | |
| { term: "Coldie", meaning: "Beer", example: "Come over for a few coldie's mate." }, | |
| { term: "Coppers", meaning: "Policemen", example: "The coppers pulled me over for speeding." }, | |
| { term: "Crack the shits", meaning: "Getting angry at someone or something", example: "Don't crack the shits, it was just a joke." }, | |
| { term: "Crikey", meaning: "an expression of surprise", example: "Crikey! Look at the size of that spider!" }, | |
| { term: "Crook", meaning: "Being ill or angry", example: "Don't go crook on me for getting crook." }, | |
| { term: "Dag", meaning: "Someone who's a bit of a nerd or geek", example: "He's a bit of a dag but he's a good bloke." }, | |
| { term: "Daks", meaning: "Trousers", example: "Tracky daks = sweatpants (tracksuit pants)" }, | |
| { term: "Dardy", meaning: "cool", example: "That new ute is dardy, mate!" }, | |
| { term: "Deadset", meaning: "True", example: "Deadset? You're moving to Perth?" }, | |
| { term: "Defo", meaning: "Definitely", example: "I'll defo be there on Saturday." }, | |
| { term: "Devo", meaning: "Devastated", example: "I'm devo that my team lost." }, | |
| { term: "Drongo", meaning: "a Fool", example: "Don't be a drongo mate, check your facts." }, | |
| { term: "Dunny", meaning: "Toilet", example: "I'll be back in a sec, just going to the dunny." }, | |
| { term: "Durry", meaning: "Cigarette", example: "Can I bum a durry off ya?" }, | |
| { term: "Esky", meaning: "An insulated container that keeps things cold (usually beers)", example: "Don't forget to pack the esky for the road trip." }, | |
| { term: "Facey", meaning: "Facebook", example: "I saw it on Facey this morning." }, | |
| { term: "Fair Dinkum", meaning: "Honestly?", example: "'Fair Dinkum?' ... 'Fair Dinkum!'" }, | |
| { term: "Flannie / Flanno", meaning: "flannelette shirt", example: "He's wearing his flanno even though it's 30 degrees." }, | |
| { term: "Flat out", meaning: "Really busy", example: "I've been flat out like a lizard drinking all week." }, | |
| { term: "Footy", meaning: "Football (AFL / Aussie Rules)", example: "Are you going to the footy this weekend?" }, | |
| { term: "Frothy", meaning: "Beer", example: "I could go for a frothy right about now." }, | |
| { term: "Furphy", meaning: "rumours or stories that are improbable or absurd", example: "That's just a furphy someone started to scare people." }, | |
| { term: "G'day", meaning: "Hello", example: "G'day mate, how ya going?" }, | |
| { term: "Galah", meaning: "an Australian cockatoo with a reputation for not being bright, hence a galah is also a stupid person", example: "Don't be such a galah, that's not how it works." }, | |
| { term: "Gnarly", meaning: "awesome - often used by surfers", example: "That wave was gnarly, dude!" }, | |
| { term: "Going off", meaning: "busy, lots of people / angry person", example: "The pub was going off last night." }, | |
| { term: "Good On Ya", meaning: "Good work", example: "You fixed the car? Good on ya, mate!" }, | |
| { term: "Goon", meaning: "the best invention ever produced by mankind. Goon is a cheap, boxed wine", example: "We drank goon all night at the backpackers." }, | |
| { term: "Hard yakka", meaning: "Hard work", example: "It's been hard yakka getting this project finished." }, | |
| { term: "Heaps", meaning: "loads, lots, many", example: "There were heaps of people at the beach." }, | |
| { term: "Hoon", meaning: "Hooligan (normally driving badly!)", example: "The hoons were doing burnouts in the car park." }, | |
| { term: "Iffy", meaning: "bit risky or unreasonable", example: "That deal sounds a bit iffy to me." }, | |
| { term: "Knickers", meaning: "female underwear", example: "She got her knickers in a twist over nothing." }, | |
| { term: "Lappy", meaning: "Laptop", example: "I left my lappy at work." }, | |
| { term: "Larrikin", meaning: "Someone who's always up for a laugh, bit of a harmless prankster", example: "He's a bit of a larrikin but means well." }, | |
| { term: "Legless", meaning: "Someone who is really drunk", example: "Bruce got legless at the work party." }, | |
| { term: "Lollies", meaning: "Sweets", example: "Want some lollies from the shop?" }, | |
| { term: "Maccas", meaning: "McDonalds", example: "Let's grab some Maccas on the way home." }, | |
| { term: "Manchester", meaning: "Sheets / Linen etc.", example: "The manchester department is on the third floor." }, | |
| { term: "Mongrel", meaning: "Someone who's a bit of a dick", example: "That mongrel stole my parking spot!" }, | |
| { term: "Mozzie", meaning: "Mosquito", example: "The mozzies are bad near the river." }, | |
| { term: "No Drama", meaning: "No problem / it's ok", example: "No drama, mate, I can help you with that." }, | |
| { term: "No Worries", meaning: "No problem / it's ok", example: "No worries, she'll be right." }, | |
| { term: "No Wucka's", meaning: "A truly Aussie way to say 'no worries'", example: "No wucka's mate, I've got it covered." }, | |
| { term: "Nuddy", meaning: "Naked", example: "He was running around in the nuddy after too many coldies." }, | |
| { term: "Outback", meaning: "The interior of Australia", example: "We're heading to the outback for our holiday." }, | |
| { term: "Pash", meaning: "to kiss", example: "They were pashing behind the pub." }, | |
| { term: "Piece of Piss", meaning: "easy", example: "That exam was a piece of piss." }, | |
| { term: "Piss Off", meaning: "go away, get lost", example: "Piss off, I'm busy!" }, | |
| { term: "Piss Up", meaning: "a party, a get together", example: "There's a piss up at Bruce's place on Saturday." }, | |
| { term: "Pissed", meaning: "Intoxicated, Drunk", example: "He was so pissed he couldn't stand up." }, | |
| { term: "Pissed Off", meaning: "Annoyed", example: "I'm really pissed off about what happened." }, | |
| { term: "Rack Off", meaning: "The less offensive way to tell someone to 'F Off'!", example: "Rack off, will ya?" }, | |
| { term: "Rapt", meaning: "Very happy", example: "I'm rapt with my new job." }, | |
| { term: "Reckon", meaning: "for sure", example: "'You Reckon?'... 'I reckon!'" }, | |
| { term: "Ripper", meaning: "That's fantastic mate!", example: "You little ripper! We won the lottery!" }, | |
| { term: "Root Rat", meaning: "someone who enjoys sex (maybe a little too much)", example: "Bruce is a bit of a root rat since his divorce." }, | |
| { term: "Rooted", meaning: "Tired or Broken", example: "I'm rooted after that long shift." }, | |
| { term: "Runners", meaning: "Trainers, Sneakers", example: "I need new runners for the gym." }, | |
| { term: "Sanger", meaning: "Sandwich", example: "I made a vegemite sanger for lunch." }, | |
| { term: "Servo", meaning: "Service Station / Garage", example: "We need to stop at the servo for petrol." }, | |
| { term: "Shark biscuit", meaning: "kids at the beach", example: "The shark biscuits are having fun in the waves." }, | |
| { term: "Sheila", meaning: "A woman", example: "There was a sheila asking for you at the bar." }, | |
| { term: "She'll be apples", meaning: "Everything will be alright", example: "Don't stress, she'll be apples." }, | |
| { term: "Shoot Through", meaning: "To leave", example: "I'm going to shoot through before it gets late." }, | |
| { term: "Sick", meaning: "awesome", example: "That's really sick mate, where'd you get it?" }, | |
| { term: "Sickie", meaning: "a sick day off work", example: "I think I'll pull a sickie tomorrow." }, | |
| { term: "Skull", meaning: "To down a beer", example: "Skull your drink, mate!" }, | |
| { term: "Slab", meaning: "A carton of beers", example: "Bring a slab to the party." }, | |
| { term: "Smoko", meaning: "Cigarette break", example: "I'm just going for smoko." }, | |
| { term: "Snag", meaning: "Sausage", example: "Throw another snag on the barbie." }, | |
| { term: "Stiffy", meaning: "Erection", example: "He got a stiffy during the massage." }, | |
| { term: "Stoked", meaning: "Happy, Pleased", example: "I'm stoked with my new car." }, | |
| { term: "Straya", meaning: "Australia", example: "Good on ya, Straya!" }, | |
| { term: "Strewth", meaning: "An exclamation of surprise", example: "Strewth! Look at the size of that!" }, | |
| { term: "Stubby", meaning: "a bottle of beer", example: "Pass me a stubby from the esky." }, | |
| { term: "Stubby Holder", meaning: "Used so your hands don't get cold when holding your beer", example: "Don't forget your stubby holder for the cricket." }, | |
| { term: "Stuffed", meaning: "Tired", example: "I'm stuffed after that long flight." }, | |
| { term: "Sunnies", meaning: "Sunglasses", example: "It's bright out - better grab your sunnies." }, | |
| { term: "Swag", meaning: "Single bed you can roll up, a bit like a sleeping bag", example: "We slept in swags under the stars." }, | |
| { term: "Tea", meaning: "Dinner", example: "What's for tea tonight?" }, | |
| { term: "Tinny", meaning: "Can of beer or small boat", example: "Grab a tinny from the fridge." }, | |
| { term: "Thongs", meaning: "Flip Flops", example: "Don't forget your thongs for the beach." }, | |
| { term: "True Blue", meaning: "Genuinely Australian", example: "He's a true blue Aussie bloke." }, | |
| { term: "Tucker", meaning: "Food", example: "The tucker at the pub is pretty good." }, | |
| { term: "Two Up", meaning: "A gambling game played on Anzac day", example: "We played two up at the dawn service." }, | |
| { term: "U-IE", meaning: "to take a U-Turn when driving", example: "Do a U-ie here and we'll go back." }, | |
| { term: "Up Yourself", meaning: "Stuck up", example: "Don't get up yourself just because you got promoted." }, | |
| { term: "Woop Woop", meaning: "middle of nowhere", example: "He lives out woop woop." }, | |
| { term: "Ya", meaning: "You", example: "How ya going?" }, | |
| { term: "Yous", meaning: "(youse) plural of you!", example: "What are yous up to tonight?" } | |
| ]; | |
| // Populate slang terms | |
| const slangContainer = document.querySelector('#slang .grid'); | |
| slangTerms.forEach(term => { | |
| const termCard = document.createElement('div'); | |
| termCard.className = 'term-card bg-gray-50 p-6 rounded-lg border border-gray-200'; | |
| termCard.innerHTML = ` | |
| <h3 class="font-bold text-lg text-blue-700 mb-2">${term.term}</h3> | |
| <p class="text-gray-600 mb-3">${term.meaning}</p> | |
| <p class="text-sm text-gray-500"><span class="font-semibold">Example:</span> "${term.example}"</p> | |
| `; | |
| slangContainer.appendChild(termCard); | |
| }); | |
| // Search functionality | |
| const searchInput = document.getElementById('search'); | |
| searchInput.addEventListener('input', () => { | |
| const searchTerm = searchInput.value.toLowerCase(); | |
| const termCards = document.querySelectorAll('.term-card'); | |
| termCards.forEach(card => { | |
| const text = card.textContent.toLowerCase(); | |
| if (text.includes(searchTerm)) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </html> |