{"id":619,"date":"2026-01-12T00:43:21","date_gmt":"2026-01-12T00:43:21","guid":{"rendered":"https:\/\/yebbo.com\/ethiodiego\/?p=619"},"modified":"2026-01-12T00:51:58","modified_gmt":"2026-01-12T00:51:58","slug":"african-american-language-aave-ebonics-phrasebook-by-ethiotrans","status":"publish","type":"post","link":"http:\/\/yebbo.com\/ethiodiego\/african-american-language-aave-ebonics-phrasebook-by-ethiotrans\/","title":{"rendered":"African American Language (AAVE \/ Ebonics)\u00a0Phrasebook by Ethiotrans"},"content":{"rendered":"\nAfrican American Language (AAVE \/ Ebonics) Interactive Phrasebook by Ethiotrans\n\n\n \n \n African American Language (AAVE \/ Ebonics) Interactive Phrasebook<\/title>\n <meta name=\"description\" content=\"Interactive, searchable phrasebook for African American Language (AAVE \/ Ebonics) with categories, examples, and standard-English translations.\" \/>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* ===== CSS Variables with Green, Yellow, Red, Black Theme ===== *\/\n :root {\n \/* Primary Colors *\/\n --green: #10B981;\n --green-dark: #059669;\n --green-light: #A7F3D0;\n --yellow: #FBBF24;\n --yellow-dark: #F59E0B;\n --yellow-light: #FEF3C7;\n --red: #EF4444;\n --red-dark: #DC2626;\n --red-light: #FECACA;\n --black: #000000;\n --black-soft: #1F2937;\n \n \/* Supporting Colors *\/\n --card: #FFFFFF;\n --border: #E5E7EB;\n --bg: #FAFAF9;\n --muted: #6B7280;\n \n \/* Spacing & Effects *\/\n --radius: 16px;\n --radius-sm: 10px;\n --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);\n --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n body {\n background: linear-gradient(135deg, #FEFCE8 0%, #F0FDF4 100%);\n color: var(--black-soft);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n }\n \n \/* ===== Layout ===== *\/\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n \n \/* ===== Header ===== *\/\n .header {\n display: grid;\n grid-template-columns: 1fr 400px;\n gap: 24px;\n margin-bottom: 32px;\n }\n \n @media (max-width: 992px) {\n .header {\n grid-template-columns: 1fr;\n }\n }\n \n .hero {\n background: linear-gradient(135deg, var(--green-light) 0%, var(--yellow-light) 100%);\n border: 2px solid var(--green);\n border-radius: var(--radius);\n padding: 32px;\n box-shadow: var(--shadow);\n position: relative;\n overflow: hidden;\n }\n \n .hero::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);\n border-radius: 50%;\n }\n \n .hero h1 {\n font-size: 32px;\n font-weight: 800;\n color: var(--black);\n margin-bottom: 12px;\n line-height: 1.2;\n }\n \n .hero h1 span {\n background: linear-gradient(90deg, var(--green) 0%, var(--yellow) 50%, var(--red) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .hero-subtitle {\n color: var(--black-soft);\n font-size: 16px;\n margin-bottom: 20px;\n max-width: 600px;\n }\n \n .highlight {\n background: var(--yellow-light);\n color: var(--black);\n padding: 4px 12px;\n border-radius: 6px;\n font-weight: 700;\n border: 1px solid var(--yellow);\n }\n \n .tags {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n margin-top: 20px;\n }\n \n .tag {\n padding: 8px 16px;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.9);\n color: var(--black);\n font-size: 14px;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 8px;\n border: 2px solid;\n transition: var(--transition);\n }\n \n .tag:nth-child(1) { border-color: var(--green); }\n .tag:nth-child(2) { border-color: var(--yellow); }\n .tag:nth-child(3) { border-color: var(--red); }\n .tag:nth-child(4) { border-color: var(--green); }\n .tag:nth-child(5) { border-color: var(--yellow); }\n \n .tag:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n }\n \n .tag i {\n font-size: 14px;\n }\n \n \/* ===== Controls Panel ===== *\/\n .controls-panel {\n background: var(--card);\n border: 2px solid var(--red);\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n height: fit-content;\n }\n \n .controls-grid {\n display: grid;\n gap: 20px;\n }\n \n .search-box {\n position: relative;\n }\n \n .search-box i {\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--green);\n }\n \n .search-input {\n width: 100%;\n padding: 16px 16px 16px 50px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--yellow);\n background: #FFFFFF;\n color: var(--black);\n font-size: 16px;\n font-weight: 600;\n transition: var(--transition);\n }\n \n .search-input:focus {\n outline: none;\n border-color: var(--green);\n box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);\n }\n \n .search-input::placeholder {\n color: var(--muted);\n font-weight: normal;\n }\n \n .filters-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n \n .select {\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--green);\n background: #FFFFFF;\n color: var(--black);\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n }\n \n .select:focus {\n outline: none;\n border-color: var(--red);\n box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);\n }\n \n \/* ===== Toggle Switch ===== *\/\n .toggle-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--yellow);\n background: var(--yellow-light);\n transition: var(--transition);\n }\n \n .toggle-container:hover {\n border-color: var(--green);\n background: var(--green-light);\n }\n \n .toggle-label {\n font-weight: 800;\n color: var(--black);\n }\n \n .toggle-desc {\n font-size: 13px;\n color: var(--black-soft);\n margin-top: 4px;\n }\n \n .toggle-switch {\n width: 64px;\n height: 34px;\n border-radius: 50px;\n background: var(--muted);\n position: relative;\n cursor: pointer;\n transition: var(--transition);\n border: 2px solid var(--black);\n }\n \n .toggle-switch.active {\n background: var(--green);\n }\n \n .toggle-knob {\n position: absolute;\n top: 3px;\n left: 3px;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--yellow);\n border: 2px solid var(--black);\n transition: var(--transition);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\n }\n \n .toggle-switch.active .toggle-knob {\n left: 33px;\n background: var(--green-light);\n }\n \n \/* ===== Buttons ===== *\/\n .buttons-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n \n .btn {\n padding: 16px;\n border-radius: var(--radius-sm);\n border: none;\n font-size: 16px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: var(--transition);\n color: var(--black);\n }\n \n .btn-clear {\n background: var(--red-light);\n border: 2px solid var(--red);\n }\n \n .btn-clear:hover {\n background: var(--red);\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);\n }\n \n .btn-random {\n background: linear-gradient(135deg, var(--green) 0%, var(--yellow) 100%);\n border: 2px solid var(--black);\n color: var(--black);\n font-weight: 900;\n }\n \n .btn-random:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);\n }\n \n \/* ===== Stats ===== *\/\n .stats {\n color: var(--black);\n font-size: 15px;\n font-weight: 700;\n padding: 14px;\n text-align: center;\n border-top: 2px dashed var(--red);\n border-bottom: 2px dashed var(--red);\n background: var(--yellow-light);\n border-radius: var(--radius-sm);\n }\n \n \/* ===== Cards Grid ===== *\/\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n gap: 24px;\n margin-top: 40px;\n }\n \n .card {\n background: var(--card);\n border: 3px solid;\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n }\n \n \/* Alternate border colors for cards *\/\n .card:nth-child(3n+1) { border-color: var(--green); }\n .card:nth-child(3n+2) { border-color: var(--yellow); }\n .card:nth-child(3n+3) { border-color: var(--red); }\n \n .card:hover {\n transform: translateY(-8px) rotate(1deg);\n box-shadow: var(--shadow-lg);\n }\n \n .card-category {\n display: inline-block;\n font-size: 13px;\n font-weight: 900;\n color: var(--black);\n padding: 8px 18px;\n border-radius: 50px;\n border: 2px solid;\n margin-bottom: 20px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n \/* Category-specific colors *\/\n .card-category.grammar { background: var(--green-light); border-color: var(--green); }\n .card-category.everyday { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.social { background: var(--red-light); border-color: var(--red); }\n .card-category.money { background: var(--green-light); border-color: var(--green); }\n .card-category.culture { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.expression { background: var(--red-light); border-color: var(--red); }\n .card-category.identity { background: var(--green-light); border-color: var(--green); }\n .card-category.historical { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.slang { background: var(--red-light); border-color: var(--red); }\n \n .card-term {\n margin: 12px 0 6px;\n font-size: 24px;\n font-weight: 900;\n color: var(--black);\n line-height: 1.3;\n min-height: 65px;\n }\n \n .card-label {\n font-size: 13px;\n font-weight: 900;\n color: var(--black);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 8px;\n padding: 4px 0;\n border-bottom: 2px solid;\n }\n \n \/* Label colors based on content type *\/\n .card-label.aave { border-color: var(--red); }\n .card-label.standard { border-color: var(--green); }\n \n .card-translation {\n font-size: 20px;\n color: var(--black);\n font-weight: 700;\n margin: 16px 0;\n line-height: 1.4;\n padding: 12px;\n border-radius: var(--radius-sm);\n background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.1) 100%);\n border-left: 4px solid var(--green);\n }\n \n .card-meaning {\n margin: 20px 0;\n color: var(--black-soft);\n padding: 16px;\n border-radius: var(--radius-sm);\n background: var(--yellow-light);\n border: 2px solid var(--yellow);\n font-weight: 600;\n }\n \n .card-meaning b {\n color: var(--red);\n }\n \n .card-example {\n margin-top: 24px;\n padding: 18px;\n border-radius: var(--radius-sm);\n background: linear-gradient(135deg, #FEF2F2 0%, #F0F9FF 100%);\n border: 2px solid var(--green);\n }\n \n .card-example div {\n margin-bottom: 12px;\n padding: 8px;\n border-radius: 6px;\n }\n \n .card-example b {\n color: var(--black);\n font-weight: 900;\n }\n \n .card-example div:nth-child(1) {\n background: rgba(239, 68, 68, 0.1);\n border-left: 4px solid var(--red);\n }\n \n .card-example div:nth-child(2) {\n background: rgba(16, 185, 129, 0.1);\n border-left: 4px solid var(--green);\n }\n \n .card-actions {\n display: flex;\n gap: 12px;\n margin-top: 24px;\n }\n \n .card-btn {\n flex: 1;\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--black);\n background: var(--card);\n color: var(--black);\n font-size: 15px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: var(--transition);\n }\n \n .card-btn:nth-child(1):hover {\n background: var(--red);\n color: white;\n border-color: var(--red);\n }\n \n .card-btn:nth-child(2):hover {\n background: var(--green);\n color: white;\n border-color: var(--green);\n }\n \n \/* ===== Toast ===== *\/\n .toast {\n position: fixed;\n left: 50%;\n bottom: 40px;\n transform: translateX(-50%) translateY(100px);\n background: var(--black);\n color: var(--yellow);\n padding: 18px 28px;\n border-radius: var(--radius-sm);\n box-shadow: var(--shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n z-index: 1000;\n opacity: 0;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s;\n border: 2px solid var(--yellow);\n font-weight: 700;\n }\n \n .toast.show {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n }\n \n \/* ===== Footer Note ===== *\/\n .footer-note {\n margin-top: 50px;\n padding: 24px;\n border-radius: var(--radius);\n background: linear-gradient(135deg, var(--red-light) 0%, var(--green-light) 100%);\n border: 3px solid var(--black);\n text-align: center;\n color: var(--black);\n font-size: 15px;\n font-weight: 700;\n }\n \n .footer-note i {\n color: var(--red);\n margin-right: 10px;\n }\n \n \/* ===== Animations ===== *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px) scale(0.95); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n }\n \n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n \n .card {\n animation: fadeIn 0.6s ease-out;\n }\n \n .btn-random:hover {\n animation: pulse 0.5s ease-in-out;\n }\n \n \/* ===== Color Key Legend ===== *\/\n .color-legend {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin: 20px 0;\n flex-wrap: wrap;\n }\n \n .color-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 700;\n color: var(--black);\n }\n \n .color-dot {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid var(--black);\n }\n \n .color-dot.green { background: var(--green); }\n .color-dot.yellow { background: var(--yellow); }\n .color-dot.red { background: var(--red); }\n .color-dot.black { background: var(--black); }\n \n \/* ===== Pagination ===== *\/\n .pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 20px;\n margin-top: 40px;\n padding: 20px;\n }\n \n .pagination-btn {\n padding: 14px 28px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--black);\n background: var(--yellow-light);\n color: var(--black);\n font-size: 16px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 10px;\n transition: var(--transition);\n min-width: 150px;\n justify-content: center;\n }\n \n .pagination-btn:hover:not(:disabled) {\n background: var(--green);\n color: white;\n transform: translateY(-3px);\n box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);\n }\n \n .pagination-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n \n .pagination-info {\n color: var(--black);\n font-size: 16px;\n font-weight: 700;\n padding: 10px 20px;\n background: var(--red-light);\n border-radius: var(--radius-sm);\n border: 2px solid var(--red);\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <!-- Hero Section -->\n <div class=\"hero\">\n <h1><span>African American Language (AAVE \/ Ebonics)<\/span> Phrasebook<\/h1>\n <p class=\"hero-subtitle\">\n An interactive, searchable glossary with examples and Standard English translations. \n <br><span class=\"highlight\">Important:<\/span> AAVE\/Ebonics is a legitimate, rule-governed language variety \u2014 not “broken English”.\n <\/p>\n \n <div class=\"tags\">\n <span class=\"tag\"><i class=\"fas fa-search\" style=\"color: var(--green);\"><\/i> Searchable<\/span>\n <span class=\"tag\"><i class=\"fas fa-comment-alt\" style=\"color: var(--yellow);\"><\/i> Examples<\/span>\n <span class=\"tag\"><i class=\"fas fa-tags\" style=\"color: var(--red);\"><\/i> Categories<\/span>\n <span class=\"tag\"><i class=\"fas fa-copy\" style=\"color: var(--green);\"><\/i> Copy<\/span>\n <span class=\"tag\"><i class=\"fas fa-volume-up\" style=\"color: var(--yellow);\"><\/i> Text-to-Speech<\/span>\n <\/div>\n <\/div>\n \n <!-- Controls Panel -->\n <div class=\"controls-panel\">\n <div class=\"controls-grid\">\n <div class=\"search-box\">\n <i class=\"fas fa-search\"><\/i>\n <input id=\"q\" class=\"search-input\" type=\"search\" placeholder=\"Search phrases... e.g. finna, no cap, shade, been\" \/>\n <\/div>\n \n <div class=\"filters-row\">\n <select id=\"cat\" class=\"select\">\n <option value=\"all\">All categories<\/option>\n <\/select>\n <select id=\"sort\" class=\"select\">\n <option value=\"relevance\">Sort: Relevance<\/option>\n <option value=\"az\">Sort: A \u2192 Z<\/option>\n <option value=\"za\">Sort: Z \u2192 A<\/option>\n <option value=\"cat\">Sort: Category<\/option>\n <\/select>\n <\/div>\n \n <div class=\"toggle-container\">\n <div>\n <div class=\"toggle-label\">Display Order<\/div>\n <div class=\"toggle-desc\">AAVE \u2194 Standard English<\/div>\n <\/div>\n <div class=\"toggle-switch\" id=\"toggleOrder\">\n <div class=\"toggle-knob\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"buttons-row\">\n <button class=\"btn btn-clear\" id=\"clearBtn\">\n <i class=\"fas fa-eraser\"><\/i> Clear Filters\n <\/button>\n <button class=\"btn btn-random\" id=\"randomBtn\">\n <i class=\"fas fa-random\"><\/i> Random Phrase\n <\/button>\n <\/div>\n \n <div class=\"stats\" id=\"stats\">Loading entries…<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Color Legend -->\n <div class=\"color-legend\">\n <div class=\"color-item\">\n <div class=\"color-dot green\"><\/div>\n <span>Green = Standard English \/ Success<\/span>\n <\/div>\n <div class=\"color-item\">\n <div class=\"color-dot yellow\"><\/div>\n <span>Yellow = Caution \/ Meaning<\/span>\n <\/div>\n <div class=\"color-item\">\n <div class=\"color-dot red\"><\/div>\n <span>Red = AAVE \/ Attention<\/span>\n <\/div>\n <div class=\"color-item\">\n <div class=\"color-dot black\"><\/div>\n <span>Black = Text \/ Content<\/span>\n <\/div>\n <\/div>\n \n <!-- Main Content -->\n <main>\n <div class=\"cards-grid\" id=\"cards\"><\/div>\n \n <!-- Pagination -->\n <div class=\"pagination\">\n <button class=\"pagination-btn\" id=\"prevBtn\">\n <i class=\"fas fa-chevron-left\"><\/i> Previous Page\n <\/button>\n <div class=\"pagination-info\" id=\"pageInfo\">Page 1 of 1<\/div>\n <button class=\"pagination-btn\" id=\"nextBtn\">\n Next Page <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/main>\n \n <!-- Footer Note -->\n <div class=\"footer-note\">\n <i class=\"fas fa-info-circle\"><\/i> \n This is an educational resource. Respectful usage is encouraged, and cultural context matters when understanding AAVE.\n <\/div>\n <\/div>\n \n <!-- Toast Notification -->\n <div class=\"toast\" id=\"toast\">\n <i class=\"fas fa-check-circle\" style=\"color: var(--green);\"><\/i>\n <span id=\"toast-message\">Copied to clipboard!<\/span>\n <\/div>\n \n <script>\n \/\/ ===== Data =====\n const PHRASES = [\n {\n cat: \"Grammar\", \n aave: \"She be working late.\", \n std: \"She usually works late.\", \n meaning: \"Habitual 'be' shows regular or ongoing action.\", \n exampleA: \"She be working late on weekdays.\", \n exampleS: \"She usually works late on weekdays.\"\n },\n {\n cat: \"Grammar\", \n aave: \"I been knew that.\", \n std: \"I've known that for a long time.\", \n meaning: \"Remote past 'been' shows something started long ago.\", \n exampleA: \"We been finished that project.\", \n exampleS: \"We finished that project a long time ago.\"\n },\n {\n cat: \"Everyday\", \n aave: \"No cap.\", \n std: \"No lie \/ I'm serious.\", \n meaning: \"Emphasizing that you're telling the truth.\", \n exampleA: \"This food bussin', no cap.\", \n exampleS: \"This food is amazing, seriously.\"\n },\n {\n cat: \"Everyday\", \n aave: \"Say less.\", \n std: \"I understand \/ say no more.\", \n meaning: \"No further explanation needed.\", \n exampleA: \"Meet at 6? Say less.\", \n exampleS: \"Meet at 6? Got it.\"\n },\n {\n cat: \"Social\", \n aave: \"He doing too much.\", \n std: \"He's being extra \/ overdoing it.\", \n meaning: \"Overdoing behavior or being excessive.\", \n exampleA: \"He doing too much for attention.\", \n exampleS: \"He's overdoing it for attention.\"\n },\n {\n cat: \"Money\", \n aave: \"Secure the bag.\", \n std: \"Get the money \/ opportunity.\", \n meaning: \"Focus on getting paid or securing an opportunity.\", \n exampleA: \"I'm here to secure the bag.\", \n exampleS: \"I'm here to get the opportunity.\"\n },\n {\n cat: \"Culture\", \n aave: \"Cookout vibes.\", \n std: \"Family\/community gathering energy.\", \n meaning: \"Warm, inviting community feel.\", \n exampleA: \"This playlist got cookout vibes.\", \n exampleS: \"This playlist feels like a family gathering.\"\n },\n {\n cat: \"Expression\", \n aave: \"Bet.\", \n std: \"Okay \/ For sure \/ Agreed.\", \n meaning: \"Expression of agreement or confirmation.\", \n exampleA: \"I'll see you tomorrow. Bet.\", \n exampleS: \"I'll see you tomorrow. Okay.\"\n },\n {\n cat: \"Expression\", \n aave: \"It's giving...\", \n std: \"It has the vibe\/quality of...\", \n meaning: \"Describing the essence or vibe of something.\", \n exampleA: \"It's giving 90s R&B.\", \n exampleS: \"It has the vibe of 90s R&B.\"\n },\n \/\/ Newly added phrases from the list\n {\n cat: \"Expression\",\n aave: \"aight\",\n std: \"alright\/okay\",\n meaning: \"Agreement or confirmation, shortened form of 'alright'.\",\n exampleA: \"Aight, I'll see you tomorrow.\",\n exampleS: \"Alright, I'll see you tomorrow.\"\n },\n {\n cat: \"Grammar\",\n aave: \"ain't\",\n std: \"am not\/is not\/are not\/have not\/has not\",\n meaning: \"Negative auxiliary verb used for various subjects.\",\n exampleA: \"I ain't going to that party.\",\n exampleS: \"I am not going to that party.\"\n },\n {\n cat: \"Social\",\n aave: \"air out\",\n std: \"confront or settle a dispute\",\n meaning: \"To confront someone or settle a disagreement.\",\n exampleA: \"We need to air out our differences.\",\n exampleS: \"We need to discuss and resolve our differences.\"\n },\n {\n cat: \"Grammar\",\n aave: \"aks\",\n std: \"ask\",\n meaning: \"Alternative pronunciation of 'ask' with historical roots in Old English.\",\n exampleA: \"Let me aks you something.\",\n exampleS: \"Let me ask you something.\"\n },\n {\n cat: \"Expression\",\n aave: \"and shit\",\n std: \"and things like that\",\n meaning: \"Vague extension meaning 'and other similar things'.\",\n exampleA: \"We went to the store and shit.\",\n exampleS: \"We went to the store and did other similar things.\"\n },\n {\n cat: \"Identity\",\n aave: \"Afrikan\",\n std: \"African\",\n meaning: \"Alternative spelling emphasizing cultural connection to Africa.\",\n exampleA: \"I'm celebrating my Afrikan heritage.\",\n exampleS: \"I'm celebrating my African heritage.\"\n },\n {\n cat: \"Social\",\n aave: \"ashy\",\n std: \"having dry skin, especially visible on darker skin\",\n meaning: \"Referring to dry skin that appears grayish or ashy on dark skin.\",\n exampleA: \"My knees get ashy in the winter.\",\n exampleS: \"My knees get dry and flaky in the winter.\"\n },\n {\n cat: \"Social\",\n aave: \"baby daddy\",\n std: \"father of one's child (not married to)\",\n meaning: \"The biological father of a woman's child, typically not her spouse.\",\n exampleA: \"My baby daddy picks up the kids on weekends.\",\n exampleS: \"The father of my children picks up the kids on weekends.\"\n },\n {\n cat: \"Social\",\n aave: \"baby mama\",\n std: \"mother of one's child (not married to)\",\n meaning: \"The biological mother of a man's child, typically not his spouse.\",\n exampleA: \"I'm meeting my baby mama for lunch.\",\n exampleS: \"I'm meeting the mother of my child for lunch.\"\n },\n {\n cat: \"Expression\",\n aave: \"bad\",\n std: \"good\/attractive\",\n meaning: \"Reversal of meaning - something very good or attractive.\",\n exampleA: \"That car is bad!\",\n exampleS: \"That car is really good\/impressive!\"\n },\n {\n cat: \"Expression\",\n aave: \"ballin'\",\n std: \"living luxuriously or spending lavishly\",\n meaning: \"Living an extravagant lifestyle, often with visible wealth.\",\n exampleA: \"He's ballin' with that new jewelry.\",\n exampleS: \"He's living luxuriously with that new jewelry.\"\n },\n {\n cat: \"Social\",\n aave: \"beef\",\n std: \"conflict or disagreement\",\n meaning: \"Ongoing conflict or disagreement between people.\",\n exampleA: \"They got beef with each other.\",\n exampleS: \"They have a conflict with each other.\"\n },\n {\n cat: \"Grammar\",\n aave: \"been\",\n std: \"have been (with emphasis on duration)\",\n meaning: \"Emphasizes that something has been happening for a long time.\",\n exampleA: \"I been knew that.\",\n exampleS: \"I have known that for a long time.\"\n },\n {\n cat: \"Expression\",\n aave: \"bounce\",\n std: \"leave\",\n meaning: \"To depart or leave a place.\",\n exampleA: \"It's getting late, I'ma bounce.\",\n exampleS: \"It's getting late, I'm going to leave.\"\n },\n {\n cat: \"Expression\",\n cat: \"Expression\",\n aave: \"bougie\",\n std: \"bourgeois, acting upper class\",\n meaning: \"Acting like or aspiring to be upper class, sometimes pretentiously.\",\n exampleA: \"She's so bougie with her designer bags.\",\n exampleS: \"She acts very upper class with her designer bags.\"\n },\n {\n cat: \"Expression\",\n aave: \"bye, Felicia\",\n std: \"dismissing someone unimportant\",\n meaning: \"Phrase to dismiss someone who is being annoying or irrelevant.\",\n exampleA: \"I don't have time for this, bye, Felicia.\",\n exampleS: \"I don't have time for this, goodbye to this unimportant person.\"\n },\n {\n cat: \"Expression\",\n aave: \"cap\",\n std: \"lie\",\n meaning: \"Something that is untrue or deceptive.\",\n exampleA: \"Stop capping, I know the truth.\",\n exampleS: \"Stop lying, I know the truth.\"\n },\n {\n cat: \"Historical\",\n aave: \"chitlin\",\n std: \"chitterlings (pig intestines)\",\n meaning: \"Traditional soul food made from pig intestines.\",\n exampleA: \"We having chitlins for Sunday dinner.\",\n exampleS: \"We're having chitterlings for Sunday dinner.\"\n },\n {\n cat: \"Expression\",\n aave: \"cool\",\n std: \"acceptable\/good\",\n meaning: \"Approval or agreement, something is satisfactory.\",\n exampleA: \"That's cool with me.\",\n exampleS: \"That's acceptable to me.\"\n },\n {\n cat: \"Grammar\",\n aave: \"conversate\",\n std: \"converse\",\n meaning: \"To engage in conversation.\",\n exampleA: \"Let's conversate about this later.\",\n exampleS: \"Let's converse about this later.\"\n },\n {\n cat: \"Slang\",\n aave: \"crib\",\n std: \"house\/apartment\",\n meaning: \"One's home or residence.\",\n exampleA: \"Come over to my crib later.\",\n exampleS: \"Come over to my house later.\"\n },\n {\n cat: \"Expression\",\n aave: \"crine\",\n std: \"crying\",\n meaning: \"Pronounced form of 'crying'.\",\n exampleA: \"I was crine laughing so hard.\",\n exampleS: \"I was crying from laughing so hard.\"\n },\n {\n cat: \"Identity\",\n aave: \"brotha\",\n std: \"brother (often referring to Black men)\",\n meaning: \"Term of solidarity among Black men.\",\n exampleA: \"What's good, brotha?\",\n exampleS: \"How are you doing, brother?\"\n },\n {\n cat: \"Money\",\n aave: \"coin\",\n std: \"money\",\n meaning: \"Slang term for money.\",\n exampleA: \"I need to make some coin this weekend.\",\n exampleS: \"I need to make some money this weekend.\"\n },\n {\n cat: \"Social\",\n aave: \"clap back\",\n std: \"retaliatory response\",\n meaning: \"A quick, sharp response to criticism or insult.\",\n exampleA: \"She had a good clap back for the hater.\",\n exampleS: \"She had a good retaliatory response for the critic.\"\n },\n {\n cat: \"Expression\",\n aave: \"come correct\",\n std: \"act properly\/appropriately\",\n meaning: \"To behave in the right way or bring your best self.\",\n exampleA: \"If you're coming to my house, you better come correct.\",\n exampleS: \"If you're coming to my house, you better behave appropriately.\"\n },\n {\n cat: \"Social\",\n aave: \"cracker\",\n std: \"derogatory term for white person\",\n meaning: \"Derogatory slang for a white person.\",\n exampleA: \"That cracker don't know what he's talking about.\",\n exampleS: \"That white person doesn't know what he's talking about.\"\n },\n {\n cat: \"Social\",\n aave: \"bed wench\",\n std: \"derogatory term for Black woman who dates white men\",\n meaning: \"Historical derogatory term with complex social implications.\",\n exampleA: \"They called her a bed wench for dating outside her race.\",\n exampleS: \"They insulted her for dating outside her race.\"\n },\n {\n cat: \"Historical\",\n aave: \"buckra\",\n std: \"white man (derogatory historical term)\",\n meaning: \"Historical term for white man, especially slave master.\",\n exampleA: \"Old buckra used to own this land.\",\n exampleS: \"The white man used to own this land.\"\n },\n {\n cat: \"Expression\",\n aave: \"built different\",\n std: \"exceptionally tough or capable\",\n meaning: \"Being exceptionally resilient or capable.\",\n exampleA: \"He took that hit and kept going - he's built different.\",\n exampleS: \"He took that hit and kept going - he's exceptionally tough.\"\n },\n {\n cat: \"Expression\",\n aave: \"bussin'\",\n std: \"extremely good (especially food)\",\n meaning: \"Something is exceptionally good, usually referring to food.\",\n exampleA: \"This pizza is bussin'!\",\n exampleS: \"This pizza is extremely good!\"\n },\n {\n cat: \"Money\",\n aave: \"bag\",\n std: \"money\/opportunity\",\n meaning: \"Slang for money or a valuable opportunity.\",\n exampleA: \"I'm just trying to secure the bag.\",\n exampleS: \"I'm just trying to secure the money\/opportunity.\"\n },\n {\n cat: \"Social\",\n aave: \"ace boon coon\",\n std: \"best friend\",\n meaning: \"Very close friend, ride-or-die companion.\",\n exampleA: \"He's been my ace boon coon since elementary.\",\n exampleS: \"He's been my best friend since elementary school.\"\n },\n {\n cat: \"Expression\",\n aave: \"across\",\n std: \"understand\/get through to\",\n meaning: \"To make someone understand or get your point across.\",\n exampleA: \"I can't get across to him.\",\n exampleS: \"I can't make him understand.\"\n },\n {\n cat: \"Social\",\n aave: \"aggy\",\n std: \"aggravating\/annoying\",\n meaning: \"Someone or something that is irritating or aggravating.\",\n exampleA: \"Stop being so aggy!\",\n exampleS: \"Stop being so annoying!\"\n },\n {\n cat: \"Expression\",\n aave: \"ard\",\n std: \"alright\",\n meaning: \"Shortened form of 'alright', expressing agreement.\",\n exampleA: \"Ard, bet. I'll be there.\",\n exampleS: \"Alright, okay. I'll be there.\"\n },\n {\n cat: \"Grammar\",\n aave: \"ass (as suffix)\",\n std: \"-ly (intensifier)\",\n meaning: \"Suffix used to intensify adjectives.\",\n exampleA: \"That's a big-ass car!\",\n exampleS: \"That's a very big car!\"\n },\n {\n cat: \"Social\",\n aave: \"back in day\",\n std: \"in the past\",\n meaning: \"Referring to times in the past, often nostalgically.\",\n exampleA: \"Back in day, we used to play outside all day.\",\n exampleS: \"In the past, we used to play outside all day.\"\n },\n {\n cat: \"Culture\",\n aave: \"black don't crack\",\n std: \"Black people age well\",\n meaning: \"Expression noting that Black skin tends to show fewer wrinkles with age.\",\n exampleA: \"Look at her - black don't crack!\",\n exampleS: \"Look at her - Black people age so well!\"\n },\n {\n cat: \"Expression\",\n aave: \"blow\",\n std: \"leave\",\n meaning: \"To depart quickly or suddenly.\",\n exampleA: \"I'm about to blow this spot.\",\n exampleS: \"I'm about to leave this place.\"\n },\n {\n cat: \"Expression\",\n aave: \"body\",\n std: \"defeat thoroughly\",\n meaning: \"To defeat someone completely, often in competition.\",\n exampleA: \"We bodied that team last night.\",\n exampleS: \"We defeated that team thoroughly last night.\"\n },\n {\n cat: \"Expression\",\n aave: \"break off\",\n std: \"give\/share (especially money)\",\n meaning: \"To give someone something, especially money.\",\n exampleA: \"Break me off a piece of that.\",\n exampleS: \"Give me a piece of that.\"\n },\n {\n cat: \"Social\",\n aave: \"brolic\",\n std: \"very muscular\/strong\",\n meaning: \"Extremely muscular or physically strong.\",\n exampleA: \"He's looking brolic these days.\",\n exampleS: \"He's looking very muscular these days.\"\n },\n {\n cat: \"Expression\",\n aave: \"buck\",\n std: \"dollar\",\n meaning: \"Slang for one dollar.\",\n exampleA: \"That only costs five bucks.\",\n exampleS: \"That only costs five dollars.\"\n },\n {\n cat: \"Historical\",\n aave: \"buck dance\",\n std: \"traditional African American dance\",\n meaning: \"Traditional dance with African roots.\",\n exampleA: \"They were doing the buck dance at the festival.\",\n exampleS: \"They were doing the traditional African American dance at the festival.\"\n },\n {\n cat: \"Expression\",\n aave: \"bug up\",\n std: \"become angry\/upset\",\n meaning: \"To become irritated or angry.\",\n exampleA: \"Don't bug up, it's not that serious.\",\n exampleS: \"Don't get angry, it's not that serious.\"\n },\n {\n cat: \"Expression\",\n aave: \"bye\",\n std: \"goodbye\",\n meaning: \"Standard farewell, often with attitude in AAVE.\",\n exampleA: \"Bye, I'm out.\",\n exampleS: \"Goodbye, I'm leaving.\"\n },\n {\n cat: \"Money\",\n aave: \"cabbage\",\n std: \"money\",\n meaning: \"Slang term for paper money.\",\n exampleA: \"I need to stack some cabbage.\",\n exampleS: \"I need to save some money.\"\n },\n {\n cat: \"Social\",\n aave: \"call out of one's name\",\n std: \"disrespect\/disparage someone\",\n meaning: \"To insult or speak disrespectfully about someone.\",\n exampleA: \"Don't call me out my name!\",\n exampleS: \"Don't speak disrespectfully about me!\"\n },\n {\n cat: \"Expression\",\n aave: \"capping\",\n std: \"lying\",\n meaning: \"The act of telling lies.\",\n exampleA: \"Why you capping like that?\",\n exampleS: \"Why are you lying like that?\"\n },\n {\n cat: \"Slang\",\n aave: \"cat\",\n std: \"person (usually male)\",\n meaning: \"Term for a person, usually a man.\",\n exampleA: \"That cat over there is cool.\",\n exampleS: \"That man over there is cool.\"\n },\n {\n cat: \"Social\",\n aave: \"catch lacking\",\n std: \"catch someone unprepared\",\n meaning: \"To find someone in a vulnerable or unprepared state.\",\n exampleA: \"Don't let me catch you lacking.\",\n exampleS: \"Don't let me find you unprepared.\"\n },\n {\n cat: \"Expression\",\n aave: \"chile\",\n std: \"child (pronunciation)\",\n meaning: \"Pronounced form of 'child', often expressing disbelief.\",\n exampleA: \"Chile, please!\",\n exampleS: \"Child, please! (expression of disbelief)\"\n },\n {\n cat: \"Grammar\",\n aave: \"chillun\",\n std: \"children\",\n meaning: \"Pronounced form of 'children'.\",\n exampleA: \"The chillun are playing outside.\",\n exampleS: \"The children are playing outside.\"\n },\n {\n cat: \"Social\",\n aave: \"choose up\",\n std: \"pick sides\/teams\",\n meaning: \"To select teams or take sides.\",\n exampleA: \"Y'all choose up and let's play ball.\",\n exampleS: \"You all pick teams and let's play basketball.\"\n },\n {\n cat: \"Expression\",\n aave: \"chop it up\",\n std: \"have a conversation\",\n meaning: \"To talk or converse with someone.\",\n exampleA: \"Let's chop it up later.\",\n exampleS: \"Let's have a conversation later.\"\n },\n {\n cat: \"Expression\",\n aave: \"chuck the deuces\",\n std: \"give a peace sign goodbye\",\n meaning: \"To say goodbye with a peace sign.\",\n exampleA: \"I'm out - chuck the deuces!\",\n exampleS: \"I'm leaving - peace out!\"\n },\n {\n cat: \"Expression\",\n aave: \"'clare\",\n std: \"declare\",\n meaning: \"Shortened form of 'declare', often used for emphasis.\",\n exampleA: \"I 'clare, that boy is something else.\",\n exampleS: \"I declare, that boy is something else.\"\n },\n {\n cat: \"Expression\",\n aave: \"clock\",\n std: \"notice\/recognize\",\n meaning: \"To notice or become aware of something.\",\n exampleA: \"I clocked that immediately.\",\n exampleS: \"I noticed that immediately.\"\n },\n {\n cat: \"Social\",\n aave: \"clown\",\n std: \"make fun of\/ridicule\",\n meaning: \"To mock or make fun of someone.\",\n exampleA: \"Stop clowning me!\",\n exampleS: \"Stop making fun of me!\"\n },\n {\n cat: \"Social\",\n aave: \"cockblock\",\n std: \"prevent someone from romantic\/sexual encounter\",\n meaning: \"To interfere with someone's romantic or sexual opportunity.\",\n exampleA: \"Don't cockblock me, man!\",\n exampleS: \"Don't interfere with my romantic opportunity!\"\n },\n {\n cat: \"Social\",\n aave: \"color-struck\",\n std: \"prejudiced based on skin tone\",\n meaning: \"Discriminating against people with darker skin within the Black community.\",\n exampleA: \"That's some color-struck nonsense.\",\n exampleS: \"That's discrimination based on skin tone.\"\n },\n {\n cat: \"Expression\",\n aave: \"come up\",\n std: \"achieve success\/improve situation\",\n meaning: \"To become successful or improve one's circumstances.\",\n exampleA: \"He finally came up after years of struggle.\",\n exampleS: \"He finally became successful after years of struggle.\"\n },\n {\n cat: \"Social\",\n aave: \"coon\",\n std: \"derogatory term for Black person\",\n meaning: \"Extremely offensive term for a Black person.\",\n exampleA: \"That's some coon behavior right there.\",\n exampleS: \"That's behavior that reinforces negative stereotypes.\"\n },\n {\n cat: \"Expression\",\n aave: \"corny\",\n std: \"uncool\/outdated\",\n meaning: \"Something that is uncool, cheesy, or outdated.\",\n exampleA: \"That joke was corny.\",\n exampleS: \"That joke was uncool\/cheesy.\"\n },\n {\n cat: \"Expression\",\n aave: \"cos\",\n std: \"because\",\n meaning: \"Shortened form of 'because'.\",\n exampleA: \"I'm late cos my car broke down.\",\n exampleS: \"I'm late because my car broke down.\"\n },\n {\n cat: \"Historical\",\n aave: \"cot\",\n std: \"caught\",\n meaning: \"Pronounced form of 'caught'.\",\n exampleA: \"I cot him looking at my paper.\",\n exampleS: \"I caught him looking at my paper.\"\n },\n {\n cat: \"Expression\",\n aave: \"crack\",\n std: \"make jokes\/banter\",\n meaning: \"To joke around or engage in humorous banter.\",\n exampleA: \"We were just cracking on each other.\",\n exampleS: \"We were just joking with each other.\"\n },\n {\n cat: \"Social\",\n aave: \"crash out\",\n std: \"act foolishly\/lose control\",\n meaning: \"To behave recklessly or lose emotional control.\",\n exampleA: \"Don't crash out over something small.\",\n exampleS: \"Don't overreact to something small.\"\n },\n {\n cat: \"Social\",\n aave: \"creep\",\n std: \"sneak around\",\n meaning: \"To move around quietly or secretly.\",\n exampleA: \"I saw him creeping around the corner.\",\n exampleS: \"I saw him sneaking around the corner.\"\n },\n {\n cat: \"Social\",\n aave: \"cross out\",\n std: \"betray\",\n meaning: \"To betray or go against someone.\",\n exampleA: \"Don't cross me out, we're supposed to be friends.\",\n exampleS: \"Don't betray me, we're supposed to be friends.\"\n },\n {\n cat: \"Slang\",\n aave: \"crouton\",\n std: \"white person (slang)\",\n meaning: \"Slang term for a white person.\",\n exampleA: \"That crouton don't know how to dance.\",\n exampleS: \"That white person doesn't know how to dance.\"\n },\n {\n cat: \"Expression\",\n aave: \"crown\",\n std: \"head\",\n meaning: \"Slang term for one's head.\",\n exampleA: \"I need something for this aching crown.\",\n exampleS: \"I need something for this aching head.\"\n },\n {\n cat: \"Expression\",\n aave: \"crumb crusher\",\n std: \"child\",\n meaning: \"Affectionate or joking term for a child.\",\n exampleA: \"Look at all these crumb crushers running around.\",\n exampleS: \"Look at all these children running around.\"\n },\n \/\/ Additional phrases that were in the original list but we already have or are variations\n {\n cat: \"Grammar\",\n aave: \"befo'\",\n std: \"before\",\n meaning: \"Pronounced form of 'before'.\",\n exampleA: \"I saw her befo' she left.\",\n exampleS: \"I saw her before she left.\"\n },\n {\n cat: \"Expression\",\n aave: \"big mama\",\n std: \"grandmother\/matriarch\",\n meaning: \"Term for grandmother or family matriarch.\",\n exampleA: \"We're going to Big Mama's house for Sunday dinner.\",\n exampleS: \"We're going to Grandmother's house for Sunday dinner.\"\n },\n {\n cat: \"Expression\",\n aave: \"brick\",\n std: \"very cold\",\n meaning: \"Extremely cold weather.\",\n exampleA: \"It's brick outside today.\",\n exampleS: \"It's very cold outside today.\"\n },\n {\n cat: \"Money\",\n aave: \"buck up\",\n std: \"pay\/contribute money\",\n meaning: \"To pay money or contribute financially.\",\n exampleA: \"Everybody needs to buck up for the gift.\",\n exampleS: \"Everybody needs to contribute money for the gift.\"\n },\n {\n cat: \"Expression\",\n aave: \"bun\",\n std: \"butt\/backside\",\n meaning: \"Slang term for buttocks.\",\n exampleA: \"She got a nice bun.\",\n exampleS: \"She has nice buttocks.\"\n },\n {\n cat: \"Expression\",\n aave: \"bust a move\",\n std: \"dance\/leave quickly\",\n meaning: \"To dance or to leave somewhere quickly.\",\n exampleA: \"Let me bust a move on this dance floor.\",\n exampleS: \"Let me dance on this dance floor.\"\n },\n {\n cat: \"Expression\",\n aave: \"buy wolf tickets\",\n std: \"believe lies\/exaggerations\",\n meaning: \"To believe someone's lies or exaggerated stories.\",\n exampleA: \"Don't buy those wolf tickets he's selling.\",\n exampleS: \"Don't believe those lies he's telling.\"\n }\n ];\n\n \/\/ ===== DOM Elements =====\n const qEl = document.getElementById(\"q\");\n const catEl = document.getElementById(\"cat\");\n const sortEl = document.getElementById(\"sort\");\n const cardsEl = document.getElementById(\"cards\");\n const statsEl = document.getElementById(\"stats\");\n const toastEl = document.getElementById(\"toast\");\n const toastMsg = document.getElementById(\"toast-message\");\n const toggle = document.getElementById(\"toggleOrder\");\n const prevBtn = document.getElementById(\"prevBtn\");\n const nextBtn = document.getElementById(\"nextBtn\");\n const pageInfo = document.getElementById(\"pageInfo\");\n\n \/\/ ===== State =====\n let showStdFirst = false;\n let currentPage = 1;\n const itemsPerPage = 9; \/\/ 3x3 grid\n\n \/\/ ===== Functions =====\n function showToast(message) {\n toastMsg.textContent = message;\n toastEl.classList.add(\"show\");\n setTimeout(() => toastEl.classList.remove(\"show\"), 2000);\n }\n\n function getUniqueCategories(items) {\n return [\"all\", ...new Set(items.map(item => item.cat))];\n }\n\n function getCategoryClass(cat) {\n const catMap = {\n \"Grammar\": \"grammar\",\n \"Everyday\": \"everyday\", \n \"Social\": \"social\",\n \"Money\": \"money\",\n \"Culture\": \"culture\",\n \"Expression\": \"expression\",\n \"Identity\": \"identity\",\n \"Historical\": \"historical\",\n \"Slang\": \"slang\"\n };\n return catMap[cat] || \"grammar\";\n }\n\n function renderCards() {\n const query = qEl.value.toLowerCase();\n const category = catEl.value;\n const sortMethod = sortEl.value;\n \n \/\/ Filter items\n let filteredItems = PHRASES.filter(item => {\n const searchText = (item.aave + item.std + item.meaning + item.exampleA + item.exampleS + item.cat).toLowerCase();\n return (!query || searchText.includes(query)) && \n (category === \"all\" || item.cat === category);\n });\n \n \/\/ Sort items\n switch (sortMethod) {\n case \"az\":\n filteredItems.sort((a, b) => a.aave.localeCompare(b.aave));\n break;\n case \"za\":\n filteredItems.sort((a, b) => b.aave.localeCompare(a.aave));\n break;\n case \"cat\":\n filteredItems.sort((a, b) => a.cat.localeCompare(b.cat) || a.aave.localeCompare(b.aave));\n break;\n case \"relevance\":\n default:\n \/\/ Keep filtered order\n break;\n }\n \n \/\/ Calculate pagination\n const totalPages = Math.ceil(filteredItems.length \/ itemsPerPage);\n if (currentPage > totalPages && totalPages > 0) {\n currentPage = totalPages;\n }\n if (currentPage < 1 && filteredItems.length > 0) {\n currentPage = 1;\n }\n \n const startIndex = (currentPage - 1) * itemsPerPage;\n const endIndex = startIndex + itemsPerPage;\n const paginatedItems = filteredItems.slice(startIndex, endIndex);\n \n \/\/ Update pagination buttons\n prevBtn.disabled = currentPage <= 1;\n nextBtn.disabled = currentPage >= totalPages || totalPages === 0;\n \n \/\/ Update page info\n if (filteredItems.length === 0) {\n pageInfo.textContent = \"No results\";\n } else {\n pageInfo.textContent = `Page ${currentPage} of ${totalPages} (${filteredItems.length} total entries)`;\n }\n \n \/\/ Update stats\n statsEl.textContent = `Showing ${paginatedItems.length} of ${filteredItems.length} filtered entries (${PHRASES.length} total entries)`;\n statsEl.style.background = filteredItems.length === 0 ? \n \"var(--red-light)\" : \n `linear-gradient(90deg, var(--green-light) 0%, var(--yellow-light) 100%)`;\n \n \/\/ Clear cards\n cardsEl.innerHTML = \"\";\n \n \/\/ Render cards\n if (paginatedItems.length === 0) {\n cardsEl.innerHTML = `\n <div style=\"grid-column: 1\/-1; text-align: center; padding: 60px; background: var(--yellow-light); border-radius: var(--radius); border: 3px solid var(--yellow);\">\n <i class=\"fas fa-search\" style=\"font-size: 48px; color: var(--red); margin-bottom: 20px;\"><\/i>\n <h2 style=\"color: var(--black);\">No entries found<\/h2>\n <p style=\"color: var(--black-soft); font-size: 18px; margin-top: 10px;\">\n Try a different search term or select a different category.\n <\/p>\n <\/div>\n `;\n return;\n }\n \n paginatedItems.forEach((item, index) => {\n const topText = showStdFirst ? item.std : item.aave;\n const bottomText = showStdFirst ? item.aave : item.std;\n const topLabel = showStdFirst ? \"Standard English\" : \"AAVE \/ Ebonics\";\n const bottomLabel = showStdFirst ? \"AAVE \/ Ebonics\" : \"Standard English\";\n const categoryClass = getCategoryClass(item.cat);\n \n const card = document.createElement(\"div\");\n card.className = \"card\";\n card.style.animationDelay = `${index * 0.05}s`;\n \n card.innerHTML = `\n <span class=\"card-category ${categoryClass}\">${item.cat}<\/span>\n <div class=\"card-term\">${topText}<\/div>\n <div class=\"card-label ${showStdFirst ? 'standard' : 'aave'}\">${topLabel}<\/div>\n \n <div class=\"card-translation\">${bottomText}<\/div>\n <div class=\"card-label ${showStdFirst ? 'aave' : 'standard'}\">${bottomLabel}<\/div>\n \n <p class=\"card-meaning\"><b>Meaning:<\/b> ${item.meaning}<\/p>\n \n <div class=\"card-example\">\n <div><b>AAVE Example:<\/b> ${item.exampleA}<\/div>\n <div><b>Standard English:<\/b> ${item.exampleS}<\/div>\n <\/div>\n \n <div class=\"card-actions\">\n <button class=\"card-btn\" onclick=\"copyToClipboard('${item.aave.replace(\/'\/g, \"\\\\'\")}', 'AAVE phrase')\">\n <i class=\"fas fa-copy\"><\/i> Copy AAVE\n <\/button>\n <button class=\"card-btn\" onclick=\"copyToClipboard('${item.std.replace(\/'\/g, \"\\\\'\")}', 'Standard English translation')\">\n <i class=\"fas fa-copy\"><\/i> Copy Standard\n <\/button>\n <\/div>\n `;\n \n cardsEl.appendChild(card);\n });\n }\n\n function copyToClipboard(text, label) {\n navigator.clipboard.writeText(text)\n .then(() => {\n showToast(`\u2713 Copied ${label} to clipboard!`);\n \/\/ Change toast color based on what was copied\n if (label.includes(\"AAVE\")) {\n toastEl.style.background = \"var(--red)\";\n toastEl.style.color = \"white\";\n } else {\n toastEl.style.background = \"var(--green)\";\n toastEl.style.color = \"var(--black)\";\n }\n })\n .catch(err => console.error('Copy failed:', err));\n }\n\n function initializeApp() {\n \/\/ Populate category filter\n const categories = getUniqueCategories(PHRASES);\n catEl.innerHTML = '';\n categories.forEach(category => {\n const option = document.createElement(\"option\");\n option.value = category;\n option.textContent = category === \"all\" ? \"All Categories\" : category;\n catEl.appendChild(option);\n });\n \n \/\/ Initial render\n renderCards();\n }\n\n \/\/ ===== Event Listeners =====\n toggle.addEventListener(\"click\", () => {\n showStdFirst = !showStdFirst;\n toggle.classList.toggle(\"active\", showStdFirst);\n renderCards();\n showToast(`Display order: ${showStdFirst ? \"Standard English first\" : \"AAVE first\"}`);\n });\n\n qEl.addEventListener(\"input\", () => {\n currentPage = 1; \/\/ Reset to first page on new search\n renderCards();\n });\n \n catEl.addEventListener(\"change\", () => {\n currentPage = 1; \/\/ Reset to first page on category change\n renderCards();\n });\n \n sortEl.addEventListener(\"change\", () => {\n currentPage = 1; \/\/ Reset to first page on sort change\n renderCards();\n });\n\n prevBtn.addEventListener(\"click\", () => {\n if (currentPage > 1) {\n currentPage--;\n renderCards();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n });\n\n nextBtn.addEventListener(\"click\", () => {\n const query = qEl.value.toLowerCase();\n const category = catEl.value;\n let filteredItems = PHRASES.filter(item => {\n const searchText = (item.aave + item.std + item.meaning + item.exampleA + item.exampleS + item.cat).toLowerCase();\n return (!query || searchText.includes(query)) && \n (category === \"all\" || item.cat === category);\n });\n const totalPages = Math.ceil(filteredItems.length \/ itemsPerPage);\n \n if (currentPage < totalPages) {\n currentPage++;\n renderCards();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n });\n\n document.getElementById(\"clearBtn\").addEventListener(\"click\", () => {\n qEl.value = \"\";\n catEl.value = \"all\";\n sortEl.value = \"relevance\";\n currentPage = 1;\n renderCards();\n showToast(\"All filters cleared\");\n });\n\n document.getElementById(\"randomBtn\").addEventListener(\"click\", () => {\n const randomPhrase = PHRASES[Math.floor(Math.random() * PHRASES.length)];\n qEl.value = randomPhrase.aave.split(\" \")[0];\n currentPage = 1;\n renderCards();\n showToast(`Showing results for \"${randomPhrase.aave.split(\" \")[0]}\"`);\n });\n\n \/\/ ===== Initialize =====\n document.addEventListener('DOMContentLoaded', initializeApp);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM-1-1024x683.png\" alt=\"\" class=\"wp-image-621\" srcset=\"http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM-1-1024x683.png 1024w, http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM-1-300x200.png 300w, http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM-1-768x512.png 768w, http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM-1-400x267.png 400w, http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM-1-800x533.png 800w, http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM-1.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>African American Language (AAVE \/ Ebonics) Interactive Phrasebook by Ethiotrans African American Language (AAVE \/ Ebonics) Interactive Phrasebook African American […]<\/p>\n","protected":false},"author":1,"featured_media":620,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ethiodiego"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-Jan-11-2026-04_39_14-PM.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8nzgb-9Z","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=619"}],"version-history":[{"count":1,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/619\/revisions"}],"predecessor-version":[{"id":622,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/619\/revisions\/622"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media\/620"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/categories?post=619"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/tags?post=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}