Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Partner Complain - Documentation</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --glass-bg: rgba(255, 255, 255, 0.25); | |
| --glass-border: rgba(255, 255, 255, 0.5); | |
| --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| --text-color: #2d3436; | |
| --accent-color: #6c5ce7; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); | |
| min-height: 100vh; | |
| color: var(--text-color); | |
| overflow-x: hidden; | |
| } | |
| /* Animated Background Blobs */ | |
| .blob { | |
| position: absolute; | |
| filter: blur(70px); | |
| z-index: -1; | |
| opacity: 0.8; | |
| animation: float 10s infinite ease-in-out; | |
| } | |
| .blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: #a18cd1; animation-delay: 0s; } | |
| .blob-2 { bottom: -10%; right: -10%; width: 600px; height: 600px; background: #fbc2eb; animation-delay: 2s; } | |
| .blob-3 { top: 40%; left: 40%; width: 400px; height: 400px; background: #8fd3f4; animation-delay: 4s; } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0) rotate(0deg); } | |
| 50% { transform: translate(30px, 50px) rotate(10deg); } | |
| 100% { transform: translate(0, 0) rotate(0deg); } | |
| } | |
| /* Container Layout */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| /* Header Section */ | |
| header { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 10px; | |
| background: -webkit-linear-gradient(#6c5ce7, #ff7675); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| font-weight: 700; | |
| } | |
| p.subtitle { | |
| font-size: 1.2rem; | |
| color: #555; | |
| } | |
| /* Glass Cards */ | |
| .card { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 24px; | |
| padding: 40px; | |
| margin-bottom: 40px; | |
| box-shadow: var(--glass-shadow); | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| margin-top: 0; | |
| color: #4a4a4a; | |
| border-bottom: 2px solid rgba(255,255,255,0.5); | |
| padding-bottom: 15px; | |
| display: inline-block; | |
| } | |
| /* Grid for Screenshots */ | |
| .screenshot-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| margin: 40px 0; | |
| } | |
| .img-wrapper { | |
| background: rgba(255, 255, 255, 0.4); | |
| padding: 15px; | |
| border-radius: 20px; | |
| border: 1px solid white; | |
| } | |
| img { | |
| width: 100%; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
| display: block; | |
| } | |
| .caption { | |
| text-align: center; | |
| margin-top: 15px; | |
| font-weight: 600; | |
| color: #555; | |
| } | |
| /* Feature Lists */ | |
| ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| li { | |
| background: rgba(255, 255, 255, 0.3); | |
| margin: 10px 0; | |
| padding: 15px 20px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| li::before { | |
| content: "❤️"; | |
| margin-right: 15px; | |
| } | |
| /* Steps Section */ | |
| .steps { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .step-item { | |
| flex: 1; | |
| min-width: 250px; | |
| background: rgba(255,255,255,0.4); | |
| padding: 20px; | |
| border-radius: 16px; | |
| text-align: center; | |
| } | |
| .step-num { | |
| background: #6c5ce7; | |
| color: white; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 15px auto; | |
| font-weight: bold; | |
| } | |
| @media (max-width: 768px) { | |
| .screenshot-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Elements --> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="blob blob-3"></div> | |
| <div class="container"> | |
| <header> | |
| <h1>Partner Complain</h1> | |
| <p class="subtitle">A safe digital space to navigate relationship ups and downs.</p> | |
| </header> | |
| <!-- Visual Showcase --> | |
| <div class="card"> | |
| <h2>Interface Overview</h2> | |
| <div class="screenshot-grid"> | |
| <div class="img-wrapper"> | |
| <img src="https://i.ibb.co/5WL1Pgc2/pin-screen.png" alt="Secure Access Screen"> | |
| <div class="caption">Step 1: Secure Access</div> | |
| </div> | |
| <div class="img-wrapper"> | |
| <img src="https://i.ibb.co/GQtTWq1r/homepage.png" alt="Complaint Form Interface"> | |
| <div class="caption">Step 2: Feeling & Feedback Form</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Use Case Section --> | |
| <div class="card"> | |
| <h2>Use Case</h2> | |
| <p style="line-height: 1.6;"> | |
| Relationships are complex, and verbally articulating feelings during a conflict can be difficult. | |
| <strong>"Partner Complain"</strong> serves as a constructive mediator tool. It is designed for couples who want to express frustration, sadness, or confusion without the immediate pressure of a face-to-face confrontation, allowing thoughts to be organized before they are shared. | |
| </p> | |
| <ul> | |
| <li><strong>Conflict De-escalation:</strong> Allows partners to cool down and structure their thoughts.</li> | |
| <li><strong>Emotional Tracking:</strong> Helps identify recurring feelings (Frustrated, Sad, Confused).</li> | |
| <li><strong>Safe Space:</strong> A private, PIN-protected environment to vent safely.</li> | |
| </ul> | |
| </div> | |
| <!-- Impact Section --> | |
| <div class="card"> | |
| <h2>The Impact</h2> | |
| <div style="display: flex; flex-wrap: wrap; gap: 20px;"> | |
| <div style="flex: 1; min-width: 300px;"> | |
| <h3>💖 Emotional Validation</h3> | |
| <p>By offering specific mood selectors (Sad, Hopeful, Disappointed), the tool validates the user's current emotional state immediately, reducing the feeling of being misunderstood.</p> | |
| </div> | |
| <div style="flex: 1; min-width: 300px;"> | |
| <h3>🛡️ Privacy & Security</h3> | |
| <p>The application prioritizes privacy. The "Secure Access" screen ensures that these intimate thoughts remain private until the user is ready to share them.</p> | |
| </div> | |
| <div style="flex: 1; min-width: 300px;"> | |
| <h3>🗣️ Better Communication</h3> | |
| <p>By requiring the user to select a "Reason" and write out thoughts, it shifts the focus from blaming to explaining, fostering healthier long-term communication habits.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How to Use Section --> | |
| <div class="card"> | |
| <h2>How to Use</h2> | |
| <div class="steps"> | |
| <div class="step-item"> | |
| <div class="step-num">1</div> | |
| <h3>Unlock</h3> | |
| <p>Upon loading the page, you will be presented with a Secure Access screen. Enter your PIN to decrypt the interface.</p> | |
| </div> | |
| <div class="step-item"> | |
| <div class="step-num">2</div> | |
| <h3>Select Mood</h3> | |
| <p>Tap the emoji button that best represents your current state (e.g., Frustrated, Sad, or Hopeful).</p> | |
| </div> | |
| <div class="step-item"> | |
| <div class="step-num">3</div> | |
| <h3>Categorize</h3> | |
| <p>Use the "What's bothering you?" dropdown to pinpoint the root cause of the issue.</p> | |
| </div> | |
| <div class="step-item"> | |
| <div class="step-num">4</div> | |
| <h3>Express</h3> | |
| <p>Use the text area to write out your full feelings, thoughts, or complaints in detail.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <footer style="text-align: center; margin-top: 50px; color: #555;"> | |
| <p>© 2024 Partner Complain Documentation | Powered by Love</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |