Spaces:

iammrrobot420
/

anycoder-81c99c8f

Running

App Files Files Community

iammrrobot420 commited on Dec 15, 2025

Commit

42a4769

verified ·

1 Parent(s): b7e05ef

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +262 -686

index.html CHANGED Viewed

@@ -3,774 +3,350 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Brutally Honest Ratings</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
-        :root {
-            --primary: #ff3366;
-            --secondary: #ff66a3;
-            --dark: #1a1a2e;
-            --darker: #0f0f1a;
-            --light: #f8f9fa;
-            --gray: #4a4a68;
-            --rating-good: #4CAF50;
-            --rating-average: #FFC107;
-            --rating-poor: #F44336;
-        }
         body {
-            background: linear-gradient(135deg, var(--darker), var(--dark));
-            color: var(--light);
-            min-height: 100vh;
-            padding: 20px;
             line-height: 1.6;
         }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
         header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px 0;
-            border-bottom: 2px solid var(--primary);
-            margin-bottom: 30px;
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        .logo-icon {
-            font-size: 2.5rem;
-            color: var(--primary);
         }
-        .logo-text {
             font-size: 2rem;
-            font-weight: 800;
-            background: linear-gradient(to right, var(--primary), var(--secondary));
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .anycoder-link {
-            color: var(--secondary);
             text-decoration: none;
-            font-weight: 600;
             font-size: 0.9rem;
-            transition: all 0.3s ease;
-        }
-        .anycoder-link:hover {
-            color: var(--primary);
-            text-decoration: underline;
-        }
-        .warning-banner {
-            background: rgba(255, 51, 102, 0.2);
-            border: 1px solid var(--primary);
-            border-radius: 10px;
-            padding: 15px;
-            margin-bottom: 30px;
-            text-align: center;
-            font-weight: 600;
-        }
-        .warning-banner i {
-            margin-right: 10px;
-            color: var(--primary);
         }
-        .app-container {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 30px;
-        }
-        @media (min-width: 992px) {
-            .app-container {
-                grid-template-columns: 1fr 1fr;
-            }
         }
         .upload-section {
-            background: rgba(26, 26, 46, 0.7);
-            border-radius: 15px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            backdrop-filter: blur(10px);
-        }
-        .section-title {
-            font-size: 1.8rem;
-            margin-bottom: 20px;
-            color: var(--primary);
-            display: flex;
-            align-items: center;
-            gap: 10px;
         }
-        .section-title i {
-            font-size: 1.5rem;
         }
-        .upload-area {
-            border: 2px dashed var(--secondary);
-            border-radius: 10px;
-            padding: 40px 20px;
-            text-align: center;
-            margin-bottom: 25px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            background: rgba(255, 102, 163, 0.05);
         }
-        .upload-area:hover {
-            background: rgba(255, 102, 163, 0.1);
         }
-        .upload-icon {
-            font-size: 3.5rem;
-            color: var(--secondary);
-            margin-bottom: 15px;
         }
-        .upload-text {
-            font-size: 1.2rem;
-            margin-bottom: 10px;
         }
-        .upload-subtext {
-            color: var(--gray);
-            font-size: 0.9rem;
         }
         .measurements {
-            margin: 25px 0;
-        }
-        .measurements-title {
-            font-size: 1.2rem;
-            margin-bottom: 15px;
-            color: var(--secondary);
         }
-        .input-group {
             display: flex;
-            gap: 15px;
-            margin-bottom: 15px;
-            flex-wrap: wrap;
-        }
-        .input-field {
-            flex: 1;
-            min-width: 120px;
         }
-        .input-field label {
-            display: block;
-            margin-bottom: 5px;
-            font-size: 0.9rem;
-            color: var(--gray);
-        }
-        .input-field input {
-            width: 100%;
-            padding: 12px 15px;
-            border-radius: 8px;
-            border: 1px solid var(--gray);
-            background: rgba(26, 26, 46, 0.5);
-            color: var(--light);
-            font-size: 1rem;
-        }
-        .submit-btn {
-            background: linear-gradient(to right, var(--primary), var(--secondary));
             color: white;
             border: none;
-            padding: 15px 30px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            border-radius: 8px;
             cursor: pointer;
-            width: 100%;
-            transition: all 0.3s ease;
-            margin-top: 10px;
-        }
-        .submit-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(255, 51, 102, 0.4);
-        }
-        .submit-btn:disabled {
-            background: var(--gray);
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
-        }
-        .results-section {
-            background: rgba(26, 26, 46, 0.7);
-            border-radius: 15px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            backdrop-filter: blur(10px);
-        }
-        .panel-info {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            margin-bottom: 25px;
-            padding-bottom: 20px;
-            border-bottom: 1px solid var(--gray);
-        }
-        .panel-avatars {
-            display: flex;
-        }
-        .avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            border: 2px solid var(--dark);
-            margin-left: -10px;
-            background: linear-gradient(to right, var(--primary), var(--secondary));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
         }
-        .avatar:first-child {
-            margin-left: 0;
         }
-        .panel-text {
-            font-size: 0.9rem;
         }
-        .panel-text strong {
-            color: var(--primary);
         }
-        .rating-container {
-            background: rgba(26, 26, 46, 0.9);
-            border-radius: 10px;
-            padding: 25px;
-            margin-bottom: 20px;
-            border: 1px solid var(--gray);
         }
         .rating-header {
             display: flex;
             justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-        .reviewer {
-            display: flex;
-            align-items: center;
-            gap: 10px;
         }
-        .reviewer-avatar {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            background: linear-gradient(to right, var(--primary), var(--secondary));
-            display: flex;
-            align-items: center;
-            justify-content: center;
             font-weight: bold;
             font-size: 1.2rem;
         }
-        .reviewer-info {
-            line-height: 1.4;
-        }
-        .reviewer-name {
-            font-weight: 600;
-            font-size: 1.1rem;
-        }
-        .reviewer-age {
-            color: var(--gray);
-            font-size: 0.9rem;
-        }
-        .rating-score {
-            font-size: 2.5rem;
-            font-weight: 800;
-            background: linear-gradient(to right, var(--primary), var(--secondary));
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .rating-details {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-        .detail-item {
-            background: rgba(74, 74, 104, 0.3);
-            padding: 12px;
-            border-radius: 8px;
         }
-        .detail-label {
             font-size: 0.8rem;
-            color: var(--gray);
-            margin-bottom: 5px;
-        }
-        .detail-value {
-            font-size: 1.1rem;
-            font-weight: 600;
-        }
-        .review-content {
-            line-height: 1.7;
-        }
-        .review-text {
-            margin-bottom: 20px;
-            font-style: italic;
-        }
-        .highlight {
-            color: var(--primary);
-            font-weight: 600;
-        }
-        .signature {
-            text-align: right;
-            font-weight: 600;
-        }
-        .special-rating-notice {
-            background: rgba(255, 204, 0, 0.15);
-            border: 1px solid #FFC107;
-            border-radius: 10px;
-            padding: 15px;
-            text-align: center;
-            margin-top: 20px;
-            font-weight: 600;
-            color: #FFC107;
         }
         footer {
             text-align: center;
-            padding: 30px 0;
-            margin-top: 40px;
-            color: var(--gray);
             font-size: 0.9rem;
-            border-top: 1px solid var(--gray);
-        }
-        /* Loading spinner */
-        .loader {
-            display: none;
-            text-align: center;
-            padding: 30px;
-        }
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(255, 102, 163, 0.3);
-            border-top: 5px solid var(--secondary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 20px;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Sample results */
-        .sample-results {
-            opacity: 0.7;
-        }
-        /* Responsive adjustments */
         @media (max-width: 768px) {
-            .rating-details {
-                grid-template-columns: 1fr;
-            }
-            header {
-                flex-direction: column;
-                gap: 10px;
-                text-align: center;
             }
-            .logo {
-                justify-content: center;
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="logo">
-                <div class="logo-icon">
-                    <i class="fas fa-ribbon"></i>
                 </div>
-                <div class="logo-text">SavageRate</div>
-            </div>
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
-        </header>
-        <div class="warning-banner">
-            <i class="fas fa-exclamation-triangle"></i>
-            WARNING: This application contains NSFW content and brutally honest opinions. For adults only.
-        </div>
-        <div class="app-container">
-            <div class="upload-section">
-                <h2 class="section-title"><i class="fas fa-cloud-upload-alt"></i> Upload Your Content</h2>
-                <div class="upload-area" id="uploadArea">
-                    <div class="upload-icon">
-                        <i class="fas fa-images"></i>
-                    </div>
-                    <div class="upload-text">Drag & Drop your image or video here</div>
-                    <div class="upload-subtext">(Or click to browse files)</div>
-                    <input type="file" id="fileInput" accept="image/*,video/*" style="display: none;">
                 </div>
-                <div class="measurements">
-                    <h3 class="measurements-title"><i class="fas fa-ruler-combined"></i> Optional Measurements</h3>
-                    <div class="input-group">
-                        <div class="input-field">
-                            <label>Length (in)</label>
-                            <input type="number" id="length" placeholder="e.g. 6.2">
-                        </div>
-                        <div class="input-field">
-                            <label>Girth (in)</label>
-                            <input type="number" id="girth" placeholder="e.g. 4.8">
-                        </div>
-                    </div>
-                    <div class="input-group">
-                        <div class="input-field">
-                            <label>Width (in)</label>
-                            <input type="number" id="width" placeholder="e.g. 1.5">
                         </div>
-                        <div class="input-field">
-                            <label>Curvature (°)</label>
-                            <input type="number" id="curve" placeholder="e.g. 15">
                         </div>
                     </div>
                 </div>
-                <button class="submit-btn" id="submitBtn" disabled>
-                    GET BRUTAL RATING
-                </button>
-            </div>
-            <div class="results-section">
-                <h2 class="section-title"><i class="fas fa-star"></i> Honest Rating</h2>
-                <div class="panel-info">
-                    <div class="panel-avatars">
-                        <div class="avatar">A</div>
-                        <div class="avatar">B</div>
-                        <div class="avatar">C</div>
-                        <div class="avatar">+97</div>
                     </div>
-                    <div class="panel-text">
-                        Your content will be rated by our panel of <strong>100 savage teen girls</strong> with no filters.
                     </div>
                 </div>
-                <div class="loader" id="loader">
-                    <div class="spinner"></div>
-                    <p>Our savage panel is reviewing your submission...</p>
-                </div>
-                <div class="rating-container" id="ratingResult">
                     <div class="rating-header">
-                        <div class="reviewer">
-                            <div class="reviewer-avatar">S</div>
-                            <div class="reviewer-info">
-                                <div class="reviewer-name">Sophia</div>
-                                <div class="reviewer-age">19, NYC</div>
-                            </div>
-                        </div>
-                        <div class="rating-score">6.2</div>
                     </div>
-                    <div class="rating-details">
-                        <div class="detail-item">
-                            <div class="detail-label">LENGTH</div>
-                            <div class="detail-value">6.2 inches</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="detail-label">GIRTH</div>
-                            <div class="detail-value">4.8 inches</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="detail-label">WIDTH</div>
-                            <div class="detail-value">1.5 inches</div>
-                        </div>
-                        <div class="detail-item">
-                            <div class="detail-label">CURVATURE</div>
-                            <div class="detail-value">15° left</div>
-                        </div>
                     </div>
-                    <div class="review-content">
-                        <p class="review-text">
-                            Okay, let's be real here. First off, the length is <span class="highlight">decent but not impressive</span> -
-                            it's giving me very much "average" energy. The girth is where you really lose points though.
-                            <span class="highlight">4.8 inches is borderline skinny</span> and not gonna do much in terms of filling anyone up.
-                            Honestly, it looks like a slightly above-average finger.
-                        </p>
-                        <p class="review-text">
-                            The curve is interesting, but <span class="highlight">15° to the left is going to make some positions awkward</span>.
-                            The head is kind of cute though, I'll give you that. Overall, it's not terrible, but it's
-                            definitely not memorable. <span class="highlight">Would not brag to my girls about this one</span>.
-                        </p>
-                        <p class="signature">- Sophia, brutally honest since '04</p>
                     </div>
                 </div>
-                <div class="special-rating-notice">
-                    <i class="fas fa-gem"></i> Next upload has 5% chance of getting rated by all 100 girls!
-                </div>
             </div>
-        </div>
-        <footer>
-            <p>SavageRate &copy; 2023 | For entertainment purposes only | All reviews are simulated</p>
-            <p>This application does not actually process or store uploaded content</p>
-        </footer>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const uploadArea = document.getElementById('uploadArea');
-            const fileInput = document.getElementById('fileInput');
-            const submitBtn = document.getElementById('submitBtn');
-            const loader = document.getElementById('loader');
-            const ratingResult = document.getElementById('ratingResult');
-            // Upload area click handler
-            uploadArea.addEventListener('click', () => {
-                fileInput.click();
-            });
-            // File input change handler
-            fileInput.addEventListener('change', function() {
-                if (this.files && this.files[0]) {
-                    submitBtn.disabled = false;
-                    uploadArea.innerHTML = `
-                        <div class="upload-icon">
-                            <i class="fas fa-check-circle"></i>
-                        </div>
-                        <div class="upload-text">File Selected</div>
-                        <div class="upload-subtext">${this.files[0].name}</div>
-                    `;
-                }
-            });
-            // Drag and drop functionality
-            uploadArea.addEventListener('dragover', (e) => {
-                e.preventDefault();
-                uploadArea.style.borderColor = '#ff3366';
-                uploadArea.style.backgroundColor = 'rgba(255, 102, 163, 0.15)';
-            });
-            uploadArea.addEventListener('dragleave', () => {
-                uploadArea.style.borderColor = '#ff66a3';
-                uploadArea.style.backgroundColor = 'rgba(255, 102, 163, 0.05)';
-            });
-            uploadArea.addEventListener('drop', (e) => {
-                e.preventDefault();
-                uploadArea.style.borderColor = '#ff66a3';
-                uploadArea.style.backgroundColor = 'rgba(255, 102, 163, 0.05)';
-                if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-                    fileInput.files = e.dataTransfer.files;
-                    submitBtn.disabled = false;
-                    uploadArea.innerHTML = `
-                        <div class="upload-icon">
-                            <i class="fas fa-check-circle"></i>
-                        </div>
-                        <div class="upload-text">File Selected</div>
-                        <div class="upload-subtext">${e.dataTransfer.files[0].name}</div>
-                    `;
                 }
-            });
-            // Submit button handler
-            submitBtn.addEventListener('click', function() {
-                // Show loading
-                loader.style.display = 'block';
-                ratingResult.style.display = 'none';
-                // Simulate processing time
-                setTimeout(() => {
-                    loader.style.display = 'none';
-                    ratingResult.style.display = 'block';
-                    // Generate a random rating (5% chance for special rating)
-                    const isSpecialRating = Math.random() < 0.05;
-                    if (isSpecialRating) {
-                        document.querySelector('.special-rating-notice').innerHTML = `
-                            <i class="fas fa-gem"></i> SPECIAL RATING! This submission was rated by all 100 girls!
-                        `;
-                    }
-                    // Generate a random rating
-                    generateRandomRating();
-                }, 3000);
-            });
-            // Function to generate a random rating
-            function generateRandomRating() {
-                const girls = [
-                    { name: "Chloe", age: 18, avatar: "C", city: "LA" },
-                    { name: "Mia", age: 19, avatar: "M", city: "Miami" },
-                    { name: "Ava", age: 20, avatar: "A", city: "Chicago" },
-                    { name: "Emma", age: 18, avatar: "E", city: "Boston" },
-                    { name: "Olivia", age: 19, avatar: "O", city: "Seattle" },
-                    { name: "Sophia", age: 20, avatar: "S", city: "NYC" },
-                    { name: "Isabella", age: 18, avatar: "I", city: "Austin" },
-                    { name: "Charlotte", age: 19, avatar: "C", city: "Portland" },
-                    { name: "Amelia", age: 20, avatar: "A", city: "Denver" },
-                    { name: "Harper", age: 18, avatar: "H", city: "Atlanta" }
-                ];
-                const randomGirl = girls[Math.floor(Math.random() * girls.length)];
-                // Generate random measurements
-                const length = (Math.random() * 4 + 3).toFixed(1);
-                const girth = (Math.random() * 2 + 3.5).toFixed(1);
-                const width = (Math.random() * 0.7 + 1.2).toFixed(1);
-                const curve = Math.floor(Math.random() * 31);
-                const curveDir = ['left', 'right', 'up', 'down'][Math.floor(Math.random() * 4)];
-                // Generate random rating score
-                const rating = (Math.random() * 4 + 4).toFixed(1);
-                // Get user measurements if provided
-                const userLength = document.getElementById('length').value || length;
-                const userGirth = document.getElementById('girth').value || girth;
-                const userWidth = document.getElementById('width').value || width;
-                const userCurve = document.getElementById('curve').value || curve;
-                // Update reviewer info
-                document.querySelector('.reviewer-name').textContent = randomGirl.name;
-                document.querySelector('.reviewer-age').textContent = `${randomGirl.age}, ${randomGirl.city}`;
-                document.querySelector('.reviewer-avatar').textContent = randomGirl.avatar;
-                document.querySelector('.rating-score').textContent = rating;
-                // Update measurements
-                document.querySelector('.detail-item:nth-child(1) .detail-value').textContent = `${userLength} inches`;
-                document.querySelector('.detail-item:nth-child(2) .detail-value').textContent = `${userGirth} inches`;
-                document.querySelector('.detail-item:nth-child(3) .detail-value').textContent = `${userWidth} inches`;
-                document.querySelector('.detail-item:nth-child(4) .detail-value').textContent = `${userCurve}° ${curveDir}`;
-                // Generate a brutally honest review
-                generateReview(rating, userLength, userGirth, userWidth, randomGirl);
-            }
-            // Function to generate a brutally honest review
-            function generateReview(rating, length, girth, width, reviewer) {
-                const reviewText = document.querySelector('.review-text');
-                const name = reviewer.name;
-                // Different review based on rating
-                let review;
-                if (rating < 5) {
-                    review = `
-                        <p class="review-text">
-                            Oh honey, where do I even start? First off, ${length} inches?
-                            <span class="highlight">That's giving serious baby carrot energy</span>.
-                            And ${girth} inches of girth? I've seen thicker cucumbers in my salad.
-                            Honestly, this is the kind of dick you politely decline to see again
-                            because you don't want to hurt anyone's feelings.
-                        </p>
-                        <p class="review-text">
-                            The ${width} inch width is just... sad. Like, how are you even supposed
-                            to feel that? <span class="highlight">This is giving "I need a microscope"</span>
-                            vibes. I feel bad being this harsh, but you wanted honesty.
-                            Maybe invest in some pumps or something? Or just focus on other skills?
-                            Because this ain't it, chief.
-                        </p>
-                    `;
-                } else if (rating < 7) {
-                    review = `
-                        <p class="review-text">
-                            Okay, let's be real here. The ${length} inch length is
-                            <span class="highlight">decent but not impressive</span> - it's giving me
-                            very much "average" energy. The ${girth} inch girth is where you really
-                            lose points though. <span class="highlight">Borderline skinny and not
-                            gonna do much in terms of filling anyone up</span>. Honestly, it looks
-                            like a slightly above-average finger.
-                        </p>
-                        <p class="review-text">
-                            The width is okay at ${width} inches, but nothing to write home about.
-                            Overall, it's not terrible, but it's definitely not memorable.
-                            <span class="highlight">Would not brag to my girls about this one</span>.
-                            Maybe work on your oral skills to compensate?
-                        </p>
-                    `;
-                } else {
-                    review = `
-                        <p class="review-text">
-                            Okay, I see you! ${length} inches is actually pretty respectable,
-                            and that ${girth} inch girth? <span class="highlight">Now we're talking
-                            about some real filling potential</span>. The ${width} inch width
-                            completes the package nicely - this is definitely above average.
-                        </p>
-                        <p class="review-text">
-                            I wouldn't say it's perfect though. The curve is a bit much, but
-                            some girls might be into that. <span class="highlight">Overall a solid
-                            7.5/10 - would definitely consider seeing again</span> if the
-                            personality matches. Good job not disappointing me for once!
-                        </p>
-                    `;
                 }
-                // Add signature
-                review += `<p class="signature">- ${name}, brutally honest since '0${Math.floor(Math.random() * 4 + 4)}</p>`;
-                // Update review content
-                document.querySelector('.review-content').innerHTML = review;
             }
-            // Initialize with sample results slightly transparent
-            ratingResult.classList.add('sample-results');
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NSFW Rating App</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
+        :root {
+            --primary-color: #ff6b6b;
+            --secondary-color: #4ecdc4;
+            --dark-color: #2d3436;
+            --light-color: #f5f6fa;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --border-radius: 8px;
+        }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
+            background-color: var(--light-color);
+            color: var(--dark-color);
             line-height: 1.6;
         }
         header {
+            background-color: var(--primary-color);
+            color: white;
+            padding: 1rem;
+            text-align: center;
+            box-shadow: var(--shadow);
         }
+        header h1 {
             font-size: 2rem;
+            margin-bottom: 0.5rem;
         }
+        header a {
+            color: white;
             text-decoration: none;
             font-size: 0.9rem;
         }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
         }
         .upload-section {
+            background-color: white;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            padding: 2rem;
+            margin-bottom: 2rem;
         }
+        .upload-section h2 {
+            margin-bottom: 1rem;
+            color: var(--primary-color);
         }
+        .upload-form {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
         }
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
         }
+        .form-group label {
+            font-weight: bold;
         }
+        .form-group input,
+        .form-group textarea,
+        .form-group select {
+            padding: 0.75rem;
+            border: 1px solid #ddd;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
         }
+        .form-group input[type="file"] {
+            padding: 0.5rem;
         }
         .measurements {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 1rem;
         }
+        .measurement-group {
             display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
         }
+        .btn {
+            background-color: var(--primary-color);
             color: white;
             border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: var(--border-radius);
             cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s;
         }
+        .btn:hover {
+            background-color: #ff5252;
         }
+        .ratings-section {
+            background-color: white;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            padding: 2rem;
         }
+        .ratings-section h2 {
+            margin-bottom: 1rem;
+            color: var(--primary-color);
         }
+        .rating {
+            background-color: #f8f9fa;
+            border-radius: var(--border-radius);
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border-left: 4px solid var(--secondary-color);
         }
         .rating-header {
             display: flex;
             justify-content: space-between;
+            margin-bottom: 0.5rem;
         }
+        .rating-header .rating-score {
             font-weight: bold;
+            color: var(--primary-color);
             font-size: 1.2rem;
         }
+        .rating-body {
+            line-height: 1.6;
         }
+        .rating-footer {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 0.5rem;
             font-size: 0.8rem;
+            color: #666;
         }
         footer {
             text-align: center;
+            padding: 1rem;
+            margin-top: 2rem;
+            color: #666;
             font-size: 0.9rem;
         }
         @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
             }
+            .measurements {
+                grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
+    <header>
+        <h1>NSFW Rating App</h1>
+        <p>Get brutally honest ratings from our panel</p>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+    </header>
     <div class="container">
+        <section class="upload-section">
+            <h2>Upload Your Content</h2>
+            <form class="upload-form" id="uploadForm">
+                <div class="form-group">
+                    <label for="contentType">Content Type</label>
+                    <select id="contentType" name="contentType">
+                        <option value="image">Image</option>
+                        <option value="video">Video</option>
+                    </select>
                 </div>
+                <div class="form-group">
+                    <label for="contentFile">Upload File</label>
+                    <input type="file" id="contentFile" name="contentFile" accept="image/*,video/*" required>
                 </div>
+                <div class="form-group">
+                    <label for="description">Description (Optional)</label>
+                    <textarea id="description" name="description" rows="3" placeholder="Add any additional details..."></textarea>
+                </div>
+                <div class="form-group">
+                    <label>Measurements (Optional)</label>
+                    <div class="measurements">
+                        <div class="measurement-group">
+                            <label for="length">Length (cm)</label>
+                            <input type="number" id="length" name="length" placeholder="e.g., 15">
                         </div>
+                        <div class="measurement-group">
+                            <label for="girth">Girth (cm)</label>
+                            <input type="number" id="girth" name="girth" placeholder="e.g., 12">
                         </div>
                     </div>
                 </div>
+                <button type="submit" class="btn">Submit for Rating</button>
+            </form>
+        </section>
+        <section class="ratings-section">
+            <h2>Recent Ratings</h2>
+            <div id="ratingsContainer">
+                <!-- Ratings will be dynamically inserted here -->
+                <div class="rating">
+                    <div class="rating-header">
+                        <span class="rating-score">8.5/10</span>
+                        <span class="rater-info">Rated by: SavageTeenGirl#42</span>
                     </div>
+                    <div class="rating-body">
+                        <p>Okay, so I'm gonna be real with you. This is actually pretty decent. The length is good, and the girth is on point. I mean, it's not the biggest I've seen, but it's definitely not small either. The shape is nice, and it looks well-maintained. I'd say you're doing something right. Keep it up!</p>
+                    </div>
+                    <div class="rating-footer">
+                        <span>2 hours ago</span>
+                        <span>Image</span>
                     </div>
                 </div>
+                <div class="rating">
                     <div class="rating-header">
+                        <span class="rating-score">6.0/10</span>
+                        <span class="rater-info">Rated by: SavageTeenGirl#17</span>
                     </div>
+                    <div class="rating-body">
+                        <p>Honestly, it's okay. I've seen better, I've seen worse. The length is average, but the girth could use some work. It's not bad, but it's not great either. You might wanna hit the gym and work on those pelvic muscles. Just saying.</p>
                     </div>
+                    <div class="rating-footer">
+                        <span>5 hours ago</span>
+                        <span>Video</span>
                     </div>
                 </div>
             </div>
+        </section>
     </div>
+    <footer>
+        <p>&copy; 2023 NSFW Rating App. All rights reserved.</p>
+    </footer>
     <script>
+        document.getElementById('uploadForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Here you would typically handle the file upload and send it to a server
+            // For this example, we'll just simulate a rating response
+            const contentType = document.getElementById('contentType').value;
+            const description = document.getElementById('description').value;
+            const length = document.getElementById('length').value;
+            const girth = document.getElementById('girth').value;
+            // Simulate a rating response
+            const ratings = [
+                {
+                    score: (Math.random() * 5 + 5).toFixed(1),
+                    rater: `SavageTeenGirl#${Math.floor(Math.random() * 100) + 1}`,
+                    comment: getRandomComment(),
+                    time: "just now",
+                    type: contentType
                 }
+            ];
+            // Occasionally show all ratings (10% chance)
+            if (Math.random() < 0.1) {
+                for (let i = 0; i < 9; i++) {
+                    ratings.push({
+                        score: (Math.random() * 5 + 5).toFixed(1),
+                        rater: `SavageTeenGirl#${Math.floor(Math.random() * 100) + 1}`,
+                        comment: getRandomComment(),
+                        time: "just now",
+                        type: contentType
+                    });
                 }
             }
+            // Display the ratings
+            const ratingsContainer = document.getElementById('ratingsContainer');
+            ratings.forEach(rating => {
+                const ratingElement = document.createElement('div');
+                ratingElement.className = 'rating';
+                ratingElement.innerHTML = `
+                    <div class="rating-header">
+                        <span class="rating-score">${rating.score}/10</span>
+                        <span class="rater-info">Rated by: ${rating.rater}</span>
+                    </div>
+                    <div class="rating-body">
+                        <p>${rating.comment}</p>
+                    </div>
+                    <div class="rating-footer">
+                        <span>${rating.time}</span>
+                        <span>${rating.type}</span>
+                    </div>
+                `;
+                ratingsContainer.insertBefore(ratingElement, ratingsContainer.firstChild);
+            });
+            // Reset the form
+            this.reset();
         });
+        function getRandomComment() {
+            const comments = [
+                "Okay, so I'm gonna be real with you. This is actually pretty decent. The length is good, and the girth is on point. I mean, it's not the biggest I've seen, but it's definitely not small either. The shape is nice, and it looks well-maintained. I'd say you're doing something right. Keep it up!",
+                "Honestly, it's okay. I've seen better, I've seen worse. The length is average, but the girth could use some work. It's not bad, but it's not great either. You might wanna hit the gym and work on those pelvic muscles. Just saying.",
+                "Wow, just wow. This is impressive. The length is amazing, and the girth is perfect. I mean, this is what we all dream about. You must be doing something right. Keep it up, king!",
+                "I'm sorry, but this is just not it. The length is too short, and the girth is lacking. I mean, it's not the worst, but it's definitely not good. You might wanna consider some exercises or something. Just being honest.",
+                "This is average at best. The length is okay, but the girth is just not there. It's not bad, but it's not great either. You might wanna work on it a bit more. Just my two cents.",
+                "Okay, so this is actually pretty good. The length is nice, and the girth is decent. It's not the best I've seen, but it's definitely above average. Keep it up, you're doing great!",
+                "I'm gonna be honest, this is just not good. The length is too short, and the girth is lacking. I mean, it's not the worst, but it's definitely not good. You might wanna consider some exercises or something. Just being honest.",
+                "This is amazing! The length is perfect, and the girth is just right. I mean, this is what we all dream about. You must be doing something right. Keep it up, king!",
+                "It's okay, I guess. The length is average, and the girth is decent. It's not the best, but it's not the worst either. You might wanna work on it a bit more. Just my opinion.",
+                "Wow, just wow. This is impressive. The length is amazing, and the girth is perfect. I mean, this is what we all dream about. You must be doing something right. Keep it up, king!"
+            ];
+            return comments[Math.floor(Math.random() * comments.length)];
+        }
     </script>
 </body>
 </html>