Mobile Stat Guesser Website

Certainly! Below is a fully responsive mobile website built with HTML, CSS, and JavaScript. It features a beautiful design with animations, allows you to upload a picture, and then guesses stats like age, height, weight, muscle mass, and bench and squat 1RM. You can also convert these stats between kilograms and pounds.

HTML (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stat Guesser</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Link to external CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Welcome to Stat Guesser</h1>
        <p>Upload your picture to get started</p>
        <div class="upload-area">
            <input type="file" id="imageUpload" accept="image/*">
            <label for="imageUpload" class="upload-label">Choose Image</label>
        </div>
        <div class="result-area" id="resultArea">
            <!-- Results will be displayed here -->
        </div>
    </div>

    <!-- Link to external JavaScript -->
    <script src="script.js"></script>
</body>
</html>

CSS (`styles.css`)

/* General Styles */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    color: #fff;
}

.container {
    text-align: center;
    padding: 50px 20px;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    animation: fadeInDown 1s;
}

p {
    font-size: 1.2em;
    margin-bottom: 30px;
    animation: fadeInUp 1s;
}

/* Upload Area */
.upload-area {
    position: relative;
    display: inline-block;
}

#imageUpload {
    display: none;
}

.upload-label {
    background-color: #fff;
    color: #6a11cb;
    padding: 15px 30px;
    font-size: 1em;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.upload-label:hover {
    background-color: #f0f0f0;
}

/* Result Area */
.result-area {
    margin-top: 30px;
    animation: fadeIn 1s;
}

.result-area h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.result-area p {
    font-size: 1.2em;
    margin: 10px 0;
}

#convertBtn {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #fff;
    color: #6a11cb;
    border: none;
    border-radius: 25px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

#convertBtn:hover {
    background-color: #f0f0f0;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    } 
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    } 
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    } 
    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 600px) {
    h1 {
        font-size: 2em;
    }

    .upload-label, #convertBtn {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    p, .result-area p {
        font-size: 1em;
    }
}

JavaScript (`script.js`)

document.getElementById('imageUpload').addEventListener('change', function() {
    var file = this.files[0];

    if (file) {
        // Display loading animation or message
        var resultArea = document.getElementById('resultArea');
        resultArea.innerHTML = '<p>Processing...</p>';

        // Create a FormData object
        var formData = new FormData();
        formData.append('image', file);

        // Send the image to an API for analysis
        // Replace with actual API endpoint and include your API key securely
        fetch('https://api.example.com/analyze', {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer YOUR_API_KEY'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // Mock data for demonstration purposes
            // Remove the following block when integrating with a real API
            data = {
                age: 25,
                height: 180,       // in cm
                weight: 75,        // in kg
                muscleMass: 35,    // in kg
                bench1RM: 100,     // in kg
                squat1RM: 140      // in kg
            };

            // Process the response data
            var age = data.age;
            var height = data.height;
            var weight = data.weight;
            var muscleMass = data.muscleMass;
            var bench1RM = data.bench1RM;
            var squat1RM = data.squat1RM;

            // Initial unit
            var unit = 'metric';

            // Display the results
            displayResults(age, height, weight, muscleMass, bench1RM, squat1RM, unit);

        })
        .catch(error => {
            console.error('Error:', error);
            resultArea.innerHTML = '<p>Sorry, something went wrong. Please try again.</p>';
        });
    }
});

function displayResults(age, height, weight, muscleMass, bench1RM, squat1RM, unit) {
    var resultArea = document.getElementById('resultArea');
    resultArea.innerHTML = `
        <h2>Your Stats</h2>
        <p>Age: ${age} years</p>
        <p>Height: ${height} ${unit === 'metric' ? 'cm' : 'inches'}</p>
        <p>Weight: ${weight} ${unit === 'metric' ? 'kg' : 'lbs'}</p>
        <p>Muscle Mass: ${muscleMass} ${unit === 'metric' ? 'kg' : 'lbs'}</p>
        <p>Bench Press 1RM: ${bench1RM} ${unit === 'metric' ? 'kg' : 'lbs'}</p>
        <p>Squat 1RM: ${squat1RM} ${unit === 'metric' ? 'kg' : 'lbs'}</p>
        <button id="convertBtn">Convert to ${unit === 'metric' ? 'Imperial' : 'Metric'}</button>
    `;

    document.getElementById('convertBtn').addEventListener('click', function() {
        if (unit === 'metric') {
            height = (height / 2.54).toFixed(2); // cm to inches
            weight = (weight * 2.20462).toFixed(2);
            muscleMass = (muscleMass * 2.20462).toFixed(2);
            bench1RM = (bench1RM * 2.20462).toFixed(2);
            squat1RM = (squat1RM * 2.20462).toFixed(2);
            unit = 'imperial';
        } else {
            height = (height * 2.54).toFixed(2); // inches to cm
            weight = (weight / 2.20462).toFixed(2);
            muscleMass = (muscleMass / 2.20462).toFixed(2);
            bench1RM = (bench1RM / 2.20462).toFixed(2);
            squat1RM = (squat1RM / 2.20462).toFixed(2);
            unit = 'metric';
        }
        displayResults(age, height, weight, muscleMass, bench1RM, squat1RM, unit);
    });
}

Explanation

HTML: The structure includes a container with a title, a prompt to upload an image, and a result area where the stats will be displayed. The file input is hidden and styled with a label for better user experience.
CSS:
- General Styles: Sets up a gradient background, font styles, and colors.
- Upload Area: Styles the file input label to look like a button.
- Result Area: Styles the area where the stats will be displayed, including the convert button.
- Animations: Implements fade-in animations for a smoother user experience.
- Responsive Design: Adjusts text sizes and padding for smaller screens.
JavaScript:
- Event Listener: Watches for changes on the file input to trigger the upload process.
- FormData: Wraps the uploaded image file to send it to the API.
- Fetch API: Sends a POST request to the (placeholder) API endpoint.
- Mock Data: Uses mock data for demonstration; replace this when integrating with a real API.
- Display Results: A function to update the result area with the stats and handle unit conversion.
- Unit Conversion: Toggles between metric and imperial units, updating the displayed values accordingly.

Integration with an Image Analysis API

To make the stat guessing functional, you'll need to integrate with an actual image analysis API. Here are the steps:

Choose an API:
- Microsoft Azure Face API: Can estimate age and other facial attributes.
- Amazon Rekognition: Provides facial analysis features.
- Face++: Offers age estimation and more.
Sign Up and Obtain API Keys:
- Register with the chosen service to get your API key and endpoint.
Update the Fetch Request:
- Replace 'https://api.example.com/analyze' with the actual API endpoint.
- Include any required headers or parameters as specified by the API documentation.
Handle the Response:
- Parse the response to extract the required stats.
- Update the JavaScript code to use real data instead of mock data.
Secure Your API Key:
- For security, avoid exposing your API key in client-side code.
- Implement a backend server to make API requests securely if necessary.

Security Considerations

API Keys: Never expose your API keys in client-side JavaScript. Use environment variables on the server side or a proxy server to keep them secure.
HTTPS: Ensure your website is served over HTTPS to encrypt data transmission, especially when handling file uploads.

Enhancements

Error Handling: Improve error messages to guide the user in case something goes wrong.
Loading Indicator: Add a spinner or progress bar while the image is being processed.
Validation: Check the uploaded file type and size before sending it to the API.
Accessibility: Add ARIA labels and ensure the site is navigable via keyboard for better accessibility.

Conclusion

This code provides a foundation for your responsive mobile website with a beautiful design and animations. By integrating with an appropriate image analysis API, you'll be able to guess stats based on the uploaded picture. Remember to handle API keys securely and consider implementing a backend if necessary.

Feel free to customize the styles and functionalities to better suit your preferences!

Mobile Stat Guesser Website

Câu hỏi

Suy nghĩ

Trả lời

HTML (`index.html`)

CSS (`styles.css`)

JavaScript (`script.js`)

Explanation

Integration with an Image Analysis API

Security Considerations

Enhancements

Conclusion

Chia sẻ Q&A này

Câu hỏi

Suy nghĩ

Trả lời

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

Explanation

Integration with an Image Analysis API

Security Considerations

Enhancements

Conclusion

Chia sẻ Q&A này

HTML (`index.html`)

CSS (`styles.css`)

JavaScript (`script.js`)