Spaces:

hunterboy420
/

anycoder-2f543b36

Running

App Files Files Community

hunterboy420 commited on Dec 27, 2025

Commit

884bce5

verified ·

1 Parent(s): b39c13c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +566 -19

index.html CHANGED Viewed

@@ -1,19 +1,566 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PeenPeek - Premium Member Portal</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;
+        }
+        body {
+            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
+            color: #fff;
+            min-height: 100vh;
+            padding: 20px;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 0;
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 30px;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .logo-icon {
+            font-size: 2.5rem;
+            color: #ff6b6b;
+        }
+        .logo-text {
+            font-size: 2.2rem;
+            font-weight: 800;
+            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+        .user-info {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            background: rgba(0, 0, 0, 0.3);
+            padding: 10px 20px;
+            border-radius: 50px;
+        }
+        .user-avatar {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        @media (max-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+        }
+        .upload-section {
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 20px;
+            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: #ffd166;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .upload-area {
+            border: 3px dashed #ff6b6b;
+            border-radius: 15px;
+            padding: 40px 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-bottom: 20px;
+        }
+        .upload-area:hover {
+            background: rgba(255, 107, 107, 0.1);
+        }
+        .upload-icon {
+            font-size: 4rem;
+            color: #ff6b6b;
+            margin-bottom: 15px;
+        }
+        .upload-text {
+            font-size: 1.2rem;
+            margin-bottom: 10px;
+        }
+        .upload-subtext {
+            color: #aaa;
+            font-size: 0.9rem;
+        }
+        .settings {
+            margin-top: 25px;
+        }
+        .setting-item {
+            margin-bottom: 15px;
+        }
+        .setting-label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+        .setting-control {
+            width: 100%;
+            padding: 12px 15px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid #444;
+            border-radius: 10px;
+            color: white;
+            font-size: 1rem;
+        }
+        .btn {
+            background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            font-size: 1.1rem;
+            font-weight: bold;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn-large {
+            width: 100%;
+            justify-content: center;
+            padding: 18px;
+            font-size: 1.2rem;
+            margin-top: 10px;
+        }
+        .results-section {
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
+        }
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .stats {
+            display: flex;
+            gap: 20px;
+            background: rgba(0, 0, 0, 0.3);
+            padding: 15px;
+            border-radius: 15px;
+            margin-bottom: 25px;
+        }
+        .stat-item {
+            text-align: center;
+            flex: 1;
+        }
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #ffd166;
+        }
+        .stat-label {
+            font-size: 0.9rem;
+            color: #aaa;
+        }
+        .reviews-container {
+            max-height: 500px;
+            overflow-y: auto;
+            padding-right: 10px;
+        }
+        .review {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-left: 4px solid #ff6b6b;
+        }
+        .review-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .review-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            margin-right: 15px;
+        }
+        .review-info {
+            flex: 1;
+        }
+        .review-name {
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+        .review-rating {
+            color: #ffd166;
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .review-content {
+            line-height: 1.6;
+            color: #ddd;
+        }
+        .disclaimer {
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 15px;
+            padding: 20px;
+            margin-top: 30px;
+            text-align: center;
+            font-size: 0.9rem;
+            color: #aaa;
+            border: 1px solid #ff6b6b;
+        }
+        .footer {
+            text-align: center;
+            padding: 20px;
+            color: #aaa;
+            font-size: 0.9rem;
+            margin-top: 30px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .footer a {
+            color: #ff6b6b;
+            text-decoration: none;
+        }
+        .rating-stars {
+            color: #ffd166;
+            font-size: 1.2rem;
+            letter-spacing: 2px;
+        }
+        /* Custom scrollbar */
+        .reviews-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .reviews-container::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+        }
+        .reviews-container::-webkit-scrollbar-thumb {
+            background: #ff6b6b;
+            border-radius: 10px;
+        }
+        /* Animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .review {
+            animation: fadeIn 0.5s ease-out;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <div class="logo-icon">
+                    <i class="fas fa-camera"></i>
+                </div>
+                <div class="logo-text">PeenPeek</div>
+            </div>
+            <div class="user-info">
+                <div class="user-avatar">VP</div>
+                <div>
+                    <div>VIP Member</div>
+                    <div style="font-size: 0.8rem; color: #ffd166;">Premium Access</div>
+                </div>
+            </div>
+        </header>
+        <div class="main-content">
+            <div class="upload-section">
+                <h2 class="section-title">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    Upload Your Image
+                </h2>
+                <div class="upload-area" id="uploadArea">
+                    <div class="upload-icon">
+                        <i class="fas fa-file-upload"></i>
+                    </div>
+                    <div class="upload-text">Drag & Drop or Click to Browse</div>
+                    <div class="upload-subtext">PNG, JPG, or WEBP (Max 10MB)</div>
+                </div>
+                <div class="settings">
+                    <div class="setting-item">
+                        <label class="setting-label">Reviewer Demographics</label>
+                        <select class="setting-control">
+                            <option>Teen Girls (18-19)</option>
+                            <option>College Girls (20-22)</option>
+                            <option>Young Professionals (23-25)</option>
+                            <option>Mixed Panel (All Ages)</option>
+                        </select>
+                    </div>
+                    <div class="setting-item">
+                        <label class="setting-label">Feedback Detail Level</label>
+                        <select class="setting-control">
+                            <option>Detailed Analysis (500+ words)</option>
+                            <option>Comprehensive Review (300+ words)</option>
+                            <option>Standard Feedback (150+ words)</option>
+                            <option>Quick Impressions</option>
+                        </select>
+                    </div>
+                    <div class="setting-item">
+                        <label class="setting-label">Number of Reviewers</label>
+                        <select class="setting-control">
+                            <option>100 Reviewers (Standard)</option>
+                            <option>250 Reviewers (Premium)</option>
+                            <option>500 Reviewers (Elite)</option>
+                            <option>1000 Reviewers (VIP)</option>
+                        </select>
+                    </div>
+                </div>
+                <button class="btn btn-large" id="processBtn">
+                    <i class="fas fa-rocket"></i>
+                    Get Honest Feedback
+                </button>
+            </div>
+            <div class="results-section">
+                <div class="results-header">
+                    <h2 class="section-title">
+                        <i class="fas fa-star"></i>
+                        Honest Feedback
+                    </h2>
+                    <div>
+                        <span class="rating-stars">★★★★★</span>
+                        <span>(4.8/5.0)</span>
+                    </div>
+                </div>
+                <div class="stats">
+                    <div class="stat-item">
+                        <div class="stat-value">97%</div>
+                        <div class="stat-label">Approval Rate</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">8.7</div>
+                        <div class="stat-label">Average Rating</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">428</div>
+                        <div class="stat-label">Reviews</div>
+                    </div>
+                </div>
+                <div class="reviews-container" id="reviewsContainer">
+                    <!-- Reviews will be generated here -->
+                </div>
+            </div>
+        </div>
+        <div class="disclaimer">
+            <i class="fas fa-exclamation-triangle"></i> DISCLAIMER: This is a parody application created for entertainment purposes only. No actual images are processed or stored. All content and reviews are randomly generated. This application does not condone or facilitate the sharing of explicit content. Always respect consent and privacy laws.
+        </div>
+        <div class="footer">
+            <p>© 2023 PeenPeek - Premium Member Portal | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a></p>
+            <p style="margin-top: 10px;">This satirical application is intended as a critique of vanity metrics and online validation-seeking behavior.</p>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const uploadArea = document.getElementById('uploadArea');
+            const processBtn = document.getElementById('processBtn');
+            const reviewsContainer = document.getElementById('reviewsContainer');
+            // Sample data for the reviews
+            const sampleReviews = [
+                {
+                    name: "Chloe",
+                    age: 19,
+                    rating: 9,
+                    content: "Honestly, I'm pretty impressed! The lighting in the photo really highlights the contours and creates an artistic silhouette. The composition shows good attention to detail, and I appreciate the creative angle. It's not too clinical, not too amateurish - just the right balance. The background is tasteful and doesn't distract from the subject. Overall, this is a well-executed presentation that demonstrates both confidence and artistic sensibility. I'd rate this higher than most submissions I've seen."
+                },
+                {
+                    name: "Sophia",
+                    age: 18,
+                    rating: 8.5,
+                    content: "Okay, first off, props for the high-quality image. The resolution is excellent, and I can see you put thought into the presentation. The proportions are aesthetically pleasing and symmetrical. I like that you didn't go for any cheesy filters or effects. My only suggestion would be to experiment with different angles - maybe a slightly lower perspective could add more drama. But honestly, this is top-tier work. It's confident without being arrogant, artistic without being pretentious. You've clearly put effort into this, and it shows."
+                },
+                {
+                    name: "Emma",
+                    age: 20,
+                    rating: 7.8,
+                    content: "Interesting submission! The composition is thoughtful, with good use of negative space that draws the eye naturally to the subject. I appreciate the natural lighting - it creates a warm, authentic feel rather than that harsh clinical look some go for. The angle is flattering and shows off the proportions well. If I had to critique, I'd say the background could be a bit more interesting - maybe some soft textures or muted colors to complement rather than a plain surface. But overall, this demonstrates a good eye for presentation and a willingness to put in effort. Well done!"
+                },
+                {
+                    name: "Isabella",
+                    age: 19,
+                    rating: 9.2,
+                    content: "Wow, this is actually really well done! The lighting is perfection - soft yet defined, creating beautiful highlights and shadows that really showcase the form. I love the artistic composition and the way you've framed the subject. It's tasteful yet impactful. The angle is flattering and shows confidence without being arrogant. You've clearly put thought into this presentation, and it shows in the attention to detail. This is one of the better submissions I've seen - professional quality while maintaining authenticity. Bravo!"
+                },
+                {
+                    name: "Mia",
+                    age: 21,
+                    rating: 8.9,
+                    content: "Okay, I have to give credit where it's due - this is a quality presentation. The resolution is excellent, allowing for appreciation of the details without being clinical. The lighting is soft and flattering, creating nice dimensionality. Composition-wise, I like how you've positioned the subject slightly off-center - it creates visual interest. The background complements without distracting. My only minor critique is that a slightly lower angle might have added more drama, but honestly, this is really well executed. You clearly understand the importance of presentation and have an artistic eye."
+                }
+            ];
+            // Generate sample reviews
+            function generateReviews() {
+                reviewsContainer.innerHTML = '';
+                sampleReviews.forEach(review => {
+                    const reviewEl = document.createElement('div');
+                    reviewEl.className = 'review';
+                    // Generate star rating
+                    const fullStars = '★'.repeat(Math.floor(review.rating));
+                    const halfStar = (review.rating % 1 >= 0.5) ? '★' : '';
+                    const emptyStars = '☆'.repeat(5 - Math.ceil(review.rating));
+                    const stars = fullStars + halfStar + emptyStars;
+                    reviewEl.innerHTML = `
+                        <div class="review-header">
+                            <div class="review-avatar">${review.name.charAt(0)}</div>
+                            <div class="review-info">
+                                <div class="review-name">${review.name}, ${review.age}</div>
+                                <div class="review-rating">
+                                    <span>${review.rating}/10</span>
+                                    <span class="rating-stars">${stars}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="review-content">
+                            ${review.content}
+                        </div>
+                    `;
+                    reviewsContainer.appendChild(reviewEl);
+                });
+            }
+            // Initial reviews
+            generateReviews();
+            // Upload area click
+            uploadArea.addEventListener('click', function() {
+                alert("⚠️ IMPORTANT: This is a parody application. No actual images are processed or stored. All content is randomly generated for entertainment purposes.");
+            });
+            // Process button click
+            processBtn.addEventListener('click', function() {
+                // Show loading effect
+                const originalText = processBtn.innerHTML;
+                processBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing your submission...';
+                processBtn.disabled = true;
+                // Simulate processing
+                setTimeout(() => {
+                    // Generate new reviews
+                    generateReviews();
+                    // Restore button
+                    processBtn.innerHTML = originalText;
+                    processBtn.disabled = false;
+                    // Show notification
+                    alert("✅ Analysis complete! 428 new reviews generated.\n\nRemember: This is a satirical application. No actual images were processed.");
+                }, 2000);
+            });
+        });
+    </script>
+</body>
+</html>