File size: 6,418 Bytes
463b1f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Post - FlowFlex</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
secondary: {
50: '#fdf4ff',
100: '#fae8ff',
200: '#f5d0fe',
300: '#f0abfc',
400: '#e879f9',
500: '#d946ef',
600: '#c026d3',
700: '#a21caf',
800: '#86198f',
900: '#701a75',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-6 max-w-4xl">
<div class="bg-white rounded-xl shadow-sm p-6">
<h1 class="text-2xl font-bold text-gray-900 mb-6">Create Post</h1>
<form id="create-post-form" class="space-y-6">
<!-- Media Upload -->
<div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center">
<i data-feather="upload" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
<p class="text-gray-600 mb-2">Upload photo or video</p>
<p class="text-gray-400 text-sm">PNG, JPG, MP4 up to 50MB</p>
<input type="file" id="media-upload" class="hidden" accept="image/*,video/*">
<button type="button" onclick="document.getElementById('media-upload').click()" class="mt-4 px-6 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors duration-200">
Select File
</button>
</div>
<!-- Caption -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Caption</label>
<textarea
id="caption"
placeholder="What's on your mind?"
class="w-full px-4 py-3 border border-gray-300 rounded-lg resize-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
rows="4"
></textarea>
</div>
<!-- Category -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
<select id="category" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary-500 focus:ring-1 focus:ring-primary-500">
<option value="nature">Nature</option>
<option value="technology">Technology</option>
<option value="travel">Travel</option>
<option value="food">Food</option>
<option value="people">People</option>
<option value="architecture">Architecture</option>
</select>
</div>
<!-- Tags -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
<input
type="text"
id="tags"
placeholder="Add tags (comma separated)"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
placeholder="travel, adventure, nature"
>
</div>
<!-- Privacy Settings -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Privacy</label>
<div class="flex space-x-4">
<label class="flex items-center">
<input type="radio" name="privacy" value="public" checked class="mr-2">
Public
</label>
<label class="flex items-center">
<input type="radio" name="privacy" value="followers" class="mr-2">
Followers
</label>
<label class="flex items-center">
<input type="radio" name="privacy" value="private" class="mr-2">
Private
</label>
</div>
</div>
<!-- Submit Button -->
<div class="flex space-x-4">
<button type="button" onclick="window.history.back()" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors duration-200">
Cancel
</button>
<button type="submit" class="px-6 py-3 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors duration-200">
<i data-feather="send" class="w-4 h-4 mr-2"></i>
Share Post
</button>
</div>
</form>
</div>
</main>
<custom-footer></custom-footer>
<!-- Web Components -->
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/auth-modal.js"></script>
<!-- Main Script -->
<script src="script.js"></script>
<!-- Initialize Feather Icons -->
<script>
feather.replace();
</script>
</body>
</html> |