1<head>
2<meta charset="UTF-8">
3<meta name="viewport" content="width=device-width, initial-scale=1.0">
4<title>Day & Night Toggle</title>
5<style>
6.container {
7 width: 100%;
8 max-width: 1920px;
9 margin: 0 auto;
10 padding: 0px;
11 display: flex;
12 flex-direction: row;
13 align-items: center;
14 justify-content: space-between;
15 padding-top: 100px;
16 padding-bottom: 100px;
17}
18
19.text-section, .checkbox-section {
20 width: 50%;
21 display: flex;
22 justify-content: center;
23}
24
25.text-label {
26 font-family: 'Metropolis', sans-serif;
27 font-size: 65px;
28 font-weight: 900;
29 color: #666666;
30 text-align: left;
31}
32
33.word {
34 display: block;
35 line-height: 1.2;
36}
37
38label {
39 width: 60%;
40 height: 200px;
41 position: relative;
42 display: block;
43 background-image: url('https://cdn.shopify.com/s/files/1/0686/4909/1296/files/Start-1.png');
44 background-size: cover;
45 background-position: center;
46 border-radius: 200px;
47 box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
48 inset 0px -5px 15px rgba(255, 255, 255, 0.4);
49 cursor: pointer;
50 transition: background-image 0.5s ease-in-out, background-position 0.5s ease-in-out;
51}
52
53label:after {
54 content: "";
55 width: 180px;
56 height: 180px;
57 position: absolute;
58 top: 10px;
59 left: 10px;
60 background: linear-gradient(180deg, #ffcc89, #d8860b);
61 border-radius: 200px;
62 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
63 transition: transform 0.5s ease-in-out, background 0.5s ease-in-out; /* Added background transition */
64}
65
66input {
67 width: 0;
68 height: 0;
69 visibility: hidden;
70}
71
72input:checked + label {
73 background-image: url('https://cdn.shopify.com/s/files/1/0686/4909/1296/files/end-01.png');
74 background-size: cover;
75 background-position: center;
76 transition: background-image 0.5s ease-in-out, background-position 0.5s ease-in-out;
77}
78
79input:checked + label:after {
80 transform: translateX(calc(100% + 195px)); /* Adjusted translation */
81 background: linear-gradient(180deg, #fff, #cafaf9);
82 border-radius: 200px;
83 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
84 transition: transform 0.5s ease-in-out, background 0.5s ease-in-out; /* Ensures smooth transition for color change */
85}
86
87input[type="checkbox"]:focus {
88 outline-color: transparent;
89}
90
91@media screen and (max-width: 768px) {
92 .container {
93 flex-direction: column;
94 align-items: center;
95 }
96
97 .text-section, .checkbox-section {
98 width: 100%;
99 margin-bottom: 50px;
100 align-items: center;
101 }
102
103 .text-label {
104 font-size: 48px;
105 line-height: 1.2;
106 }
107
108 label {
109 max-width: 300px;
110 height: 100px;
111 }
112
113 label:after {
114 content: "";
115 width: 90px;
116 height: 90px;
117 position: absolute;
118 top: 5px;
119 left: 5px;
120 }
121
122 input:checked + label:after {
123 transform: translateX(calc(100% + 110px)); /* Adjusted translation for mobile */
124 }
125}
126</style>
127</head>
128<body>
129<div class="container">
130 <div class="text-section">
131 <div class="text-label">
132 <span class="word">A complete</span>
133 <span class="word">remarkable</span>
134 <span class="word">playback</span>
135 <span class="word">time</span>
136 </div>
137 </div>
138 <div class="checkbox-section">
139 <input type="checkbox" id="darkmode-toggle" />
140 <label for="darkmode-toggle"></label>
141 </div>
142</div>
143</body>
144</html>