Spaces:

rushkid5
/

dickpic-rater-pro

Running

App Files Files Community

rushkid5 commited on Jan 11

Commit

a4dbd12

verified ·

1 Parent(s): a9fdd2c

https://rushkid5-dickpic-rater-pro.static.hf.space/index.html

Browse files

Files changed (5) hide show

about.html +99 -0
components/footer.js +5 -5
components/header.js +5 -7
index.html +4 -4
style.css +15 -1

about.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - DickPic Rater Pro</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">About DickPic Rater Pro</h1>
+            <p class="text-xl text-purple-200 max-w-2xl mx-auto">Learn more about our expert rating service and how we provide honest feedback.</p>
+        </div>
+        <div class="max-w-4xl mx-auto">
+            <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 md:p-8 shadow-2xl border border-white/20 mb-8">
+                <h2 class="text-2xl font-bold text-white mb-6">Our Mission</h2>
+                <p class="text-gray-300 mb-6">
+                    DickPic Rater Pro was created to provide a fun, anonymous platform for individuals to receive honest feedback
+                    on their intimate photography. Our expert panel offers constructive criticism to help users improve their
+                    presentation and confidence.
+                </p>
+                <p class="text-gray-300 mb-6">
+                    We prioritize privacy and discretion above all else. All uploads are processed anonymously and deleted
+                    immediately after rating. No personal information is stored or shared with third parties.
+                </p>
+            </div>
+            <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 md:p-8 shadow-2xl border border-white/20 mb-8">
+                <h2 class="text-2xl font-bold text-white mb-6">Meet Our Expert Panel</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 text-center">
+                        <img src="http://static.photos/people/320x240/4" alt="Expert" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
+                        <h3 class="text-xl font-semibold text-white">Dr. Amanda Pierce</h3>
+                        <p class="text-purple-300 mb-3">Medical Professional</p>
+                        <p class="text-gray-300 text-sm">10+ years experience in anatomical assessment. Specializes in proportion and positioning analysis.</p>
+                    </div>
+                    <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 text-center">
+                        <img src="http://static.photos/people/320x240/5" alt="Expert" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
+                        <h3 class="text-xl font-semibold text-white">James Richardson</h3>
+                        <p class="text-purple-300 mb-3">Professional Photographer</p>
+                        <p class="text-gray-300 text-sm">Expert in lighting and composition. Focuses on visual presentation and photographic quality.</p>
+                    </div>
+                    <div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 text-center">
+                        <img src="http://static.photos/people/320x240/6" alt="Expert" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
+                        <h3 class="text-xl font-semibold text-white">Sophia Williams</h3>
+                        <p class="text-purple-300 mb-3">Art Critic</p>
+                        <p class="text-gray-300 text-sm">Specializes in aesthetic analysis. Evaluates visual appeal and artistic composition.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 md:p-8 shadow-2xl border border-white/20">
+                <h2 class="text-2xl font-bold text-white mb-6">How It Works</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <span class="text-white text-2xl font-bold">1</span>
+                        </div>
+                        <h3 class="text-xl font-semibold text-white mb-2">Upload</h3>
+                        <p class="text-gray-300">Submit your photo with optional measurements for more detailed feedback.</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <span class="text-white text-2xl font-bold">2</span>
+                        </div>
+                        <h3 class="text-xl font-semibold text-white mb-2">Rate</h3>
+                        <p class="text-gray-300">Our expert panel reviews your submission and provides honest feedback.</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <span class="text-white text-2xl font-bold">3</span>
+                        </div>
+                        <h3 class="text-xl font-semibold text-white mb-2">Improve</h3>
+                        <p class="text-gray-300">Receive actionable insights to enhance your future presentations.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

components/footer.js CHANGED Viewed

@@ -128,12 +128,12 @@ class CustomFooter extends HTMLElement {
             <div class="footer-section">
               <h3>Quick Links</h3>
               <ul>
-                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i> Home</a></li>
-                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i> How It Works</a></li>
-                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i> Upload</a></li>
-                <li><a href="#"><i data-feather="chevron-right" class="w-4 h-4"></i> My Ratings</a></li>
               </ul>
-            </div>
             <div class="footer-section">
               <h3>Resources</h3>

             <div class="footer-section">
               <h3>Quick Links</h3>
               <ul>
+                <li><a href="/"><i data-feather="chevron-right" class="w-4 h-4"></i> Home</a></li>
+                <li><a href="/about.html"><i data-feather="chevron-right" class="w-4 h-4"></i> How It Works</a></li>
+                <li><a href="/"><i data-feather="chevron-right" class="w-4 h-4"></i> Upload</a></li>
+                <li><a href="/about.html"><i data-feather="chevron-right" class="w-4 h-4"></i> Our Panel</a></li>
               </ul>
+</div>
             <div class="footer-section">
               <h3>Resources</h3>

components/header.js CHANGED Viewed

@@ -128,17 +128,15 @@ class CustomHeader extends HTMLElement {
             </div>
             <div class="logo-text">DickPic Rater Pro</div>
           </div>
           <nav>
             <ul>
-              <li><a href="#"><i data-feather="home" class="w-4 h-4"></i> Home</a></li>
-              <li><a href="#"><i data-feather="upload" class="w-4 h-4"></i> Upload</a></li>
-              <li><a href="#"><i data-feather="award" class="w-4 h-4"></i> Ratings</a></li>
-              <li><a href="#"><i data-feather="users" class="w-4 h-4"></i> Panel</a></li>
             </ul>
           </nav>
-          <div class="user-actions">
             <button class="btn btn-outline">
               <i data-feather="help-circle" class="w-4 h-4 mr-1"></i> Help
             </button>

             </div>
             <div class="logo-text">DickPic Rater Pro</div>
           </div>
           <nav>
             <ul>
+              <li><a href="/"><i data-feather="home" class="w-4 h-4"></i> Home</a></li>
+              <li><a href="/"><i data-feather="upload" class="w-4 h-4"></i> Upload</a></li>
+              <li><a href="/about.html"><i data-feather="award" class="w-4 h-4"></i> About</a></li>
+              <li><a href="/about.html"><i data-feather="users" class="w-4 h-4"></i> Panel</a></li>
             </ul>
           </nav>
+<div class="user-actions">
             <button class="btn btn-outline">
               <i data-feather="help-circle" class="w-4 h-4 mr-1"></i> Help
             </button>

index.html CHANGED Viewed

@@ -60,7 +60,7 @@
                         <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
                             <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
                                 <div class="flex items-center mb-2">
-                                    <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 mr-3" />
                                     <div>
                                         <h4 class="font-semibold text-white">Sarah K.</h4>
                                         <p class="text-xs text-gray-400">Professional Critic</p>
@@ -71,7 +71,7 @@
                             <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
                                 <div class="flex items-center mb-2">
-                                    <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 mr-3" />
                                     <div>
                                         <h4 class="font-semibold text-white">Emma R.</h4>
                                         <p class="text-xs text-gray-400">Art History Major</p>
@@ -82,7 +82,7 @@
                             <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
                                 <div class="flex items-center mb-2">
-                                    <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 mr-3" />
                                     <div>
                                         <h4 class="font-semibold text-white">Mia T.</h4>
                                         <p class="text-xs text-gray-400">Medical Student</p>
@@ -105,4 +105,4 @@
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>

                         <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
                             <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
                                 <div class="flex items-center mb-2">
+                                    <img src="http://static.photos/people/320x240/1" alt="Reviewer" class="w-10 h-10 rounded-full mr-3 object-cover">
                                     <div>
                                         <h4 class="font-semibold text-white">Sarah K.</h4>
                                         <p class="text-xs text-gray-400">Professional Critic</p>
                             <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
                                 <div class="flex items-center mb-2">
+                                    <img src="http://static.photos/people/320x240/2" alt="Reviewer" class="w-10 h-10 rounded-full mr-3 object-cover">
                                     <div>
                                         <h4 class="font-semibold text-white">Emma R.</h4>
                                         <p class="text-xs text-gray-400">Art History Major</p>
                             <div class="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
                                 <div class="flex items-center mb-2">
+                                    <img src="http://static.photos/people/320x240/3" alt="Reviewer" class="w-10 h-10 rounded-full mr-3 object-cover">
                                     <div>
                                         <h4 class="font-semibold text-white">Mia T.</h4>
                                         <p class="text-xs text-gray-400">Medical Student</p>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
+</html>

style.css CHANGED Viewed

@@ -48,11 +48,25 @@ body::before {
   background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
   border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(to bottom, #9d4edd, #60a5fa);
 }
 input, select, textarea {
   background: rgba(30, 30, 40, 0.7) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;

   background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
   border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(to bottom, #9d4edd, #60a5fa);
 }
+/* Add styles for images */
+img {
+  border-radius: 8px;
+}
+/* Add responsive adjustments */
+@media (max-width: 768px) {
+  .max-w-4xl {
+    max-width: 100%;
+  }
+  .grid-cols-1 md:grid-cols-3 {
+    grid-template-columns: 1fr;
+  }
+}
 input, select, textarea {
   background: rgba(30, 30, 40, 0.7) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;