diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro index 4d3771d..8f3b029 100644 --- a/src/pages/model/[model]/color/[color].astro +++ b/src/pages/model/[model]/color/[color].astro @@ -4,7 +4,7 @@ import "/src/styles/upload.css"; import "/src/styles/pyscript.css"; import deviceJson from "../../../../scripts/device_info.json"; import { DEVICE_MANAGER } from "../../../../scripts/deviceManager"; -import type { Device } from "../../../../scripts/model"; +import type { Device, ModelValue } from "../../../../scripts/model"; import ErrorPage from "../../../../components/ErrorPage.astro"; import { ModelEnum } from "../../../../scripts/parse"; @@ -20,8 +20,8 @@ export async function getStaticPaths() { DEVICE_MANAGER.getDeviceListByModel(_modelId); allModelDevices.forEach((d: Device) => { const modelColorInfo = { - params: { model: _modelId, color: d.color.id }, - props: { targetModel: _modelId, targetColor: d.color.id }, + params: { model: _modelId, color: d.color?.id ?? "default" }, + props: { targetModel: _modelId, targetColor: d.color?.id ?? "default" }, }; modelColorAll.push(modelColorInfo); }); @@ -40,7 +40,9 @@ const deviceDetail: Device | undefined = DEVICE_MANAGER.getModelColorDevice( const sameModelDevices: Device[] = DEVICE_MANAGER.getDeviceListByModel(_targetModel); -if (deviceDetail == null) { +const model: ModelValue | undefined = DEVICE_MANAGER.getModel(_targetModel); + +if (deviceDetail == null || model == null) { return Astro.redirect("/404"); } --- @@ -104,8 +106,7 @@ if (deviceDetail == null) {
-

{deviceDetail.name}

-

{deviceDetail.desc}

+

{model.name}

@@ -145,30 +146,37 @@ if (deviceDetail == null) { }px, We support jpg, png and psd

    -
    -

    COLOR

    -

    {deviceDetail.color.name}

    -
    - -
    -
    + { + deviceDetail.color == null ? undefined : ( +
    +

    COLOR

    +

    + {deviceDetail.color.name} +

    +
    + +
    +
    + ) + } +
    -
    -

    - {thumbnail.device.short_name ?? - thumbnail.device.name} -

    -

    - {thumbnail.device.desc} -

    -
    diff --git a/src/scripts/brand.json b/src/scripts/brand.json index 87a192e..9550c0a 100644 --- a/src/scripts/brand.json +++ b/src/scripts/brand.json @@ -41,7 +41,9 @@ "galaxy-s-duos", "galaxy-s4", "galaxy-note-5", - "galaxy-y" + "galaxy-y", + "samsung-tv-d8000", + "samsung-tv-es8000" ], "dell": ["dell-xps-13", "dell-xps-15"], "lg": ["lg-55lw5600", "lg-tm2792"], diff --git a/src/scripts/deviceManager.ts b/src/scripts/deviceManager.ts index 05d652f..c4a3a3a 100644 --- a/src/scripts/deviceManager.ts +++ b/src/scripts/deviceManager.ts @@ -35,12 +35,21 @@ export class DeviceManager { return undefined; } + public getModel(modelId: ModelEnum): model.ModelValue | undefined { + return this.allDeviceModels[modelId]; + } + public getModelColorDevice( modelId: ModelEnum, - colorId: string, + colorId: string | "default", ): model.Device | undefined { const devices = this.getDeviceListByModel(modelId); - const result = devices.filter((d) => d.color.id === colorId); + const result = devices.filter((d) => { + const matchDefault = d.color == null && colorId === "default"; + const matchColorId = d.color != null && d.color.id === colorId; + + return matchDefault || matchColorId; + }); if (result.length === 0) { return undefined; } diff --git a/src/scripts/device_info.json b/src/scripts/device_info.json index 9e25656..2033a92 100755 --- a/src/scripts/device_info.json +++ b/src/scripts/device_info.json @@ -5,8 +5,8 @@ "desc": "Ultra", "color": { "id": "ultra", - "name": "Ultra", - "hexcode": "#d3c9c0" + "name": "Titanium", + "hexcode": "#D4C7BE" }, "meta_title": "Apple Watch Ultra Mock Up", "meta_description": "1 click to generate your Apple Watch Ultra mockup! You can wrap screenshots in Apple Watch Ultra for prototypes.", @@ -46,7 +46,7 @@ "color": { "id": "gold-stainless-steel", "name": "Gold Stainless Steel", - "hexcode": "#000000" + "hexcode": "#E1CEB2" }, "meta_title": "Apple Watch Series 8 41mm Gold Stainless Steel Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 41mm Gold Stainless Steel mockup! You can wrap screenshots in Apple Watch Series 8 41mm Gold Stainless Steel for prototypes.", @@ -86,7 +86,7 @@ "color": { "id": "graphite-stainless-steel", "name": "Graphite Stainless Steel", - "hexcode": "#000000" + "hexcode": "#A9A9A9" }, "meta_title": "Apple Watch Series 8 41mm Graphite Stainless Steel Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 41mm Graphite Stainless Steel mockup! You can wrap screenshots in Apple Watch Series 8 41mm Graphite Stainless Steel for prototypes.", @@ -126,7 +126,7 @@ "color": { "id": "midnight-aluminum", "name": "Midnight Aluminum", - "hexcode": "#000000" + "hexcode": "#313439" }, "meta_title": "Apple Watch Series 8 41mm Midnight Aluminum Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 41mm Midnight Aluminum mockup! You can wrap screenshots in Apple Watch Series 8 41mm Midnight Aluminum for prototypes.", @@ -166,7 +166,7 @@ "color": { "id": "silver-aluminum", "name": "Silver Aluminum", - "hexcode": "#000000" + "hexcode": "#EBEBEC" }, "meta_title": "Apple Watch Series 8 41mm Silver Aluminum Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 41mm Silver Aluminum mockup! You can wrap screenshots in Apple Watch Series 8 41mm Silver Aluminum for prototypes.", @@ -206,7 +206,7 @@ "color": { "id": "silver-stainless-steel", "name": "Silver Stainless Steel", - "hexcode": "#000000" + "hexcode": "#DEDCD8" }, "meta_title": "Apple Watch Series 8 41mm Silver Stainless Steel Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 41mm Silver Stainless Steel mockup! You can wrap screenshots in Apple Watch Series 8 41mm Silver Stainless Steel for prototypes.", @@ -246,7 +246,7 @@ "color": { "id": "starlight-aluminum", "name": "Starlight Aluminum", - "hexcode": "#000000" + "hexcode": "#B5AAA2" }, "meta_title": "Apple Watch Series 8 41mm Starlight Aluminum Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 41mm Starlight Aluminum mockup! You can wrap screenshots in Apple Watch Series 8 41mm Starlight Aluminum for prototypes.", @@ -286,7 +286,7 @@ "color": { "id": "gold-stainless-steel", "name": "Gold Stainless Steel", - "hexcode": "#000000" + "hexcode": "#E4D2B6" }, "meta_title": "Apple Watch Series 8 45mm Gold Stainless Steel Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 45mm Gold Stainless Steel mockup! You can wrap screenshots in Apple Watch Series 8 45mm Gold Stainless Steel for prototypes.", @@ -326,7 +326,7 @@ "color": { "id": "graphite-stainless-steel", "name": "Graphite Stainless Steel", - "hexcode": "#000000" + "hexcode": "#A9A9A9" }, "meta_title": "Apple Watch Series 8 45mm Graphite Stainless Steel Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 45mm Graphite Stainless Steel mockup! You can wrap screenshots in Apple Watch Series 8 45mm Graphite Stainless Steel for prototypes.", @@ -366,7 +366,7 @@ "color": { "id": "midnight-aluminum", "name": "Midnight Aluminum", - "hexcode": "#000000" + "hexcode": "#313439" }, "meta_title": "Apple Watch Series 8 45mm Midnight Aluminum Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 45mm Midnight Aluminum mockup! You can wrap screenshots in Apple Watch Series 8 45mm Midnight Aluminum for prototypes.", @@ -406,7 +406,7 @@ "color": { "id": "silver-aluminum", "name": "Silver Aluminum", - "hexcode": "#000000" + "hexcode": "#EBEBEC" }, "meta_title": "Apple Watch Series 8 45mm Silver Aluminum Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 45mm Silver Aluminum mockup! You can wrap screenshots in Apple Watch Series 8 45mm Silver Aluminum for prototypes.", @@ -446,7 +446,7 @@ "color": { "id": "silver-stainless-steel", "name": "Silver Stainless Steel", - "hexcode": "#000000" + "hexcode": "#DEDCD8" }, "meta_title": "Apple Watch Series 8 45mm Silver Stainless Steel Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 45mm Silver Stainless Steel mockup! You can wrap screenshots in Apple Watch Series 8 45mm Silver Stainless Steel for prototypes.", @@ -486,7 +486,7 @@ "color": { "id": "starlight-aluminum", "name": "Starlight Aluminum", - "hexcode": "#000000" + "hexcode": "#B5AAA2" }, "meta_title": "Apple Watch Series 8 45mm Starlight Aluminum Mock Up", "meta_description": "1 click to generate your Apple Watch Series 8 45mm Starlight Aluminum mockup! You can wrap screenshots in Apple Watch Series 8 45mm Starlight Aluminum for prototypes.", @@ -524,9 +524,9 @@ "credits": "

    Elegant Themes
    @elegantthemes

    ", "desc": "2013", "color": { - "id": "2013", - "name": "2013", - "hexcode": "#000000" + "id": "silver", + "name": "Silver", + "hexcode": "#E5E6E6" }, "meta_title": "iMac 2013 Mock Up", "meta_description": "1 click to generate your iMac 2013 mockup! You can wrap screenshots in iMac 2013 for prototypes.", @@ -576,9 +576,9 @@ "credits": "

    Facebook - Design Resources

    ", "desc": "2015", "color": { - "id": "2015", - "name": "2015", - "hexcode": "#000000" + "id": "silver", + "name": "Silver", + "hexcode": "#E5E6E6" }, "meta_title": "iMac 2015 Mock Up", "meta_description": "1 click to generate your iMac 2015 mockup! You can wrap screenshots in iMac 2015 for prototypes.", @@ -606,9 +606,9 @@ "credits": "

    Facebook - Design Resources

    ", "desc": "2015", "color": { - "id": "2015", - "name": "2015", - "hexcode": "#000000" + "id": "silver", + "name": "Silver", + "hexcode": "#E5E6E6" }, "meta_title": "iMac Retina 2016 Mock Up", "meta_description": "1 click to generate your iMac Retina 2016 mockup! You can wrap screenshots in iMac Retina 2016 for prototypes.", @@ -638,7 +638,7 @@ "color": { "id": "blue", "name": "Blue", - "hexcode": "#000000" + "hexcode": "#A2B0C5" }, "meta_title": "iPhone 14 Blue Mock Up", "meta_description": "1 click to generate your iPhone 14 Blue mockup! You can wrap screenshots in iPhone 14 Blue for prototypes.", @@ -680,7 +680,7 @@ "color": { "id": "midnight", "name": "Midnight", - "hexcode": "#000000" + "hexcode": "#2D313D" }, "meta_title": "iPhone 14 Midnight Mock Up", "meta_description": "1 click to generate your iPhone 14 Midnight mockup! You can wrap screenshots in iPhone 14 Midnight for prototypes.", @@ -722,7 +722,7 @@ "color": { "id": "purple", "name": "Purple", - "hexcode": "#000000" + "hexcode": "#EADCEF" }, "meta_title": "iPhone 14 Purple Mock Up", "meta_description": "1 click to generate your iPhone 14 Purple mockup! You can wrap screenshots in iPhone 14 Purple for prototypes.", @@ -764,7 +764,7 @@ "color": { "id": "red", "name": "Red", - "hexcode": "#000000" + "hexcode": "#F11E23" }, "meta_title": "iPhone 14 Red Mock Up", "meta_description": "1 click to generate your iPhone 14 Red mockup! You can wrap screenshots in iPhone 14 Red for prototypes.", @@ -806,7 +806,7 @@ "color": { "id": "starlight", "name": "Starlight", - "hexcode": "#000000" + "hexcode": "#F7F4F2" }, "meta_title": "iPhone 14 Starlight Mock Up", "meta_description": "1 click to generate your iPhone 14 Starlight mockup! You can wrap screenshots in iPhone 14 Starlight for prototypes.", @@ -848,7 +848,7 @@ "color": { "id": "blue", "name": "Blue", - "hexcode": "#000000" + "hexcode": "#A2B0C5" }, "meta_title": "iPhone 14 Plus Blue Mock Up", "meta_description": "1 click to generate your iPhone 14 Plus Blue mockup! You can wrap screenshots in iPhone 14 Plus Blue for prototypes.", @@ -890,7 +890,7 @@ "color": { "id": "midnight", "name": "Midnight", - "hexcode": "#000000" + "hexcode": "#2D313D" }, "meta_title": "iPhone 14 Plus Midnight Mock Up", "meta_description": "1 click to generate your iPhone 14 Plus Midnight mockup! You can wrap screenshots in iPhone 14 Plus Midnight for prototypes.", @@ -932,7 +932,7 @@ "color": { "id": "purple", "name": "Purple", - "hexcode": "#000000" + "hexcode": "#EADCEF" }, "meta_title": "iPhone 14 Plus Purple Mock Up", "meta_description": "1 click to generate your iPhone 14 Plus Purple mockup! You can wrap screenshots in iPhone 14 Plus Purple for prototypes.", @@ -974,7 +974,7 @@ "color": { "id": "red", "name": "Red", - "hexcode": "#000000" + "hexcode": "#F11E23" }, "meta_title": "iPhone 14 Plus Red Mock Up", "meta_description": "1 click to generate your iPhone 14 Plus Red mockup! You can wrap screenshots in iPhone 14 Plus Red for prototypes.", @@ -1016,7 +1016,7 @@ "color": { "id": "starlight", "name": "Starlight", - "hexcode": "#000000" + "hexcode": "#F7F4F2" }, "meta_title": "iPhone 14 Plus Starlight Mock Up", "meta_description": "1 click to generate your iPhone 14 Plus Starlight mockup! You can wrap screenshots in iPhone 14 Plus Starlight for prototypes.", @@ -1058,7 +1058,7 @@ "color": { "id": "deep-purple", "name": "Deep Purple", - "hexcode": "#000000" + "hexcode": "#736779" }, "meta_title": "iPhone 14 Pro Deep Purple Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Deep Purple mockup! You can wrap screenshots in iPhone 14 Pro Deep Purple for prototypes.", @@ -1100,7 +1100,7 @@ "color": { "id": "gold", "name": "Gold", - "hexcode": "#000000" + "hexcode": "#F5E7CE" }, "meta_title": "iPhone 14 Pro Gold Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Gold mockup! You can wrap screenshots in iPhone 14 Pro Gold for prototypes.", @@ -1142,7 +1142,7 @@ "color": { "id": "silver", "name": "Silver", - "hexcode": "#000000" + "hexcode": "#F2F5F4" }, "meta_title": "iPhone 14 Pro Silver Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Silver mockup! You can wrap screenshots in iPhone 14 Pro Silver for prototypes.", @@ -1184,7 +1184,7 @@ "color": { "id": "space-black", "name": "Space Black", - "hexcode": "#000000" + "hexcode": "#4D4A48" }, "meta_title": "iPhone 14 Pro Space Black Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Space Black mockup! You can wrap screenshots in iPhone 14 Pro Space Black for prototypes.", @@ -1226,7 +1226,7 @@ "color": { "id": "deep-purple", "name": "Deep Purple", - "hexcode": "#000000" + "hexcode": "#736779" }, "meta_title": "iPhone 14 Pro Max Deep Purple Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Max Deep Purple mockup! You can wrap screenshots in iPhone 14 Pro Max Deep Purple for prototypes.", @@ -1268,7 +1268,7 @@ "color": { "id": "gold", "name": "Gold", - "hexcode": "#000000" + "hexcode": "#F5E7CE" }, "meta_title": "iPhone 14 Pro Max Gold Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Max Gold mockup! You can wrap screenshots in iPhone 14 Pro Max Gold for prototypes.", @@ -1310,7 +1310,7 @@ "color": { "id": "silver", "name": "Silver", - "hexcode": "#000000" + "hexcode": "#F2F5F4" }, "meta_title": "iPhone 14 Pro Max Silver Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Max Silver mockup! You can wrap screenshots in iPhone 14 Pro Max Silver for prototypes.", @@ -1352,7 +1352,7 @@ "color": { "id": "space-black", "name": "Space Black", - "hexcode": "#000000" + "hexcode": "#4D4A48" }, "meta_title": "iPhone 14 Pro Max Space Black Mock Up", "meta_description": "1 click to generate your iPhone 14 Pro Max Space Black mockup! You can wrap screenshots in iPhone 14 Pro Max Space Black for prototypes.", @@ -1394,7 +1394,7 @@ "color": { "id": "space-grey", "name": "Space Grey", - "hexcode": "#000000" + "hexcode": "#A2A1A6" }, "meta_title": "iPad Pro 11-inch Space Grey Mock Up", "meta_description": "1 click to generate your iPad Pro 11-inch Space Grey mockup! You can wrap screenshots in iPad Pro 11-inch Space Grey for prototypes.", @@ -1436,7 +1436,7 @@ "color": { "id": "space-grey", "name": "Space Grey", - "hexcode": "#000000" + "hexcode": "#A2A1A6" }, "meta_title": "iPad Pro 12.9-inch Space Grey Mock Up", "meta_description": "1 click to generate your iPad Pro 12.9-inch Space Grey mockup! You can wrap screenshots in iPad Pro 12.9-inch Space Grey for prototypes.", @@ -1478,7 +1478,7 @@ "color": { "id": "space-grey", "name": "Space Grey", - "hexcode": "#000000" + "hexcode": "#A2A1A6" }, "meta_title": "iPad Air 5 Space Grey Mock Up", "meta_description": "1 click to generate your iPad Air 5 Space Grey mockup! You can wrap screenshots in iPad Air 5 Space Grey for prototypes.", @@ -1520,7 +1520,7 @@ "color": { "id": "silver", "name": "Silver", - "hexcode": "#000000" + "hexcode": "#DFE2E4" }, "meta_title": "iPad Silver Mock Up", "meta_description": "1 click to generate your iPad Silver mockup! You can wrap screenshots in iPad Silver for prototypes.", @@ -1562,7 +1562,7 @@ "color": { "id": "starlight", "name": "Starlight", - "hexcode": "#000000" + "hexcode": "#F7F4F2" }, "meta_title": "iPad mini Starlight Mock Up", "meta_description": "1 click to generate your iPad mini Starlight mockup! You can wrap screenshots in iPad mini Starlight for prototypes.", @@ -1604,7 +1604,7 @@ "color": { "id": "blue", "name": "Blue", - "hexcode": "#000000" + "hexcode": "#266282" }, "meta_title": "iPhone 13 Blue Mock Up", "meta_description": "1 click to generate your iPhone 13 Blue mockup! You can wrap screenshots in iPhone 13 Blue for prototypes.", @@ -1646,7 +1646,7 @@ "color": { "id": "midnight", "name": "Midnight", - "hexcode": "#000000" + "hexcode": "#1D232B" }, "meta_title": "iPhone 13 Midnight Mock Up", "meta_description": "1 click to generate your iPhone 13 Midnight mockup! You can wrap screenshots in iPhone 13 Midnight for prototypes.", @@ -1688,7 +1688,7 @@ "color": { "id": "pink", "name": "Pink", - "hexcode": "#000000" + "hexcode": "#FEE3DF" }, "meta_title": "iPhone 13 Pink Mock Up", "meta_description": "1 click to generate your iPhone 13 Pink mockup! You can wrap screenshots in iPhone 13 Pink for prototypes.", @@ -1729,8 +1729,8 @@ "desc": "Red", "color": { "id": "red", - "name": "Red", - "hexcode": "#000000" + "name": "RED", + "hexcode": "#B00617" }, "meta_title": "iPhone 13 Red Mock Up", "meta_description": "1 click to generate your iPhone 13 Red mockup! You can wrap screenshots in iPhone 13 Red for prototypes.", @@ -1772,7 +1772,7 @@ "color": { "id": "starlight", "name": "Starlight", - "hexcode": "#000000" + "hexcode": "#F9F4EF" }, "meta_title": "iPhone 13 Starlight Mock Up", "meta_description": "1 click to generate your iPhone 13 Starlight mockup! You can wrap screenshots in iPhone 13 Starlight for prototypes.", @@ -1814,7 +1814,7 @@ "color": { "id": "blue", "name": "Blue", - "hexcode": "#000000" + "hexcode": "#266282" }, "meta_title": "iPhone 13 mini Blue Mock Up", "meta_description": "1 click to generate your iPhone 13 mini Blue mockup! You can wrap screenshots in iPhone 13 mini Blue for prototypes.", @@ -1856,7 +1856,7 @@ "color": { "id": "midnight", "name": "Midnight", - "hexcode": "#000000" + "hexcode": "#1D232B" }, "meta_title": "iPhone 13 mini Midnight Mock Up", "meta_description": "1 click to generate your iPhone 13 mini Midnight mockup! You can wrap screenshots in iPhone 13 mini Midnight for prototypes.", @@ -1898,7 +1898,7 @@ "color": { "id": "pink", "name": "Pink", - "hexcode": "#000000" + "hexcode": "#FEE3DF" }, "meta_title": "iPhone 13 mini Pink Mock Up", "meta_description": "1 click to generate your iPhone 13 mini Pink mockup! You can wrap screenshots in iPhone 13 mini Pink for prototypes.", @@ -1939,8 +1939,8 @@ "desc": "Red", "color": { "id": "red", - "name": "Red", - "hexcode": "#000000" + "name": "(PRODUCT) RED", + "hexcode": "#B00617" }, "meta_title": "iPhone 13 mini Red Mock Up", "meta_description": "1 click to generate your iPhone 13 mini Red mockup! You can wrap screenshots in iPhone 13 mini Red for prototypes.", @@ -1982,7 +1982,7 @@ "color": { "id": "starlight", "name": "Starlight", - "hexcode": "#000000" + "hexcode": "#F9F4EF" }, "meta_title": "iPhone 13 mini Starlight Mock Up", "meta_description": "1 click to generate your iPhone 13 mini Starlight mockup! You can wrap screenshots in iPhone 13 mini Starlight for prototypes.", @@ -2024,7 +2024,7 @@ "color": { "id": "gold", "name": "Gold", - "hexcode": "#000000" + "hexcode": "#F5E7CE" }, "meta_title": "iPhone 13 Pro Gold Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Gold mockup! You can wrap screenshots in iPhone 13 Pro Gold for prototypes.", @@ -2066,7 +2066,7 @@ "color": { "id": "graphite", "name": "Graphite", - "hexcode": "#000000" + "hexcode": "#6A6964" }, "meta_title": "iPhone 13 Pro Graphite Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Graphite mockup! You can wrap screenshots in iPhone 13 Pro Graphite for prototypes.", @@ -2107,8 +2107,8 @@ "desc": "Sierrablue", "color": { "id": "sierrablue", - "name": "Sierrablue", - "hexcode": "#000000" + "name": "Sierra Blue", + "hexcode": "#96B1CB" }, "meta_title": "iPhone 13 Pro Sierrablue Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Sierrablue mockup! You can wrap screenshots in iPhone 13 Pro Sierrablue for prototypes.", @@ -2149,8 +2149,8 @@ "desc": "Gold", "color": { "id": "gold", - "name": "Gold", - "hexcode": "#000000" + "name": "Silver", + "hexcode": "#F2F5F4" }, "meta_title": "iPhone 13 Pro Silver Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Silver mockup! You can wrap screenshots in iPhone 13 Pro Silver for prototypes.", @@ -2192,7 +2192,7 @@ "color": { "id": "gold", "name": "Gold", - "hexcode": "#000000" + "hexcode": "#F5E7CE" }, "meta_title": "iPhone 13 Pro Max Gold Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Max Gold mockup! You can wrap screenshots in iPhone 13 Pro Max Gold for prototypes.", @@ -2234,7 +2234,7 @@ "color": { "id": "graphite", "name": "Graphite", - "hexcode": "#000000" + "hexcode": "#6A6964" }, "meta_title": "iPhone 13 Pro Max Graphite Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Max Graphite mockup! You can wrap screenshots in iPhone 13 Pro Max Graphite for prototypes.", @@ -2275,8 +2275,8 @@ "desc": "Sierrablue", "color": { "id": "sierrablue", - "name": "Sierrablue", - "hexcode": "#000000" + "name": "Sierra Blue", + "hexcode": "#96B1CB" }, "meta_title": "iPhone 13 Pro Max Sierrablue Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Max Sierrablue mockup! You can wrap screenshots in iPhone 13 Pro Max Sierrablue for prototypes.", @@ -2318,7 +2318,7 @@ "color": { "id": "silver", "name": "Silver", - "hexcode": "#000000" + "hexcode": "#F2F5F4" }, "meta_title": "iPhone 13 Pro Max Silver Mock Up", "meta_description": "1 click to generate your iPhone 13 Pro Max Silver mockup! You can wrap screenshots in iPhone 13 Pro Max Silver for prototypes.", @@ -2360,7 +2360,7 @@ "color": { "id": "gold", "name": "Gold", - "hexcode": "#000000" + "hexcode": "#E2C8A4" }, "meta_title": "Macbook Gold Mock Up", "meta_description": "1 click to generate your Macbook Gold mockup! You can wrap screenshots in Macbook Gold for prototypes.", @@ -2390,7 +2390,7 @@ "color": { "id": "grey", "name": "Grey", - "hexcode": "#000000" + "hexcode": "#B2B6B8" }, "meta_title": "Macbook Grey Mock Up", "meta_description": "1 click to generate your Macbook Grey mockup! You can wrap screenshots in Macbook Grey for prototypes.", @@ -2418,9 +2418,9 @@ "credits": "

    Apple Design Resources

    ", "desc": "13", "color": { - "id": "13", - "name": "13", - "hexcode": "#000000" + "id": "midnight", + "name": "Midnight", + "hexcode": "#3E4452" }, "meta_title": "Macbook Air 13\" Mock Up", "meta_description": "1 click to generate your Macbook Air 13\" mockup! You can wrap screenshots in Macbook Air 13\" for prototypes.", @@ -2449,9 +2449,9 @@ "credits": "

    Apple Design Resources

    ", "desc": "14", "color": { - "id": "14", - "name": "14", - "hexcode": "#000000" + "id": "silver", + "name": "Silver", + "hexcode": "#E8EBEC" }, "meta_title": "Macbook Pro 14\" Mock Up", "meta_description": "1 click to generate your Macbook Pro 14\" mockup! You can wrap screenshots in Macbook Pro 14\" for prototypes.", @@ -2480,9 +2480,9 @@ "credits": "

    Apple Design Resources

    ", "desc": "16", "color": { - "id": "16", - "name": "16", - "hexcode": "#000000" + "id": "silver", + "name": "Silver", + "hexcode": "#E8EBEC" }, "meta_title": "Macbook Pro 16\" Mock Up", "meta_description": "1 click to generate your Macbook Pro 16\" mockup! You can wrap screenshots in Macbook Pro 16\" for prototypes.", @@ -2511,9 +2511,9 @@ "credits": "

    Facebook - Design Resources

    ", "desc": "13", "color": { - "id": "13", - "name": "13", - "hexcode": "#000000" + "id": "sky", + "name": "Sky", + "hexcode": "#C1CEDA" }, "meta_title": "Dell XPS 13\" Mock Up", "meta_description": "1 click to generate your Dell XPS 13\" mockup! You can wrap screenshots in Dell XPS 13\" for prototypes.", @@ -2540,9 +2540,9 @@ "credits": "

    Facebook - Design Resources

    ", "desc": "15", "color": { - "id": "15", - "name": "15", - "hexcode": "#000000" + "id": "silver", + "name": "Silver", + "hexcode": "#494D4C" }, "meta_title": "Dell XPS 15\" Mock Up", "meta_description": "1 click to generate your Dell XPS 15\" mockup! You can wrap screenshots in Dell XPS 15\" for prototypes.", @@ -2571,7 +2571,7 @@ "color": { "id": "quite-black", "name": "Quite Black", - "hexcode": "#000000" + "hexcode": "#3C373B" }, "meta_title": "Google Pixel Quite Black Mock Up", "meta_description": "1 click to generate your Google Pixel Quite Black mockup! You can wrap screenshots in Google Pixel Quite Black for prototypes.", @@ -2613,7 +2613,7 @@ "color": { "id": "really-blue", "name": "Really Blue", - "hexcode": "#000000" + "hexcode": "#363B98" }, "meta_title": "Google Pixel Really Blue Mock Up", "meta_description": "1 click to generate your Google Pixel Really Blue mockup! You can wrap screenshots in Google Pixel Really Blue for prototypes.", @@ -2655,7 +2655,7 @@ "color": { "id": "very-silver", "name": "Very Silver", - "hexcode": "#000000" + "hexcode": "#BFB9B9" }, "meta_title": "Google Pixel Very Silver Mock Up", "meta_description": "1 click to generate your Google Pixel Very Silver mockup! You can wrap screenshots in Google Pixel Very Silver for prototypes.", @@ -2697,7 +2697,7 @@ "color": { "id": "clearly-white", "name": "Clearly White", - "hexcode": "#000000" + "hexcode": "#EAEAEC" }, "meta_title": "Google Pixel 4 Clearly White Mock Up", "meta_description": "1 click to generate your Google Pixel 4 Clearly White mockup! You can wrap screenshots in Google Pixel 4 Clearly White for prototypes.", @@ -2738,7 +2738,7 @@ "color": { "id": "just-black", "name": "Just Black", - "hexcode": "#000000" + "hexcode": "#1B1B1B" }, "meta_title": "Google Pixel 4 Just Black Mock Up", "meta_description": "1 click to generate your Google Pixel 4 Just Black mockup! You can wrap screenshots in Google Pixel 4 Just Black for prototypes.", @@ -2779,7 +2779,7 @@ "color": { "id": "oh-so-orange", "name": "Oh So Orange", - "hexcode": "#000000" + "hexcode": "#F07D68" }, "meta_title": "Google Pixel 4 Oh So Orange Mock Up", "meta_description": "1 click to generate your Google Pixel 4 Oh So Orange mockup! You can wrap screenshots in Google Pixel 4 Oh So Orange for prototypes.", @@ -2820,7 +2820,7 @@ "color": { "id": "clearly-white", "name": "Clearly White", - "hexcode": "#000000" + "hexcode": "#EAEAEC" }, "meta_title": "Google Pixel 4 XL Clearly White Mock Up", "meta_description": "1 click to generate your Google Pixel 4 XL Clearly White mockup! You can wrap screenshots in Google Pixel 4 XL Clearly White for prototypes.", @@ -2861,7 +2861,7 @@ "color": { "id": "just-black", "name": "Just Black", - "hexcode": "#000000" + "hexcode": "#1B1B1B" }, "meta_title": "Google Pixel 4 XL Just Black Mock Up", "meta_description": "1 click to generate your Google Pixel 4 XL Just Black mockup! You can wrap screenshots in Google Pixel 4 XL Just Black for prototypes.", @@ -2902,7 +2902,7 @@ "color": { "id": "oh-so-orange", "name": "Oh So Orange", - "hexcode": "#000000" + "hexcode": "#F07D68" }, "meta_title": "Google Pixel 4 XL Oh So Orange Mock Up", "meta_description": "1 click to generate your Google Pixel 4 XL Oh So Orange mockup! You can wrap screenshots in Google Pixel 4 XL Oh So Orange for prototypes.", @@ -2943,7 +2943,7 @@ "color": { "id": "just-black", "name": "Just Black", - "hexcode": "#000000" + "hexcode": "#1B1B1B" }, "meta_title": "Google Pixel 5 Just Black Mock Up", "meta_description": "1 click to generate your Google Pixel 5 Just Black mockup! You can wrap screenshots in Google Pixel 5 Just Black for prototypes.", @@ -2984,7 +2984,7 @@ "color": { "id": "sorta-sage", "name": "Sorta Sage", - "hexcode": "#000000" + "hexcode": "#9EB2AC" }, "meta_title": "Google Pixel 5 Sorta Sage Mock Up", "meta_description": "1 click to generate your Google Pixel 5 Sorta Sage mockup! You can wrap screenshots in Google Pixel 5 Sorta Sage for prototypes.", @@ -3025,7 +3025,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#202123" }, "meta_title": "One Plus 8 pro Black Mock Up", "meta_description": "1 click to generate your One Plus 8 pro Black mockup! You can wrap screenshots in One Plus 8 pro Black for prototypes.", @@ -3063,11 +3063,7 @@ "background_class": "fish-bg3", "credits": "

    Artiom Dashinsky
    @hvost

    ", "desc": "55LW5600", - "color": { - "id": "55lw5600", - "name": "55LW5600", - "hexcode": "#000000" - }, + "color": null, "meta_title": "LG Smart TV 55LW5600 Mock Up", "meta_description": "1 click to generate your LG Smart TV 55LW5600 mockup! You can wrap screenshots in LG Smart TV 55LW5600 for prototypes.", "display_resolution": [1923, 1087], @@ -3105,11 +3101,7 @@ "background_class": "fish-bg4", "credits": "

    Artiom Dashinsky
    @hvost

    ", "desc": "TM2792", - "color": { - "id": "tm2792", - "name": "TM2792", - "hexcode": "#000000" - }, + "color": null, "meta_title": "LG Personal Smart TV Mock Up", "meta_description": "1 click to generate your LG Personal Smart TV mockup! You can wrap screenshots in LG Personal Smart TV for prototypes.", "display_resolution": [1923, 1087], @@ -3149,7 +3141,7 @@ "color": { "id": "white", "name": "White", - "hexcode": "#000000" + "hexcode": "#F6F6F6" }, "meta_title": "Microsoft Surface Book Mock Up", "meta_description": "1 click to generate your Microsoft Surface Book mockup! You can wrap screenshots in Microsoft Surface Book for prototypes.", @@ -3178,7 +3170,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#36373C" }, "meta_title": "Microsoft Surface Pro 3 Black Mock Up", "meta_description": "1 click to generate your Microsoft Surface Pro 3 Black mockup! You can wrap screenshots in Microsoft Surface Pro 3 Black for prototypes.", @@ -3207,7 +3199,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#36373C" }, "meta_title": "Microsoft Surface Pro 4 Black Mock Up", "meta_description": "1 click to generate your Microsoft Surface Pro 4 Black mockup! You can wrap screenshots in Microsoft Surface Pro 4 Black for prototypes.", @@ -3236,7 +3228,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#292929" }, "meta_title": "Motorola Moto E Black Mock Up", "meta_description": "1 click to generate your Motorola Moto E Black mockup! You can wrap screenshots in Motorola Moto E Black for prototypes.", @@ -3275,7 +3267,7 @@ "color": { "id": "white", "name": "White", - "hexcode": "#000000" + "hexcode": "#F3F2F1" }, "meta_title": "Motorola Moto E White Mock Up", "meta_description": "1 click to generate your Motorola Moto E White mockup! You can wrap screenshots in Motorola Moto E White for prototypes.", @@ -3314,7 +3306,7 @@ "color": { "id": "dark", "name": "Dark", - "hexcode": "#000000" + "hexcode": "#37383D" }, "meta_title": "Motorola Moto G Mock Up", "meta_description": "1 click to generate your Motorola Moto G mockup! You can wrap screenshots in Motorola Moto G for prototypes.", @@ -3351,11 +3343,7 @@ "background_class": "fish-bg2", "credits": "

    Artiom Dashinsky
    @hvost

    ", "desc": "D8000", - "color": { - "id": "d8000", - "name": "D8000", - "hexcode": "#000000" - }, + "color": null, "meta_title": "Samsung Smart TV D8000 Mock Up", "meta_description": "1 click to generate your Samsung Smart TV D8000 mockup! You can wrap screenshots in Samsung Smart TV D8000 for prototypes.", "display_resolution": [1696, 955], @@ -3393,11 +3381,7 @@ "background_class": "fish-bg", "credits": "

    Artiom Dashinsky
    @hvost

    ", "desc": "ES8000", - "color": { - "id": "es8000", - "name": "ES8000", - "hexcode": "#000000" - }, + "color": null, "meta_title": "Samsung Smart TV ES8000 Mock Up", "meta_description": "1 click to generate your Samsung Smart TV ES8000 mockup! You can wrap screenshots in Samsung Smart TV ES8000 for prototypes.", "display_resolution": [1923, 1087], @@ -3437,7 +3421,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#283552" }, "meta_title": "Samsung Galaxy Note 5 Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy Note 5 Black mockup! You can wrap screenshots in Samsung Galaxy Note 5 Black for prototypes.", @@ -3477,7 +3461,7 @@ "color": { "id": "gold", "name": "Gold", - "hexcode": "#000000" + "hexcode": "#E8E1CF" }, "meta_title": "Samsung Galaxy Note 5 Gold Mock Up", "meta_description": "1 click to generate your Samsung Galaxy Note 5 Gold mockup! You can wrap screenshots in Samsung Galaxy Note 5 Gold for prototypes.", @@ -3517,7 +3501,7 @@ "color": { "id": "pink", "name": "Pink", - "hexcode": "#000000" + "hexcode": "#EDD4D0" }, "meta_title": "Samsung Galaxy Note 5 Pink Mock Up", "meta_description": "1 click to generate your Samsung Galaxy Note 5 Pink mockup! You can wrap screenshots in Samsung Galaxy Note 5 Pink for prototypes.", @@ -3557,7 +3541,7 @@ "color": { "id": "silver-titanium", "name": "Silver Titanium", - "hexcode": "#000000" + "hexcode": "#C5CFD8" }, "meta_title": "Samsung Galaxy Note 5 Silver Titanium Mock Up", "meta_description": "1 click to generate your Samsung Galaxy Note 5 Silver Titanium mockup! You can wrap screenshots in Samsung Galaxy Note 5 Silver Titanium for prototypes.", @@ -3597,7 +3581,7 @@ "color": { "id": "white", "name": "White", - "hexcode": "#000000" + "hexcode": "#F4F3F1" }, "meta_title": "Samsung Galaxy Note 5 White Mock Up", "meta_description": "1 click to generate your Samsung Galaxy Note 5 White mockup! You can wrap screenshots in Samsung Galaxy Note 5 White for prototypes.", @@ -3637,7 +3621,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#363738" }, "meta_title": "Samsung Galaxy S4 Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S4 Black mockup! You can wrap screenshots in Samsung Galaxy S4 Black for prototypes.", @@ -3679,7 +3663,7 @@ "color": { "id": "white", "name": "White", - "hexcode": "#000000" + "hexcode": "#D8DBE3" }, "meta_title": "Samsung Galaxy S4 White Mock Up ", "meta_description": "1 click to generate your Samsung Galaxy S4 White mockup! You can wrap screenshots in Samsung Galaxy S4 White for prototypes.", @@ -3721,7 +3705,7 @@ "color": { "id": "white", "name": "White", - "hexcode": "#000000" + "hexcode": "#F0F0F0" }, "meta_title": "Samsung Galaxy S Duos White Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S Duos White mockup! You can wrap screenshots in Samsung Galaxy S Duos White for prototypes.", @@ -3761,7 +3745,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#363738" }, "meta_title": "Samsung Galaxy Y Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy Y Black mockup! You can wrap screenshots in Samsung Galaxy Y Black for prototypes.", @@ -3801,7 +3785,7 @@ "color": { "id": "white", "name": "White", - "hexcode": "#000000" + "hexcode": "#F0F0F0" }, "meta_title": "Samsung Galaxy Y White Mock Up", "meta_description": "1 click to generate your Samsung Galaxy Y White mockup! You can wrap screenshots in Samsung Galaxy Y White for prototypes.", @@ -3841,7 +3825,7 @@ "color": { "id": "cloud-blue", "name": "Cloud Blue", - "hexcode": "#000000" + "hexcode": "#C6E4F6" }, "meta_title": "Samsung Galaxy S20 Cloud Blue Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20 Cloud Blue mockup! You can wrap screenshots in Samsung Galaxy S20 Cloud Blue for prototypes.", @@ -3882,7 +3866,7 @@ "color": { "id": "cosmic-grey", "name": "Cosmic Grey", - "hexcode": "#000000" + "hexcode": "#727270" }, "meta_title": "Samsung Galaxy S20 Cosmic Grey Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20 Cosmic Grey mockup! You can wrap screenshots in Samsung Galaxy S20 Cosmic Grey for prototypes.", @@ -3923,7 +3907,7 @@ "color": { "id": "pink", "name": "Pink", - "hexcode": "#000000" + "hexcode": "#F0CBD3" }, "meta_title": "Samsung Galaxy S20 Pink Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20 Pink mockup! You can wrap screenshots in Samsung Galaxy S20 Pink for prototypes.", @@ -3964,7 +3948,7 @@ "color": { "id": "cosmic-black", "name": "Cosmic Black", - "hexcode": "#000000" + "hexcode": "#120B0B" }, "meta_title": "Samsung Galaxy S20 Ultra Cosmic Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20 Ultra Cosmic Black mockup! You can wrap screenshots in Samsung Galaxy S20 Ultra Cosmic Black for prototypes.", @@ -4005,7 +3989,7 @@ "color": { "id": "cosmic-grey", "name": "Cosmic Grey", - "hexcode": "#000000" + "hexcode": "#70706E" }, "meta_title": "Samsung Galaxy S20 Ultra Cosmic Grey Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20 Ultra Cosmic Grey mockup! You can wrap screenshots in Samsung Galaxy S20 Ultra Cosmic Grey for prototypes.", @@ -4045,7 +4029,7 @@ "color": { "id": "cloud-blue", "name": "Cloud Blue", - "hexcode": "#000000" + "hexcode": "#C6E4F6" }, "meta_title": "Samsung Galaxy S20+ Cloud Blue Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20+ Cloud Blue mockup! You can wrap screenshots in Samsung Galaxy S20+ Cloud Blue for prototypes.", @@ -4085,7 +4069,7 @@ "color": { "id": "cosmic-grey", "name": "Cosmic Grey", - "hexcode": "#000000" + "hexcode": "#727270" }, "meta_title": "Samsung Galaxy S20+ Cosmic Grey Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20+ Cosmic Grey mockup! You can wrap screenshots in Samsung Galaxy S20+ Cosmic Grey for prototypes.", @@ -4125,7 +4109,7 @@ "color": { "id": "cosmic-black", "name": "Cosmic Black", - "hexcode": "#000000" + "hexcode": "#120B0B" }, "meta_title": "Samsung Galaxy S20+ Cosmic Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S20+ Cosmic Black mockup! You can wrap screenshots in Samsung Galaxy S20+ Cosmic Black for prototypes.", @@ -4165,7 +4149,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#3A3D40" }, "meta_title": "Samsung Galaxy S21 5G Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21 5G Black mockup! You can wrap screenshots in Samsung Galaxy S21 5G Black for prototypes.", @@ -4205,7 +4189,7 @@ "color": { "id": "pink", "name": "Pink", - "hexcode": "#000000" + "hexcode": "#FBD2CE" }, "meta_title": "Samsung Galaxy S21 5G Pink Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21 5G Pink mockup! You can wrap screenshots in Samsung Galaxy S21 5G Pink for prototypes.", @@ -4245,7 +4229,7 @@ "color": { "id": "violet", "name": "Violet", - "hexcode": "#000000" + "hexcode": "#B2B1CE" }, "meta_title": "Samsung Galaxy S21 5G Violet Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21 5G Violet mockup! You can wrap screenshots in Samsung Galaxy S21 5G Violet for prototypes.", @@ -4285,7 +4269,7 @@ "color": { "id": "white", "name": "White", - "hexcode": "#000000" + "hexcode": "#D8DBE3" }, "meta_title": "Samsung Galaxy S21 5G White Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21 5G White mockup! You can wrap screenshots in Samsung Galaxy S21 5G White for prototypes.", @@ -4325,7 +4309,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#3A3D40" }, "meta_title": "Samsung Galaxy S21 Ultra Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21 Ultra Black mockup! You can wrap screenshots in Samsung Galaxy S21 Ultra Black for prototypes.", @@ -4365,7 +4349,7 @@ "color": { "id": "silver", "name": "Silver", - "hexcode": "#000000" + "hexcode": "#CCD2DF" }, "meta_title": "Samsung Galaxy S21 Ultra Silver Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21 Ultra Silver mockup! You can wrap screenshots in Samsung Galaxy S21 Ultra Silver for prototypes.", @@ -4405,7 +4389,7 @@ "color": { "id": "black", "name": "Black", - "hexcode": "#000000" + "hexcode": "#3A3D40" }, "meta_title": "Samsung Galaxy S21+ 5G Black Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21+ 5G Black mockup! You can wrap screenshots in Samsung Galaxy S21+ 5G Black for prototypes.", @@ -4445,7 +4429,7 @@ "color": { "id": "silver", "name": "Silver", - "hexcode": "#000000" + "hexcode": "#CCD2DF" }, "meta_title": "Samsung Galaxy S21+ 5G Silver Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21+ 5G Silver mockup! You can wrap screenshots in Samsung Galaxy S21+ 5G Silver for prototypes.", @@ -4485,7 +4469,7 @@ "color": { "id": "violet", "name": "Violet", - "hexcode": "#000000" + "hexcode": "#B2B1CE" }, "meta_title": "Samsung Galaxy S21+ 5G Violet Mock Up", "meta_description": "1 click to generate your Samsung Galaxy S21+ 5G Violet mockup! You can wrap screenshots in Samsung Galaxy S21+ 5G Violet for prototypes.", diff --git a/src/scripts/model.ts b/src/scripts/model.ts index 7c62f0f..a57d14d 100644 --- a/src/scripts/model.ts +++ b/src/scripts/model.ts @@ -18,7 +18,7 @@ export interface Device { orientations: Orientation[]; view_desc: string; imagePath?: [string, string][]; - color: DeviceColor; + color: DeviceColor | null; } export interface ModelThumbnail { diff --git a/src/scripts/parse/parseDevice.ts b/src/scripts/parse/parseDevice.ts index 227500b..3818113 100644 --- a/src/scripts/parse/parseDevice.ts +++ b/src/scripts/parse/parseDevice.ts @@ -25,17 +25,13 @@ const RawDevice = z.object({ is_legacy: z.optional(z.boolean()).default(false), // new fields - // brand: BrandEnum, - color: z.object({ - id: z.string(), - name: z.string(), - hexcode: z.string().regex(HEX_CODE_REGEX), - }), - // device_type_v2: DeviceTypeEnum, - // device_group: z.object({ - // name: z.string(), - // id: z.string(), - // }), + color: z + .object({ + id: z.string(), + name: z.string(), + hexcode: z.string().regex(HEX_CODE_REGEX), + }) + .nullable(), }); export type RawDevice = z.infer; diff --git a/src/scripts/redirect.json b/src/scripts/redirect.json index b065092..54fd2af 100644 --- a/src/scripts/redirect.json +++ b/src/scripts/redirect.json @@ -97,19 +97,19 @@ "/device/apple-applewatch45mm-starlightaluminum": "/model/apple-watch-series-8-45mm/color/starlight-aluminum", "/device/apple-macbook-gold": "/model/macbook-12-inch/color/gold", "/device/apple-macbook-grey": "/model/macbook-12-inch/color/grey", - "/device/apple-macbookpro14": "/model/macbook-pro-14-inch/color/14", - "/device/apple-macbookpro16": "/model/macbook-pro-16-inch/color/16", - "/device/apple-macbookair13": "/model/macbook-air-13-inch/color/13", - "/device/apple-imac2013": "/model/imac-2013/color/2013", - "/device/apple-imac2015": "/model/imac-2015/color/2015", - "/device/apple-imac2015retina": "/model/imac-2015-retina/color/2015", - "/device/dell-xps13": "/model/dell-xps-13/color/13", - "/device/dell-xps15": "/model/dell-xps-15/color/15", + "/device/apple-macbookpro14": "/model/macbook-pro-14-inch/color/silver", + "/device/apple-macbookpro16": "/model/macbook-pro-16-inch/color/silver", + "/device/apple-macbookair13": "/model/macbook-air-13-inch/color/midnight", + "/device/apple-imac2013": "/model/imac-2013/color/silver", + "/device/apple-imac2015": "/model/imac-2015/color/silver", + "/device/apple-imac2015retina": "/model/imac-2015-retina/color/silver", + "/device/dell-xps13": "/model/dell-xps-13/color/sky", + "/device/dell-xps15": "/model/dell-xps-15/color/silver", "/device/microsoft-surfacebook": "/model/microsoft-surface-book/color/white", "/device/microsoft-surfacepro4": "/model/microsoft-surface-pro-4/color/black", "/device/microsoft-surfacepro3": "/model/microsoft-surface-pro-3/color/black", - "/device/samsung-es8000": "/model/samsung-tv-es8000/color/es8000", - "/device/samsung-d8000": "/model/samsung-tv-d8000/color/d8000", - "/device/lg-55lw5600": "/model/lg-55lw5600/color/55lw5600", - "/device/lg-tm2792": "/model/lg-tm2792/color/tm2792" + "/device/samsung-es8000": "/model/samsung-tv-es8000/color/default", + "/device/samsung-d8000": "/model/samsung-tv-d8000/color/default", + "/device/lg-55lw5600": "/model/lg-55lw5600/color/default", + "/device/lg-tm2792": "/model/lg-tm2792/color/default" } diff --git a/src/styles/device.css b/src/styles/device.css index d80b210..923bdb9 100644 --- a/src/styles/device.css +++ b/src/styles/device.css @@ -514,8 +514,8 @@ .device-grid__overlay { position: absolute; display: flex; - flex-direction: column; - align-items: center; + justify-content: center; + align-items: end; top: 0; left: 0; width: 100%; @@ -528,47 +528,8 @@ } } -@media (min-width: 992px) { - .device-grid__overlay-header { - margin-top: auto; - max-width: 160px; - } -} - -.device-grid__overlay-device-name { - margin: 40px 0 0 0; - color: var(--white); - text-align: center; - font-size: 14px; - font-weight: 700; -} -@media (min-width: 992px) { - .device-grid__overlay-device-name { - margin: 0; - text-align: start; - font-size: 18px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -.device-grid__overlay-device-desc { - margin: 5px 0 0 0; - color: var(--white); - text-align: center; - font-size: 12px; - font-weight: 400; -} -@media (min-width: 992px) { - .device-grid__overlay-device-desc { - text-align: start; - font-size: 14px; - } -} - .device-grid__overlay-pick-btn { - margin: auto 0 15px 0; + margin: 0 0 15px 0; padding: 0; width: 100px; height: 40px; @@ -594,7 +555,7 @@ } @media (min-width: 992px) { .device-grid__overlay-pick-btn { - margin: auto 0 0 auto; + margin: 0; } } diff --git a/src/styles/upload.css b/src/styles/upload.css index 730a2ec..215bdf5 100644 --- a/src/styles/upload.css +++ b/src/styles/upload.css @@ -10,6 +10,7 @@ main { display: flex; justify-content: center; margin: 0 100px; + padding: 50px 0; } } @media (min-width: 1200px) { @@ -28,24 +29,26 @@ main { @media (min-width: 992px) { .mockup-lg-right { - margin: 100px 0 0 20px; + margin: 76px 0 0 20px; max-width: 450px; } } -.device-header { - padding: 20px 0 0 20px; -} - .device-header__name { + font-size: 20px; font-weight: 700; - font-size: 24px; + line-height: 24.2px; color: var(--black); + padding: 20px; } -.device-header__desc { - font-size: 18px; - color: var(--gray-1); +@media (min-width: 992px) { + .device-header__name { + margin: 0 0 37px 0; + font-size: 32px; + line-height: 39px; + padding: 0; + } } .upload { @@ -88,6 +91,13 @@ main { background-color: white; } +@media (min-width: 992px) { + .device { + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06); + border-radius: 10px; + } +} + .upload__inner-box { position: absolute; top: 0;