/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const OasisBandInfo = { name: "Oasis", origin: "Manchester, England", activeYears: "1991-2009", genre: "Britpop, Alternative Rock", externalLinks: [ { name: "Oasis Reunion Live", url: "https://oasisreunion.live/", description: "Official Reunion Website" }, { name: "Definitely Maybe Tribute", url: "https://oasisreunion.live/definitely-maybe/", description: "Debut Album Tribute Page" }, { name: "Oasis Reunion Info", url: "https://www.oasisreunion.info/", description: "Comprehensive Band Information" }, { name: "Oasis Albums Collection", url: "https://www.oasisreunion.info/albums", description: "Detailed Album Discography" } ], members: [ { name: "Liam Gallagher", role: "Lead Vocals", period: "1991-2009" }, { name: "Noel Gallagher", role: "Lead Guitar, Vocals, Songwriting", period: "1991-2009" }, { name: "Paul 'Bonehead' Arthurs", role: "Rhythm Guitar", period: "1991-1999" }, { name: "Paul 'Guigsy' McGuigan", role: "Bass Guitar", period: "1991-1999" }, { name: "Tony McCarroll", role: "Drums", period: "1991-1995" }, { name: "Alan White", role: "Drums", period: "1995-2004" }, { name: "Gem Archer", role: "Rhythm Guitar", period: "1999-2009" }, { name: "Andy Bell", role: "Bass Guitar", period: "1999-2009" } ], description: "Oasis was a legendary British rock band that emerged from Manchester during the early 1990s, becoming one of the most influential and commercially successful bands of the Britpop era. Founded by brothers Liam and Noel Gallagher, the band was known for their swagger, musical prowess, and notorious sibling rivalry. Their music combined rock and pop elements, creating anthemic songs that defined a generation. Despite their internal conflicts, Oasis produced numerous hit albums and singles that became cultural touchstones of 1990s British music." }; const OasisDiscography = [ { type: "Album", name: "Definitely Maybe", releaseDate: "29 August 1994", sales: "8 million copies worldwide", description: "Debut album that launched Oasis into the Britpop spotlight, featuring iconic tracks like 'Live Forever' and 'Cigarettes & Alcohol'.", tracks: ["Rock 'n' Roll Star", "Shakermaker", "Live Forever", "Up in the Sky", "Columbia", "Cigarettes & Alcohol", "Digsy's Dinner", "Slide Away", "Married with Children"] }, { type: "Album", name: "(What's the Story) Morning Glory?", releaseDate: "2 October 1995", sales: "22 million copies worldwide", description: "Breakthrough album featuring some of Oasis's most famous songs, including 'Wonderwall' and 'Don't Look Back in Anger'.", tracks: ["Hello", "Roll With It", "Wonderwall", "Don't Look Back in Anger", "Hey Now!", "The Masterplan", "Some Might Say", "Cast No Shadow", "She's Electric", "Morning Glory", "Untitled"] }, { type: "Album", name: "Be Here Now", releaseDate: "21 August 1997", sales: "8 million copies worldwide", description: "The band's third studio album, known for its massive, wall-of-sound production and epic track lengths.", tracks: ["D'You Know What I Mean?", "My Big Mouth", "Magic Pie", "Stand By Me", "I Hope, I Think, I Know", "The Girl in the Dirty Shirt", "Fade In-Out", "Don't Go Away", "Be Here Now"] }, { type: "Album", name: "Standing on the Shoulder of Giants", releaseDate: "28 February 2000", sales: "3.5 million copies worldwide", description: "Fourth studio album marking a transition in the band's lineup and sound, featuring more experimental tracks.", tracks: ["Fuckin' in the Bushes", "Go Let It Out", "Who Feels Love?", "Put Yer Money Where Yer Mouth Is", "Little James", "Gas Panic!", "Where Did It All Go Wrong?", "Sunday Morning Call", "I Can See a Liar"] }, { type: "Album", name: "Heathen Chemistry", releaseDate: "10 June 2002", sales: "3 million copies worldwide", description: "Fifth studio album showcasing a more collaborative approach within the band, with songwriting contributions from multiple members.", tracks: ["The Hindu Times", "Force of Nature", "Hung in a Bad Place", "Stop Crying Your Heart Out", "Songbird", "Little by Little", "A Quick Peep", "My Generation", "Probably Alright"] }, { type: "Album", name: "Don't Believe the Truth", releaseDate: "30 May 2005", sales: "2.5 million copies worldwide", description: "Sixth studio album that saw a return to a more guitar-driven sound and renewed critical acclaim.", tracks: ["Lyla", "The Importance of Being Idle", "Mucky Fingers", "Guess God Thinks I'm Abel", "Part of the Queue", "Keep the Dream Alive", "A Bell Will Ring", "Let There Be Love"] }, { type: "Album", name: "Dig Out Your Soul", releaseDate: "6 October 2008", sales: "1.5 million copies worldwide", description: "The band's final studio album before their breakup, featuring a more psychedelic and experimental sound.", tracks: ["Bag It Up", "The Turning", "Waiting for the Rapture", "Shock of the Lightning", "I'm Outta Time", "Get On the Floor", "Falling Down", "To Be Where There's Life", "Ain't Got Nothin'"] } ]; function ExternalLinks() { return (

External Resources

{OasisBandInfo.externalLinks.map((link, index) => (

{link.name}

{link.description}

{link.url}

))}

); } function BandIntroduction() { return (

{OasisBandInfo.name}

Origin: {OasisBandInfo.origin}

Active Years: {OasisBandInfo.activeYears}

Genre: {OasisBandInfo.genre}

{OasisBandInfo.description}

Band Members

{OasisBandInfo.members.map((member, index) => (

{member.name}

Role: {member.role}

Period: {member.period}

))}

); } function AlbumCard({ album }) { return (

{album.name}

Type: {album.type}

Release Date: {album.releaseDate}

Sales: {album.sales}

{album.description}

Tracks:

{track}

); } function App() { return (

Oasis: The Complete Story

Discography

{OasisDiscography.map((album, index) => ( ))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function handler(request: Request): Promise { return new Response(` Oasis: The Complete Story

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .oasis-discography { max-width: 1200px; margin: 0 auto; } h1, h2 { text-align: center; color: #333; border-bottom: 2px solid #666; padding-bottom: 10px; } .band-introduction { background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 20px; } .band-details { display: flex; justify-content: space-around; margin-bottom: 15px; } .band-description { text-align: center; font-style: italic; color: #666; margin-bottom: 20px; } .band-members { text-align: center; } .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .member-card { background-color: #f9f9f9; border-radius: 8px; padding: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .external-links { margin-top: 20px; text-align: center; } .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; } .external-link { text-decoration: none; color: inherit; } .link-card { background-color: #f0f0f0; border-radius: 8px; padding: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #ddd; } .link-card:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .link-card h4 { margin: 0 0 10px 0; color: #333; } .link-card p { color: #666; margin: 0 0 10px 0; } .link-url { font-size: 0.8em; color: #888; word-break: break-all; } .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .album-card { background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; transition: transform 0.3s ease; } .album-card:hover { transform: scale(1.02); } .album-card h2 { color: #1a1a1a; margin-bottom: 10px; border: none; text-align: left; } .album-card ul { list-style-type: none; padding: 0; } .album-card li { background-color: #f9f9f9; margin: 5px 0; padding: 5px; border-radius: 4px; } footer { text-align: center; margin-top: 20px; font-size: 0.8em; color: #666; } `;