website/index.html at main · QuestPhone/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quest - Gamify Your Chores</title>
    <link rel="stylesheet" href="assets/scripts/css/style.css">
    <link rel="icon" type="image/svg+xml" href="assets/icons/questphone.svg">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <script
    src="https://cdn.databuddy.cc/databuddy.js"
    data-client-id="j_bql5nulv28aaQEQaV3p"
    data-enable-batching="true"
    crossOrigin="anonymous"
    async
  ></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav class="navbar">
            <a href="index.html" class="logo">
                <img src="assets/icons/questphone.svg" alt="QuestPhone Logo" style="height:1.7em;vertical-align:middle;margin-right:0.5em;">
            </a>
            <ul class="nav-links">
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="about">About</a></li>
                <li><a href="features">Features</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">

        <header class="hero">
            <div class="hero-content">
                <h1>Unlock screen time by getting things done.</h1>
                <a href="#" class="cta-button">Download</a>
                <div class="community-links">
                    <a href="https://github.com/questphone/questphone" target="_blank" class="github-link">
                        <img src="assets/icons/github-svgrepo-com.svg" alt="GitHub" width="20" height="20">
                        Star on GitHub
                    </a>
                    <a href="https://discord.com/invite/RGuqaMHxAw" target="_blank" class="discord-link">
                        <img src="assets/icons/discord-svgrepo-com.svg" alt="Discord" width="20" height="20">
                        Join Discord
                    </a>
                </div>
            </div>
            <div class="phone-mockup">
                <img src="assets/launcher_mockup.gif" alt="App interface on a smartphone showing quests and focused apps.">
            </div>

        </header>

        <h1 style="text-align: center;">Convert anything into a Gamified Quest.</h1>

        <section class="mechanics">
            <div class="slider-container">
                <button class="slider-nav prev-btn" aria-label="Previous quest">&lt;</button>
                <button class="slider-nav next-btn" aria-label="Next quest">&gt;</button>
                <div class="quest-content">
                    <h1 style="text-align: center; font-size: 1.2em; color: #555;">Quest Title</h1>
                    <h2 id="quest-title">Clean Bedroom</h2>
                    <div class="mechanics-flow">
                        <svg class="flow-lines"></svg>
                        <div class="flow-step" id="step-1" data-step="1">Distractive apps remain locked</div>
                        <div class="flow-step" id="step-2" data-step="2">Clean your bedroom</div>
                        <div class="flow-step" id="step-3" data-step="3">Snap a pic after</div>
                        <div class="flow-step" id="step-4" data-step="4">AI checks pics and rewards coins</div>
                        <div class="flow-step" id="step-5" data-step="5">Use it to unlock apps temporarily</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="screenshots">
            <h1 style="text-align: center; margin-bottom: 2rem;">App Screenshots</h1>
            <div class="screenshots-slider">
                <button class="slider-nav prev-btn" aria-label="Previous screenshot">&lt;</button>
                <button class="slider-nav next-btn" aria-label="Next screenshot">&gt;</button>
                <div class="screenshots-content">
                    <div class="screenshot-container">
                        <div class="screenshot-item active">
                            <h3 id="screenshot-title" class="screenshot-title">Custom Themes</h3>
                            <div class="media-container">
                                <img id="screenshot-image" src="assets/screenshots/sakura.png" alt="App interface" class="screenshot">
                                <video id="screenshot-video" class="screenshot" controls playsinline style="display: none;">
                                    <source src="" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                            <p id="screenshot-description" class="screenshot-description">btw the sakura tree here grows together with your streak.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="neural-mesh-section">
            <div class="ai-dialog">
                <div class="mesh-container">
                    <canvas id="neural-mesh-canvas"></canvas>
                </div>
                <div class="dialog-container">
                    <div class="system-title">SYSTEM</div>
                    <div class="terminal-text" id="system-dialog"></div>
                    <div class="cursor"></div>
                </div>
            </div>
        </section>

    </div>

    <div class="download-dialog">
        <div class="dialog-content">
            <button class="close-dialog">&times;</button>
            <h3 class="dialog-title">Choose Your Platform</h3>
            <div class="platform-options">
                <a href="https://play.google.com/store/apps/details?id=neth.iecal.questphone" class="platform-option">
                    <img src="assets/icons/android-social-media-svgrepo-com.svg" alt="Android">
                    <span>Android</span>
                </a>

                <a href="https://docs.google.com/forms/d/e/1FAIpQLSeqUwleBN105IA0I7iiQeF_ixCUYrQcHCAY5LmhPo_D_50ikA/alreadyresponded" class="platform-option preregister">
                    <img src="assets/icons/ios-svgrepo-com.svg" alt="iOS">
                    <span>iOS</span>
                </a>
                <a href="https://docs.google.com/forms/d/e/1FAIpQLSeqUwleBN105IA0I7iiQeF_ixCUYrQcHCAY5LmhPo_D_50ikA/alreadyresponded" class="platform-option preregister">
                    <img src="assets/icons/pc2-f-svgrepo-com.svg" alt="Desktop">
                    <span>Desktop</span>
                </a>
            </div>
        </div>
    </div>

    <script src="assets/scripts/js/script.js"></script>
</body>
</html>