Skip to content

Commit b5b42f8

Browse files
vijay-jaisankarvijay-jaisankar
committed
Added bootstrap styling.
1 parent 130b826 commit b5b42f8

File tree

3 files changed

+201
-18
lines changed

3 files changed

+201
-18
lines changed

‎creds.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,3 @@
33

44
CLIENT_ID = ""
55
CLIENT_SECRET = ""
6-

‎static/styles.css‎

Lines changed: 121 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,124 @@
1-
.predictedLabel{
2-
top: 50px;
3-
color: blue;
1+
.body{
2+
background-color: #FDF4DC;
43
}
54

65

7-
.song{
8-
color:yellow;
9-
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
10-
}
6+
.main-content{
7+
width: 50%;
8+
border-radius: 20px;
9+
box-shadow: 0 5px 5px rgba(0,0,0,.4);
10+
margin: 5em auto;
11+
display: flex;
12+
}
13+
.company__info{
14+
background-color: #008080;
15+
border-top-left-radius: 20px;
16+
border-bottom-left-radius: 20px;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
color: #fff;
21+
}
22+
23+
@media screen and (max-width: 640px) {
24+
.main-content{width: 90%;}
25+
.company__info{
26+
display: none;
27+
}
28+
.login_form{
29+
border-top-left-radius:20px;
30+
border-bottom-left-radius:20px;
31+
}
32+
}
33+
@media screen and (min-width: 642px) and (max-width:800px){
34+
.main-content{width: 70%;}
35+
}
36+
.row > h2{
37+
color:#008080;
38+
}
39+
.login_form{
40+
background-color: #fff;
41+
border-top-right-radius:20px;
42+
border-bottom-right-radius:20px;
43+
border-top:1px solid #ccc;
44+
border-right:1px solid #ccc;
45+
}
46+
47+
form{
48+
padding: 0 2em;
49+
}
50+
.form__input{
51+
width: 100%;
52+
border:0px solid transparent;
53+
border-radius: 0;
54+
border-bottom: 1px solid #aaa;
55+
padding: 1em .5em .5em;
56+
padding-left: 2em;
57+
outline:none;
58+
margin:1.5em auto;
59+
transition: all .5s ease;
60+
}
61+
.form__input:focus{
62+
border-bottom-color: #008080;
63+
box-shadow: 0 0 5px rgba(0,80,80,.4);
64+
border-radius: 4px;
65+
}
66+
.btn{
67+
transition: all .5s ease;
68+
width: 70%;
69+
border-radius: 30px;
70+
color:#008080;
71+
font-weight: 600;
72+
background-color: #fff;
73+
border: 1px solid #008080;
74+
margin-top: 1.5em;
75+
margin-bottom: 1em;
76+
}
77+
.btn:hover, .btn:focus{
78+
background-color: #008080;
79+
color:#fff;
80+
}
81+
82+
.maintitle{
83+
font-size: 4rem;
84+
text-align: center;
85+
}
86+
87+
88+
.maindescription{
89+
text-align: center;
90+
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
91+
font-size: 2rem;
92+
}
93+
94+
a.button4{
95+
display:inline-block;
96+
padding:0.3em 1.2em;
97+
margin:0 0.1em 0.1em 0;
98+
border:0.16em solid rgba(255,255,255,0);
99+
border-radius:2em;
100+
box-sizing: border-box;
101+
text-decoration:none;
102+
font-family:'Roboto',sans-serif;
103+
font-weight:300;
104+
color:#008080;
105+
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
106+
text-align:center;
107+
transition: all 0.2s;
108+
font-size: 1.25rem;
109+
}
110+
111+
a.button4:hover{
112+
border-color: rgba(255,255,255,1);
113+
}
114+
115+
@media all and (max-width:30em){
116+
a.button4{
117+
display:block; margin:0.2em auto;}
118+
 
119+
120+
};
121+
122+
123+
124+

‎templates/index.html‎

Lines changed: 80 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,78 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="../static/styles.css">
8-
<title>Predictions</title>
8+
<title>Spotifynd</title>
9+
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
11+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
12+
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
16+
17+
<link rel="preconnect" href="https://fonts.googleapis.com">
18+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19+
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
20+
921
</head>
10-
<body>
22+
<body style="background-color: #FDF4DC;">
23+
24+
1125

1226

1327
{% if displayForm %}
1428

15-
<form action="{{ url_for('predict')}}" method="post">
29+
<h1 class="maintitle" style="font-family: 'Indie Flower', cursive;">
30+
Welcome to Spotifynd!
31+
</h1>
1632

17-
<label for="song_id">song_id:</label>
18-
<input type="text" id="song_id" name="song_id" placeholder="song_id">
19-
33+
<br>
34+
<br>
35+
<br>
36+
<br>
37+
38+
<p class="maindescription" style=" font-family: 'Courier Prime', monospace;">
39+
Harness the power of machine learning and find new favorites!
40+
<br>
41+
Trained on over 1,300,000 data points, our <a href="https://github.com/absotone/spotifynd-classifier">Clustering Algorithm</a> recommends similar songs from 1921 to 2020.
42+
<br>
43+
Just enter the spotify song ID of your favorite song, and <b>find new favorites</b> :)
44+
</p>
45+
46+
<br>
47+
<br>
48+
49+
<center>
50+
51+
<div class="container-fluid">
52+
<div class="row main-content bg-success text-center">
53+
<div class="col-md-4 text-center company__info">
54+
55+
<h4 class="company_title">Spotifynd</h4>
56+
</div>
57+
<div class="col-md-8 col-xs-12 col-sm-12 login_form ">
58+
<div class="container-fluid">
59+
<div class="row">
60+
<h2>Find Similar Songs</h2>
61+
</div>
62+
<div class="row">
63+
<form control="" class="form-group" action="{{ url_for('predict')}}" method="post">
64+
<div class="row">
65+
<input type="text" name="song_id" id="song_id" class="form__input" placeholder="Song ID">
66+
</div>
67+
68+
<div class="row">
69+
<input type="submit" value="Submit" class="btn">
70+
</div>
71+
</form>
72+
</div>
2073

21-
<button type="submit">Get Songs!</button>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
2278

23-
</form>
79+
</center>
2480

2581
{% endif %}
2682

@@ -36,8 +92,22 @@
3692
{% endfor %}
3793

3894
{% if not displayForm %}
39-
<a href="{{ url_for('predict')}}"> Try Again!</a>
95+
<a href="{{ url_for('predict')}}" class="button4"> Try Again!</a>
4096
{% endif %}
97+
4198

99+
100+
<!-- Footer -->
101+
<div class="container-fluid text-center footer">
102+
Source code for this project lives <a href="https://github.com/absotone/spotifynd">here.</a></p>
103+
</div>
104+
105+
42106
</body>
43-
</html>
107+
</html>
108+
109+
110+
111+
112+
113+

0 commit comments

Comments
 (0)