Hugging Face's logo

Spaces:
awacke1
/
KennyRogersTribute
Sleeping

App Files Community
awacke1 commited on
Commit
c7ff1e5
·
verified ·
1 Parent(s): 2ef49ec

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +161 -0
app.py ADDED
@@ -0,0 +1,161 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamlit as st
2
+
3
+ # Title of the app
4
+ st.title("🎶 Kenny Rogers Musicography Story")
5
+
6
+ # Introduction
7
+ st.header("Introduction")
8
+ st.write("""
9
+ Kenny Rogers, a pivotal figure in both country and pop music, captivated audiences with his storytelling and emotional depth.
10
+ His songs resonate with universal themes, making them timeless classics. 🎤🌟
11
+ """)
12
+
13
+ # HTML and JavaScript code
14
+ html_code = """
15
+ <!DOCTYPE html>
16
+ <html lang="en">
17
+ <head>
18
+ <meta charset="UTF-8">
19
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
20
+ <style>
21
+ body {
22
+ font-family: Arial, sans-serif;
23
+ background-color: #f4f4f4;
24
+ display: flex;
25
+ flex-wrap: wrap;
26
+ justify-content: center;
27
+ padding: 20px;
28
+ }
29
+ .card {
30
+ background-color: white;
31
+ border-radius: 10px;
32
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
33
+ margin: 10px;
34
+ padding: 20px;
35
+ width: 250px;
36
+ position: relative;
37
+ overflow: hidden;
38
+ }
39
+ .spline {
40
+ position: absolute;
41
+ top: 0;
42
+ left: 0;
43
+ width: 100%;
44
+ height: 100%;
45
+ pointer-events: none;
46
+ }
47
+ svg {
48
+ position: absolute;
49
+ width: 100%;
50
+ height: 100%;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+
56
+ <div class="card">
57
+ <div class="spline">
58
+ <svg viewBox="0 0 100 100">
59
+ <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightblue" stroke-width="2" />
60
+ </svg>
61
+ </div>
62
+ <h3>The Gambler 🃏🚂</h3>
63
+ <p>A late-night encounter on a train with an old gambler who shares life advice through poker metaphors.</p>
64
+ </div>
65
+
66
+ <div class="card">
67
+ <div class="spline">
68
+ <svg viewBox="0 0 100 100">
69
+ <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightcoral" stroke-width="2" />
70
+ </svg>
71
+ </div>
72
+ <h3>Coward of the County 👊❤️</h3>
73
+ <p>A poignant tale of pacifism and standing up for what's right, following Tommy's journey.</p>
74
+ </div>
75
+
76
+ <div class="card">
77
+ <div class="spline">
78
+ <svg viewBox="0 0 100 100">
79
+ <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightgreen" stroke-width="2" />
80
+ </svg>
81
+ </div>
82
+ <h3>Lucille 💔🏡</h3>
83
+ <p>A classic heartbreak song about a man abandoned by his wife, capturing emotional pain.</p>
84
+ </div>
85
+
86
+ <div class="card">
87
+ <div class="spline">
88
+ <svg viewBox="0 0 100 100">
89
+ <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightyellow" stroke-width="2" />
90
+ </svg>
91
+ </div>
92
+ <h3>Lady 💑🌹</h3>
93
+ <p>A romantic ballad written by Lionel Richie that showcases love and admiration.</p>
94
+ </div>
95
+
96
+ <div class="card">
97
+ <div class="spline">
98
+ <svg viewBox="0 0 100 100">
99
+ <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightblue" stroke-width="2" />
100
+ </svg>
101
+ </div>
102
+ <h3>Islands in the Stream 🏝️🎵</h3>
103
+ <p>A duet with Dolly Parton celebrating love, showcasing their chemistry.</p>
104
+ </div>
105
+
106
+ <div class="card">
107
+ <div class="spline">
108
+ <svg viewBox="0 0 100 100">
109
+ <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightcoral" stroke-width="2" />
110
+ </svg>
111
+ </div>
112
+ <h3>She Believes in Me ❤️🎶</h3>
113
+ <p>A heartfelt song about the unwavering support of a loving partner.</p>
114
+ </div>
115
+
116
+ <div class="card">
117
+ <div class="spline">
118
+ <svg viewBox="0 0 100 100">
119
+ <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightgreen" stroke-width="2" />
120
+ </svg>
121
+ </div>
122
+ <h3>Ruby, Don't Take Your Love to Town 🎖️💔</h3>
123
+ <p>A poignant narrative about a disabled veteran struggling with emotional challenges.</p>
124
+ </div>
125
+
126
+ <div class="card">
127
+ <div class="spline">
128
+ <svg viewBox="0 0 100 100">
129
+ <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightyellow" stroke-width="2" />
130
+ </svg>
131
+ </div>
132
+ <h3>Don't Fall in Love with a Dreamer 🌌💭</h3>
133
+ <p>A duet with Kim Carnes discussing the challenges of loving someone with big dreams.</p>
134
+ </div>
135
+
136
+ <div class="card">
137
+ <div class="spline">
138
+ <svg viewBox="0 0 100 100">
139
+ <path d="M0 50 C 25 100, 75 100, 100 50 S 75 0, 0 50 Z" fill="none" stroke="lightblue" stroke-width="2" />
140
+ </svg>
141
+ </div>
142
+ <h3>You Decorated My Life 🎨❤️</h3>
143
+ <p>A romantic song illustrating how love transforms one's life.</p>
144
+ </div>
145
+
146
+ <div class="card">
147
+ <div class="spline">
148
+ <svg viewBox="0 0 100 100">
149
+ <path d="M0 50 C 25 0, 75 0, 100 50 S 75 100, 0 50 Z" fill="none" stroke="lightcoral" stroke-width="2" />
150
+ </svg>
151
+ </div>
152
+ <h3>We've Got Tonight 🌙🎤</h3>
153
+ <p>A cover of Bob Seger's song performed as a duet with Sheena Easton.</p>
154
+ </div>
155
+
156
+ </body>
157
+ </html>
158
+ """
159
+
160
+ # Render the HTML in Streamlit
161
+ st.components.v1.html(html_code, height=800)