Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| # Title of the app | |
| st.title("🎶 Kenny Rogers Musicography Story") | |
| # Introduction | |
| st.header("Introduction") | |
| st.write(""" | |
| Kenny Rogers, a pivotal figure in both country and pop music, captivated audiences with his storytelling and emotional depth. | |
| His songs resonate with universal themes, making them timeless classics. 🎤🌟 | |
| """) | |
| # HTML and JavaScript code | |
| html_code = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f4f4f4; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| margin: 10px; | |
| padding: 20px; | |
| width: 250px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .spline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| } | |
| svg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightblue" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>The Gambler 🃏🚂</h3> | |
| <p>A late-night encounter on a train with an old gambler who shares life advice through poker metaphors.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightcoral" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>Coward of the County 👊❤️</h3> | |
| <p>A poignant tale of pacifism and standing up for what's right, following Tommy's journey.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightgreen" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>Lucille 💔🏡</h3> | |
| <p>A classic heartbreak song about a man abandoned by his wife, capturing emotional pain.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightyellow" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>Lady 💑🌹</h3> | |
| <p>A romantic ballad written by Lionel Richie that showcases love and admiration.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightblue" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>Islands in the Stream 🏝️🎵</h3> | |
| <p>A duet with Dolly Parton celebrating love, showcasing their chemistry.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightcoral" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>She Believes in Me ❤️🎶</h3> | |
| <p>A heartfelt song about the unwavering support of a loving partner.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightgreen" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>Ruby, Don't Take Your Love to Town 🎖️💔</h3> | |
| <p>A poignant narrative about a disabled veteran struggling with emotional challenges.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightyellow" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>Don't Fall in Love with a Dreamer 🌌💭</h3> | |
| <p>A duet with Kim Carnes discussing the challenges of loving someone with big dreams.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightblue" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>You Decorated My Life 🎨❤️</h3> | |
| <p>A romantic song illustrating how love transforms one's life.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="spline"> | |
| <svg viewBox="0 0 100 100"> | |
| <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightcoral" stroke-width="2" /> | |
| </svg> | |
| </div> | |
| <h3>We've Got Tonight 🌙🎤</h3> | |
| <p>A cover of Bob Seger's song performed as a duet with Sheena Easton.</p> | |
| </div> | |
| </body> | |
| </html> | |
| """ | |
| # Render the HTML in Streamlit | |
| st.components.v1.html(html_code, height=800) | |