Skip to content

Add: Major UI/UX improvements, download greeting feature, fix images #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pookiekun wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add: Major UI/UX improvements, download greeting feature, fix images #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
606 changes: 303 additions & 303 deletions CONTRIBUTING.md
View file
Open in desktop

Large diffs are not rendered by default.

69 changes: 40 additions & 29 deletions Christmas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merry Christmas</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700&family=Tangerine:wght@700&family=Kalam:wght@400;700&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700&family=Tangerine:wght@700&family=Kalam:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/festival.css">
<style>
:root {
Expand All @@ -19,6 +22,7 @@
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
<header>
<h1>Merry Christmas</h1>
Expand All @@ -42,7 +46,7 @@ <h1>Merry Christmas</h1>
</div>
<h2>Share Your Greeting</h2>
<p>Spread the Christmas joy with your friends and family!</p>

<div class="share-options">
<div class="share-option whatsapp" id="whatsappShare">
<i class="fab fa-whatsapp"></i>
Expand All @@ -57,14 +61,14 @@ <h2>Share Your Greeting</h2>
<i class="fas fa-copy"></i>
</div>
</div>

<div class="share-url">
<input type="text" id="shareUrlInput" readonly>
<button id="copyUrlBtn">Copy</button>
</div>
</div>
</div>

<!-- Ad Placeholder 1 -->
<div class="responsive-ad">
<div class="ad-wrapper">
Expand All @@ -77,10 +81,11 @@ <h2>Share Your Greeting</h2>
'params': {}
};
</script>
<script type="text/javascript" src="//aweresolve.com/4ce295f652d4e4cae3fba30855200151/invoke.js"></script>
<script type="text/javascript"
src="//aweresolve.com/4ce295f652d4e4cae3fba30855200151/invoke.js"></script>
</div>
</div>

<div class="form-box" id="formBox">
<h2>Create Your Greeting</h2>
<div class="input-group">
Expand All @@ -91,42 +96,47 @@ <h2>Create Your Greeting</h2>
Generate Greeting
</button>
</div>

<div class="greeting-card" id="greetingCard">
<h2>Merry Christmas</h2>
<img class="greeting-image" id="greetingImage" src="" alt="Christmas Image">

<p class="greeting-text" id="randomWish"></p>

<div class="sender-name" id="senderName"></div>

<p class="christmas-wish">Wishing you a Christmas filled with love, joy, and peace!</p>
<div class="action-btns">
<a href="#" class="action-btn btn-share" id="shareBtn">

<div class="card-actions">
<button class="btn-share" id="shareBtn">
<i class="fas fa-share-alt"></i> Share
</a>
<a href="#" class="action-btn btn-new" id="newCardBtn">
<i class="fas fa-plus"></i> Add Your Name
</a>
</button>
<button class="btn-download" id="downloadBtn">
<i class="fas fa-download"></i> Download
</button>
<button class="btn-new" id="newCardBtn">
<i class="fas fa-redo"></i> Create New
</button>
</div>
</div>
</div>

<!-- Ad Placeholder 2 -->
<div class="ad-placeholder">
<script async="async" data-cfasync="false"
src="//aweresolve.com/5f30fff3bb556620e90e0610b7982216/invoke.js"></script>
<div id="container-5f30fff3bb556620e90e0610b7982216"></div>
</div>

<!-- Ad Placeholder 2 -->
<div class="ad-placeholder">
<script async="async" data-cfasync="false" src="//aweresolve.com/5f30fff3bb556620e90e0610b7982216/invoke.js"></script>
<div id="container-5f30fff3bb556620e90e0610b7982216"></div>
<footer>
<div class="footer-content">
<p class="copyright">© 2025 Christmas Greetings. All Rights Reserved.</p>
</div>

<footer>
<div class="footer-content">
<p class="copyright">© 2025 Christmas Greetings. All Rights Reserved.</p>
</div>
</footer>

</footer>

<script>
const images = [
"images/Christmas.jpg"
"images/Christmas.png"
];

const wishes = [
Expand All @@ -145,4 +155,5 @@ <h2>Merry Christmas</h2>
</script>
<script src="js/festival.js"></script>
</body>

</html>
74 changes: 42 additions & 32 deletions Diwali.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Diwali</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700&family=Tangerine:wght@700&family=Kalam:wght@400;700&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700&family=Tangerine:wght@700&family=Kalam:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/festival.css">
<style>
:root {
Expand All @@ -19,6 +22,7 @@
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
<header>
<h1>Happy Diwali</h1>
Expand All @@ -42,7 +46,7 @@ <h1>Happy Diwali</h1>
</div>
<h2>Share Your Greeting</h2>
<p>Spread the Diwali joy with your friends and family!</p>

<div class="share-options">
<div class="share-option whatsapp" id="whatsappShare">
<i class="fab fa-whatsapp"></i>
Expand All @@ -57,14 +61,14 @@ <h2>Share Your Greeting</h2>
<i class="fas fa-copy"></i>
</div>
</div>

<div class="share-url">
<input type="text" id="shareUrlInput" readonly>
<button id="copyUrlBtn">Copy</button>
</div>
</div>
</div>

<!-- Ad Placeholder 1 -->
<div class="responsive-ad">
<div class="ad-wrapper">
Expand All @@ -77,10 +81,11 @@ <h2>Share Your Greeting</h2>
'params': {}
};
</script>
<script type="text/javascript" src="//aweresolve.com/4ce295f652d4e4cae3fba30855200151/invoke.js"></script>
<script type="text/javascript"
src="//aweresolve.com/4ce295f652d4e4cae3fba30855200151/invoke.js"></script>
</div>
</div>

<div class="form-box" id="formBox">
<h2>Create Your Greeting</h2>
<div class="input-group">
Expand All @@ -91,21 +96,24 @@ <h2>Create Your Greeting</h2>
Generate Greeting
</button>
</div>

<div class="greeting-card" id="greetingCard">
<h2>Happy Diwali</h2>
<img class="greeting-image" id="greetingImage" src="" alt="Diwali Image">

<p class="greeting-text" id="randomWish"></p>

<div class="sender-name" id="senderName"></div>

<p class="festival-wish">Wishing you a Diwali filled with light, love, and prosperity!</p>

<div class="action-btns">
<a href="#" class="action-btn btn-share" id="shareBtn">
<i class="fas fa-share-alt"></i> Share
</a>
<a href="#" class="action-btn btn-download" id="downloadBtn">
<i class="fas fa-download"></i> Download
</a>
<a href="#" class="action-btn btn-new" id="newCardBtn">
<i class="fas fa-plus"></i> Add Your Name
</a>
Expand All @@ -114,32 +122,34 @@ <h2>Happy Diwali</h2>

<!-- Ad Placeholder 2 -->
<div class="ad-placeholder">
<script async="async" data-cfasync="false" src="//aweresolve.com/5f30fff3bb556620e90e0610b7982216/invoke.js"></script>
<script async="async" data-cfasync="false"
src="//aweresolve.com/5f30fff3bb556620e90e0610b7982216/invoke.js"></script>
<div id="container-5f30fff3bb556620e90e0610b7982216"></div>
</div>

<footer>
<div class="footer-content">
<p class="copyright">© 2025 Diwali Greetings. All Rights Reserved.</p>
</div>
</footer>
<script>
const images = [
"images/Diwali.jpg"
];

const wishes = [
"May the festival of lights bring you peace, prosperity, and happiness.",
"Wishing you a sparkling Diwali and a crackling New Year!",
"May your life be as colorful, magnificent, and shimmering as the lights from the lamps of Diwali.",
"Wishing you warmth and love this Diwali.",
"May the beauty of Diwali fill your home with happiness, and may the coming year provide you with everything that brings you joy!",
"Let this Diwali burn all your bad times and enter you in good times.",
"Shine like sparkles, glow like candles, and burn all the negativity like crackles. Wish you all a very lovely & cheerful Diwali.",
"May the divine light of Diwali spread into your life peace, prosperity, happiness, and good health."
];
</script>
<script src="js/festival.js"></script>

<script>
const images = [
"images/Diwali.png"
];

const wishes = [
"May the festival of lights bring you peace, prosperity, and happiness.",
"Wishing you a sparkling Diwali and a crackling New Year!",
"May your life be as colorful, magnificent, and shimmering as the lights from the lamps of Diwali.",
"Wishing you warmth and love this Diwali.",
"May the beauty of Diwali fill your home with happiness, and may the coming year provide you with everything that brings you joy!",
"Let this Diwali burn all your bad times and enter you in good times.",
"Shine like sparkles, glow like candles, and burn all the negativity like crackles. Wish you all a very lovely & cheerful Diwali.",
"May the divine light of Diwali spread into your life peace, prosperity, happiness, and good health."
];
</script>
<script src="js/festival.js"></script>
</body>
</html>

</html>
28 changes: 18 additions & 10 deletions Dussehra.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Dussehra</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700&family=Tangerine:wght@700&family=Kalam:wght@400;700&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700&family=Tangerine:wght@700&family=Kalam:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/festival.css">
<style>
:root {
Expand All @@ -16,13 +19,14 @@
--light: #fffde7;
--dark: #f9a825;
}

.floating-decor i {
color: var(--primary);
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
<header>
<h1>Happy Dussehra</h1>
Expand All @@ -46,7 +50,7 @@ <h1>Happy Dussehra</h1>
</div>
<h2>Share Your Greeting</h2>
<p>Celebrate the victory of good over evil!</p>

<div class="share-options">
<div class="share-option whatsapp" id="whatsappShare">
<i class="fab fa-whatsapp"></i>
Expand All @@ -61,14 +65,14 @@ <h2>Share Your Greeting</h2>
<i class="fas fa-copy"></i>
</div>
</div>

<div class="share-url">
<input type="text" id="shareUrlInput" readonly>
<button id="copyUrlBtn">Copy</button>
</div>
</div>
</div>

<div class="form-box" id="formBox">
<h2>Create Your Greeting</h2>
<div class="input-group">
Expand All @@ -79,20 +83,23 @@ <h2>Create Your Greeting</h2>
Generate Greeting
</button>
</div>

<div class="greeting-card" id="greetingCard">
<h2>Happy Dussehra</h2>
<img class="greeting-image" id="greetingImage" src="" alt="Dussehra Image">

<p class="greeting-text" id="randomWish"></p>

<p class="wishing-you">Wishing You</p>
<h3 class="sender-name" id="senderName"></h3>

<div class="card-actions">
<button class="btn-share" id="shareBtn">
<i class="fas fa-share-alt"></i> Share
</button>
<button class="btn-download" id="downloadBtn">
<i class="fas fa-download"></i> Download
</button>
<button class="btn-new" id="newCardBtn">
<i class="fas fa-redo"></i> Create New
</button>
Expand All @@ -102,7 +109,7 @@ <h3 class="sender-name" id="senderName"></h3>

<script>
const images = [
"images/Dussehra.jpg"
"images/Dussehra.png"
];

const wishes = [
Expand All @@ -115,4 +122,5 @@ <h3 class="sender-name" id="senderName"></h3>
</script>
<script src="js/festival.js"></script>
</body>

</html>
Loading