76 lines
3.8 KiB
Plaintext
76 lines
3.8 KiB
Plaintext
{*
|
|
* Amsterdam Web Communities System
|
|
* Copyright (c) 2025 Erbosoft Metaverse Design Solutions, All Rights Reserved
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
*}
|
|
<!-- Page Title -->
|
|
<div class="p-4">
|
|
<div class="mb-6">
|
|
<h1 class="text-blue-800 text-4xl font-bold mb-2">Upload User Photo</h1>
|
|
<hr class="border-2 border-gray-400 w-4/5 mb-4">
|
|
</div>
|
|
|
|
<!-- Upload Form -->
|
|
<form method="POST" enctype="multipart/form-data" action="/profile_photo" class="max-w-2xl">
|
|
<input type="hidden" name="tgt" value="{{ target }}">
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg">
|
|
<div class="flex items-start gap-6">
|
|
<!-- Current Photo -->
|
|
<div class="flex-shrink-0">
|
|
<div class="border-2 border-gray-300 rounded">
|
|
<img src="{{ photo_url }}" alt="Current user photo" class="w-25 h-25">
|
|
</div>
|
|
<p class="text-xs text-gray-600 text-center mt-2">Current Photo</p>
|
|
</div>
|
|
|
|
<!-- Upload Controls -->
|
|
<div class="flex-1">
|
|
<div class="mb-6">
|
|
<label for="thepic" class="block text-black text-sm font-medium mb-2">
|
|
New user photo:
|
|
</label>
|
|
<input type="file" id="thepic" name="thepic" accept="image/*"
|
|
class="block w-full text-sm text-gray-900 border border-gray-300 rounded cursor-pointer bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700">
|
|
<p class="mt-2 text-xs text-gray-600">
|
|
Recommended: Square images work best. Maximum file size: 2MB. Supported formats: JPG, PNG, GIF.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex gap-4">
|
|
<button type="submit"
|
|
name="upload"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-2 rounded font-medium transition-colors">
|
|
Upload Photo
|
|
</button>
|
|
<button type="submit"
|
|
name="cancel"
|
|
class="bg-red-600 hover:bg-red-700 text-white px-8 py-2 rounded font-medium transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button type="submit"
|
|
name="remove"
|
|
class="bg-red-600 hover:bg-red-700 text-white px-8 py-2 rounded font-medium transition-colors">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Instructions -->
|
|
<div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
|
|
<h3 class="text-sm font-bold text-blue-900 mb-2">Photo Guidelines:</h3>
|
|
<ul class="text-xs text-blue-800 space-y-1 list-disc list-inside">
|
|
<li>Your photo will be visible to other users in the community</li>
|
|
<li>Photos should be appropriate for a professional community setting</li>
|
|
<li>The image will be automatically resized to fit the profile display</li>
|
|
<li>You can update or remove your photo at any time</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div> |