codenihar · vamdevvamsiR · May 23, 2024 · May 23, 2024 · May 23, 2024 · May 23, 2024
diff --git a/CSSloaders.js b/CSSloaders.js
@@ -0,0 +1,18 @@
+module.exports = {
+    // other configurations
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          use: ['style-loader', 'css-loader', 'postcss-loader'],
+        },
+        {
+          test: /\.js$/,
+          enforce: 'pre',
+          use: ['source-map-loader'],
+        },
+      ],
+    },
+    // other configurations
+  };
+
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Propose your GF/BF using React Love Letter
 
 Developed by [Dodagatta Nihar](https://instagram.com/niihaaarrrr)
-Website Link: [Click Here](https://react-love-letter.vercel.app)
+Website Link: [Click Here](https://react-love-letter-v.vercel.app)
 
 ### How to use this?
 Just fork the repository and install dependencies and run 'npm start' and done :)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "npm-force-resolutions": "0.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -15,7 +16,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "preinstall": "npx npm-force-resolutions"
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +36,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "resolutions": {
+    "postcss": "^8.4.38",
+    "nth-check": "^2.1.1"
+  },
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "nth-check": "^2.1.1",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/usicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/public/manifest.json b/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "usicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "uss.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "uss.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/public/usicon.ico b/public/usicon.ico
diff --git a/public/uss - Copy.png b/public/uss - Copy.png
diff --git a/public/uss.png b/public/uss.png
diff --git a/src/components/LoveLetter/Buchii.mp3 b/src/components/LoveLetter/Buchii.mp3
diff --git a/src/components/LoveLetter/LoveLetter.css b/src/components/LoveLetter/LoveLetter.css
@@ -1,73 +1,128 @@
-@import url('https://fonts.googleapis.com/css2?family=Sedan:ital@0;1&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dramatico&display=swap');
 
 .envelope {
     position: relative;
-    width: 600px;
-    height: 400px;
-    margin: 50px auto;
+    width: 1300px;
+    height: 600px;
+    margin: 30px auto;
     cursor: pointer;
     perspective: 1000px;
-    background: url('https://static.vecteezy.com/system/resources/previews/010/029/965/non_2x/love-letter-pattern-texture-with-text-effect-on-a-white-background-valentine-s-day-special-seamless-pattern-design-with-love-shapes-love-endless-pattern-decoration-for-bed-sheets-and-wallpapers-vector.jpg');
+    background: url('https://raw.githubusercontent.com/vamdevvamsiR/react-love-letter-v/personal/src/components/LoveLetter/%E2%80%94Pngtree%E2%80%94valentine%20s%20day%20heart%20striped_1171178.png');
+    background-size: cover;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    transition: transform 0.6s ease;
+    transition: transform 1s ease; 
   }
 
   .flap {
     position: absolute;
     width: 100%;
-    height: 50%;
-    background: url('https://static.vecteezy.com/system/resources/previews/010/029/965/non_2x/love-letter-pattern-texture-with-text-effect-on-a-white-background-valentine-s-day-special-seamless-pattern-design-with-love-shapes-love-endless-pattern-decoration-for-bed-sheets-and-wallpapers-vector.jpg');
-    transform-origin: bottom;
+    height: 30%;
+    background: url('https://github.com/vamdevvamsiR/react-love-letter-v/blob/personal/src/components/LoveLetter/vecteezy_trendy-seamless-pattern-with-cute-3d-hearts-vector-red_36711724.jpg?raw=true');
+    /*background: url('https://raw.githubusercontent.com/vamdevvamsiR/react-love-letter-v/personal/src/components/LoveLetter/%E2%80%94Pngtree%E2%80%94valentine%20s%20day%20heart%20striped_1171178.png');*/
+    background-size: cover;
+    transform-origin: top;
     transition: transform 0.8s ease;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   }
-
+    
   .body {
-    position: absolute;
+    position: sticky;
     top: 50%;
     width: 100%;
-    height: 50%;
-    background: url('https://static.vecteezy.com/system/resources/previews/010/029/965/non_2x/love-letter-pattern-texture-with-text-effect-on-a-white-background-valentine-s-day-special-seamless-pattern-design-with-love-shapes-love-endless-pattern-decoration-for-bed-sheets-and-wallpapers-vector.jpg');
+    height: 70%;
+   background: url('https://github.com/vamdevvamsiR/react-love-letter-v/blob/personal/src/components/LoveLetter/vecteezy_trendy-seamless-pattern-with-cute-3d-hearts-vector-red_36711724.jpg?raw=true');
+    /*background: url('https://raw.githubusercontent.com/vamdevvamsiR/react-love-letter-v/personal/src/components/LoveLetter/%E2%80%94Pngtree%E2%80%94valentine%20s%20day%20heart%20striped_1171178.png');*/
+    background-size: cover;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
+    transition: transform 1.5s ease;
+    transform-origin:bottom;
     z-index: -1;
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
   }
-  
+
   .letter {
     position: absolute;
-    top: 50%;
-    left: 0;
+    top: 100%;
     width: 100%;
-    height: 50%;
-    background-color: #fafafa;
-    overflow: hidden;
-    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
+    height: 100vh;
+    background: rgba(255,255,255,1);
+
+    background-blend-mode: multiply;
+    background-image: url('https://github.com/vamdevvamsiR/react-love-letter-v/blob/personal/src/components/LoveLetter/copy.jpg?raw=true'),linear-gradient(rgba(0, 0, 0, 10px));
+
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: cover;
+    scroll-behavior:smooth;
+    overflow: scroll;
+    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
     transform-origin: bottom;
     z-index: -2;
     opacity: 0;
-    font-family: "Sedan", serif;
-    font-weight: 400;
+    font-family: 'Dramatico', cursive;
+    text-wrap:stable;
+    font-weight: 600;
     font-style: normal;
     font-size: 20px;
+    text-shadow: 1px 4px 4px rgba(27, 27, 27, 0.5);
     padding: 20px;
+    font: outline 1px;
     box-sizing: border-box;
     text-align: justify;
+    background-attachment:scroll ; 
+
   }
+
+  .letter::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 160vh;
+    opacity: 0.35; 
+    background-image: url('https://github.com/vamdevvamsiR/react-love-letter-v/blob/personal/src/components/LoveLetter/copy.jpg?raw=true');
+    background-size: cover;
+    box-sizing: border-box;
+    background-position: top;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    z-index: -1;
+   }
 
   .open .flap {
-    transform: rotateX(-180deg);
+    transform: rotateX(180deg);
+    animation: fadeOut 0.8s forwards;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+
   }
-
+
+  .open .body {
+    animation: fadeOut 1s forwards;
+    transform: rotateX(-180deg);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+
+    }
+
+    @keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+    } 
+    .open .letter{
+      background-image:cross-fade(2)
+    }
+
   .letter.fullSize {
     top: 0%;
     height: 100%;  /* Expand to full screen */
     opacity: 1;
     z-index: -2;
-    transform: scale(1);  /* Scale up if necessary */
+    transform: scale(1);
+
+    font-family: 'Dramatico', cursive; /* Scale up if necessary */
   }
-
+
diff --git a/src/components/LoveLetter/LoveLetter.js b/src/components/LoveLetter/LoveLetter.js
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import './LoveLetter.css';
-import audioFile from './kushi.mp3';
+import audioFile from './Buchii.mp3';
 
 const LoveLetter = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -35,10 +35,47 @@ const LoveLetter = () => {
       <div className="flap"></div>
       <div className="body"></div>
       <div className={`letter ${isFullSize ? 'fullSize' : ''}`}>
-        mah dear kundanapu bomma🖤,<br />
-        never have i been so blessed as to fall in love with someone as wonderful as you...<br />i loveeee youuuu :)<br />
-        always yours,<br />
-        @niihaaarrrr
+        Hey my thingarii tejuuu🖤,
+       <p> <i>This is here to tell you something important🥸 for me, you aaand <b>FOR US🧑🏻‍🤝‍👩🏻</b>.</i></p>
+        Amongst all chaos, we both managed to become one🥰. I can understand how happy that makes you🤗. 
+        No matter, how many girls are there in my life or come into my life, no body is above you and none of them can take me from you😘, 
+        This man is yours darling✨.
+        Just remember that I'm always here for you and with you🫂. My love, I want to have a peaceful life with you🍃🍀, 
+        that's as amazing as your energy🌟 and as beautiful as those moon🌛 & stars✨.
+        For this journey of our life, I wish we only have lots and lots of understandings😌 and corrected understandings✅, 
+        but not misunderstandings🧐.
+        And daaniki mana iddari efforts avsaram and I know that manam iddaram ade nammutham and chestham🤗. And paapa, 
+        I'm so sorry🫂🫂 if my absence or my unknowingly happened mistakes ever hurt you. 
+        Tejamma, I put my every piece of mind and every drop of sweat to KNOW YOU, to be with you and to improve you🌟.
+        Teju I WANT to make <b>you</b> "equal" <b>to me</b> in all aspects, nuv naku samanam ga undaali anukunta, atleast maximum of them, 
+        that's why sometimes, I force you to do things and ask you to change few things,
+        This MAN!!, I mean YOUR MANN !!, never means to hurt,rather, he just wants to make you into a better version of yourself🌟, daily.
+        For me your happiness is important, so is your health and growth👑. <br/> <br/>
+        Arey tejuuu🖤, we need to work hard and better ra nanna. Neeku telsu ga nen recentga motham anni neat ga start chestunna ani, 
+        so for that I need your support.
+        yeah, emaina avsaram unte chestav, but not that. E process lo, I may not msg u properly🙃, I may not be able to spend maximum time 
+        online with you.But, when I'm free,
+        I'll definitely reply on time. One thing, I hope you understand stay calm when I go off the chats & calls. Naku nenu ga msg cheytam anedi 
+        kastam avtundi, 
+        but we WILL stay connected.
+        But all the time anedi cheppalem. But direct ga unnappdu I'm all yours. 
+        Buchamma❣️, remember One thing‼️, when you want to talk to me, 
+        I mean miss avtunnappudu, baga matladali anipinchinappudu, avsaram unnappudu 
+        "buchi/nanna oka sari chat loki rava or call chey" ani msg chey, ledu ante direct ga call ye chesey no problem, first calll lift cheyyakpoina, 
+        2nd call ki matram lift chestha. 
+        We shall talk about this clearly in person!.
+        <br/>This part of our lives is crucial for both of us.<br/>And when I'm doing the work,
+        I want you to do the same, we should be doing some productive work <b>FOR <i>OUR,</i> FUTURE!!</b> Let's do this together for us ra tejuthalli.
+        If we spend time improving eachother by working on ourselves, later we can spend long hours TOGETHER. Proper ga ne convey chesa anukuntunna. 
+        Tejuu, Let's do our best ra, let's show the world that we are a great couple. I believe that I inspired atleast few as a person. Now let's inspire as a couple. "TOGETHER"
+        Let's make our <b>love</b> win with all our hardwork and efforts. Let's enjoy but also work with proper usage of time.<br/>
+        I do appreciate how wholeheartedly you love me. I can't thank you enough. I'm so happy. Let's grow, celebrate and enrich our love😌🥰😘✨.
+
+
+
+       <br/> <br />Love you to the moon and back my love😘🥰😌<br />
+        I'm always yours🖤,<br />
+        @Your Buchhiii💕✨
       </div>
       <audio ref={audioRef} src={audioFile} onError={(e) => console.error('Audio error:', e.message)} />
     </div>

diff --git a/src/components/LoveLetter/copy.jpg b/src/components/LoveLetter/copy.jpg
diff --git a/src/components/LoveLetter/kushi.mp3 b/src/components/LoveLetter/kushi.mp3
diff --git a/...er/vecteezy_trendy-seamless-pattern-with-cute-3d-hearts-vector-red_36711724.jpg b/...er/vecteezy_trendy-seamless-pattern-with-cute-3d-hearts-vector-red_36711724.jpg
diff --git a/src/components/LoveLetter/—Pngtree—valentine s day heart striped_1171178.png b/src/components/LoveLetter/—Pngtree—valentine s day heart striped_1171178.png