Magic 8 Ball

App Script 👇

from flask import Flask, request, render_template_string

import random

app = Flask(__name__)

app.secret_key = 'your_secret_key_here'

# Magic 8-Ball responses

ANSWERS = [

   "Yes, definitely!", "No way!", "Ask again later.", "Maybe, maybe not.",

   "It is certain.", "Don’t count on it.", "Signs point to yes.", "Very doubtful."

]

@app.route('/', methods=['GET', 'POST'])

def magic_8_ball():

   answer = None

   if request.method == 'POST':

       question = request.form.get('question')

       if question:

           answer = random.choice(ANSWERS)

   template = '''

   <!DOCTYPE html>

   <html>

   <head>

       <title>Magic 8-Ball</title>

       <style>

           body { background: #1a1a2e; color: #e94560; font-family: Arial, sans-serif;

                 display: flex; flex-direction: column; align-items: center;

                 min-height: 100vh; margin: 0; }

           .container { text-align: center; margin-top: 50px; }

           .ball { width: 200px; height: 200px; background: #16213e;

                  border-radius: 50%; margin: 20px auto; position: relative;

                  box-shadow: 0 0 20px rgba(233, 69, 96, 0.5); }

           .answer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

                    color: #fff; font-size: 20px; font-weight: bold; opacity: 0;

                    transition: opacity 0.5s; }

           .answer.visible { opacity: 1; }

           .shake { animation: shake 0.5s ease-in-out; }

           @keyframes shake {

               0%, 100% { transform: translateX(0); }

               25% { transform: translateX(-10px); }

               75% { transform: translateX(10px); }

           }

           input[type="text"] { padding: 10px; width: 250px; border-radius: 5px;

                               font-size: 16px; margin: 10px 0; }

           button { padding: 10px 20px; background: #e94560; color: #fff;

                   border: none; border-radius: 5px; cursor: pointer;

                   box-shadow: 0 4px #b33a4d; transition: all 0.2s; }

           button:hover { background: #ff6b81; }

           button:active { transform: translateY(4px); box-shadow: none; }

       </style>

   </head>

   <body>

       <div class="container">

           <h1>Magic 8-Ball</h1>

           <form method="post">

               <input type="text" name="question" placeholder="Ask a yes/no question" required>

               <button type="submit" onclick="shakeBall()">Shake It!</button>

           </form>

           <div class="ball" id="ball">

               {% if answer %}

               <div class="answer visible" id="answer">{{ answer }}</div>

               {% endif %}

           </div>

       </div>

       <script>

           function shakeBall() {

               const ball = document.getElementById('ball');

               ball.classList.add('shake');

               setTimeout(() => ball.classList.remove('shake'), 500);

           }

       </script>

   </body>

   </html>

   '''

   return render_template_string(template, answer=answer)

if __name__ == '__main__':

   app.run(debug=True)