revamped-apple-vision/index.html at main · Aariyan007/revamped-apple-vision · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aariyan Vision pro</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
</head>
<body>
    <div id="main">
        <div id="page">
            <video src="large_2x.mp4" muted></video>
            <div id="Logo">
                <h2>INTRODUCTION</h2>
                <img src="logo_vision_pro__gelpzajfwqum_large.png" alt="Aariyan Vision">
            </div>
            <div class="nav">
                <h2>Vision Pro</h2>
                <a href="https://www.apple.com/shop/buy-vision/apple-vision-pro"><button>Notify me</button></a>
            </div>
        </div>
        <div id="page1">
                <h1><span> Welcome to the era of spatial computing.</span></h1>
            <video src="large.mp4" autoplay loop muted></video>
        </div>
        <div id="page2">
            <h3>Apple Vision Pro seamlessly blends digital<br> content with your physical space.</h3>
            <video src="small.mp4" autoplay loop muted  alt="Apple_video_2"></video>
        </div>
        <div id="page3">
            <h4>You navigate simply by using your eyes, hands, and voice.</h4>
            <video src="small (1).mp4" autoplay loop muted></video>
        </div>
        <div id="page4">
            <h5>So you can do the things you love<br> in ways never before possible.</h5>
            <!-- <h6>You’ve never seen everything like this before.</h6> -->
            <video src="small (2).mp4" autoplay loop muted></video>
        </div>
        <div id="page5">
            <div id="upper">
                <img src="logo__4zgkuyebgtem_large.png" alt="VSPRO">
                <a class="link1" href="https://www.apple.com/apple-vision-pro/guided-tour/">Watch the film</a>
                <a class="link2" href="https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=e48e92b8e87335f23bb1750ece469d3bbbe1ab73117d9ec66246b5f5a02dcf2c&language=US-EN&rv=1&path=%2Fretail%2Finstore-shopping-session%2Fsession-selection%2F%3Ftopic%3Dvisionpro%26resToken%3Df8bcbf53-fcbe-7d8b-9129-2008ae291e7f">Book a demo with us</a>
            </div>
            <div class="puttons">
            <a href="https://www.apple.com/apple-vision-pro/specs/" alt="buttonman"><button>+ Take a closer look</button></a></div>
            <img src="hardware_base__ecl2v43j73o2_large.jpg" alt="hardware_base__ecl2v43j73o2_large">
        </div>
        <div id="page6">
            <div class="page-middle">
                <h5>Apps</h5>
                <h2>Free your desktop<br> And your apps will follow.</h2>

            </div>
            <video src="large (1).mp4" autoplay loop muted></video>
        </div>
        <div id="page7">
            <div id="left-top">
                <h2>Your apps live in
                    <br>your space.</h2>
            </div>
            <div id="right-top">
                <h6>With Apple Vision Pro, you have an infinite canvas that transforms how you use the apps you love. Arrange apps anywhere and scale them to the perfect size, making the workspace of your dreams a reality — all while staying present in the world around you. Browse the web in Safari, create a to-do list in Notes, chat in Messages, and seamlessly move between them with a glance.</h6>
                <a href="https://developer.apple.com/visionos/"><button>+Learn about more apps</button></a>
            </div>
        </div>
        <div id="page8">
            <h3>Design</h3>
            <h1>Designed by Apple.</h1>
            <h2>Apple Vision Pro is the result of decades of experience designing high‑performance, mobile, and wearable devices — culminating in the most ambitious product Apple has ever created. Apple Vision Pro integrates incredibly advanced technology into an elegant, compact form, resulting in an amazing experience every time you put it on.</h2>
        </div>
        <div id="page9">
            <canvas></canvas>
        </div>
        <div id="page10">
            <h1><span>Front.</span> A singular piece of <br> three-dimensionally <br> formed laminated glass <br>flows into an aluminum <br>alloy frame that curves to <br> wrap around your face.</h1>
        </div>
        <div id="page11">
            <h1><span>Light Seal.</span> The Light Seal <br> gently flexes to conform <br> to your face, delivering a <br> precise fit while blocking <br>out stray light.</h1>
        </div>
        <div id="page12">
            <h1><span>Head bands.</span> The Solo <br> Knit Band provides <br> cushioning, breathability, <br>and stretch, and a Fit Dial <br> lets you adjust Apple <br> Vision Pro precisely to <br> your head. The Dual Loop <br> Band offers an additional <br> option for a personalized <br> fit.</h1>
        </div>
        <div id="page13">
            <h1><span>Power.</span> The external <br> battery supports up to <br> 2 hours of general use <br> and up to 2.5 hours of <br> video playback.<sup>1</sup></h1>
        </div>
        <div id="page14">
            <h1><span>Sound.</span> Speakers <br> positioned close to your <br> ears deliver rich <br> Spatial Audio while <br> keeping you aware of <br> your surroundings.</div></h1>
        <div id="page15">
            <h1><span>EyeSight.</span> An outward <br>display reveals your eyes <br> while wearing <br> Apple Vision Pro, letting <br> others know when you <br> are using apps or fully <br> immersed.</h1>
        </div>
        <div id="page16">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div id="page17">
            <div id="inner-last">
              <video src="lastvid.mp4" autoplay muted loop></video>
            </div>
        </div>
        <div id="page18">
            <h2>A singular piece of <span>three-dimensionally formed laminated glass</span> acts as an optical surface for the cameras and sensors that view the world. It flows seamlessly into a <span>custom aluminum alloy frame</span> that gently curves to wrap around your face while serving as an attachment point for the Light Seal.</h2>
        </div>
        <div id="page19">
            <img src="light_seal__fo87cv0zkcmm_large_2x.jpg" alt="Topveiw">
            <a href="https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos"><button>+ Learn more about design</button></a>
        </div>
        <div id="page20">
            <h1>Responsive, precision eye tracking.</h1>
            <h2>A high‑performance eye‑tracking system of <span> LEDs</span> and <span> infrared</span> <span> cameras</span> projects invisible light patterns onto each eye. This advanced system provides ultraprecise input without your needing to hold any controllers, so you can accurately select elements just by looking at them.</h2>
            <img src="eye_tracking_on__ln11reqs6mi6_large_2x.jpg" alt="tracker">
        </div>
        <div id="page21">
            <h2>Our most advanced <br> Spatial Audio system ever.</h2>
            <h5>Dual-driver audio pods positioned next to each ear deliver personalized sound while letting you hear what’s around you. <span>Spatial</span> Audio makes sounds feel like they’re coming from your surroundings. Audio ray tracing analyzes your room’s acoustic properties to adapt and match sound to your space. And if you want to use headphones with Apple Vision Pro, AirPods Pro (2nd generation) with USB‑C offer the perfect experience, featuring Lossless Audio with ultra-low latency enabled by the H2 chip in both devices.</h5>
            <video src="glitter.mp4" muted loop autoplay></video>
            <h3>Remade by Aariyan</h3>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</body>
</html>