Simplify UI to minimal black and white design

- Remove all feature lists and checkmarks from choose page
- Remove privacy notice and footer text
- Remove session warning banner for anonymous users
- Convert all colors to black and white only
- Remove gradients, shadows, and rounded corners
- Simplify buttons to flat black/white design
- Remove animations and transitions
- Keep only essential UI elements

static/css/style.css

@@ -210,13 +210,11 @@ body {
 #messageInput {
     flex: 1;
     padding: 0.75rem 1rem;
-    border: 2px solid black;
-    border-radius: 1.25rem;
+    border: 1px solid black;
     font-size: 1rem;
     outline: none;
     background-color: white;
     color: black;
-    transition: border-color 0.2s ease;
     resize: none;
     min-height: 44px;
     /* Minimum touch target size */
@@ -235,18 +233,15 @@ body {
 
 #messageInput:focus {
     border-color: black;
-    border-width: 3px;
 }
 
 #sendButton {
     padding: 0.75rem 1.25rem;
     background-color: black;
     color: white;
-    border: 2px solid black;
-    border-radius: 1.25rem;
+    border: 1px solid black;
     font-size: 0.9rem;
     cursor: pointer;
-    transition: all 0.2s ease;
     white-space: nowrap;
     min-height: 44px;
     /* Minimum touch target size */
@@ -260,20 +255,15 @@ body {
 #sendButton:hover {
     background-color: white;
     color: black;
-    transform: translateY(-1px);
 }
 
-#sendButton:active {
-    transform: translateY(0);
-}
 
 #sendButton:disabled {
     background-color: white;
     color: black;
-    border: 2px solid black;
+    border: 1px solid black;
     opacity: 0.5;
     cursor: not-allowed;
-    transform: none;
 }
 
 /* Desktop input styles */
@@ -302,9 +292,8 @@ body {
     transform: translateX(-50%);
     background-color: black;
     color: white;
-    border: 2px solid black;
+    border: 1px solid black;
     padding: 0.75rem 1.25rem;
-    border-radius: 2rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -512,12 +501,6 @@ uch and interaction improvements */
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-    * {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-
     .spinner {
         animation: none;
     }
@@ -552,200 +535,95 @@ uch and interaction improvements */
     align-items: center;
     justify-content: center;
     padding: 2rem;
-    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+    background: white;
 }
 
 .choose-wrapper {
-    max-width: 900px;
-    width: 100%;
     text-align: center;
 }
 
 .choose-title {
-    font-size: 2.5rem;
-    margin-bottom: 0.5rem;
-    color: black;
-}
-
-.choose-subtitle {
-    font-size: 1.2rem;
-    color: #666;
+    font-size: 2rem;
     margin-bottom: 3rem;
-}
-
-.choose-options {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2rem;
-    margin-bottom: 2rem;
-}
-
-.choose-option {
-    background: white;
-    border: 2px solid #e5e5e5;
-    border-radius: 12px;
-    padding: 2rem;
-    transition: all 0.3s ease;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-}
-
-.choose-option:hover {
-    border-color: #000;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-.choose-option h2 {
-    margin-bottom: 1.5rem;
-    font-size: 1.5rem;
     color: black;
+    font-weight: normal;
 }
 
-.option-features ul {
-    list-style: none;
-    padding: 0;
-    margin-bottom: 1.5rem;
-    text-align: left;
-}
 
-.option-features li {
-    padding: 0.5rem 0;
-    padding-left: 1.5rem;
-    position: relative;
+.choose-options {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
 }
 
-.option-features li:before {
-    content: "✓";
-    position: absolute;
-    left: 0;
-    color: #10b981;
-    font-weight: bold;
-}
 
-.privacy-notice {
-    background: #fef3c7;
-    border: 1px solid #fbbf24;
-    border-radius: 8px;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
-    font-size: 0.9rem;
-    text-align: left;
-}
 
-.privacy-notice p {
-    margin: 0;
-    color: #92400e;
-}
 
 .choose-button {
     display: inline-block;
-    padding: 0.75rem 2rem;
+    padding: 1rem 3rem;
     background: black;
     color: white;
     text-decoration: none;
-    border-radius: 8px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    border: 2px solid black;
-    margin: 0.5rem;
+    border: 1px solid black;
+    font-weight: normal;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.9rem;
 }
 
 .choose-button:hover {
     background: white;
     color: black;
-    transform: translateY(-2px);
 }
 
-.anonymous-button {
-    background: #6b7280;
-    border-color: #6b7280;
-}
-
-.anonymous-button:hover {
-    background: white;
-    color: #6b7280;
-}
-
-.register-button {
-    background: #10b981;
-    border-color: #10b981;
-}
-
-.register-button:hover {
-    background: white;
-    color: #10b981;
-}
 
 .auth-buttons {
     display: flex;
-    justify-content: center;
     gap: 1rem;
-    flex-wrap: wrap;
 }
 
-.choose-footer {
-    margin-top: 3rem;
-    color: #666;
-    font-size: 0.9rem;
-}
 
 /* Anonymous User Styles */
 .anonymous-user {
-    color: #6b7280;
-    font-style: italic;
-}
-
-.session-warning {
-    background: #fef3c7;
-    border-bottom: 2px solid #fbbf24;
-    padding: 0.75rem;
-    text-align: center;
-    color: #92400e;
-}
-
-.warning-content {
-    max-width: 800px;
-    margin: 0 auto;
+    color: black;
+    font-style: normal;
 }
 
-.warning-content a {
-    color: #92400e;
-    font-weight: bold;
-}
 
 .session-expiry-warning {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    background: #ef4444;
+    background: black;
     color: white;
     padding: 1rem;
     text-align: center;
     z-index: 10000;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .session-expiry-warning button {
     background: white;
-    color: #ef4444;
-    border: none;
+    color: black;
+    border: 1px solid white;
     padding: 0.5rem 1rem;
     margin: 0 0.5rem;
-    border-radius: 4px;
     cursor: pointer;
-    font-weight: bold;
 }
 
 .session-expiry-warning button:hover {
-    background: #fee2e2;
+    background: black;
+    color: white;
 }
 
 /* System message styles */
 .message.system .message-content {
-    background: #f3f4f6;
-    color: #4b5563;
-    border: 1px solid #d1d5db;
-    font-style: italic;
+    background: white;
+    color: black;
+    border: 1px solid black;
+    font-style: normal;
 }
 
 /* Mobile responsive for choice page */

static/js/chat.js

@@ -482,9 +482,7 @@ class ChatApp {
     }
     
     showAnonymousWelcome() {
-        // Show welcome message for anonymous users
-        const welcomeMessage = `Welcome to Anonymous Chat! You can send up to ${this.anonymousRateLimit} messages per hour. Your chat history is temporary and will be lost when you close your browser.`;
-        this.addMessage(welcomeMessage, 'system', false);
+        // No welcome message for minimal UI
     }
 }
 

templates/choose.html

@@ -1,75 +1,26 @@
 {% extends "base.html" %}
 
-{% block title %}Choose Access Mode - Chatty{% endblock %}
+{% block title %}Chatty{% endblock %}
 
 {% block content %}
 <div class="choose-container">
     <div class="choose-wrapper">
-        <h1 class="choose-title">Welcome to Chatty</h1>
-        <p class="choose-subtitle">Ethics Chat Application</p>
+        <h1 class="choose-title">Chatty</h1>
         
         <div class="choose-options">
-            <!-- Anonymous Access Option -->
-            <div class="choose-option anonymous-option">
-                <h2>Chat Anonymously</h2>
-                <div class="option-features">
-                    <ul>
-                        <li>No registration required</li>
-                        <li>Start chatting immediately</li>
-                        <li>Session-based conversation</li>
-                        <li>Limited to {{ config.ANONYMOUS_RATE_LIMIT }} messages per hour</li>
-                    </ul>
-                </div>
-                <div class="privacy-notice">
-                    <p><strong>Privacy Notice:</strong> Your chat history will be stored temporarily in your browser session and will be lost when you close the browser or after {{ config.ANONYMOUS_SESSION_TIMEOUT // 3600 }} hour(s) of inactivity.</p>
-                </div>
-                <a href="{{ url_for('anonymous') }}" class="choose-button anonymous-button">
-                    Start Anonymous Chat
-                </a>
-            </div>
+            <a href="{{ url_for('anonymous') }}" class="choose-button">
+                Chat Anonymously
+            </a>
             
-            <!-- Authenticated Access Option -->
-            <div class="choose-option auth-option">
-                <h2>Login or Register</h2>
-                <div class="option-features">
-                    <ul>
-                        <li>Save your chat history permanently</li>
-                        <li>Access conversations from any device</li>
-                        <li>No message limits</li>
-                        <li>Personalized experience</li>
-                    </ul>
-                </div>
-                <div class="auth-buttons">
-                    <a href="{{ url_for('login') }}" class="choose-button login-button">
-                        Login
-                    </a>
-                    <a href="{{ url_for('register') }}" class="choose-button register-button">
-                        Create Account
-                    </a>
-                </div>
+            <div class="auth-buttons">
+                <a href="{{ url_for('login') }}" class="choose-button">
+                    Login
+                </a>
+                <a href="{{ url_for('register') }}" class="choose-button">
+                    Register
+                </a>
             </div>
         </div>
-        
-        <div class="choose-footer">
-            <p>By using this service, you agree to our ethical guidelines and responsible AI usage.</p>
-        </div>
     </div>
 </div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Add hover effects
-    const options = document.querySelectorAll('.choose-option');
-    options.forEach(option => {
-        option.addEventListener('mouseenter', function() {
-            this.style.transform = 'translateY(-5px)';
-        });
-        option.addEventListener('mouseleave', function() {
-            this.style.transform = 'translateY(0)';
-        });
-    });
-});
-</script>
 {% endblock %}

templates/index.html

@@ -4,15 +4,6 @@
 
 {% block content %}
 <div class="chat-container">
-            {% if is_anonymous %}
-            <div class="session-warning">
-                <div class="warning-content">
-                    <strong>Anonymous Session:</strong> Your chat history is temporary and will be lost when you close your browser. 
-                    <a href="{{ url_for('register') }}">Create an account</a> to save your conversations permanently.
-                </div>
-            </div>
-            {% endif %}
-            
             <div class="chat-messages" id="chatMessages">
                 <!-- Messages will be dynamically added here -->
             </div>