Skip to content

Commit 65a4e84

Browse files
sunmughansunmughan
committed
Initial commit: Friendship Day Greetings Web App with interactive features and animations
0 parents  commit 65a4e84

4 files changed

Lines changed: 1328 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# 🎉 Friendship Day Greetings Web App
2+
3+
A beautiful and interactive web application for creating personalized friendship day greetings with amazing effects and animations.
4+
5+
## ✨ Features
6+
7+
### 📝 Interactive Form
8+
- Friend's name input with real-time preview
9+
- Special memories text area
10+
- Personal message section
11+
- Photo/video upload with preview (supports multiple files)
12+
13+
### 🎨 Visual Effects & Animations
14+
- **Background Effects:** Floating Hearts 💕, Sparkles ✨, Confetti 🎊, Bubbles 🫧
15+
- **Card Styles:** Classic 🌸, Modern 🎨, Vintage 📜, Neon 💫
16+
- **Text Animations:** Bounce 🎈, Glow 🌟, Typewriter ⌨️, Rainbow 🌈
17+
18+
### 🎁 Greeting Card Features
19+
- Real-time preview of the greeting card
20+
- Beautiful gradient backgrounds and styling
21+
- Media gallery for uploaded photos/videos
22+
- Rotating friendship quotes
23+
- Responsive design for all devices
24+
25+
### 🚀 Interactive Elements
26+
- Download functionality (ready for html2canvas integration)
27+
- Share feature with Web Share API support
28+
- Reset form option
29+
- Hover effects and smooth animations
30+
- Toast notifications for user feedback
31+
32+
## 🌐 Live Demo
33+
34+
[View Live Demo](https://your-username.github.io/friendshipday)
35+
36+
## 🛠️ Technologies Used
37+
38+
- HTML5
39+
- CSS3 (with animations and effects)
40+
- Vanilla JavaScript
41+
- Font Awesome Icons
42+
- Google Fonts (Poppins & Dancing Script)
43+
44+
## 🚀 Getting Started
45+
46+
1. Clone the repository:
47+
```bash
48+
git clone https://github.com/your-username/friendshipday.git
49+
```
50+
51+
2. Navigate to the project directory:
52+
```bash
53+
cd friendshipday
54+
```
55+
56+
3. Open `index.html` in your browser or serve it using a local server:
57+
```bash
58+
python -m http.server 8000
59+
```
60+
61+
4. Visit `http://localhost:8000` in your browser
62+
63+
## 📁 Project Structure
64+
65+
```
66+
friendshipday/
67+
├── index.html # Main HTML file
68+
├── styles.css # CSS styling and animations
69+
├── script.js # JavaScript functionality
70+
└── README.md # Project documentation
71+
```
72+
73+
## 🎯 How to Use
74+
75+
1. **Enter Friend's Name:** Type your friend's name in the input field
76+
2. **Add Memories:** Share your favorite memories together
77+
3. **Write a Message:** Add a heartfelt personal message
78+
4. **Upload Media:** Add photos or videos to make it special
79+
5. **Choose Effects:** Select from various background effects
80+
6. **Pick a Style:** Choose your preferred card style
81+
7. **Add Animations:** Apply text animations to make it dynamic
82+
8. **Create & Share:** Generate your greeting and share with friends!
83+
84+
## 🌟 Features in Detail
85+
86+
### Background Effects
87+
- **Floating Hearts:** Romantic floating heart animations
88+
- **Sparkles:** Magical sparkle effects
89+
- **Confetti:** Celebratory confetti animation
90+
- **Bubbles:** Peaceful floating bubbles
91+
92+
### Card Styles
93+
- **Classic:** Traditional soft gradient background
94+
- **Modern:** Bold contemporary design
95+
- **Vintage:** Retro sepia-toned appearance
96+
- **Neon:** Futuristic dark theme with neon colors
97+
98+
### Text Animations
99+
- **Bounce:** Playful bouncing text effect
100+
- **Glow:** Elegant glowing text animation
101+
- **Typewriter:** Classic typewriter typing effect
102+
- **Rainbow:** Colorful rainbow text animation
103+
104+
## 🤝 Contributing
105+
106+
Contributions are welcome! Please feel free to submit a Pull Request.
107+
108+
## 📄 License
109+
110+
This project is open source and available under the [MIT License](LICENSE).
111+
112+
## 💝 Perfect for
113+
114+
- Friendship Day celebrations
115+
- Birthday wishes for friends
116+
- Thank you messages
117+
- Appreciation notes
118+
- Any special friendship moments
119+
120+
---
121+
122+
**Made with ❤️ for celebrating friendships around the world!**

‎index.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Friendship Day Greetings 💝</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10+
</head>
11+
<body>
12+
<div class="container">
13+
<header class="header">
14+
<h1 class="title">
15+
<i class="fas fa-heart"></i>
16+
Friendship Day Greetings
17+
<i class="fas fa-heart"></i>
18+
</h1>
19+
<p class="subtitle">Create beautiful memories with your best friends! 🌟</p>
20+
</header>
21+
22+
<main class="main-content">
23+
<div class="form-section">
24+
<div class="form-card">
25+
<h2><i class="fas fa-user-friends"></i> Create Your Greeting</h2>
26+
27+
<div class="input-group">
28+
<label for="friendName">Friend's Name</label>
29+
<input type="text" id="friendName" placeholder="Enter your friend's name...">
30+
</div>
31+
32+
<div class="input-group">
33+
<label for="memories">Special Memories</label>
34+
<textarea id="memories" placeholder="Share your favorite memories together..."></textarea>
35+
</div>
36+
37+
<div class="input-group">
38+
<label for="message">Personal Message</label>
39+
<textarea id="message" placeholder="Write a heartfelt message..."></textarea>
40+
</div>
41+
42+
<div class="input-group">
43+
<label for="photoUpload">Add Photos/Videos</label>
44+
<input type="file" id="photoUpload" accept="image/*,video/*" multiple>
45+
<div class="upload-preview" id="uploadPreview"></div>
46+
</div>
47+
48+
<div class="effects-section">
49+
<h3><i class="fas fa-magic"></i> Choose Effects & Animations</h3>
50+
51+
<div class="effect-category">
52+
<h4>Background Effects</h4>
53+
<div class="effect-options">
54+
<button class="effect-btn" data-effect="hearts">💕 Floating Hearts</button>
55+
<button class="effect-btn" data-effect="sparkles">✨ Sparkles</button>
56+
<button class="effect-btn" data-effect="confetti">🎊 Confetti</button>
57+
<button class="effect-btn" data-effect="bubbles">🫧 Bubbles</button>
58+
</div>
59+
</div>
60+
61+
<div class="effect-category">
62+
<h4>Card Styles</h4>
63+
<div class="effect-options">
64+
<button class="style-btn" data-style="classic">🌸 Classic</button>
65+
<button class="style-btn" data-style="modern">🎨 Modern</button>
66+
<button class="style-btn" data-style="vintage">📜 Vintage</button>
67+
<button class="style-btn" data-style="neon">💫 Neon</button>
68+
</div>
69+
</div>
70+
71+
<div class="effect-category">
72+
<h4>Text Animations</h4>
73+
<div class="effect-options">
74+
<button class="animation-btn" data-animation="bounce">🎈 Bounce</button>
75+
<button class="animation-btn" data-animation="glow">🌟 Glow</button>
76+
<button class="animation-btn" data-animation="typewriter">⌨️ Typewriter</button>
77+
<button class="animation-btn" data-animation="rainbow">🌈 Rainbow</button>
78+
</div>
79+
</div>
80+
</div>
81+
82+
<button class="create-btn" id="createGreeting">
83+
<i class="fas fa-gift"></i>
84+
Create Greeting Card
85+
</button>
86+
</div>
87+
</div>
88+
89+
<div class="preview-section">
90+
<div class="greeting-card" id="greetingCard">
91+
<div class="card-background" id="cardBackground">
92+
<div class="effects-container" id="effectsContainer"></div>
93+
94+
<div class="card-content">
95+
<div class="friend-name" id="displayName">Your Friend's Name</div>
96+
97+
<div class="media-container" id="mediaContainer">
98+
<div class="placeholder-media">
99+
<i class="fas fa-images"></i>
100+
<p>Photos/Videos will appear here</p>
101+
</div>
102+
</div>
103+
104+
<div class="memories-section" id="displayMemories">
105+
<h3>Our Special Memories</h3>
106+
<p>Your memories will appear here...</p>
107+
</div>
108+
109+
<div class="message-section" id="displayMessage">
110+
<h3>A Message for You</h3>
111+
<p>Your message will appear here...</p>
112+
</div>
113+
114+
<div class="friendship-quote">
115+
"Friendship is the only cement that will ever hold the world together." 💕
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
121+
<div class="action-buttons">
122+
<button class="action-btn" id="downloadBtn">
123+
<i class="fas fa-download"></i>
124+
Download
125+
</button>
126+
<button class="action-btn" id="shareBtn">
127+
<i class="fas fa-share"></i>
128+
Share
129+
</button>
130+
<button class="action-btn" id="resetBtn">
131+
<i class="fas fa-refresh"></i>
132+
Reset
133+
</button>
134+
</div>
135+
</div>
136+
</main>
137+
</div>
138+
139+
<script src="script.js"></script>
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)