nathanwoodburn/spotifyd-webui
1
0
Fork 0
generated from nathanwoodburn/python-webserver-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add initial spotify restart app
All checks were successful
Build Docker / BuildImage (push) Successful in 2m10s
Details

Browse Source
This commit is contained in:
Nathan Woodburn
2025-07-08 22:49:53 +10:00
parent 9cf1ff4126
commit 43c0f83b57
3 changed files with 37 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
templates/assets/css/index.css
View File

@@ -38,4 +38,20 @@ a:hover {
.mike-section p {
line-height: 1.6;
margin-bottom: 15px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #ffffff;
color: #000000;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
border: 1px solid #ffffff;
}
.button:hover {
background-color: #000000;
color: #ffffff;
border: 1px solid #ffffff;
}

43
templates/index.html
View File

@@ -12,49 +12,12 @@
<body>
<div class="spacer"></div>
<div class="centre">
<h1>Nathan.Woodburn/</h1>
<span>The current date and time is {{datetime}}</span>
<h1>Spotify Player</h1>
<a href="/restart" class="button">Restart</a>
</div>
<div class="spacer"></div>
<div class="centre">
<h2 id="test-content-header">Pulling data</h2>
<span class="test-content">This is a test content area that will be updated with data from the server.</span>
<br>
<br>
<span class="test-content-timestamp">Timestamp: Waiting to pull data</span>
</div>
<script>
function fetchData() {
// Fetch the data from the server
fetch('/api/v1/data')
.then(response => response.json())
.then(data => {
// Get the data header element
const dataHeader = document.getElementById('test-content-header');
// Update the header with the fetched data
dataHeader.textContent = data.header;
// Get the test content element
const testContent = document.querySelector('.test-content');
// Update the content with the fetched data
testContent.textContent = data.content;
// Get the timestamp element
const timestampElement = document.querySelector('.test-content-timestamp');
// Update the timestamp with the fetched data
timestampElement.textContent = `Timestamp: ${data.timestamp}`;
})
.catch(error => console.error('Error fetching data:', error));
}
// Initial fetch after 2 seconds
setTimeout(fetchData, 2000);
// Then fetch every 2 seconds
setInterval(fetchData, 2000);
</script>
</body>
</html>