Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrades to UI, fixes to issues #62

Merged
merged 2 commits into from
Oct 19, 2023
Merged

upgrades to UI, fixes to issues #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab06212
ui upgrades and fixes
huygensCortex Oct 19, 2023
551073a
Merge branch 'master' of https://github.com/adipai/PopcornPicks into …
huygensCortex Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 25 additions & 21 deletions src/recommenderapp/static/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ $(document).ready(function () {
q: request.term,
},
success: function (data) {
//alert(data);
// console.log(data);
response(data);
},
error: function (jqXHR, textStatus, errorThrown) {
Expand Down Expand Up @@ -71,34 +69,45 @@ $(document).ready(function () {
success: function (response) {
var ulList = $("#predictedMovies");
var i = 0;
response["recommendations"].forEach((element) => {
var recommendations = response["recommendations"];
var imdbIds = response["imdb_id"]
for (var i = 0; i < recommendations.length; i++) {
var element = recommendations[i];
var imdbID = imdbIds[i]
var diventry = $("<div/>");
var fieldset = $("<fieldset/>", { id: i }).css("border", "0");
var link = $("<a/>").text("IMDb🔗").css({"text-decoration": "none"}).attr("href", "https://www.imdb.com/title/" + imdbID);
var li = $("<li/>").text(element);
var radios = $(`
<table class='table'>
<tr>
<table class='table predictTable'>
<tr>
<td class='radio-inline'>
<label><input type='radio' name="${i}" value='1'>Dislike</label>
<section id="pattern1">
<label style="--icon:'😍"><input type="radio" name="${i}" value='1' data-toggle="tooltip" data-placement="top" title="LIKE"></label><br />
</section>
</td>
<td class='radio-inline'>
<label><input type='radio' name="${i}" value='2'>Yet to watch</label>
<section id="pattern1">
<label style="--icon:'😐'"><input type="radio" name="${i}" value='2' data-toggle="tooltip" data-placement="top" title="YET TO WATCH"></label><br />
</section>
</td>
<td class='radio-inline'>
<label><input type='radio' name="${i}" value='3'>Like</label>
<section id="pattern1">
<label style="--icon:'😤'"><input type="radio" name="${i}" value='3' data-toggle="tooltip" data-placement="top" title="DISLIKE"></label><br />
</section>
</td>
</tr>
</tr>
</table>
`);
`);

diventry.append(li);
diventry.append(link);
diventry.append(radios);
fieldset.append(diventry);
ulList.append(fieldset);
i += 1;
});
}

$("#loader").attr("class", "d-none");
console.log("->", response["recommendations"]);
},
error: function (error) {
console.log("ERROR ->" + error);
Expand Down Expand Up @@ -175,10 +184,8 @@ $(document).ready(function () {
return; // Exit the function without making the AJAX call
}

console.log(data);
FeedbackData = data;
localStorage.setItem("fbData", JSON.stringify(data));
console.log(localStorage.getItem("fbData"));
$.ajax({
type: "POST",
url: "/feedback",
Expand All @@ -189,7 +196,6 @@ $(document).ready(function () {
data: JSON.stringify(data),
success: function (response) {
window.location.href = "/success";
console.log("Success");
},
error: function (error) {
console.log("ERROR ->" + error);
Expand All @@ -199,7 +205,7 @@ $(document).ready(function () {

$("#notifyButton").click(function () {
var data = JSON.parse(localStorage.getItem("fbData"));

$("#loaderSuccess").attr("class", "d-flex justify-content-center");
if (!data) {
alert("No feedback data found. Please provide feedback.");
return;
Expand All @@ -220,16 +226,14 @@ $(document).ready(function () {
cache: false,
data: JSON.stringify(data),
success: function (response) {
// localStorage.removeItem("fbData");
$("#loaderSuccess").attr("class", "d-none");
$("#emailSentSuccess").show();
// Hide the success message after 5 seconds (5000 milliseconds)
setTimeout(function () {
$("#emailSentSuccess").fadeOut("slow");
}, 2000);
console.log("Email sent successfully!")
console.log(response);
},
error: function (error) {
$("#loaderSuccess").attr("class", "d-none");
console.log("ERROR ->" + error);
localStorage.removeItem("fbData");
},
Expand Down
131 changes: 124 additions & 7 deletions src/recommenderapp/static/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

.landing-page {
background-image: url("image.jpg");
background-size: cover;
Expand All @@ -16,16 +15,106 @@
height: 4.5rem;
margin: auto;
display: flex;
align-items: center;
align-items: center;
flex-direction: column;
}

body {
background-image: url("image.jpg");
background-image: url("image.jpg") !important;
background-size: cover;
color: azure !important;
}


:root {
--borderSize: 0.5vw;
--baseSize: 5rem;
--icon: "🙂";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
margin: 25px 0;
}
section {
position: relative;
display: inline-block;
text-align: left;
vertical-align: top;
}
input,
input::before,
#pattern1 label {
position: relative;
display: inline-block;
margin-bottom: 2vw;
font-size: 1.5vw;
line-height: var(--baseSize);
cursor: pointer;
}
#pattern1 input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: var(--baseSize);
height: var(--baseSize);
font-size: var(--baseSize);
line-height: var(--baseSize);
vertical-align: top;
margin-right: 2vw;
background-color: #fff;
color: coral;
border: var(--borderSize) solid gray;
border-radius: 50%;
transition: border-color 0.3s;
}

.predictTable > tbody,
td,
tfoot,
th,
thead,
tr {
border-style: none !important;
}

#predictedMovies {
font-size: 18px;
}

#pattern1 input::before {
font-family: "Noto Emoji", sans-serif;
display: inline-block;
text-align: center;
position: absolute;
top: calc(-0.7 * var(--borderSize));
left: calc(-0.9 * var(--baseSize) * 0.2 - var(--borderSize));
width: var(--baseSize);
height: var(--baseSize);
font-size: var(--baseSize);
line-height: var(--baseSize);
content: var(--icon);
opacity: 0;
transition: opacity 0.3s;
}

#pattern1 input:checked {
border-color: transparent;
}

#pattern1 input:checked::before {
opacity: 1;
}

#pattern1 label:has(input:checked)::before {
opacity: 1;
font-size: min(80vh, 80vw);
}

.topNavBar {
width: 100%;
position: fixed;
Expand Down Expand Up @@ -106,13 +195,13 @@ body {
.c-formContainer,
.c-form,
.c-form__toggle {
width: 10rem;
height: 3rem;
width: 30rem;
height: 4rem;
}

.c-formContainer {
position: relative;
font-weight: 700;
font-weight: 900;
}

.c-form,
Expand Down Expand Up @@ -144,7 +233,7 @@ body {
justify-content: center;

&::before {
font-size: 1rem;
font-size: 1.5rem;
content: attr(data-title);
}
}
Expand All @@ -168,6 +257,7 @@ body {
}

.c-form__input {
cursor: auto;
color: your-pink;
height: 100%;
width: 100%;
Expand Down Expand Up @@ -211,3 +301,30 @@ body {
width: 5em;
background-color: #d00c18;
}

.feedbackDiv {
margin-bottom: 3rem;
}

#dataCollected {
.hLast {
font-size: 4rem;
text-align-last: center
}
.attemptBtn {
display: block;
margin: auto;
font-size: large;
padding: 13px;
background-color: white;
color: #d00c18;
font-weight: 600;
border: none;
border-radius: 25px;
}
}

.notifyDivs {
display: flex;
justify-content: center;
}
2 changes: 1 addition & 1 deletion src/recommenderapp/templates/search_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h2>Recommended Movies:</h2>
</form>
</div>
</div>
<div class="row">
<div class="row feedbackDiv">
<div class="col-md-12">
<!-- Feedback button (modal) -->
<input type="button" class="btn btn-primary" name="feedback" data-toggle="modal" id="feedback" value="Give Feedback" data-target="#exampleModalCenter">
Expand Down
70 changes: 41 additions & 29 deletions src/recommenderapp/templates/success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,41 +29,53 @@
</head>

<body>
<div id="dataCollected">
<div class="d-none" id="loaderSuccess">
<div class="spinner-border" role="status">
<span class="sr-only"></span>
</div>
</div>
<h1 class="hLast">Have your watchlist sent to your email!</h1>
<br/>
<div class="notifyDivs">
<input class="c-checkbox" type="checkbox" id="checkbox" />
<div class="c-formContainer" id="formContainer">
<form class="c-form" action="">
<input
class="c-form__input"
placeholder="E-mail"
type="text"
id="emailField"
required
/>
<label class="c-form__buttonLabel" for="checkbox">
<button class="c-form__button" type="button" id="notifyButton">
Send
</button>
</label>
<label
class="c-form__toggle"
for="checkbox"
data-title="Notify me"
></label>
</form>
</div>
</div>
<br /><br />
<div class="d-flex justify-content-center">
<h1>
Or
</h1>
</div>
<br /><br />
<div id="dataCollected" style="width: 600px; margin: auto">
<h1>Thanks!! Your response was stored.</h1>
<input
<input
type="button"
id="refreshPage"
class="btn btn-danger"
class="btn btn-danger attemptBtn"
name="refreshPage"
value="Take another attempt"
/>
</div>
<br /><br />
<div>
<input class="c-checkbox" type="checkbox" id="checkbox" />
<div class="c-formContainer" id="formContainer">
<form class="c-form" action="">
<input
class="c-form__input"
placeholder="E-mail"
type="text"
id="emailField"
required
/>
<label class="c-form__buttonLabel" for="checkbox">
<button class="c-form__button" type="button" id="notifyButton">
Send
</button>
</label>
<label
class="c-form__toggle"
for="checkbox"
data-title="Notify me"
></label>
</form>
</div>

</div>

<!-- Add the "Email sent successfully!" message here -->
Expand Down
Loading