Calculator Tools Calculator Tools
Create

EventConnect - Join Local Events Like Never Before!

Sep 4, 2025

About this app

EventConnect is a hybrid social platform that allows users to create and join local events such as pickup games or bar meet-ups. Connect with friends and the community!

PhotoShare - Share Moments that Matter! PhotoShare Share Your Moments Upload Image Your Images

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>PhotoShare - Share Moments that Matter!</title>
<meta name="description" content="PhotoShare is a dynamic photo-sharing app where users can upload, share, and comment on images while maintaining a vibrant gallery of memories.">
<meta name="keywords" content="photo sharing, image gallery, community images, social networking, moments, photography">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">

<script type="text/javascript">
try {
const images = [];

document.addEventListener("DOMContentLoaded", function() {
document.getElementById("image-form").addEventListener("submit", uploadImage);
renderImages();
});

function uploadImage(e) {
e.preventDefault();
const imageUrl = document.getElementById("image-url").value;
const imageComment = document.getElementById("image-comment").value;

if (imageUrl) {
const newImage = { url: imageUrl, comment: imageComment };
images.push(newImage);
document.getElementById("image-form").reset();
renderImages();
}
}

function renderImages() {
const imageList = document.getElementById("image-list");
imageList.innerHTML = images.map((image) => `
<div class="image-card" style="background-color: #f9f9f9; border-radius: 8px; padding: 10px; margin: 10px 0;">
<img src="${image.url}" alt="${image.comment}" class="img-fluid" style="border-radius: 5px; max-height: 300px;">
<p style="margin: 5px 0; font-weight: bold;">${image.comment}</p>
</div>
`).join('');
}

} catch (error) {
throw error;
}
</script>

<style>
body {
background: linear-gradient(150deg, #c9c9ff 0%, #e5e5ff 100%);
color: #333;
font-family: 'Roboto', sans-serif;
padding: 20px;
}
h1 {
font-size: 2.5em;
color: #678cfc;
}
.image-card {
transition: transform 0.2s;
}
.image-card:hover {
transform: scale(1.02);
}
.input-container {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>PhotoShare</h1>
<h3>Share Your Moments</h3>
<form id="image-form" class="mb-4">
<div class="input-container">
<input type="url" id="image-url" class="form-control mb-2" placeholder="Image URL" required>
</div>
<div class="input-container">
<input type="text" id="image-comment" class="form-control mb-2" placeholder="Image Comment" required>
</div>
<button type="submit" class="btn btn-primary">Upload Image</button>
</form>
<h3>Your Images</h3>
<div id="image-list" class="mb-4"></div>
</div>
</body>
</html>