Added bootstrap styling.

absotone · Sep 7, 2021 · b5b42f8 · b5b42f8
1 parent 130b826
commit b5b42f8
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 18 deletions.
diff --git a/creds.py b/creds.py
@@ -3,4 +3,3 @@
 
 CLIENT_ID = ""
 CLIENT_SECRET = ""
-
diff --git a/static/styles.css b/static/styles.css
@@ -1,10 +1,124 @@
-.predictedLabel{
-    top: 50px;
-    color: blue;
+.body{
+    background-color: #FDF4DC;
 }
 
 
-.song{
-    color:yellow;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
+.main-content{
+	width: 50%;
+	border-radius: 20px;
+	box-shadow: 0 5px 5px rgba(0,0,0,.4);
+	margin: 5em auto;
+	display: flex;
+}
+.company__info{
+	background-color: #008080;
+	border-top-left-radius: 20px;
+	border-bottom-left-radius: 20px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	color: #fff;
+}
+
+@media screen and (max-width: 640px) {
+	.main-content{width: 90%;}
+	.company__info{
+		display: none;
+	}
+	.login_form{
+		border-top-left-radius:20px;
+		border-bottom-left-radius:20px;
+	}
+}
+@media screen and (min-width: 642px) and (max-width:800px){
+	.main-content{width: 70%;}
+}
+.row > h2{
+	color:#008080;
+}
+.login_form{
+	background-color: #fff;
+	border-top-right-radius:20px;
+	border-bottom-right-radius:20px;
+	border-top:1px solid #ccc;
+	border-right:1px solid #ccc;
+}
+
+form{
+	padding: 0 2em;
+}
+.form__input{
+	width: 100%;
+	border:0px solid transparent;
+	border-radius: 0;
+	border-bottom: 1px solid #aaa;
+	padding: 1em .5em .5em;
+	padding-left: 2em;
+	outline:none;
+	margin:1.5em auto;
+	transition: all .5s ease;
+}
+.form__input:focus{
+	border-bottom-color: #008080;
+	box-shadow: 0 0 5px rgba(0,80,80,.4); 
+	border-radius: 4px;
+}
+.btn{
+	transition: all .5s ease;
+	width: 70%;
+	border-radius: 30px;
+	color:#008080;
+	font-weight: 600;
+	background-color: #fff;
+	border: 1px solid #008080;
+	margin-top: 1.5em;
+	margin-bottom: 1em;
+}
+.btn:hover, .btn:focus{
+	background-color: #008080;
+	color:#fff;
+}
+
+.maintitle{
+    font-size: 4rem;
+    text-align: center;
+}
+
+
+.maindescription{
+    text-align: center;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    font-size: 2rem;
+}
+
+a.button4{
+    display:inline-block;
+    padding:0.3em 1.2em;
+    margin:0 0.1em 0.1em 0;
+    border:0.16em solid rgba(255,255,255,0);
+    border-radius:2em;
+    box-sizing: border-box;
+    text-decoration:none;
+    font-family:'Roboto',sans-serif;
+    font-weight:300;
+    color:#008080;
+    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
+    text-align:center;
+    transition: all 0.2s;
+    font-size: 1.25rem;
+    }
+
+a.button4:hover{
+    border-color: rgba(255,255,255,1);
+    }
+
+@media all and (max-width:30em){
+    a.button4{
+    display:block;   margin:0.2em auto;}
+
+
+};
+
+
+
+
diff --git a/templates/index.html b/templates/index.html
@@ -5,22 +5,78 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../static/styles.css">
-    <title>Predictions</title>
+    <title>Spotifynd</title>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet"> 
+
 </head>
-<body>
+<body style="background-color: #FDF4DC;">
+
+
 
 
     {% if displayForm %}
 
-        <form action="{{ url_for('predict')}}" method="post">
+        <h1 class="maintitle" style="font-family: 'Indie Flower', cursive;">
+            Welcome to Spotifynd!
+        </h1>
 
-            <label for="song_id">song_id:</label>
-            <input type="text" id="song_id" name="song_id" placeholder="song_id">
-
+        <br>
+        <br>
+        <br>
+        <br>
+
+        <p class="maindescription" style=" font-family: 'Courier Prime', monospace;">
+            Harness the power of machine learning and find new favorites! 
+            <br>
+            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. 
+            <br>
+            Just enter the spotify song ID of your favorite song, and <b>find new favorites</b> :)
+        </p>
+
+        <br>
+        <br>
+
+        <center>
+
+        <div class="container-fluid">
+            <div class="row main-content bg-success text-center">
+                <div class="col-md-4 text-center company__info">
+
+                    <h4 class="company_title">Spotifynd</h4>
+                </div>
+                <div class="col-md-8 col-xs-12 col-sm-12 login_form ">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <h2>Find Similar Songs</h2>
+                        </div>
+                        <div class="row">
+                            <form control="" class="form-group" action="{{ url_for('predict')}}" method="post">
+                                <div class="row">
+                                    <input type="text" name="song_id" id="song_id" class="form__input" placeholder="Song ID">
+                                </div>
+
+                                <div class="row">
+                                    <input type="submit" value="Submit" class="btn">
+                                </div>
+                            </form>
+                        </div>
 
-            <button type="submit">Get Songs!</button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-        </form>
+    </center>
 
     {% endif %}
 
@@ -36,8 +92,22 @@
     {% endfor %}
 
     {% if not displayForm %}
-        <a href="{{ url_for('predict')}}"> Try Again!</a>
+        <a href="{{ url_for('predict')}}" class="button4"> Try Again!</a>
     {% endif %}
+
 
+
+	<!-- Footer -->
+	<div class="container-fluid text-center footer">
+        Source code for this project lives <a href="https://github.com/absotone/spotifynd">here.</a></p>
+    </div>
+
+
 </body>
-</html>
+</html>
+
+
+
+
+
+