added to home page

This commit is contained in:
aj 2020-02-28 21:13:30 +00:00
parent d6e0bb9cf8
commit 8db6bebcb9
8 changed files with 76 additions and 25 deletions

View File

@ -23,13 +23,10 @@
</div> </div>
<br><br> <br><br>
<ul class="navbar"> <ul class="navbar">
<li><a href="/">home</a></li> <li><a href="/">Home</a></li>
<li><a href="https://sarsoo.xyz">sarsoo.xyz</a></li> <li><a href="https://sarsoo.xyz">Sarsoo.xyz</a></li>
</ul> </ul>
{% block content %}{% endblock %} {% block content %}{% endblock %}
<footer>
<a href="https://github.com/Sarsoo/spotify-web">view source code</a>
</footer>
</body> </body>
</html> </html>

View File

@ -16,12 +16,20 @@
<div class="row"> <div class="row">
<div class="{% if logged_in %}pad-12{% else %}pad-9{% endif %} card"> <div class="{% if logged_in %}pad-12{% else %}pad-9{% endif %} card">
<h1>music tools</h1> <h1 class="center-text">Music Tools</h1>
<p class="center-text">create "super-playlists" of smaller modular playlists</p> <p class="center-text">A set of tools using Spotify and Last.fm to create smart playlists and calculate listening statistics</p>
<p class="center-text">Playlists are updated multiple times a day to keep tracks up to date</p>
<p class="center-text">Written in Python and Javascript, based on the <a href="https://github.com/Sarsoo/spotframework">spotframework</a> and <a href="https://github.com/Sarsoo/pyfmframework">fmframework</a> libraries</p>
<div style="padding:10px">
<a class="button" style="padding:15px;width:49%" href="https://github.com/Sarsoo/Music-Tools">View Source</a>
<a class="button" style="padding:15px;width:49%" href="https://github.com/Sarsoo/Music-Tools-iOS">iOS Client Source</a>
</div>
{% if logged_in %} {% if logged_in %}
<a class="button full-width" href="/app">launch</a> <a class="button full-width" href="/app">Launch</a>
{% endif %} {% endif %}
</div> </div>
@ -31,4 +39,48 @@
{% endif %} {% endif %}
</div> </div>
<div class="row">
<h1>Smart Playlists</h1>
</div>
<div class="row center-text">
<div class="pad-6 card">
<h1 class="center-text">Sources</h1>
<p>Create smart Spotify playlists pulling tracks from</p>
<ul style="text-align:left" >
<li style="padding:10px">Spotify Playlists</li>
<li style="padding:10px">Spotify Library Tracks</li>
<li style="padding:10px">Music Tools Playlists</li>
</ul>
</div>
<div class="pad-6 card">
<h1 class="center-text">Currents</h1>
<p>Currents are mix playlists acting as the a snapshot of what you've been listening to recently</p>
<p>Include date filtering on playlist sources for recently added tracks</p>
<p>Optionally search for and include "monthly" playlists for the last two months when named e.g february 20</p>
</div>
</div>
<div class="row center-text">
<div class="pad-6 card">
<h1 class="center-text">Last.fm Charts</h1>
<p>Create playlists including Last.fm track charts of varying length and time range</p>
</div>
<div class="pad-6 card">
<h1 class="center-text">Recommendations</h1>
<p>Include Spotify recommendations based on the other tracks</p>
</div>
</div>
<div class="row">
<h1>Tags</h1>
</div>
<div class="row center-text">
<div class="pad-6 card">
<h1 class="center-text">Last.fm Integration</h1>
<p>Create groups of entries for scrobble summing and listening stats</p>
</div>
<div class="pad-6 card">
<h1 class="center-text">Visualise Data</h1>
<p>Present listening trends with pie charts</p>
</div>
</div>
{% endblock %} {% endblock %}

View File

@ -3,16 +3,14 @@
{% block form %} {% block form %}
<div class="pad-3 card"> <div class="pad-3 card">
<h1 class="sectiontitle">login</h1>
<form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()"> <form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()">
<p class="center-text">username<br><input type="text" name="username" class="full-width"></p> <p class="center-text">Username<br><input type="text" name="username" class="full-width"></p>
<p class="center-text">password<br><input type="password" name="password" class="full-width"></p> <p class="center-text">Password<br><input type="password" name="password" class="full-width"></p>
<p id="status" style="display: none; color: red" class="center-text"></p> <p id="status" style="display: none; color: red" class="center-text"></p>
<button class="button full-width" onclick="handleLogin()" type="submit">go</button> <button class="button full-width" onclick="handleLogin()" type="submit">Login</button>
<br><br> <br><br>
<a href="/auth/register" class="button full-width">register</a> <a href="/auth/register" class="button full-width">Register</a>
</form> </form>
<script src="{{ url_for('static', filename='js/login.bundle.js') }}"></script> <script src="{{ url_for('static', filename='js/login.bundle.js') }}"></script>

View File

@ -3,15 +3,13 @@
{% block form %} {% block form %}
<div class="pad-3 card"> <div class="pad-3 card">
<h1 class="sectiontitle">register</h1>
<form name="register" action="/auth/register" method="POST" onsubmit="return handleRegister()"> <form name="register" action="/auth/register" method="POST" onsubmit="return handleRegister()">
<p class="center-text">username<br><input type="text" name="username" class="full-width"></p> <p class="center-text">Username<br><input type="text" name="username" class="full-width"></p>
<p class="center-text">password<br><input type="password" name="password" class="full-width"></p> <p class="center-text">Password<br><input type="password" name="password" class="full-width"></p>
<p class="center-text">password again<br><input type="password" name="password_again" class="full-width"></p> <p class="center-text">Password again<br><input type="password" name="password_again" class="full-width"></p>
<p id="status" style="display: none; color: red" class="center-text"></p> <p id="status" style="display: none; color: red" class="center-text"></p>
<button class="button full-width" onclick="handleRegister()" type="submit">register</button> <button class="button full-width" onclick="handleRegister()" type="submit">Register</button>
</form> </form>
<script src="{{ url_for('static', filename='js/register.bundle.js') }}"></script> <script src="{{ url_for('static', filename='js/register.bundle.js') }}"></script>

View File

@ -137,7 +137,7 @@ class MusicTools extends Component {
<ListItemText primary="Admin" /> <ListItemText primary="Admin" />
</ListItem> </ListItem>
} }
<ListItem button key="logout" component={Link} to='/auth/logout'> <ListItem button key="logout" onClick={(e) => { window.location.href = '/auth/logout' }}>
<ListItemIcon><KeyboardBackspace /></ListItemIcon> <ListItemIcon><KeyboardBackspace /></ListItemIcon>
<ListItemText primary="Logout" /> <ListItemText primary="Logout" />
</ListItem> </ListItem>

View File

@ -26,12 +26,17 @@ class NewPlaylist extends Component {
switch(value){ switch(value){
case 'default': case 'default':
this.setState({ this.setState({
description: 'Merge playlists as-is with deduplication by spotify id' description: 'Merge playlists as-is with deduplication by Spotify id'
}) })
break; break;
case 'recents': case 'recents':
this.setState({ this.setState({
description: "Select songs from playlists which have been added since a variable number of days" description: "Filter added playlists for recently added tracks, optionally add monthly playlists"
})
break;
case 'fmchart':
this.setState({
description: "Include Last.fm track chart data with varying time ranges"
}) })
break; break;
} }
@ -104,7 +109,7 @@ class NewPlaylist extends Component {
className="full-width" className="full-width"
> >
<option value="default">Default</option> <option value="default">Default</option>
<option value="recents">Recents</option> <option value="recents">Currents</option>
<option value="fmchart">Last.fm Chart</option> <option value="fmchart">Last.fm Chart</option>
</Select> </Select>
</FormControl> </FormControl>

View File

@ -560,7 +560,7 @@ export class Edit extends Component{
}} }}
> >
<MenuItem value="default">Default</MenuItem> <MenuItem value="default">Default</MenuItem>
<MenuItem value="recents">Recents</MenuItem> <MenuItem value="recents">Currents</MenuItem>
<MenuItem value="fmchart">Last.fm Chart</MenuItem> <MenuItem value="fmchart">Last.fm Chart</MenuItem>
</Select> </Select>
</FormControl> </FormControl>

View File

@ -14,6 +14,7 @@ $pad-px: 20px;
html { html {
font-family: $font-stack; font-family: $font-stack;
color: $text-colour;
} }
body { body {