feat: fix android display
This commit is contained in:
parent
f1b39d22a5
commit
82659c600a
|
|
@ -12,6 +12,7 @@
|
|||
<h1>您的专属临时邮箱，无限且私密</h1>
|
||||
<p>输入任何<code>@shenjianl.cn</code>地址，立即在此查看收件箱。</p>
|
||||
<form @submit.prevent="fetchMessages" class="input-group">
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
type="email"
|
||||
v-model="recipient"
|
||||
|
|
@ -19,6 +20,14 @@
|
|||
placeholder="输入您的临时邮箱地址..."
|
||||
required
|
||||
/>
|
||||
<button @click="copyEmail" type="button" class="btn-copy" title="复制地址">
|
||||
<span v-if="copyStatus === 'copied'">✓</span>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
|
||||
<path d="M2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h-1v1a.5.5 0 0 1-.5.5H2.5a.5.5 0 0 1-.5-.5V6.5a.5.5 0 0 1 .5-.5H3v-1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">查看收件箱</button>
|
||||
<button @click="generateRandomEmail" type="button" class="btn btn-secondary">随机生成</button>
|
||||
</form>
|
||||
|
|
@ -92,6 +101,7 @@ export default {
|
|||
const selectedMessage = ref(null);
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const copyStatus = ref('idle'); // 'idle' | 'copied'
|
||||
// !!! 生产环境<EFBFBD><EFBFBD>要提示 !!!
|
||||
// 请务必将下面的 'yourdomain.com' 替换为您的真实域名
|
||||
const domain = 'shenjianl.cn';
|
||||
|
|
@ -128,8 +138,102 @@ export default {
|
|||
};
|
||||
|
||||
const generateRandomEmail = () => {
|
||||
const randomPart = Math.random().toString(36).substring(2, 10);
|
||||
recipient.value = `${randomPart}@${domain}`;
|
||||
const names = [
|
||||
'alex', 'casey', 'morgan', 'jordan', 'taylor', 'jamie', 'ryan', 'drew', 'jesse', 'pat',
|
||||
'chris', 'dylan', 'aaron', 'blake', 'cameron', 'devon', 'elliot', 'finn', 'gray', 'harper',
|
||||
'kai', 'logan', 'max', 'noah', 'owen', 'quinn', 'riley', 'rowan', 'sage', 'skyler'
|
||||
];
|
||||
const places = [
|
||||
'tokyo', 'paris', 'london', 'cairo', 'sydney', 'rio', 'moscow', 'rome', 'nile', 'everest',
|
||||
'sahara', 'amazon', 'gobi', 'andes', 'pacific', 'kyoto', 'berlin', 'dubai', 'seoul', 'milan',
|
||||
'vienna', 'prague', 'athens', 'lisbon', 'oslo', 'helsinki', 'zürich', 'geneva', 'brussels', 'amsterdam'
|
||||
];
|
||||
const concepts = [
|
||||
'apollo', 'artemis', 'athena', 'zeus', 'thor', 'loki', 'odin', 'freya', 'phoenix', 'dragon',
|
||||
'griffin', 'sphinx', 'pyramid', 'colossus', 'acropolis', 'obelisk', 'pagoda', 'castle', 'cyberspace', 'matrix',
|
||||
'protocol', 'algorithm', 'pixel', 'vector', 'photon', 'quark', 'nova', 'pulsar', 'saga', 'voyage',
|
||||
'enigma', 'oracle', 'cipher', 'vortex', 'helix', 'axiom', 'zenith', 'epoch', 'nexus', 'trinity'
|
||||
];
|
||||
|
||||
const allLists = [names, places, concepts];
|
||||
const getRandomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
|
||||
|
||||
// Randomly pick 2 lists to combine words from
|
||||
const listA = getRandomItem(allLists);
|
||||
const listB = getRandomItem(allLists);
|
||||
|
||||
const word1 = getRandomItem(listA);
|
||||
const word2 = getRandomItem(listB);
|
||||
|
||||
const number = Math.floor(Math.random() * 9000) + 1000; // Random 4-digit number
|
||||
|
||||
// Randomly choose a separator
|
||||
const separators = ['.', '-', '_', ''];
|
||||
const separator = getRandomItem(separators);
|
||||
|
||||
let prefix;
|
||||
if (word1 === word2) {
|
||||
// Avoids "alex.alex1234" if the same list and word are picked
|
||||
prefix = `${word1}${number}`;
|
||||
} else {
|
||||
prefix = `${word1}${separator}${word2}${number}`;
|
||||
}
|
||||
|
||||
recipient.value = `${prefix}@${domain}`;
|
||||
};
|
||||
|
||||
const copyEmail = () => {
|
||||
if (!recipient.value) return;
|
||||
|
||||
const textToCopy = recipient.value;
|
||||
|
||||
// Modern browsers in secure contexts
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||||
showCopySuccess();
|
||||
}).catch(err => {
|
||||
console.error('Modern copy failed: ', err);
|
||||
fallbackCopy(textToCopy); // Try fallback on error
|
||||
});
|
||||
} else {
|
||||
// Fallback for older browsers or insecure contexts
|
||||
fallbackCopy(textToCopy);
|
||||
}
|
||||
};
|
||||
|
||||
const fallbackCopy = (text) => {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
|
||||
// Make the textarea out of sight
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.top = '-9999px';
|
||||
textArea.style.left = '-9999px';
|
||||
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
const successful = document.execCommand('copy');
|
||||
if (successful) {
|
||||
showCopySuccess();
|
||||
} else {
|
||||
throw new Error('Fallback copy was unsuccessful');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fallback copy failed: ', err);
|
||||
alert('复制失败!');
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
};
|
||||
|
||||
const showCopySuccess = () => {
|
||||
copyStatus.value = 'copied';
|
||||
setTimeout(() => {
|
||||
copyStatus.value = 'idle';
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const showHowItWorks = () => {
|
||||
|
|
@ -146,10 +250,12 @@ export default {
|
|||
selectedMessage,
|
||||
loading,
|
||||
showModal,
|
||||
copyStatus,
|
||||
domain,
|
||||
fetchMessages,
|
||||
selectMessage,
|
||||
generateRandomEmail,
|
||||
copyEmail,
|
||||
showHowItWorks,
|
||||
closeModal,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753688160727" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3424" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M972.8 934.274509 998.4 908.54902 127.868001 908.54902C85.502225 908.54902 51.2 874.019706 51.2 831.263017L51.2 111.058823 25.6 136.784314 896.131998 136.784314C938.452011 136.784314 972.8 171.324278 972.8 213.860934L972.8 278.566694C972.8 292.77449 984.26151 304.292183 998.4 304.292183 1012.53849 304.292183 1024 292.77449 1024 278.566694L1024 213.860934C1024 142.916556 966.736828 85.333333 896.131998 85.333333L25.6 85.333333 0 85.333333 0 111.058823 0 831.263017C0 902.415639 57.205646 960 127.868001 960L998.4 960 1024 960 1024 934.274509 1024 457.69849C1024 443.490694 1012.53849 431.973001 998.4 431.973001 984.26151 431.973001 972.8 443.490694 972.8 457.69849L972.8 934.274509ZM512.651558 567.164817C520.64791 572.874498 531.187889 573.490406 539.788919 568.750601L1002.624789 313.693694C1015.021598 306.862133 1019.560139 291.225196 1012.761901 278.767619 1005.963665 266.310041 990.403006 261.749254 978.006197 268.580816L515.170327 523.637722 542.307689 525.223505 194.028065 276.539467C182.502788 268.310009 166.520953 271.027598 158.331639 282.609372 150.142325 294.191146 152.846657 310.251322 164.371935 318.480781L512.651558 567.164817Z" fill="#000000" p-id="3425"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,4 +1,10 @@
|
|||
/* Global Styles & Resets */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
|
||||
|
||||
:root {
|
||||
|
|
@ -21,6 +27,7 @@ body {
|
|||
color: var(--text-dark);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden; /* Prevent horizontal scrolling */
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
|
|
@ -30,6 +37,8 @@ body {
|
|||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
|
@ -90,13 +99,46 @@ body {
|
|||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.email-input {
|
||||
width: 100%;
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.email-input {
|
||||
flex: 1;
|
||||
/* top, right, bottom, left */
|
||||
padding: 0.75rem 3rem 0.75rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.5rem;
|
||||
transform: translateY(-50%);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--dark-grey);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-copy:hover {
|
||||
background-color: var(--medium-grey);
|
||||
}
|
||||
|
||||
.btn-copy span {
|
||||
color: var(--primary-purple);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.email-input:focus {
|
||||
|
|
@ -299,15 +341,88 @@ body {
|
|||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%; /* Prevent iOS font scaling */
|
||||
}
|
||||
|
||||
#app {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
padding: 1rem 0; /* Adjust padding for mobile */
|
||||
/* Keep flex row layout for alignment */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin-left: 0; /* Reset margin for mobile */
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
margin: 0 0 0 1rem; /* Space out the links */
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 2rem 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center; /* Ensure content is centered on mobile */
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.email-input {
|
||||
max-width: none; /* Remove max-width on mobile */
|
||||
}
|
||||
|
||||
.inbox-section {
|
||||
min-width: 0; /* Reset min-width */
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.inbox-container {
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
.message-list, .message-detail {
|
||||
|
||||
.message-list,
|
||||
.message-detail {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
.input-group {
|
||||
flex-direction: column;
|
||||
|
||||
.message-list {
|
||||
border-bottom: 1px solid var(--medium-grey);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.message-detail .empty-state {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
height: auto; /* Adjust height for mobile */
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue