templates/movie/add-new-movie.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  4. <style>
  5.     .form-container {
  6.         max-width: 600px;
  7.         margin: 20px auto;
  8.         padding: 20px;
  9.         border: 1px solid #ccc;
  10.         border-radius: 8px;
  11.         background-color: #f9f9f9;
  12.     }
  13.     h1 {
  14.         color: #333; /* Setting the color of the heading to dark gray */
  15.         text-align: center; /* Centering the heading text */
  16.     }
  17.     .form-group {
  18.         margin-bottom: 15px;
  19.     }
  20.     label {
  21.         display: block;
  22.         margin-bottom: 5px;
  23.         font-weight: bold;
  24.         color: #333; /* Ensuring label text is clearly visible */
  25.     }
  26.     input[type="text"],
  27.     select,
  28.     input[type="file"] {
  29.         width: 100%;
  30.         padding: 8px;
  31.         border: 1px solid #ccc;
  32.         border-radius: 4px;
  33.         box-sizing: border-box; /* Adds padding and border to the element's total width and height */
  34.         color: #333; /* Ensuring input text is clearly visible */
  35.         background-color: #fff; /* Ensuring input background is white for contrast */
  36.     }
  37.     button {
  38.         width: 100%;
  39.         padding: 10px;
  40.         background-color: #007BFF;
  41.         color: white;
  42.         border: none;
  43.         border-radius: 4px;
  44.         cursor: pointer;
  45.         font-size: 16px;
  46.     }
  47.     button:hover {
  48.         background-color: #0056b3;
  49.     }
  50. </style>
  52. <div class="form-container">
  53.     <h1>Add New Movie</h1>
  54.     <form method="post" action="{{ path('movie_add') }}" enctype="multipart/form-data">
  55.         <div class="form-group">
  56.             <label for="title">Title:</label>
  57.             <input type="text" id="title" name="title" required>
  58.         </div>
  59.         <div class="form-group">
  60.             <label for="type">Type:</label>
  61.             <select id="type" name="type">
  62.                 <option value="Blu-Ray">Blu-Ray</option>
  63.                 <option value="DVD">DVD</option>
  64.                 <option value="Other">Other</option>
  65.             </select>
  66.         </div>
  67.         <div class="form-group">
  68.             <label for="status">Status:</label>
  69.             <select id="status" name="status">
  70.                 <option value="Owned">Owned</option>
  71.                 <option value="Ordered">Ordered</option>
  72.             </select>
  73.         </div>
  74.         <div class="form-group">
  75.             <label for="uploadImage">Upload Steelbook Image (optional):</label>
  76.             <input type="file" id="uploadImage" name="uploadImage" accept="image/*" multiple>
  77.         </div>
  78.         <div class="form-group">
  79.             <label for="captureImage">Capture Steelbook Image (optional):</label>
  80.             <input type="file" id="captureImage" name="captureImage" accept="image/*" capture="camera">
  81.         </div>
  82.         <button type="submit">Add Movie</button>
  83.     </form>
  84. </div>
  86. <script>
  87.     // Optional: JavaScript for handling the camera and image preview
  88. </script>
  89. {% endblock %}