Supprimer z2/app.py
This commit is contained in:
parent
870c425c5f
commit
19c3830bb2
314
z2/app.py
314
z2/app.py
@ -1,314 +0,0 @@
|
||||
from flask import Flask, render_template_string
|
||||
import math
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
# Calculate PI to 300 decimal places
|
||||
# Since math.pi doesn't provide that many digits, we're using a string representation
|
||||
# that includes the first 300 decimal places of PI
|
||||
pi_digits = "3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091456485669234603486104543266482133936072602491412737245870066063155881748815209209628292540917153643678925903600113305305488204665213841469519415116094330572703657595919530921861173819326117931051185480744623799627495673518857527248912279381830119491298336733624406566430860213949463952247371907021798609437027705392171762931767523846748184676694051320005681271452635608277857713427577896091736371787214684409012249534301465495853710507922796892589235420199561121290219608640344181598136297747713099605187072113499999983729780499510597317328160963185950244594553469083026425223082533446850352619311881710100031378387528865875332083814206171776691473035982534904287554687311595628638823537875937519577818577805321712268066130019278766111959092164201989"
|
||||
|
||||
# HTML template with embedded CSS and JavaScript
|
||||
html_template = """
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PI Digits Visualization</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e, #16213e);
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #4cc9f0;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.pi-display {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 2px;
|
||||
margin: 20px 0;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.digit {
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.digit.visible {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.decimal {
|
||||
color: #f72585;
|
||||
font-weight: bold;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4361ee;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 25px;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #4cc9f0;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.speed-control {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.speed-label {
|
||||
margin-bottom: 10px;
|
||||
color: #4cc9f0;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 30px;
|
||||
font-size: 1rem;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-size: 1.2rem;
|
||||
color: #4cc9f0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pi-display {
|
||||
font-size: 1.5rem;
|
||||
max-height: 200px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>PI Digits Visualization</h1>
|
||||
|
||||
<div class="pi-display" id="pi-display"></div>
|
||||
|
||||
<div class="counter">Digits displayed: <span id="counter">0</span> / 1002 </div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="start-btn">Start</button>
|
||||
<button id="pause-btn">Pause</button>
|
||||
<button id="reset-btn">Reset</button>
|
||||
<button id="speed-up-btn">Speed Up</button>
|
||||
<button id="slow-down-btn">Slow Down</button>
|
||||
</div>
|
||||
|
||||
<div class="speed-control">
|
||||
<div class="speed-label">Current speed: <span id="speed-value">0.5</span> seconds per digit</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>PI digits are displayed one by one with a unique color for each digit.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// First 300 decimal places of PI
|
||||
const PI_DIGITS = "{{ pi_digits }}";
|
||||
let currentIndex = 0;
|
||||
let animationInterval;
|
||||
let isPlaying = false;
|
||||
let displaySpeed = 500; // milliseconds (0.5 seconds)
|
||||
|
||||
const piDisplay = document.getElementById('pi-display');
|
||||
const counter = document.getElementById('counter');
|
||||
const startBtn = document.getElementById('start-btn');
|
||||
const pauseBtn = document.getElementById('pause-btn');
|
||||
const resetBtn = document.getElementById('reset-btn');
|
||||
const speedUpBtn = document.getElementById('speed-up-btn');
|
||||
const slowDownBtn = document.getElementById('slow-down-btn');
|
||||
const speedValue = document.getElementById('speed-value');
|
||||
|
||||
// Generate a random color from a predefined palette
|
||||
function getRandomColor() {
|
||||
const colors = [
|
||||
'#f72585', '#b5179e', '#7209b7', '#560bad',
|
||||
'#480ca8', '#3a0ca3', '#3f37c9', '#4361ee',
|
||||
'#4895ef', '#4cc9f0', '#80ffdb', '#72efdd',
|
||||
'#64dfdf', '#56cfe1', '#48bfe3', '#4ea8de'
|
||||
];
|
||||
return colors[Math.floor(Math.random() * colors.length)];
|
||||
}
|
||||
|
||||
// Add a digit to the display
|
||||
function addDigit() {
|
||||
if (currentIndex < PI_DIGITS.length) {
|
||||
const digit = PI_DIGITS[currentIndex];
|
||||
const digitElement = document.createElement('span');
|
||||
|
||||
digitElement.textContent = digit;
|
||||
digitElement.className = 'digit';
|
||||
if (digit === '.') {
|
||||
digitElement.classList.add('decimal');
|
||||
} else {
|
||||
digitElement.style.color = getRandomColor();
|
||||
}
|
||||
|
||||
piDisplay.appendChild(digitElement);
|
||||
|
||||
// Appearance animation
|
||||
setTimeout(() => {
|
||||
digitElement.classList.add('visible');
|
||||
}, 50);
|
||||
|
||||
currentIndex++;
|
||||
counter.textContent = currentIndex;
|
||||
|
||||
// Auto-scroll to show the latest digits
|
||||
piDisplay.scrollTop = piDisplay.scrollHeight;
|
||||
|
||||
// Auto-stop at the end
|
||||
if (currentIndex >= PI_DIGITS.length) {
|
||||
clearInterval(animationInterval);
|
||||
isPlaying = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Start the animation
|
||||
function startAnimation() {
|
||||
if (!isPlaying && currentIndex < PI_DIGITS.length) {
|
||||
animationInterval = setInterval(addDigit, displaySpeed);
|
||||
isPlaying = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Pause
|
||||
function pauseAnimation() {
|
||||
clearInterval(animationInterval);
|
||||
isPlaying = false;
|
||||
}
|
||||
|
||||
// Reset
|
||||
function resetAnimation() {
|
||||
pauseAnimation();
|
||||
piDisplay.innerHTML = '';
|
||||
currentIndex = 0;
|
||||
counter.textContent = '0';
|
||||
}
|
||||
|
||||
// Speed up the animation
|
||||
function speedUp() {
|
||||
if (displaySpeed > 100) {
|
||||
displaySpeed -= 100;
|
||||
updateSpeed();
|
||||
if (isPlaying) {
|
||||
pauseAnimation();
|
||||
startAnimation();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Slow down the animation
|
||||
function slowDown() {
|
||||
if (displaySpeed < 2000) {
|
||||
displaySpeed += 100;
|
||||
updateSpeed();
|
||||
if (isPlaying) {
|
||||
pauseAnimation();
|
||||
startAnimation();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update the speed display
|
||||
function updateSpeed() {
|
||||
speedValue.textContent = (displaySpeed / 1000).toFixed(1);
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
startBtn.addEventListener('click', startAnimation);
|
||||
pauseBtn.addEventListener('click', pauseAnimation);
|
||||
resetBtn.addEventListener('click', resetAnimation);
|
||||
speedUpBtn.addEventListener('click', speedUp);
|
||||
slowDownBtn.addEventListener('click', slowDown);
|
||||
|
||||
// Add the first two digits automatically
|
||||
addDigit(); // Adds "3"
|
||||
addDigit(); // Adds "."
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
|
||||
return render_template_string(html_template, pi_digits=pi_digits)
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(host='0.0.0.0', port=5000, debug=True)
|
||||
Loading…
Reference in New Issue
Block a user