<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Uploading Made Easy</title>

    <meta property="twitter:title" content="uploader.live">
    <meta property="twitter:description" content="File Uploading Made Easy.">
    <meta name="theme-color" content="#2196F3">
</head>
<body>
    <div class="snow-container"></div>
    <div class="container glow-effect">
        <h1>uploader.live</h1>
        <div class="upload-box">
            <input type="file" id="fileInput" hidden>
            <label for="fileInput" class="file-input-label">
                <div class="upload-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="17 8 12 3 7 8"></polyline>
                        <line x1="12" y1="3" x2="12" y2="15"></line>
                    </svg>
                </div>
                <span class="upload-text">Choose a file or drag it here</span>
            </label>
            <div id="fileInfo" class="file-info"></div>
            <button id="uploadButton" class="upload-button" disabled>Upload</button>
        </div>
        <div id="statusMessage" class="status-message"></div>
        <div id="fileDetails" class="file-details-container">
            <div id="uploadLink" class="upload-link"></div>
            <button id="copyButton" class="copy-button" hidden>Copy Link</button>
        </div>
        <div id="repoSize" class="repo-size"></div>
    </div>
    <script src="src/uploader.js"></script>
    <script src="src/styles.js"></script>
</body>
</html>