Hugging Face's logo

Spaces:
abeea
/
pdff
Running

App Files Community
abeea commited on
Commit
c216d73
·
verified ·
1 Parent(s): 3f125da

Update popup.html

Browse files
Files changed (1) hide show
  1. popup.html +72 -54
popup.html CHANGED
@@ -1,90 +1,108 @@
1
  <style>
2
- /* Popup Overlay */
3
- #authorPopupOverlay {
4
- position: fixed;
5
- top: 0;
6
- left: 0;
7
- width: 100%;
8
- height: 100%;
9
- background: rgba(0, 0, 0, 0.45);
10
  display: flex;
11
  justify-content: center;
12
- align-items: center;
13
- z-index: 9999;
14
- animation: fadeIn 0.3s ease-in-out;
15
  }
16
 
17
- /* Popup Box */
18
- #authorPopupBox {
 
19
  background: #ffffff;
20
- padding: 2.5rem;
21
  border-radius: 1.5rem;
22
- max-width: 420px;
23
  text-align: center;
24
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
25
  font-family: 'Playfair Display', serif;
26
- animation: slideUp 0.3s ease-in-out;
27
  }
28
 
29
- /* WhatsApp Button */
30
- .popup-btn {
 
 
 
 
 
 
 
 
 
 
 
31
  background-color: #8a5b44;
32
  color: white;
33
  padding: 0.6rem 1.8rem;
34
  border-radius: 50px;
35
  text-decoration: none;
36
  display: inline-block;
37
- margin-top: 1rem;
38
  transition: 0.3s ease;
39
  }
40
 
41
- .popup-btn:hover {
42
  background-color: #6a453b;
43
  }
 
44
 
45
- /* Close Button */
46
- #closePopup {
47
- margin-top: 1rem;
48
- background: none;
49
- border: none;
50
- color: #777;
51
- cursor: pointer;
52
- font-size: 0.9rem;
53
- }
54
 
55
- /* Animations */
56
- @keyframes fadeIn {
57
- from { opacity: 0; }
58
- to { opacity: 1; }
59
- }
 
 
 
 
 
 
 
 
60
 
61
- @keyframes slideUp {
62
- from { transform: translateY(20px); opacity: 0; }
63
- to { transform: translateY(0); opacity: 1; }
64
- }
65
- </style>
66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
 
68
- <div id="authorPopupOverlay">
69
- <div id="authorPopupBox">
70
- <h3 style="color:#8a5b44; font-weight:bold;">
71
- Stay Connected
72
- </h3>
73
 
74
- <p style="margin-top:1rem;">
75
- Follow the WhatsApp Channel of
76
- <strong>Mohsin Kamil</strong><br>
77
- for updates about upcoming stories.
 
 
 
 
78
  </p>
79
 
80
  <a href="https://whatsapp.com/channel/YOUR_CHANNEL_LINK"
81
  target="_blank"
82
- class="popup-btn">
83
- Follow Now
84
  </a>
 
 
85
 
86
- <br>
87
 
88
- <button id="closePopup">Maybe Later</button>
 
 
 
 
 
 
 
 
89
  </div>
90
- </div>
 
1
  <style>
2
+ .section-wrapper {
3
+ padding: 4rem 2rem;
4
+ background: #fdfaf6;
 
 
 
 
 
5
  display: flex;
6
  justify-content: center;
 
 
 
7
  }
8
 
9
+ .elegant-box {
10
+ max-width: 850px;
11
+ width: 100%;
12
  background: #ffffff;
13
+ padding: 3rem;
14
  border-radius: 1.5rem;
15
+ box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
16
  text-align: center;
 
17
  font-family: 'Playfair Display', serif;
 
18
  }
19
 
20
+ .elegant-box h2 {
21
+ font-size: 2.2rem;
22
+ color: #8a5b44;
23
+ margin-bottom: 1.5rem;
24
+ }
25
+
26
+ .elegant-box p {
27
+ font-size: 1.2rem;
28
+ line-height: 2rem;
29
+ color: #4a3e3e;
30
+ }
31
+
32
+ .follow-btn {
33
  background-color: #8a5b44;
34
  color: white;
35
  padding: 0.6rem 1.8rem;
36
  border-radius: 50px;
37
  text-decoration: none;
38
  display: inline-block;
39
+ margin-top: 1.5rem;
40
  transition: 0.3s ease;
41
  }
42
 
43
+ .follow-btn:hover {
44
  background-color: #6a453b;
45
  }
46
+ </style>
47
 
 
 
 
 
 
 
 
 
 
48
 
49
+ <!-- 🌟 Special Thanks -->
50
+ <section class="section-wrapper">
51
+ <div class="elegant-box">
52
+ <h2>Special Thanks</h2>
53
+ <p>
54
+ To my sister, <strong>"T"</strong> —<br>
55
+ Thank you for believing in me when I didn’t believe in myself.<br>
56
+ Your unwavering support gave me the strength to publish this.<br>
57
+ This book exists because you never let me give up.
58
+ </p>
59
+ <p style="margin-top:2rem;">— Mohsin Kamil</p>
60
+ </div>
61
+ </section>
62
 
 
 
 
 
 
63
 
64
+ <!-- 🙏 Thank You -->
65
+ <section class="section-wrapper">
66
+ <div class="elegant-box">
67
+ <h2>Thank You</h2>
68
+ <p>
69
+ Thank you for taking the time to read <strong>Main Akeli Thi</strong>.<br><br>
70
+ This story holds a special place in my heart, and I hope it resonated with you.<br>
71
+ Your support and encouragement mean the world to me.<br><br>
72
+ Stay kind. Stay connected.
73
+ </p>
74
+ <p style="margin-top:2rem;">— Mohsin Kamil</p>
75
+ </div>
76
+ </section>
77
 
 
 
 
 
 
78
 
79
+ <!-- 📢 WhatsApp Follow -->
80
+ <section class="section-wrapper">
81
+ <div class="elegant-box">
82
+ <h2>Follow for More Stories</h2>
83
+ <p>
84
+ Want updates about upcoming stories and exclusive releases?<br><br>
85
+ Follow the official WhatsApp Channel of
86
+ <strong>Mohsin Kamil</strong> and stay connected.
87
  </p>
88
 
89
  <a href="https://whatsapp.com/channel/YOUR_CHANNEL_LINK"
90
  target="_blank"
91
+ class="follow-btn">
92
+ Join WhatsApp Channel
93
  </a>
94
+ </div>
95
+ </section>
96
 
 
97
 
98
+ <!-- 📬 Contact the Author -->
99
+ <section class="section-wrapper">
100
+ <div class="elegant-box">
101
+ <h2>Contact the Author</h2>
102
+ <p>
103
+ For feedback, questions, or just to say hello,<br><br>
104
+ 📧 <a href="mailto:Mohsinkamil11@gmail.com" style="color:#8a5b44; font-weight:bold; text-decoration:none;">
105
+ Mohsinkamil11@gmail.com</a>
106
+ </p>
107
  </div>
108
+ </section>