PixelProp-Website/index.html at main · Elcapitanoe/PixelProp-Website · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pixel Prop Project</title>
    <link rel="icon" type="image/png" href="./src/pixelprop-logo-rc.png" />
    <meta name="description"
        content="Professional Magisk module to update build.prop values and emulate Pixel device signatures." />
    <meta name="google-site-verification" content="Ya9sDeUlSNhaSX_Gk5Pa0OxDkhIq0aUCh3MLL54ttUc" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
        rel="stylesheet" />
    <link href="./style.css" rel="stylesheet" />
    <style>
        .bg-grid {
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
        }

        .dark .bg-grid {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        }
    </style>
    <script>
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>
</head>

<body
    class="antialiased bg-white dark:bg-[#020617] text-slate-900 dark:text-white overflow-x-hidden selection:bg-blue-500/30">

    <my-header></my-header>

    <header id="overview"
        class="relative min-h-screen flex flex-col justify-center pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
        <div
            class="absolute inset-0 bg-grid [mask-image:linear-gradient(to_bottom,white,transparent)] pointer-events-none">
        </div>
        <div
            class="absolute top-0 right-0 -mr-20 -mt-20 w-[500px] h-[500px] bg-blue-500/10 dark:bg-blue-500/20 rounded-full blur-[100px] pointer-events-none">
        </div>
        <div
            class="absolute bottom-0 left-0 -ml-20 -mb-20 w-[500px] h-[500px] bg-purple-500/10 dark:bg-purple-500/20 rounded-full blur-[100px] pointer-events-none">
        </div>

        <div
            class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
            <div class="w-full lg:w-1/2 text-center lg:text-left">
                <div
                    class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 text-blue-600 dark:text-blue-400 text-xs font-semibold tracking-wide uppercase mb-6 shadow-sm">
                    <span class="relative flex h-2 w-2">
                        <span
                            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
                    </span>
                    Systemless Implementation
                </div>
                <h1
                    class="text-4xl md:text-6xl font-bold tracking-tight text-slate-900 dark:text-white leading-[1.15] mb-6">
                    Refine your <br class="hidden md:block" />
                    <span
                        class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-500 dark:from-blue-400 dark:to-indigo-400">device
                        identity.</span>
                </h1>
                <p class="text-lg text-slate-600 dark:text-slate-400 mb-8 leading-relaxed max-w-xl mx-auto lg:mx-0">
                    A tool to emulate verified <strong class="text-slate-900 dark:text-slate-200">system
                        properties</strong>, designed to enhance app interoperability and access specific OS
                    functionalities across different ROMs.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start w-full sm:w-auto">
                    <a href="/downloads/"
                        class="group relative px-8 py-3.5 bg-blue-600 text-white font-semibold rounded-full shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:-translate-y-0.5 transition-all duration-300 overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-indigo-600"></div>
                        <div class="relative flex items-center justify-center gap-2">
                            <span>Download Latest</span>
                            <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                        </div>
                    </a>
                    <a href="/guides/"
                        class="px-8 py-3.5 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/10 text-slate-700 dark:text-white font-semibold rounded-full transition-all duration-300">
                        User Guides
                    </a>
                </div>
            </div>

            <div class="w-full lg:w-1/2 perspective-1000">
                <div
                    class="relative bg-slate-50 dark:bg-[#0B1120] border border-slate-200 dark:border-white/10 rounded-2xl overflow-hidden shadow-2xl transform transition-transform hover:scale-[1.02] duration-500 group">
                    <div
                        class="flex items-center justify-between px-4 py-3 bg-white dark:bg-white/5 border-b border-slate-200 dark:border-white/5">
                        <div class="flex gap-2">
                            <div class="w-3 h-3 rounded-full bg-red-400/80 dark:bg-red-500/80"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-400/80 dark:bg-yellow-500/80"></div>
                            <div class="w-3 h-3 rounded-full bg-green-400/80 dark:bg-green-500/80"></div>
                        </div>
                        <div class="flex items-center gap-1.5 opacity-60">
                            <svg class="w-3 h-3 text-slate-500 dark:text-slate-400" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                            <span class="text-xs font-mono text-slate-500 dark:text-slate-400">system.prop</span>
                        </div>
                    </div>
                    <div class="p-6 overflow-x-auto">
                        <pre class="font-mono text-xs md:text-sm leading-7 text-slate-700 dark:text-slate-300">
<span class="text-slate-400 dark:text-slate-500 italic"># Target Profile Configuration</span>
<span class="text-purple-600 dark:text-purple-400">ro.product.brand</span>=<span class="text-green-600 dark:text-green-400">google</span>
<span class="text-purple-600 dark:text-purple-400">ro.product.name</span>=<span class="text-green-600 dark:text-green-400">mustang</span>
<span class="text-purple-600 dark:text-purple-400">ro.product.device</span>=<span class="text-green-600 dark:text-green-400">mustang</span>
<span class="text-purple-600 dark:text-purple-400">ro.build.fingerprint</span>=<span class="text-amber-600 dark:text-amber-400">google/mustang:16/...</span>
<span class="text-purple-600 dark:text-purple-400">ro.build.version.security_patch</span>=<span class="text-blue-600 dark:text-blue-400">2025-10-05</span>
<span class="text-slate-400 dark:text-slate-500 italic"># Context: Reference Environment Match</span>
                        </pre>
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-t from-slate-100/50 dark:from-slate-900/50 to-transparent pointer-events-none">
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section id="how-it-works"
        class="py-24 bg-slate-50 dark:bg-[#020617] border-y border-slate-200 dark:border-white/5 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-6">Identity Management</h2>
                <p class="text-slate-600 dark:text-slate-400 text-lg">
                    Engineered for advanced users requiring precise device identity alignment. Maintains system integrity while ensuring seamless operation across strictly validated environments.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div
                    class="group relative p-8 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl hover:border-blue-500/30 dark:hover:border-blue-500/30 transition-all duration-300 hover:shadow-xl hover:shadow-slate-200/50 dark:hover:shadow-none">
                    <div
                        class="w-14 h-14 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                            </path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Environment Compatibility</h3>
                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed">
                        Aligns the execution environment with certified hardware profiles to resolve API discrepancies. Ensures broad interoperability with security-sensitive applications and verification services.
                    </p>
                </div>

                <div
                    class="group relative p-8 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl hover:border-purple-500/30 dark:hover:border-purple-500/30 transition-all duration-300 hover:shadow-xl hover:shadow-slate-200/50 dark:hover:shadow-none">
                    <div
                        class="w-14 h-14 bg-purple-50 dark:bg-purple-500/10 text-purple-600 dark:text-purple-400 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                            </path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Feature Extension</h3>
                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed">
                        Unlocks OS-level capabilities typically restricted to reference hardware. Expands system utility with enhanced media management, intelligent assistance, and adaptive audio processing.
                    </p>
                </div>

                <div
                    class="group relative p-8 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-3xl hover:border-emerald-500/30 dark:hover:border-emerald-500/30 transition-all duration-300 hover:shadow-xl hover:shadow-slate-200/50 dark:hover:shadow-none">
                    <div
                        class="w-14 h-14 bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
                            </path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Non-Intrusive Integration</h3>
                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed">
                        Operates via a systemless overlay framework (Magisk/KernelSU). Preserves the read-only integrity of the root partition (/system), facilitating seamless OTA updates and reversibility.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <my-footer></my-footer>
    <script src="./components/header.js"></script>
    <script src="./components/footer.js"></script>
</body>

</html>