sunquest/screenshots.html at main · CodeHospital/sunquest · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Screenshots — SunQuest</title>
    <meta name="description" content="See SunQuest in action: the live countdown, the home-screen widget, and setting a custom target location.">
    <meta name="author" content="Code Hospital">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://sunquest.codehospital.com/screenshots.html">

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="SunQuest">
    <meta property="og:url" content="https://sunquest.codehospital.com/screenshots.html">
    <meta property="og:title" content="Screenshots — SunQuest">
    <meta property="og:description" content="See SunQuest in action: the live countdown, the home-screen widget, and setting a custom target location.">
    <meta property="og:image" content="https://sunquest.codehospital.com/assets/Screenshot_20250225_183116.png">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="Screenshots — SunQuest">
    <meta property="twitter:description" content="See SunQuest in action: the live countdown, the home-screen widget, and setting a custom target location.">
    <meta property="twitter:image" content="https://sunquest.codehospital.com/assets/Screenshot_20250225_183116.png">

    <link rel="shortcut icon" href="assets/favicon/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/favicon/site.webmanifest">

    <meta name="application-name" content="SunQuest">
    <meta name="apple-mobile-web-app-title" content="SunQuest">
    <meta name="google-play-app" content="app-id=com.codehospital.tarzaha">
    <meta name="apple-itunes-app" content="app-id=6813109002">

    <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@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="site.js" defer></script>
</head>
<body>
    <a class="skip-link" href="#main">Skip to content</a>
    <header>
        <nav aria-label="Main">
            <div class="logo">
                <a href="index.html">
                    <img src="assets/logo.webp" alt="" class="logo-img" width="38" height="38">
                    <span>SunQuest</span>
                </a>
            </div>
            <button class="menu-toggle" type="button" aria-label="Open navigation menu" aria-expanded="false" aria-controls="site-nav">
                <svg class="icon-menu" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M4 7h16M4 12h16M4 17h16"/>
                </svg>
                <svg class="icon-close" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M6 6l12 12M18 6L6 18"/>
                </svg>
            </button>
            <div class="nav-links" id="site-nav">
        <a href="features.html">Features</a>
        <a href="how-it-works.html">How It Works</a>
        <a href="screenshots.html" class="active" aria-current="page">Screenshots</a>
        <a href="download.html">Download</a>
        <a href="contact.html">Contact</a>
            </div>
        </nav>
    </header>

    <main id="main">
        <section class="page-hero">
            <div class="page-hero-inner">
                <p class="eyebrow">Screenshots</p>
                <h1>SunQuest in action</h1>
                <p class="lede">The countdown, the widget, and the screen where you pick what you are aiming at.</p>
            </div>
        </section>

        <section class="section">
            <div class="screenshot-grid">
                <figure class="screenshot-item">
                    <img src="assets/Screenshot_20250225_183116.png" alt="The main screen: your location and target location as coordinates with place names, and a live countdown to the next alignment" class="screenshot" width="1080" height="2400" loading="lazy">
                    <figcaption>A live countdown to the next alignment</figcaption>
                </figure>
                <figure class="screenshot-item">
                    <img src="assets/Screenshot_20250407_154150.png" alt="A home-screen widget showing the next sun alignment time and the time remaining" class="screenshot" width="1080" height="2400" loading="lazy">
                    <figcaption>The countdown on your home screen</figcaption>
                </figure>
                <figure class="screenshot-item">
                    <img src="assets/Screenshot_20250225_183300.png" alt="Setting a custom target location by entering its coordinates" class="screenshot" width="1080" height="2400" loading="lazy">
                    <figcaption>Set any target you like</figcaption>
                </figure>
            </div>
        </section>

        <nav class="page-nav" aria-label="More pages">
            <a class="page-nav-link prev" href="how-it-works.html">
                <span class="page-nav-label">Previous</span>
                <span class="page-nav-title">How It Works</span>
            </a>
            <a class="page-nav-link next" href="download.html">
                <span class="page-nav-label">Next</span>
                <span class="page-nav-title">Download</span>
            </a>
        </nav>

    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>SunQuest</h4>
                <p>Sun-powered navigation for Android, iPhone and iPad, and Chrome.</p>
                <p class="footer-legal">&copy; 2025&ndash;2026 Code Hospital. All rights reserved.</p>
            </div>
            <div class="footer-section">
                <h4>Explore</h4>
                <a href="features.html">Features</a>
                <a href="how-it-works.html">How It Works</a>
                <a href="screenshots.html">Screenshots</a>
                <a href="contact.html">Contact</a>
            </div>
            <div class="footer-section">
                <h4>Get the app</h4>
                <a href="https://play.google.com/store/apps/details?id=com.codehospital.tarzaha">Google Play</a>
                <a href="https://apps.apple.com/us/app/a-solar-compass/id6813109002">App Store</a>
                <a href="https://chromewebstore.google.com/detail/sunquest/fjafeinjoideacgbpfdfnabfopddpibj">Chrome Web Store</a>
            </div>
            <div class="footer-section">
                <h4>Legal</h4>
                <a href="privacy.html">Privacy Policy</a>
                <a href="terms.html">Terms of Service</a>
            </div>
        </div>
    </footer>
</body>
</html>