i have a folder which contains server.py a templates folder with index.html and a js folder with script.js server.py:
from flask import Flask, render_template
import random
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run()
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sparkle Trail and Dust Cursor</title>
</head>
<body>
<h1>Sparkle Trail and Dust Cursor</h1>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>
script.js can be found here: https://codepen.io/sarahwfox/pen/pNrYGb its too long probably but yeah im trying to have this effect but it either doesnt show anything or it shows the trail following the cursor but not the + sparkles
I don't think it's python/flask related, as I was having the same issue as you describe with basic html page and inline css and javascript. It's also not the javascript. It's a sneaky styling issue.
Your page will not take up any vertical space by default. You need to set the style property height: 100vh in the body of your html page either inline (<body style="height: 100vh">) or with css (body { height: 100vh; }).
This is what's stopping your animation, and it's also why this is a confusing bug to sort out. You could copy codepen exactly, including the css, but the site still includes some hidden formatting just to save space for the rendered page, and in this case it made all the difference.