From 537d2c3901338e89c73a5a2389de7a1c3ef3e1a6 Mon Sep 17 00:00:00 2001
From: Rishabh <140707297+rishabhrawat05@users.noreply.github.com>
Date: Fri, 21 Jun 2024 11:54:30 +0530
Subject: [PATCH] Add files via upload
---
dex.css | 790 +++++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 507 ++++++++++++++++++++++++++++++++++
script.js | 578 +++++++++++++++++++++++++++++++++++++++
3 files changed, 1875 insertions(+)
create mode 100644 dex.css
create mode 100644 index.html
create mode 100644 script.js
diff --git a/dex.css b/dex.css
new file mode 100644
index 0000000..08a8b02
--- /dev/null
+++ b/dex.css
@@ -0,0 +1,790 @@
+@font-face {
+ font-family: kor;
+ src: url(./fonts/korataki-rg-3cf0d889.ttf);
+}
+@font-face {
+ font-family: gil;
+ src: url(./fonts/Gilroy-Medium.ttf);
+}
+
+*{
+ margin:0;
+ padding: 0;
+ box-sizing: border-box;
+
+}
+html,body{
+ height: 100%;
+ width: 100%;
+}
+#main{
+ background-color: #000;
+}
+#home-page{
+ height: 100vh;
+ width: 100em;
+ position: relative;
+ overflow: hidden;
+
+}
+#phone1{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ background-size: cover;
+ background-position: center;
+ height: 450px;
+ width: 430px;
+ top: 90px;
+ rotate: -25deg;
+ right: 25%;
+}
+#phone2{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_300_1001.png);
+ background-size: cover;
+ background-position: center;
+ height: 450px;
+ width: 430px;
+ top: 100px;
+ rotate: -25deg;
+ right: 20%;
+}
+#pag{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+
+
+}
+#page{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+
+}
+#page #imgdiv{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+
+}
+#page h2{
+
+ background: url(./NothingPhoneImages/10628409-water-droplets-on-a-metal-surface.jpg);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 900;
+ opacity: 0;
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ background-position: center;
+ background-size: cover;
+
+}
+#page #splash1{
+ height: 100%;
+ width: 30%;
+ background-image: url(./NothingPhoneImages/splash2.png);
+ position: absolute;
+ background-size: cover;
+ background-position: center;
+ top: 5%;
+ left: -50%;
+ z-index:3;
+ opacity: 0;
+
+
+}
+#page #splash2{
+ height: 100%;
+ width: 30%;
+ background-image: url(./NothingPhoneImages/splash1.png);
+ position: absolute;
+ background-size: cover;
+ background-position: center;
+ top: 50%;
+ right: -50%;
+ z-index:3;
+ transform: translate(-50%,-50%);
+ opacity: 0;
+}
+#page1{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+}
+#page1 #imgdiv{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+
+}
+#page00{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+}
+#page00 #imgdiv00{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+
+}
+#page00 .Group50::before{
+ content: "Front Camera";
+ position: absolute;
+ top: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+#page00 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+}
+#page00 h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 0.1px;
+ -webkit-text-stroke-color:#999D9C;
+ text-align: center;
+ position: absolute;
+ top: 40%;
+ right: -10%;
+ rotate: 90deg;
+ font-family: kor;
+ font-size: 18vh;
+ font-weight: 900;
+ opacity: 0;
+
+}
+.Group50 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+#page2{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page2 #imgdiv2{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+
+
+}
+/* #page2 #imgdiv3{
+ height: 71.5%;
+ width: 15%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.jpeg);
+ background-position: center;
+ background-size: cover;
+ top: 14.5%;
+ left: 42.5%;
+
+ border-radius: 25px;
+ opacity: 1;
+ z-index: 99;
+ opacity:1;
+} */
+#page1 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+}
+#page1 h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 0.1px;
+ -webkit-text-stroke-color:#999D9C;
+ text-align: center;
+ position: absolute;
+ top: 40%;
+ right: -10%;
+ rotate: 90deg;
+ font-family: kor;
+ font-size: 18vh;
+ font-weight: 900;
+ opacity: 0;
+
+}
+.Group4::after{
+ content: "Ultra Wide";
+ position: absolute;
+ bottom: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+.Group3::before{
+ content: "Main Camera";
+ position: absolute;
+ top: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+.Group3 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+.Group4 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+#page2 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 30vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+}
+@keyframes shine{
+ 0%{
+ background-position: 0;
+ }
+ 60%{
+ background-position: 500px;
+ }
+ 100%{
+ background-position: 1000px;
+ }
+}
+#page2 h3{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+}
+#page2 h4{
+ color: #999D9C;
+
+ text-align: center;
+ position: absolute;
+ top: 75%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 20vh;
+ font-weight: 100;
+ opacity: 1;
+ background:url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.jpeg);
+ background-position:center;
+ background-size: cover;
+ color: transparent;
+ -webkit-background-clip: text;
+
+}
+#page2 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+
+}
+#page2 span{
+ color: white;
+}
+#page3{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page3 #imgdiv4{
+ height: 100%;
+ width: 40%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png);
+ background-position: center;
+ background-size: cover;
+ left: 53%;
+ top: -37%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+ rotate: -90deg;
+
+}
+#page3 #imgdiv5{
+ height: 62%;
+ width: 43%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/enter2-hand.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 100%;
+ transform: translate(-50%,-50%);
+ z-index: 3;
+
+ opacity: 0;
+}
+#page3 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 50%;
+ left: 51%;
+
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size:50vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+ width: 100%;
+ white-space: nowrap;
+}
+#page3 h3{
+ color: #999D9C;
+ text-align: center;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+
+}
+#page3 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+
+}
+#page3 span{
+ color: white;
+}
+#page3 video{
+ position: absolute;
+ z-index: 2;
+ border-radius: 25px;
+ height: 14.5em;
+ top: 56.5%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: 31.8em;
+ object-fit: cover;
+
+}
+#page4{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page4 #imgdiv6{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new.png);
+ background-position: center;
+ background-size: cover;
+ left: -30%;
+ top: 40%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+
+}
+#page4 #imgdiv7{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new2.png);
+ background-position: center;
+ background-size: cover;
+ right:-80%;
+ top: 70%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+}
+#page4 #txt1{
+ position: absolute;
+ top: 25%;
+ left: 0%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+}
+#page4 #txt2{
+ position: absolute;
+ top: 83%;
+ left: 100%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+}
+#page5{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: #000;
+ position: relative;
+}
+#page5 #imgdiv8{
+ height: 100%;
+ width: 50em;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new3.png);
+ background-position: center;
+ background-size: cover;
+ left: -30%;
+ top: 60%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+
+}
+#page5 #imgdiv9{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new4.png);
+ background-position: center;
+ background-size: cover;
+ right:-80%;
+ top: 75%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+}
+#page5 p{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+}
+#page5 #up{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 1.5px;
+}
+#page5 #down{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 1.5px;
+}
+
+
+.design-section{
+ padding-top: 3vh;
+ width: 100%;
+
+ background: #000;
+
+}
+.design-section>h1{
+ font-size: 4vw;
+ font-weight: 900;
+ font-family: kor;
+ -webkit-text-stroke: #999D9C .1px;
+ color: transparent;
+ letter-spacing: .25vw;
+ text-align: center;
+ margin-bottom: 3vw;
+}
+.elem , .elem2{
+ width: 100%;
+ /* background: red; */
+ border-top: 2px solid white;
+ cursor: pointer;
+ font-family: kor;
+ font-weight: 100;
+}
+.elem .heading h1 {
+ color: #999d9c;
+ font-size: 2.5vw;
+ letter-spacing: .3vw;
+ padding: 2vw 3vw ;
+ font-family: kor;
+ font-weight: 100;
+}
+.details{
+ overflow: hidden;
+ background: #999d9c;
+ height: 0vh;
+}
+.details p{
+ line-height: 2vw;
+ padding: 2vw 3vw;
+ color: #000;
+ height: fit-content;
+}
+.elem-box{
+ border-bottom: 2px solid white;
+}
+
+/* camera section */
+.camera-section{
+ padding-top: 3vh;
+ width: 100%;
+ padding-top: 4vh;
+ background-color: #000;
+
+}
+.camera-section>h1{
+ font-size: 4vw;
+ font-weight: 900;
+ font-family: kor;
+ -webkit-text-stroke: #999D9C .1px;
+ color: transparent;
+ letter-spacing: .25vw;
+ text-align: center;
+ margin-bottom: 3vw;
+}
+.camera-elem{
+ width: 100%;
+}
+.camera-details{
+ display: flex;
+ /* justify-content: space-between; */
+ gap: 10vw;
+}
+.elem2 .heading h1 {
+ color: #999d9c;
+ font-size: 2.5vw;
+ letter-spacing: .3vw;
+ padding: 2vw 3vw ;
+}
+.footer{
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin-top: 10vh;
+ background-color: #000;
+}
+.footer-top{
+ width: 100%;
+ /* background: rgb(70, 110, 110); */
+ display: grid;
+ grid-template-columns: 20% 20% 20% 30% ;
+ grid-row: 20% 20% 20% ;
+ gap: 3vw;
+ margin-top: 10vh;
+ padding: 0 5vh;
+}
+.footer .links h1{
+ color: white;
+ font-size: 1.3vw;
+ margin-bottom: 1.2vw;
+ font-family: kor;
+ font-weight: 100;
+}
+.footer .links h4{
+ line-height: 2vw;
+ color: white;
+ font-weight: 100;
+ font-size: .8vw;
+ font-family: kor;
+ font-weight: 100;
+}
+.footer .links h4 a{
+ text-decoration: none;
+ color: white;
+}
+.footer-top .links input{
+ background: #000;
+ border: 2px solid #fff;
+ border-radius: 8px;
+ padding: 1vw .5vw;
+ color: #fff;
+ font-family: kor;
+ font-weight: 100;
+ padding-left: 20%;
+}
+.footer-bottom{
+ border-top: 2px solid #fff;
+ display: flex;
+ padding: 4vh 2vw;
+ gap: 4vw;
+ justify-content: space-between;
+}
+.footer-bottom h3{
+ font-size: 1vw;
+ font-weight: 100;
+
+}
+.footer-bottom h3 a{
+ text-decoration: none;
+ color: white;
+ font-family: kor;
+ font-weight: 100;
+}
+.footer-bottom .icons a{
+ font-size: 1.7vw;
+ background-color: #fff;
+ color: #000;
+ text-decoration: none;
+ padding: 0.3vw;
+ border-radius: 50%;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..edad399
--- /dev/null
+++ b/index.html
@@ -0,0 +1,507 @@
+
+
+
+
+
+ Nothing Phone (1) - Nothing India
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
NOTHING
+
+
+
+
+
+
+
+
+
+
+
Support
+
+
+
+
+
+
+
+
+
+
Community
+
+
+
+
NOTHING PHONE (1) PURE INSTINCT
+
+
+
Snapdragon 778G+ | 50 MP Dual Camera
+
+
+
Features
+
+
+
+
+
+
+
Design
+
Design that goes beyond the surface
+
+
+
+
+
+
+
+
Camera
+
50MP dual camera with Sony IMX sensor
+
+
+
+
+
+
+
+
Display
+
6.55 AMOLED HDR10+ Display.
+
+
+
+
+
+
+
+
Sustainability
+
Made with 100% recycled aluminium.
+
+
+
+
+
+
+
+
Battery
+
Fuel everything you need. Enjoy as much as you want.
+
+
+
+
+
+
+
+
Glyph Interface
+
A new way to communicate. Unique light patterns
+
+
+
+
+
+
+
+
Chipset
+
Snapdragon 778G+ accelerated by 5G
+
+
+
+
+
+
+
+
Performance
+
Essential power for speed and gaming
+
+
+
+
+
+
+
+
+
Shoot Every Detail Feel Every Emotion
+
50MP
+
+
+
+
+
+
+
+
+
50 MP Sony IMX766 sensor
+
+
+
+
+
+
+
+
+
+
+
50 MP Samsung JN1 sensor
+
+
+
+
+
+
Include yourself with every moment
+
16MP
+
+
+
+
+
+
+
+
+
16 MP Sony IMX471 sensor
+
+
+
+
+
+
+
HDR10+
+
Outshine the Ordinary 10 Bit AMOLED Display
+
1200nits Peak Brightness
+
120HZ
+
+
+
+
Experience the Ultimate Performance with Snapdragon 778G+ chipset
+
596815 Antutu benchmark score
+
+
+
+
+
+
+
6 nm
+
+
+
+
+
+
The symmetrical bezels and aluminium frame
+
adds elegance, lightness and durability
+
+
+
+
Shining White and Shining Black
+
Shining White and Shining Black
+
Shining White and Shining Black
+
+
+
+
+
+
Design
+
+
+
+
Display
+
+
+
6.55” flexible AMOLED display
+ Corning® Gorilla® Glass
+ HDR10+
+ 10-bit colour depth
+ 2400x1080-pixel resolution at 402 ppi
+ 1,000,000:1 contrast ratio
+ 500 nits brightness; 1200 nits peak brightness
+ 60Hz - 120Hz adaptive refresh rate
+ 240Hz touch sampling rate
+ Haptic touch motors
+
+
+
+
+
Capacity
+
+
+
8 RAM + 128 GB memory
+ 8 RAM + 256 GB memory
+ 12 RAM + 256 GB memory
+
+
+
+
+
Dimensions
+
+
+
Height: 159.2 mm
+ Width: 75.8 mm
+ Depth: 8.3 mm
+ Weight: 193.5 g
+
+
+
+
+
In The Box
+
+
+
Nothing Phone (1)
+ Type-C cable
+ Safety information and warranty card
+ Screen protector
+ (pre-applied)
+ SIM tray ejector
+
+
+
+
+
+
+
+
+
Camera
+
+
+
+
Main camera
+
+
+
50 MP Sony IMX766 sensor Focal length: 24 mm OIS and EIS image stabilisation Panorama Night Mode Portrait Mode Beauty Mode Bokeh Time-lapse
+ HDR
+
+
Google Filter Scence Detection Live Photo Document Mode Night Mode Extreme Night Mode Night Video Export Mode Panorama Slo-Mo (120 fps)
+
+
+
+
+
+
+
Video
+
+
+
4K recording at 30 fps
+ 1080p recording at 30 or 60 fps
+ Live HDR at 30 fps
+
+
Slo-mo (120 fps)
+ Night Mode
+ (720p/1080p at 30 fps)
+ OIS and EIS image stabilisation
+
+
+
+
+
+
Front Camera
+
+
+
16 MP Sony IMX471 sensor ƒ/2.45 aperture 1/3.1” sensor size Live Photo HD Portrait
+
+
Google Filter
+ Beauty Mode
+ Night Mode
+ 1080p video recording
+ 30 fps
+
+
+
+
+
+
+
Ultra wide
+
+
+
50 MP Samsung JN1 sensor ƒ/2.2 aperture 1/2.76” sensor size EIS image stabilisation 114° field of view Night Mode Macro (4 cm) HDR
+
+
+
+
+
+
+
+
Features
+
+
+
+
Battery
+
+
+
4500 mAh battery size
+ 33W PD3.0 wired charging: full charge in 70 mins
+ 15W Qi wireless charging with dual charging support: full charge in 120 mins
+ 5W reverse charging
+ Only use with chargers compatible with Quick Charge 4.0.
+
+
+
+
+
Sensors
+
+
+
In-display Fingerprint Sensor
+ Accelerometer
+ Electronic Compass
+ Gyroscope
+ Ambient Light Sensor
+ Proximity Sensor
+ Sensor Core
+ Front RGB sensor
+
+
+
+
+
Memory
+
+
+
RAM: 8/12GB LPDDR5
+ Storage: 128/256GB UFS 3.1
+
+
+
+
+
Face & Finger Unlock
+
+
+
Unlock Phone (1) using fingerprint or facial recognition. Works with face coverings
+
+
+
+
+
Audio
+
+
+
3 high definition mics
+ Dual stereo speakers
+
+
+
+
+
+
Chipset
+
+
+
Snapdragon™ 778G+
+ 6nm TSMC process
+ 1xA78 2.5GHz+3xA78 2.4GHz+4xA55 1.8GHz
+ Adreno 642L GPU
+ Hexagon 770 AI processor.
+
+
+
+
+
Splash, Water & Dust Resistance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..13a2bd4
--- /dev/null
+++ b/script.js
@@ -0,0 +1,578 @@
+function locomotive(){
+ gsap.registerPlugin(ScrollTrigger);
+
+// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
+
+const locoScroll = new LocomotiveScroll({
+ el: document.querySelector("#main"),
+ smooth: true,
+
+});
+// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
+locoScroll.on("scroll", ScrollTrigger.update);
+
+// tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
+ScrollTrigger.scrollerProxy("#main", {
+ scrollTop(value) {
+ return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+ }, // we don't have to define a scrollLeft because we're only scrolling vertically.
+ getBoundingClientRect() {
+ return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
+ },
+ // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
+ pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
+});
+// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+
+// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
+ScrollTrigger.refresh();
+
+}
+locomotive()
+var t1=gsap.timeline();
+const group3=document.getElementsByClassName("Group3");
+const group4=document.getElementsByClassName("Group4");
+const group50=document.getElementsByClassName("Group50");
+const group9=document.getElementsByClassName("Group9");
+const group10=document.getElementsByClassName("Group10");
+const group11=document.getElementsByClassName("Group11");
+const group12=document.getElementsByClassName("Group12");
+const group13=document.getElementsByClassName("Group13");
+const group14=document.getElementsByClassName("Group14");
+const group15=document.getElementsByClassName("Group15");
+const group16=document.getElementsByClassName("Group16");
+const nothing=document.getElementsByClassName("nothing");
+const group2=document.getElementsByClassName("Group2");
+const group20=document.getElementsByClassName("Group20");
+const group21=document.getElementsByClassName("Group21");
+const phone1=document.getElementById("phone1");
+const phone2=document.getElementById("phone2");
+const pure=document.getElementsByClassName("pure");
+const home=document.getElementById("home-page");
+const snap=document.getElementsByClassName("snap");
+
+// t1.to("#half1",{
+// duration:1,
+// stagger:2,
+// y:500,
+// })
+// t1.to("#half2",{
+
+// duration:1,
+// stagger:2,
+// y:-500,
+// })
+// t1.from(nothing,{
+// scale:5,
+// duration:1,
+// x:550,
+// y:300,
+
+
+// })
+t1.from([group2,group20,group21],{
+ y: -100,
+ opacity:0,
+ duration:0.5,
+ stagger:0.25,
+})
+t1.from([phone1,phone2],{
+ opacity:0,
+ duration:0.5,
+ stagger:0.5,
+ y:200,
+})
+t1.from(pure,{
+ opacity:0,
+ duration:0.5,
+ stagger:0.5,
+ y:50,
+})
+t1.from(snap,{
+ opacity:0,
+ duration:0.5,
+ stagger:0.5,
+ y:10,
+})
+
+t1.to([group9,group10,group11,group12,group13,group14,group15, group16],{
+ opacity:1,
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#pag",
+ scroller:"#main",
+ scrub:2,
+ pin:true,
+ start:"top top",
+ end:"bottom 20%",
+ }
+});
+
+t1.to("#page",{
+
+ scrollTrigger:{
+ trigger:"#page",
+ scroller:"#main",
+ pin:true,
+
+
+ }
+
+});
+
+
+t1.to("#page h2",{
+ scale:7,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page h2",
+ scroller:"#main",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page #splash1",{
+ x:850,
+ duration:3,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page #splash1",
+ scroller:"#main",
+ scrub:2,
+
+ }
+});
+t1.to("#page #splash2",{
+ x:-700,
+ opacity:1,
+ duration:3,
+ scrollTrigger:{
+ trigger:"#page #splash2",
+ scroller:"#main",
+ scrub:2,
+
+ }
+});
+t1.to("#page1 #imgdiv",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+ opacity:1,
+ y:540,
+ scrollTrigger:{
+ trigger:"#page1",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+});
+
+t1.to("#page1 h1",{
+ opacity:1,
+ top:"5%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page1 h1",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+
+});
+t1.to("#page1 h2",{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:"#page1 h2",
+ scroller:"#main",
+
+ start:"top 30%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to(group3,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group3,
+ scroller:"#main",
+ start:"top 30%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to(group4,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group4,
+ scroller:"#main",
+
+ start:"top 20%",
+ end:"top 5%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page00 #imgdiv00",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+ y:540,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page00",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+});
+t1.to(group50,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group50,
+ scroller:"#main",
+
+ start:"top 20%",
+ end:"top 5%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page00 h2",{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:"#page00 h2",
+ scroller:"#main",
+
+ start:"top 30%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page00 h1",{
+ opacity:1,
+ top:"5%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page00 h1",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+
+});
+t1.to("#page2 #imgdiv2",{
+ scale:1.4,
+ rotation: -90,
+ opacity:1,
+
+ duration:3,
+
+ scrollTrigger:{
+ trigger:"#page2",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+});
+
+t1.to("#page2 h3",{
+ opacity:1,
+ top:"0%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page2 h3",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+
+});
+t1.to("#page2 p",{
+ opacity:1,
+ top:"20%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page2 p",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+});
+// t1.to("#page2 #imgdiv3",{
+// scale:4,
+
+// duration:3,
+// rotation:-90,
+// opacity:0,
+// scrollTrigger:{
+// trigger:"#page2 #imgdiv3",
+// scroller:"#main",
+// scrub:2,
+// start:"top 15%",
+// }
+
+// });
+t1.from("#page2 h4",{
+ y:-100,
+ scale:3.5,
+ stagger:3,
+ duration:3,
+ opacity:0,
+ scrollTrigger:{
+ trigger:"#page2 h4",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page3 h3",{
+ opacity:1,
+ top:"0%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page3 h3",
+ scroller:"#main",
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page3",{
+ scrollTrigger:{
+ trigger:"#page3",
+ scroller:"#main",
+ pin:true,
+
+ }
+
+});
+t1.to("#page3 #imgdiv5",{
+ y:-141,
+ stagger:0.25,
+ duration:1,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page3 #imgdiv5",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page3 p",{
+ opacity:1,
+ top:"30%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page3 p",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+});
+
+
+t1.to("#page4",{
+ scrollTrigger:{
+ trigger:"#page4",
+ scroller:"#main",
+ pin:true,
+
+ }
+
+});
+t1.to("#page4 #imgdiv6",{
+ x:600,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page4 #imgdiv6",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page4 #imgdiv7",{
+ x:-600,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page4 #imgdiv7",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page4 #txt1",{
+ left:"52%",
+ duration:4,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page4 #txt1",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page4 #txt2",{
+ left:"67%",
+ duration:4,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page4 #txt2",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page5",{
+ scrollTrigger:{
+ trigger:"#page5",
+ scroller:"#main",
+ pin:true,
+
+ }
+
+});
+t1.to("#page5 #imgdiv8",{
+ x:600,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 #imgdiv8",
+ scroller:"#main",
+ scrub:2,
+
+ }
+});
+t1.to("#page5 #imgdiv9",{
+ x:-600,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 #imgdiv9",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page5 p",{
+ scale:1.1,
+ opacity:1,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 p",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page5 #up",{
+ top:"8%",
+ duration:4,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page5 #up",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page5 #down",{
+ top:"27%",
+ opacity:1,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 #up",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+
+
+let currentlyOpenElement = null;
+
+
+function handleClick(event) {
+ const detailsElement = this.querySelector('.details');
+ if (currentlyOpenElement && currentlyOpenElement !== detailsElement) {
+
+ gsap.to(currentlyOpenElement, {
+ height: "0vh"
+ });
+ }
+
+
+ if (detailsElement === currentlyOpenElement) {
+ gsap.to(detailsElement, {
+ height: "0vh"
+ });
+ currentlyOpenElement = null;
+ } else {
+ gsap.to(detailsElement, {
+ height: "50vh"
+ });
+ currentlyOpenElement = detailsElement;
+ }
+}
+
+
+document.querySelectorAll('.elem').forEach(function(el) {
+ el.addEventListener('click', handleClick);
+});
+
+
+document.querySelectorAll('.elem2').forEach(function(el) {
+ el.addEventListener('click', handleClick);
+});