const iPhone12ProSvg2 = ``;
const iPhone12ProMaxSvg2 = ``;
const iphone14ProSvg2 = ``;
const iphone14ProMaxSvg2 = ``;
const screenResolutions = {
iPhone12Pro: {
margin: '18px 0 0 21px',
screen: {
width: 391,
height: 845,
},
shell: {
width: 438,
height: 883,
},
},
iPhone12ProMax: {
margin: '18px 0 0 21px',
screen: {
width: 429,
height: 927,
},
shell: {
width: 476,
height: 965,
},
},
iPhone14Pro: {
margin: '21px 0 0 23px',
screen: {
width: 394,
height: 853,
},
shell: {
width: 436,
height: 891,
},
},
iPhone14ProMax: {
margin: '21px 0 0 23px',
screen: {
width: 431,
height: 933,
},
shell: {
width: 473,
height: 971,
},
},
};
/**
* @param modelName - device.safeDescription from DeviceKit
* @returns - returns a phone shell svg and styles for inner screen dimensions
* plus margins from shell
* _______
* currently mapped: 12, 12pro, map, 13, 13pro, max, 14, 14 pro, 14 max/plus
*
* everything else is considered as 12 pro
* */
export function mapIphoneModel(modelName: string) {
const iPhone12Pro = [
'iPhone 12',
'iPhone 12 Pro',
'iPhone 13',
'iPhone 13 Pro',
'iPhone 14',
];
const iPhone12ProMax = [
'iPhone 12 Pro Max',
'iPhone 13 Pro Max',
'iPhone 14 Plus',
];
const iPhone14Pro = ['iPhone 14 Pro'];
const iPhone14ProMax = ['iPhone 14 Pro Max'];
if (iPhone12Pro.includes(modelName)) {
return {
svg: iPhone12ProSvg2,
styles: screenResolutions.iPhone12Pro,
} as const;
} else if (iPhone12ProMax.includes(modelName)) {
return {
svg: iPhone12ProMaxSvg2,
styles: screenResolutions.iPhone12ProMax,
} as const;
} else if (iPhone14Pro.includes(modelName)) {
return {
svg: iphone14ProSvg2,
styles: screenResolutions.iPhone14Pro,
} as const;
} else if (iPhone14ProMax.includes(modelName)) {
return {
svg: iphone14ProMaxSvg2,
styles: screenResolutions.iPhone14ProMax,
} as const;
} else {
return {
svg: iPhone12ProSvg2,
styles: screenResolutions.iPhone12Pro,
} as const; // Default fallback
}
}
const universalAndroid = (width: number, height: number) => {
const scale = width / 375;
const strokeWidth = Math.round(6 * scale);
const radius = Math.round(20 * scale);
const dot = 15 * scale;
const phoneStyle = `margin-top: ${strokeWidth}px; margin-left: ${strokeWidth}px; width: ${width}px; height: ${height}px; border-radius: ${radius}px; overflow: hidden; outline:${strokeWidth}px solid black;border: ${strokeWidth}px solid #444; position: relative;`;
const cameraStyle = `width:${dot}px;height:${dot}px;background:#111921;background:conic-gradient(from 315deg,#111921,#2E303D);border-radius:50%;position:absolute;top:${
scale * 10
}px;left:50%;transform:translateX(-50%);z-index:9`;
const screenStyle = `width: ${width}px; height: ${height}px; z-index: 6;`;
const casingStyle = `position: relative;`;
const rockersStyle = `position: absolute; top: 30%; right: -${
strokeWidth * 2
}px; display: flex; flex-direction: column; z-index: 9; gap: ${scale * 6}px;`;
const volumeButtonStyle = `width: ${8 * scale}px; height: ${
60 * scale
}px; background: black; border-top-right-radius: ${
2 * scale
}px; border-bottom-right-radius: ${2 * scale}px;`;
return {
svg: ``,
strokeWidth,
};
};
export function mapAndroidModel(width: number, height: number) {
const { svg, strokeWidth } = universalAndroid(width, height);
return {
svg,
styles: {
// two borders
margin: `${strokeWidth * 2}px 0 0 ${strokeWidth * 2}px`,
screen: {
width,
height,
},
shell: {
// 2 borders, margins and volume buttons
width: width + 4 * strokeWidth + 15,
height: height + 4 * strokeWidth,
},
},
};
}