<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ロードスクリーン画像募集フォーム</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }
    
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
    
        h1 {
            font-size: 2.5rem;
            color: #9c27b0;
            text-transform: uppercase;
            letter-spacing: 1px;
            background: radial-gradient(circle at 100%, #b2a8fd, #8678f9 50%, #c7d2fe 75%, #9a8dfd 75%);
            background-size: 200% auto;
            color: #000;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: animatedTextGradient 1.5s linear infinite;
        }
    
        .dropzone {
            border: 2px dashed #bbb;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            background-color: #1f1f1f;
            color: #bbb;
            margin-bottom: 20px;
            transition: 0.3s;
        }
    
        .dropzone:hover {
            border-color: #9c27b0;
            background-color: #333;
        }
    
        #previewImage {
            max-width: 100%;
            margin-top: 20px;
            border-radius: 12px;
            display: none;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
        }
    
        .input-container {
            margin-top: 30px;
            width: 100%;
        }
    
        label {
            display: block;
            margin: 10px 0 5px;
            color: #e0e0e0;
        }
    
        input[type="text"], input[type="url"], input[type="checkbox"] {
            width: 100%;
            padding: 12px;
            margin: 5px 0 20px;
            background-color: #333;
            color: #e0e0e0;
            border: 1px solid #444;
            border-radius: 6px;
            transition: 0.2s;
        }
    
        input[type="text"]:focus, input[type="url"]:focus {
            border-color: #9c27b0;
            outline: none;
        }
    
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            border: 2px solid #9c27b0;
            background-color: #121212;
            position: relative;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        
        input[type="checkbox"]:checked {
            background-color: #9c27b0;
            border-color: #9c27b0;
        }
        
        input[type="checkbox"]:checked::before {
            content: '✓';
            position: absolute;
            top: -2px;
            left: 3px;
            color: white;
            font-size: 16px;
        }
        
        label[for="agreement"] {
            color: #e0e0e0;
            font-size: 1rem;
            font-weight: normal;
        }
        .checkbox-container {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .checkbox-container label {
            margin-right: 10px;
        }

        .button-container {
            margin-top: 30px;
            width: 100%;
            text-align: center;
        }
    
        button {
            padding: 12px 24px;
            background-color: #9c27b0;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1.2rem;
            transition: 0.3s;
        }
    
        button:hover {
            background-color: #7b1fa2;
        }
    
        button:disabled {
            background-color: #777;
            cursor: not-allowed;
        }
    
        .image-info {
            margin-top: 20px;
            background-color: #333;
            padding: 15px;
            border-radius: 10px;
            width: 100%;
        }
    
        .chart-container {
            margin-top: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 600px;
            height: 250px;
        }
    
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            background-color: #1f1f1f;
            color: #bbb;
        }
    
        footer p {
            font-size: 1rem;
        }
    
        @keyframes animatedTextGradient {
            to {
                background-position: 200% center;
            }
        }
    
        .pic-background {
            background-image: var(--pic-image-data, none);
            background-size: cover;
            background-position: center;
        }
    
        .box {
            position: relative;
            padding: 4rem 1rem 1rem;
            background-color: #efefef;
            background-image: repeating-linear-gradient(45deg, #8678f9 0 5px, #333 5px 10px);
            background-position: top;
            background-size: 100% 2rem;
            background-repeat: no-repeat;
            margin-top: 20px;
        }
    
        .box::before {
            position: absolute;
            top: 1rem;
            left: 50%;
            padding: 0.5rem;
            transform: translateX(-50%);
            border-radius: 30px;
            background-color: #333;
            box-shadow: 0 0 5px black;
            color: #8678f9;
            text-align: center;
            text-transform: uppercase;
            font-weight: bold;
            content: attr(data-title);
        }
    
        .box p {
            color: #333;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>ロードスクリーン画像募集フォーム</h1>
        </div>

        <div class="dropzone" id="dropzone">
            <p>ここに画像をドラッグ＆ドロップ<br>またはクリックしてファイルを選択</p>
            <img id="previewImage" src="" alt="" hidden>
            <input type="file" id="fileInput" accept="image/*" style="display: none;">
        </div>

        <div class="box" data-title="警告">
            <p>不適切な画像やSNSリンクを投稿した場合、ゲームサーバーへのアクセス禁止やDiscordでのキック措置が取られることがあります。</p>
        </div>  

        <div class="input-container">
            <label for="username">投稿者名</label>
            <input type="text" id="username" name="username" placeholder="例: 山田太郎" required>

            <label for="sns">SNSリンク</label>
            <input type="url" id="sns" name="sns" placeholder="例: https://twitter.com/yourname">

            <div class="checkbox-container">
                <input type="checkbox" id="agreement" required>
                <label for="agreement">著作権を放棄することに同意します</label>
            </div>
        </div>

        <div class="button-container">
            <button id="changeImageButton" hidden>画像を変更</button>
            <button id="uploadButton" disabled>投稿</button>
        </div>      

        <div id="imageInfo" class="image-info">
            <p id="resolutionInfo"></p>
            <p id="ratioInfo"></p>
            <p id="sizeInfo"></p>
        </div>

        <div class="chart-container">
            <canvas id="sizeChart"></canvas>
        </div>

        <div id="message"></div>
    </div>

    <footer>
        <p>&copy; ロードスクリーン画像募集フォーム | Powered by 野澤組 for SGGTARP</p>
    </footer>

    <script>
        // 要素の取得
        const dropzone = document.getElementById('dropzone');
        const fileInput = document.getElementById('fileInput');
        const previewImage = document.getElementById('previewImage');
        const changeImageButton = document.getElementById('changeImageButton');
        const uploadButton = document.getElementById('uploadButton');
        const messageDiv = document.getElementById('message');
        const imageInfoDiv = document.getElementById('imageInfo');
        const resolutionInfo = document.getElementById('resolutionInfo');
        const ratioInfo = document.getElementById('ratioInfo');
        const sizeInfo = document.getElementById('sizeInfo');
        const sizeChart = document.getElementById('sizeChart').getContext('2d');

        let uploadedFile = null;

        // グラフの設定
        const chart = new Chart(sizeChart, {
            type: 'pie',  
            data: {
                labels: ['アップロードされた画像容量', '残り容量'],
                datasets: [{
                    data: [0, 30],
                    backgroundColor: ['#ff5733', '#cccccc'],
                    borderColor: ['#ff5733', '#cccccc'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                if (tooltipItem.label === 'アップロードされた画像容量') {
                                    return `容量: ${tooltipItem.raw.toFixed(2)} MB`;
                                }
                                return `残り容量: ${(30 - tooltipItem.raw).toFixed(2)} MB`;
                            }
                        }
                    }
                }
            }
        });

        // ドラッグ＆ドロップの動作
        dropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropzone.style.borderColor = '#03a9f4';
        });

        dropzone.addEventListener('dragleave', () => {
            dropzone.style.borderColor = '#555';
        });

        dropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropzone.style.borderColor = '#555';
            handleFile(e.dataTransfer.files[0]);
        });

        // クリックでファイル選択
        dropzone.addEventListener('click', () => {
            fileInput.click();
        });

        // ファイル選択時の処理
        fileInput.addEventListener('change', (e) => {
            handleFile(e.target.files[0]);
        });

        // 画像の変更ボタンの動作
        changeImageButton.addEventListener('click', () => {
            fileInput.click();
        });

// 画像を処理してプレビュー表示
function handleFile(file) {
    if (file && file.type.startsWith('image/')) {
        uploadedFile = file;
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImage.src = e.target.result;
            previewImage.style.display = 'block';  // ここで hidden を解除して表示
            changeImageButton.style.display = 'block';  // 画像変更ボタンを表示
            dropzone.querySelector('p').style.display = 'none';  // 文字を非表示に

            const img = new Image();
            img.onload = () => {
                const width = img.width;
                const height = img.height;
                const size = file.size / 1024 / 1024; // MB

                const isValidResolution = (width === 1280 && height === 720) || (width === 1920 && height === 1080);
                const isValidRatio = width / height === 16 / 9;
                const isValidSize = size <= 30;

                // 解像度、比率、容量の表示
                resolutionInfo.textContent = `解像度: ${width} x ${height} px (${isValidResolution ? '適正' : '不適正'})`;
                ratioInfo.textContent = `比率: ${width / height} (${isValidRatio ? '適正' : '不適正'})`;
                sizeInfo.textContent = `容量: ${size.toFixed(2)} MB (${isValidSize ? '適正' : '不適正'})`;

                // 容量制限のグラフ更新
                chart.data.datasets[0].data = [size];
                chart.update();

                // メッセージ
                if (isValidResolution && isValidRatio && isValidSize) {
                    uploadButton.disabled = false;
                    messageDiv.textContent = '';
                } else {
                    uploadButton.disabled = true;
                    messageDiv.textContent = '不適切な画像です。適正な解像度・比率・容量で再度アップロードしてください。';
                }
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    } else {
        alert('画像ファイルを選択してください');
    }
}


        // 投稿ボタンの動作
        uploadButton.addEventListener('click', async () => {
            const username = document.getElementById('username').value;
            const sns = document.getElementById('sns').value;
            const agreement = document.getElementById('agreement').checked;

            if (!uploadedFile) {
                alert('画像をアップロードしてください。');
                return;
            }

            if (!username || !sns || !agreement) {
                alert('すべての情報を入力し、同意してください。');
                return;
            }

            const formData = new FormData();
            formData.append('image', uploadedFile);
            formData.append('username', username);
            formData.append('sns', sns);

            try {
                const response = await fetch('http://localhost:5000/upload', {
                    method: 'POST',
                    body: formData,
                });
                const result = await response.json();
                messageDiv.textContent = result.message || 'アップロード成功';
            } catch (error) {
                console.error(error);
                messageDiv.textContent = 'エラーが発生しました。';
            }
        });
    </script>
</body>
</html>
