view changed

templates/wishlist/index.html.twig

-
 {% extends 'base.html.twig' %}
 
 {% block title %} My Wishlists {% endblock %}
 
+{% block body %} 
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background: linear-gradient(135deg, #00B8DE, #99CC33) fixed;
+        color: white;
+        text-align: center;
+        padding: 20px;
+    }
+    .container {
+        max-width: 800px;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+    }
+    .search-bar {
+        padding: 8px;
+        border-radius: 8px;
+        border: 2px solid #99CC33;
+    }
+    .add-wishlist-btn {
+        background: white;
+        color: #00B8DE;
+        padding: 10px 15px;
+        text-decoration: none;
+        border-radius: 8px;
+        font-weight: bold;
+        transition: 0.3s;
+        display: inline-block;
+        margin: 15px 0;
+    }
+    .add-wishlist-btn:hover {
+        background: #99CC33;
+        color: white;
+        transform: scale(1.1);
+    }
+    .wishlist {
+        background: rgba(255, 255, 255, 0.2);
+        padding: 15px;
+        border-radius: 10px;
+        border: 2px solid #99CC33;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 600px;
+        margin: auto;
+    }
+    .wishlist h2 {
+        margin: 10px 0;
+    }
+    .wishlist-items {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    .wishlist-item {
+        background: white;
+        color: #00B8DE;
+        padding: 10px;
+        border-radius: 5px;
+        font-size: 1.5em;
+    }
+    .wishlist-actions {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+        margin-top: 10px;
+    }
+    .wishlist-actions button {
+        background: white;
+        border: none;
+        padding: 10px;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: 0.3s;
+    }
+    .wishlist-actions button:hover {
+        background: #99CC33;
+        color: white;
+    }
+    @media (max-width: 768px) {
+        .wishlist {
+            width: 90%;
+        }
+    }
+</style>
 
-{% block body  %} 
- <header>
-        <div class="user-icon"></div>
-        <h1>My Wishlists</h1>
-        <input type="text" class="search-bar" placeholder="Search...">
-    </header>
-    
-    <a href="{{ path('app_wishlist_new') }}" class="add-wishlist-btn">Add wishlist</a>  </div>
-    
-    <div class="container">
-        {% for wishlist in wishlists %}
-        <div class="wishlist">
-            <h2>{{ wishlist.name }}</h2>
-            <div class="wishlist-items">
-            {% for item in wishlist.items %}
-            <div class="wishlist-item">📷</div>
-            {% endfor %}
-            </div>
-            <p class="wishlist-footer">{{wishlist.deadline}}</p>
-            <div class="wishlist-actions">
-                <button title="Share wishlist">↗</button>
-                <button title="Edit title">✏</button>
-                <button title="Delete wishlist">🗑</button>
-            </div>
-        </div>
+<header>
+    <div class="user-icon"></div>
+    <h1>My Wishlists</h1>
+    <input type="text" class="search-bar" placeholder="Search...">
+</header>
+
+<a href="{{ path('app_wishlist_new') }}" class="add-wishlist-btn">Add wishlist</a>
+
+<div class="container">
+    {% for wishlist in wishlists %}
+    <div class="wishlist">
+        <h2>{{ wishlist.name }}</h2>
+        <div class="wishlist-items">
+        {% for item in wishlist.items %}
+        <div class="wishlist-item">📷</div>
         {% endfor %}
+        </div>
+        <div class="wishlist-actions">
+            <button title="Share wishlist">↗</button>
+            <button title="Edit title">✏</button>
+            <button title="Delete wishlist">🗑</button>
+        </div>
     </div>
-    {% endblock %}
+    {% endfor %}
+</div>
+{% endblock %}

templates/wishlist/new.html.twig

-{# templates/wishlist/new.html.twig #}
 {% extends 'base.html.twig' %}
 
 {% block title %}Create New Wishlist{% endblock %}
@@ -6,16 +5,30 @@
 {% block stylesheets %}
     {{ parent() }}
     <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #00B8DE, #99CC33) fixed;
+            color: white;
+            text-align: center;
+            padding: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: auto;
+        }
         .wishlist-form {
             max-width: 600px;
             margin: 0 auto;
             padding: 20px;
-            background-color: #f8f9fa;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            border: 2px solid #99CC33;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            backdrop-filter: blur(10px);
         }
         .form-group {
             margin-bottom: 1.5rem;
+            text-align: left;
         }
         .form-label {
             display: block;
@@ -25,7 +38,7 @@
         .form-control {
             width: 100%;
             padding: 0.5rem;
-            border: 1px solid #ced4da;
+            border: 2px solid #99CC33;
             border-radius: 4px;
             font-size: 1rem;
         }
@@ -44,16 +57,30 @@
             font-size: 1rem;
         }
         .btn-primary {
-            background-color: #007bff;
-            color: white;
-            border: none;
+            background-color: white;
+            color: #00B8DE;
+            border: 2px solid #00B8DE;
+            transition: 0.3s;
         }
         .btn-primary:hover {
-            background-color: #0069d9;
+            background-color: #99CC33;
+            color: white;
+            border-color: #99CC33;
+        }
+        .btn-secondary {
+            background-color: white;
+            color: #99CC33;
+            border: 2px solid #99CC33;
+            transition: 0.3s;
+        }
+        .btn-secondary:hover {
+            background-color: #00B8DE;
+            color: white;
+            border-color: #00B8DE;
         }
         .form-help {
             font-size: 0.8rem;
-            color: #6c757d;
+            color: #e0e0e0;
             margin-top: 0.25rem;
         }
         .error-message {
@@ -61,6 +88,11 @@
             font-size: 0.875rem;
             margin-top: 0.25rem;
         }
+        @media (max-width: 768px) {
+            .wishlist-form {
+                width: 90%;
+            }
+        }
     </style>
 {% endblock %}
 
@@ -92,8 +124,8 @@
 
             <div class="form-group mt-4">
                 <button type="submit" class="btn btn-primary">Create Wishlist</button>
-                <a href="{{ path('wishlist_index') }}" class="btn btn-secondary ml-2">Cancel</a>
+                <a href="{{ path('app_wishlist_index') }}" class="btn btn-secondary ml-2">Cancel</a>
             </div>
         {{ form_end(form) }}
     </div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file