tophhie.cloud
The repository for the Tophhie Cloud API web toolkit.
Add Apple OS Version API functionality and UI enhancements
- Implement API call to fetch Apple OS version based on device model.
- Create a new HomeButton component for navigation.
- Update styles and layout for better user experience.
- Integrate Font Awesome for icons and improve button interactions.
- Add global CSS variables for consistent theming.
+279
-20
+46
src/app.css
+46
src/app.css
···
2
2
3
3
/* Global variables */
4
4
:root {
5
+
--primary-h: #100235;
5
6
--bg-color: #100235;
6
7
--primary-color: #2563eb;
7
8
--secondary-color: #1e293b;
8
9
--success-color: #16a34a;
9
10
--error-color: #dc2626;
10
11
--font-family: 'Inter', sans-serif;
12
+
--content-background-color: #ffffff;
13
+
--button-hover: #f3f4f6;
14
+
--border-color: #e2e8f0;
15
+
--link-color: hsl(var(--primary-h), 73%, 59%);
16
+
--link-hover-color: #4338ca;
11
17
}
12
18
13
19
/* Global body styles */
···
81
87
/* Ensure links are easily tappable */
82
88
a {
83
89
-webkit-tap-highlight-color: rgba(37, 99, 235, 0.3);
90
+
}
91
+
92
+
.button-group {
93
+
display: flex;
94
+
flex-direction: column;
95
+
gap: 0.8rem;
96
+
max-width: 100%;
97
+
padding-bottom: 15px;
98
+
}
99
+
100
+
.button {
101
+
background-color: red;
102
+
border: none;
103
+
color: white;
104
+
padding: 15px 32px;
105
+
text-align: center;
106
+
text-decoration: none;
107
+
display: inline-block;
108
+
font-size: 16px;
109
+
cursor: pointer;
110
+
}
111
+
112
+
.call-to-action {
113
+
display: block;
114
+
padding: 0.8rem;
115
+
font-size: 1rem;
116
+
font-weight: 600;
117
+
border-radius: 12px;
118
+
text-align: center;
119
+
text-decoration: none;
120
+
background: var(--content-background-color);
121
+
color: var(--link-color);
122
+
cursor: pointer;
123
+
border: 1px solid var(--border-color);
124
+
transition: all 0.2s ease;
125
+
}
126
+
127
+
.call-to-action:hover {
128
+
transform: translateY(-2px);
129
+
background-color: var(--button-hover);
84
130
}
+1
src/app.html
+1
src/app.html
+6
src/config.ts
+6
src/config.ts
+55
src/lib/HomeButton.svelte
+55
src/lib/HomeButton.svelte
···
1
+
<script lang="ts">
2
+
function goHome() {
3
+
window.location.href = '/';
4
+
}
5
+
</script>
6
+
7
+
<button
8
+
type="button"
9
+
class="dark-mode-toggle"
10
+
onclick={goHome}
11
+
aria-label="Go to home page"
12
+
title="Go to home page"
13
+
>
14
+
<i class="fa fa-home fa-lg"></i>
15
+
</button>
16
+
17
+
<style>
18
+
.dark-mode-toggle {
19
+
position: fixed;
20
+
top: 24px;
21
+
left: 24px;
22
+
width: 48px;
23
+
height: 48px;
24
+
border-radius: 50%;
25
+
border: 1px solid var(--border-color);
26
+
background-color: var(--content-background-color);
27
+
color: var(--text-color);
28
+
cursor: pointer;
29
+
display: flex;
30
+
align-items: center;
31
+
justify-content: center;
32
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
33
+
transition: all 0.2s ease;
34
+
z-index: 100;
35
+
}
36
+
37
+
.dark-mode-toggle:hover {
38
+
transform: scale(1.1);
39
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
40
+
}
41
+
42
+
.dark-mode-toggle:focus-visible {
43
+
outline: 2px solid var(--link-color);
44
+
outline-offset: 2px;
45
+
}
46
+
47
+
@media screen and (max-width: 768px) {
48
+
.dark-mode-toggle {
49
+
top: 16px;
50
+
left: 16px;
51
+
width: 44px;
52
+
height: 44px;
53
+
}
54
+
}
55
+
</style>
+11
src/lib/tcapifetch.ts
+11
src/lib/tcapifetch.ts
···
1
+
import { Config } from '../config';
2
+
3
+
const getAppleOSVersionResponse = async (deviceModel: string, currentOSVersion: string = '') => {
4
+
const response = await fetch(`${Config.TCAPI_URL}/appleosversion/${deviceModel}?currentOSVersion=${currentOSVersion}`);
5
+
if (!response.ok) {
6
+
throw new Error(`Error fetching Apple OS version: ${response.status} ${response.statusText}`);
7
+
}
8
+
return await response.json();
9
+
}
10
+
11
+
export { getAppleOSVersionResponse };
+1
-1
src/routes/+layout.svelte
+1
-1
src/routes/+layout.svelte
+8
-19
src/routes/+page.svelte
+8
-19
src/routes/+page.svelte
···
1
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2
-
3
-
<script lang="ts">
4
-
import { onMount } from 'svelte';
5
-
</script>
6
-
7
1
<div class="min-h-screen flex items-center justify-center p-4 sm:0-6 md:p-8 lg:p-12">
8
2
<div class="bg-white shadow-xl rounded-2xl max-w-lg w-full p-10 space-y-6 mx-auto items-center">
9
3
<img
···
11
5
height="50"
12
6
alt="Tophhie Social Logo"
13
7
id="Logo"
14
-
class="h-8 sm:h-10 md:h-12 w-auto mb-4 sm:mb-6 mx-auto"
8
+
class="h-6 sm:h-18 md:h-10 w-auto mb-4 sm:mb-6 mx-auto"
15
9
/>
16
-
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-6">Welcome to the Tophhie Cloud API Toolkit</h1>
10
+
<h1 class="text-xl sm:text-1xl md:text-2xl font-bold text-center mb-6">Welcome to the Tophhie Cloud API Toolkit</h1>
17
11
<p class="text-center mb-4">
18
12
This toolkit provides an interactive way of playing around with the Tophhie Cloud API. Select an API below to get started...
19
13
</p>
20
-
<div class="flex justify-center space-x-4">
21
-
<a
22
-
href="/docs"
23
-
class="bg-[#100235] text-white px-4 py-2 rounded-lg hover:bg-[#0d0228] transition"
24
-
>View Documentation</a
25
-
>
26
-
<a
27
-
href="/examples"
28
-
class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition"
29
-
>See Examples</a
30
-
>
14
+
<div class="button-group">
15
+
<a href="/apple-os-version" class="call-to-action">
16
+
<i class="fa fa-apple mr-2"></i> Apple OS Version API
17
+
</a>
31
18
</div>
32
19
</div>
33
20
</div>
21
+
22
+
+15
src/routes/apple-os-version/+layout.svelte
+15
src/routes/apple-os-version/+layout.svelte
···
1
+
<script lang="ts">
2
+
import favicon from '$lib/assets/favicon.svg';
3
+
let { children } = $props();
4
+
import '../../app.css'
5
+
</script>
6
+
7
+
<svelte:head>
8
+
<title>Tophhie Cloud API Toolkit: Apple OS Version API</title>
9
+
<link rel="icon" href={favicon} />
10
+
<meta name="theme-color" content="#100235" >
11
+
<meta name="apple-mobile-web-app-capable" content="yes">
12
+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13
+
</svelte:head>
14
+
15
+
{@render children()}
+136
src/routes/apple-os-version/+page.svelte
+136
src/routes/apple-os-version/+page.svelte
···
1
+
<script lang="ts">
2
+
import HomeButton from "$lib/HomeButton.svelte";
3
+
import { getAppleOSVersionResponse } from "$lib/tcapifetch";
4
+
import { cubicOut } from "svelte/easing";
5
+
import { slide } from "svelte/transition";
6
+
7
+
let deviceModel: string = "";
8
+
let currentOSVersion: string = "";
9
+
10
+
let isFetching: boolean = false;
11
+
let showResult: boolean = false;
12
+
let apiResponse: any = null;
13
+
let copiedToClipboard: boolean = false;
14
+
15
+
function handleSubmit() {
16
+
isFetching = true;
17
+
getAppleOSVersionResponse(deviceModel, currentOSVersion)
18
+
.then((response) => {
19
+
apiResponse = response;
20
+
showResult = true;
21
+
})
22
+
.catch((error) => {
23
+
console.error("Error fetching Apple OS version:", error);
24
+
alert("There was an error fetching the Apple OS version. Please try again.");
25
+
})
26
+
.finally(() => {
27
+
isFetching = false;
28
+
});
29
+
}
30
+
31
+
function copyToClipboard() {
32
+
navigator.clipboard.writeText(JSON.stringify(apiResponse, null, 2));
33
+
copiedToClipboard = true;
34
+
setTimeout(() => {
35
+
copiedToClipboard = false;
36
+
}, 2000);
37
+
}
38
+
</script>
39
+
40
+
41
+
<div class="min-h-screen flex items-center justify-center p-4 sm:0-6 md:p-8 lg:p-12">
42
+
<div class="flex flex-col p-6 space-y-6">
43
+
<div class="bg-white shadow-xl rounded-2xl max-w-lg w-full p-10 space-y-6 mx-auto items-center">
44
+
<img
45
+
src="https://blob.tophhie.cloud/tophhiecloud-resources/Logos/tophhiecloud-colour.png"
46
+
height="50"
47
+
alt="Tophhie Social Logo"
48
+
id="Logo"
49
+
class="h-6 sm:h-8 md:h-10 w-auto mb-4 sm:mb-6 mx-auto"
50
+
/>
51
+
<h1 class="text-xl sm:text-1xl md:text-2xl font-bold text-center mb-6">Apple OS Version API</h1>
52
+
<p class="text-center mb-4">
53
+
Fetches the latest Apple OS version for a specific Apple device model. (Can also check if your device is on the latest version).
54
+
</p>
55
+
<form
56
+
class="space-y-4"
57
+
onsubmit={(e) => {
58
+
e.preventDefault();
59
+
handleSubmit();
60
+
}}
61
+
>
62
+
<input
63
+
type="text"
64
+
bind:value={deviceModel}
65
+
placeholder="Enter Apple Device Model (e.g., iPhone14,2)"
66
+
class="w-full p-3 border-2 rounded-lg focus:ring focus:ring-blue-300"
67
+
required
68
+
/>
69
+
<input
70
+
type="text"
71
+
bind:value={currentOSVersion}
72
+
placeholder="Enter Current OS Version to Check Against (e.g., 15.0)"
73
+
class="w-full p-3 border-2 rounded-lg focus:ring focus:ring-blue-300"
74
+
/>
75
+
<button
76
+
type="submit"
77
+
class="w-full bg-[#100235] text-white p-3 rounded-lg transition"
78
+
style="cursor: {isFetching ? 'not-allowed' : 'pointer'};"
79
+
disabled={isFetching}
80
+
>
81
+
{#if isFetching}
82
+
<i class="fa fa-spinner fa-spin text-gray-400"></i>
83
+
{:else}
84
+
Submit
85
+
{/if}
86
+
</button>
87
+
</form>
88
+
</div>
89
+
{#if showResult}
90
+
<div class="bg-white shadow-xl rounded-2xl max-w-lg w-full p-10 space-y-6 mx-auto items-center" transition:slide={{ duration: 500, easing: cubicOut }}>
91
+
<dl class="space-y-2 text-left">
92
+
<div class="sm:flex sm:justify-between">
93
+
<dt class="font-bold">Device Model:</dt>
94
+
<dd class="text-gray-900 break-all sm:text-right">{apiResponse.appleDeviceModel}</dd>
95
+
</div>
96
+
<div class="sm:flex sm:justify-between">
97
+
<dt class="font-bold">Operating System:</dt>
98
+
<dd class="text-gray-900 break-all sm:text-right">{apiResponse.os}</dd>
99
+
</div>
100
+
<div class="sm:flex sm:justify-between">
101
+
<dt class="font-bold">Latest OS Version:</dt>
102
+
<dd class="text-gray-900 break-all sm:text-right">{apiResponse.latestVersion}</dd>
103
+
</div>
104
+
<div class="sm:flex sm:justify-between">
105
+
<dt class="font-bold">Update Available Date:</dt>
106
+
<dd class="text-gray-900 break-all sm:text-right">{apiResponse.updatePosted}</dd>
107
+
</div>
108
+
{#if currentOSVersion}
109
+
<div class="sm:flex sm:justify-between">
110
+
<dt class="font-bold">Your OS Version:</dt>
111
+
<dd class="text-gray-900 break-all sm:text-right">{currentOSVersion}</dd>
112
+
</div>
113
+
<div class="sm:flex sm:justify-between">
114
+
<dt class="font-bold">Is Up To Date:</dt>
115
+
<dd class="text-gray-900 break-all sm:text-right">{!apiResponse.updateRequired}</dd>
116
+
</div>
117
+
{/if}
118
+
</dl>
119
+
<button
120
+
type="submit"
121
+
class="w-full bg-[#100235] text-white p-3 rounded-lg transition"
122
+
style="cursor: pointer;"
123
+
onclick={copyToClipboard}
124
+
>
125
+
{#if copiedToClipboard}
126
+
<i class="fa fa-check text-gray-400"></i> Copied!
127
+
{:else}
128
+
<i class="fa fa-clipboard mr-2"></i> Copy Response
129
+
{/if}
130
+
</button>
131
+
</div>
132
+
{/if}
133
+
</div>
134
+
</div>
135
+
136
+
<HomeButton />