felixmielcarek
2 weeks ago
parent
9b71768423
commit
004672e71d
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../../common.css">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/x-icon" href="../../resources/fm-logo.png">
|
||||
<title>Big Brother</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
function activation() {
|
||||
if(activationState) {
|
||||
var button = document.createElement('button');
|
||||
button.textContent = 'Deactivate';
|
||||
button.id = 'logButton';
|
||||
button.className = 'activate-button';
|
||||
document.getElementById('bb-content').appendChild(button);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var redirectButton = document.getElementById("logButton");
|
||||
|
||||
redirectButton.addEventListener("click", function() {
|
||||
const params = {
|
||||
code: urlParams.get('code'),
|
||||
state: urlParams.get('state')
|
||||
};
|
||||
const options = {
|
||||
method: 'POST',
|
||||
body: JSON.stringify( params )
|
||||
};
|
||||
fetch('https://codefirst.iut.uca.fr/containers/felixmielcarek-bigbrotherwebapp/settings/deactivate', options )
|
||||
|
||||
const queryUrl = new URL("https://felixmielcarek.github.io/big-brother/");
|
||||
window.location.href = queryUrl.href;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="main-content">
|
||||
<div class="top-content">
|
||||
<div class="top-text">
|
||||
<div class="top-title">Big Brother</div>
|
||||
<div class="top-description">Never forget again a good album with your Big Brother !</div>
|
||||
</div>
|
||||
|
||||
<a href="../">
|
||||
<img class="top-logo" src="../../resources/fm-logo.png"/>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="bb-content" class="bb-content">
|
||||
<div>
|
||||
<div>If you have liked at least 60% of the track of an album:</div>
|
||||
<div>
|
||||
<ol>
|
||||
<li>add the album to your library</li>
|
||||
<li>removes the tracks from your Liked Songs playlist</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activated-status">
|
||||
<script>
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
let activationState = false;
|
||||
|
||||
if(urlParams.has('error')) {
|
||||
console.log('Error: ' + urlParams.get('error'));
|
||||
document.write('Activation error');
|
||||
}
|
||||
else {
|
||||
const localState = localStorage.getItem("bigbrother-state") ?? "";
|
||||
if(localState.localeCompare(urlParams.get('state')) !=0 ) {
|
||||
console.log('Spotify state error');
|
||||
document.write('Activation error');
|
||||
}
|
||||
else {
|
||||
let activationState = true;
|
||||
document.write('Activated');
|
||||
|
||||
const params = {
|
||||
code: urlParams.get('code'),
|
||||
state: urlParams.get('state')
|
||||
};
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify( params )
|
||||
};
|
||||
fetch('https://codefirst.iut.uca.fr/containers/felixmielcarek-bigbrotherserver/', options )
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok ' + response.statusText);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was a problem with the fetch operation:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
activation();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="me">Me.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/x-icon" href="./resources/fm-logo.png">
|
||||
<title>Big Brother</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-content">
|
||||
<div class="top-content">
|
||||
<div class="top-text">
|
||||
<div class="top-title">Big Brother</div>
|
||||
<div class="top-description">Never forget again a good album with your Big Brother !</div>
|
||||
</div>
|
||||
|
||||
<img class="top-logo" src="./resources/fm-logo.png"/>
|
||||
</div>
|
||||
|
||||
<div class="bb-content">
|
||||
<div>
|
||||
<div>If you have liked at least 60% of the track of an album:</div>
|
||||
<div>
|
||||
<ol>
|
||||
<li>add the album to your library</li>
|
||||
<li>removes the tracks from your Liked Songs playlist</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<button id="logButton" class="activate-button">Activate</button>
|
||||
|
||||
<script>
|
||||
function generateRandomString(length) {
|
||||
const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
let randomString = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * charset.length);
|
||||
randomString += charset[randomIndex];
|
||||
}
|
||||
return randomString;
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var redirectButton = document.getElementById("logButton");
|
||||
|
||||
redirectButton.addEventListener("click", function() {
|
||||
const state = generateRandomString(16);
|
||||
const queryUrl = new URL("https://accounts.spotify.com/authorize");
|
||||
queryUrl.searchParams.append("response_type", "code");
|
||||
queryUrl.searchParams.append("state", state);
|
||||
queryUrl.searchParams.append("client_id", "5ec7f30903414033a3381995754da3e8");
|
||||
queryUrl.searchParams.append("scope", "user-read-private user-read-email user-library-read user-library-modify");
|
||||
queryUrl.searchParams.append("redirect_uri", "big-brother-two.vercel.app:3000/callback");
|
||||
|
||||
localStorage.setItem("bigbrother-state", state);
|
||||
|
||||
window.location.href = queryUrl.href;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="me">Me.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,101 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
|
||||
|
||||
html, body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
min-height: 100vh;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
background-color: #0d0d0d;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.me {
|
||||
margin: auto;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 100px;
|
||||
width: 80%;
|
||||
margin-inline: auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
font-size: 40px;
|
||||
margin-block: 20px;
|
||||
}
|
||||
|
||||
.top-description {
|
||||
font-size: 20px;
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
.top-logo {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.bb-content {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.activate-button {
|
||||
color: inherit;
|
||||
border: none;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
margin-top: 40px;
|
||||
padding-inline: 20px;
|
||||
padding-block: 10px;
|
||||
background-color: #1db954;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.activate-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activated-status {
|
||||
margin-top: 40px;
|
||||
padding-inline: 20px;
|
||||
padding-block: 10px;
|
||||
background-color: #0d0d0d;
|
||||
border-radius: 40px;
|
||||
}
|
||||
Loading…
Reference in new issue