diff --git a/README b/README new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index fda4f57..2f1597f 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,26 @@ - VCard Viewer + VCard Utility -

VCard Viewer

- +
+
+ + + +
-

Contact Details

+
+

VCard Parser

+
+

A vCard (or .vcf file) is a standard file format for electronic business cards. vCards allow you to easily create and share contact information that can be imported into various email clients, address books, and mobile devices.

+

This Parser section helps you upload an existing vCard (.vcf) file to view its contents in a structured format and explore its details.

+
+ + +

Contact Details

@@ -97,6 +109,169 @@ + + + +
+

VCard Generator

+
+

A vCard (or .vcf file) is a standard file format for electronic business cards. vCards allow you to easily create and share contact information that can be imported into various email clients, address books, and mobile devices.

+

This Generator section allows you to create a new vCard by filling in the fields below. You can then download the generated .vcf file to share or import into your contact applications.

+
+
+
+ Name +
+
+
+
+
+
+
+
+ +
+ Personal Details +
+
+
+
+ +
+ Work/Organization +
+
+
+
+ +
+ Phone +
+
+
+ +
+
+ +
+ +
+ Email + + +
+ +
+ Address +
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+ Online Presence +
+
+
+
+
+
+
+
+
+ +
+ Note +
+
+ + + +
+

Generated VCard:

+ + +
+
+ +
+

Privacy Policy

+
+

Effective Date:

+ +

This VCard Utility (the "Service") is committed to respecting your privacy. This policy outlines how we handle information when you use our Service.

+ +

1. Data Collection and Storage

+

This Service operates entirely within your web browser on your local device.

+
    +
  • No Data Storage: We do not store, save, or collect any of the VCard data you upload, input, or generate using this tool on our servers or any external database. All processing occurs client-side.
    • +
  • No User Accounts: This Service does not require user registration or accounts.
    • +
+ +

2. Data Processing

+
    +
  • Client-Side Processing: When you upload a VCard for parsing or input data to generate a VCard, this information is processed directly in your browser. It is not transmitted to our servers.
    • +
  • File Handling: Uploaded files are read by your browser for parsing. Generated VCards are created in your browser and can be downloaded directly to your device.
    • +
+ +

3. Cookies and Tracking Technologies

+
    +
  • No Cookies: This Service does not use cookies or any other tracking technologies to monitor your activity or collect personal information.
    • +
+ +

4. Your Responsibilities

+
    +
  • You are responsible for the data you choose to upload to the Parser or input into the Generator. Please ensure you have the necessary rights and permissions for any personal data you handle using this tool.
    • +
+ +

5. GDPR (General Data Protection Regulation)

+
    +
  • While this Service is designed not to collect or store personal data in a way that would typically make us a "data controller" or "data processor" under GDPR for the content of your VCards, we acknowledge the importance of data protection principles.
    • +
  • The processing of VCard data you provide is done at your instruction and under your control within your browser environment.
    • +
+ +

6. Changes to This Privacy Policy

+
    +
  • We may update this Privacy Policy from time to time. Any changes will be posted on this page with an updated effective date. To update the date, modify the `privacyEffectiveDate` span or the script that populates it.
    • +
+ +

7. Contact Us

+
    +
  • For questions about this policy, please note that this is a simple client-side tool with no backend data processing or storage provided by a service operator.
    • +
+
+
+ diff --git a/script.js b/script.js index 2d53a8b..5af1c74 100644 --- a/script.js +++ b/script.js @@ -39,6 +39,35 @@ function decodeQuotedPrintable(str, charset = 'UTF-8') { } +function formatPhoneNumber(phoneNumberString) { + if (!phoneNumberString || typeof phoneNumberString !== 'string' || phoneNumberString.trim() === 'N/A' || phoneNumberString.trim() === '') { + return phoneNumberString; // Return original if it's not a usable string + } + try { + // Attempt to parse the phone number. + // No default country is provided, so it relies on the number being in international format (e.g., +12125552368) + // or being a national number where the country can be easily inferred by the library (less reliable without a hint). + const phoneNumber = new libphonenumber.parsePhoneNumberFromString(phoneNumberString); + + if (phoneNumber && phoneNumber.isValid()) { + return phoneNumber.formatInternational(); // e.g., +1 212 555 2368 + } else { + // If it's not valid or couldn't be parsed well, try AsYouType for partial formatting + // This can sometimes make poorly formatted numbers a bit more readable. + const formattedAsYouType = new libphonenumber.AsYouType().input(phoneNumberString); + // AsYouType().input() might return an empty string if it processes everything and finds nothing valid, + // or it might return a partially formatted string. Only use if it's different and not empty. + if (formattedAsYouType && formattedAsYouType !== phoneNumberString) { + return formattedAsYouType; + } + return phoneNumberString; // Fallback to original if not valid or AsYouType didn't help + } + } catch (error) { + // console.error("Error formatting phone number:", phoneNumberString, error); + return phoneNumberString; // Fallback to original string in case of an error + } +} + function parseVCard(rawContent) { const contacts = []; // Handle line folding: join lines that start with a space or tab @@ -176,9 +205,11 @@ function displayContactsInTable(contacts) { // Mobile Phone let mobilePhone = 'N/A'; if (contact.tel && contact.tel.length > 0) { - const mobileEntry = contact.tel.find(t => t.params && t.params.TYPE && t.params.TYPE.toUpperCase().includes('CELL')); + const mobileEntry = contact.tel.find(t => + t.params && t.params.TYPE && Array.isArray(t.params.TYPE) && t.params.TYPE.includes('CELL') + ); if (mobileEntry) { - mobilePhone = mobileEntry.value; + mobilePhone = formatPhoneNumber(mobileEntry.value); } } row.insertCell().textContent = mobilePhone; @@ -207,7 +238,126 @@ function displayContactsInTable(contacts) { }); } -// --- Modal Logic --- +// --- Tab Navigation Logic --- +const tabButtons = document.querySelectorAll('.tab-button'); +const tabPanes = document.querySelectorAll('.tab-pane'); + +function showPane(paneIdToShow) { + tabPanes.forEach(pane => { + pane.classList.remove('active-pane'); + // pane.style.display = 'none'; // Already handled by CSS .tab-pane + }); + tabButtons.forEach(button => { + button.classList.remove('active-tab-button'); + }); + + const paneToShow = document.getElementById(paneIdToShow); + if (paneToShow) { + paneToShow.classList.add('active-pane'); + // paneToShow.style.display = 'block'; // Already handled by CSS .active-pane + } + + // Find the button that corresponds to this paneId (e.g., 'parserView' -> 'parserTabButton') + const buttonToActivate = document.getElementById(paneIdToShow.replace('View', 'TabButton')); + if (buttonToActivate) { + buttonToActivate.classList.add('active-tab-button'); + } +} + +tabButtons.forEach(button => { + button.addEventListener('click', function() { + // Derive target pane ID from button ID e.g. "parserTabButton" -> "parserView" + const targetPaneId = this.id.replace('TabButton', 'View'); + showPane(targetPaneId); + }); +}); + +// Initialize with the Parser tab active and set up other event listeners +document.addEventListener('DOMContentLoaded', () => { + // Tab initialization + showPane('parserView'); + + // Set Privacy Policy Effective Date + const privacyEffectiveDateSpan = document.getElementById('privacyEffectiveDate'); + if (privacyEffectiveDateSpan) { + const today = new Date(); + const options = { year: 'numeric', month: 'long', day: 'numeric' }; + privacyEffectiveDateSpan.textContent = today.toLocaleDateString(undefined, options); // Uses browser's default locale for formatting + } + + // --- VCard Generator Logic --- + console.log("Attempting to find generator elements within DOMContentLoaded..."); + const generateVcfButtonElem = document.getElementById('generateVcfButton'); + const vcfOutputTextareaElem = document.getElementById('vcfOutput'); + const downloadVcfButtonElem = document.getElementById('downloadVcfButton'); + + console.log("generateVcfButton found:", generateVcfButtonElem); + console.log("vcfOutputTextarea found:", vcfOutputTextareaElem); + console.log("downloadVcfButton found:", downloadVcfButtonElem); + + // Element selection and event listener attachment for generator are inside DOMContentLoaded + // const generateVcfButton = document.getElementById('generateVcfButton'); // Replaced by Elem version + // const vcfOutputTextarea = document.getElementById('vcfOutput'); // Replaced by Elem version + // const downloadVcfButton = document.getElementById('downloadVcfButton'); // Replaced by Elem version + + if (generateVcfButtonElem && vcfOutputTextareaElem) { + generateVcfButtonElem.addEventListener('click', function() { // Use Elem version + if (document.getElementById('vcardGeneratorForm').checkValidity()) { + const vcfString = generateVCardString(); + vcfOutputTextareaElem.value = vcfString; // Use Elem version + } else { + alert("Please fill in all required fields (Formatted Name)."); + document.getElementById('vcardGeneratorForm').reportValidity(); + } + }); + } else { + // These console errors will now only appear if the elements are truly missing from HTML + // or if this script somehow runs before even the generator tab's HTML is parsed (unlikely with DOMContentLoaded) + if (!generateVcfButtonElem) console.error("Generate VCF button ('generateVcfButton') not found in HTML."); + if (!vcfOutputTextareaElem && generateVcfButtonElem) console.error("VCF Output textarea ('vcfOutput') not found in HTML."); + } + + if (downloadVcfButton && vcfOutputTextarea) { + downloadVcfButtonElem.addEventListener('click', function() { // Use Elem version + const vcfString = vcfOutputTextareaElem.value; // Use Elem version + if (!vcfString) { + alert("Please generate a VCard first."); + return; + } + + let filename = "contact.vcf"; + const fnValue = document.getElementById('genFN') ? document.getElementById('genFN').value.trim() : ''; + if (fnValue) { + filename = fnValue.replace(/[^a-z0-9_ \.\-]/gi, '_') + ".vcf"; + } + + const blob = new Blob([vcfString], { type: 'text/vcard;charset=utf-8;' }); + const link = document.createElement("a"); + if (link.download !== undefined) { + const url = URL.createObjectURL(blob); + link.setAttribute("href", url); + link.setAttribute("download", filename); + link.style.visibility = 'hidden'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(url); + } else { + alert("Your browser doesn't support direct download. Please copy the VCard content manually."); + } + }); + } else { + // Corrected the condition here to check downloadVcfButtonElem + if (!downloadVcfButtonElem && generateVcfButtonElem) console.error("Download VCF button ('downloadVcfButton') not found in HTML."); + } +}); + +// --- Modal Logic (Parser's Modal) --- +// These are for the parser's modal and should be available once the initial HTML is parsed. +// They are not inside DOMContentLoaded because functions like displayContactsInTable (which sets up row listeners) +// might be called before DOMContentLoaded if a file is processed very quickly or if the script is deferred weirdly. +// However, standard practice is that these too would be safer inside, or their usage deferred. +// For now, this matches the structure that was working for the modal previously. const modal = document.getElementById('contactModal'); const closeButton = document.querySelector('.close-button'); @@ -221,10 +371,196 @@ if (modal && closeButton) { } } } else { - console.error("Modal or close button not found. Modal functionality will be affected."); + // This error means the fundamental modal structure for the parser is missing. + console.error("Parser's Modal ('contactModal') or its close button not found. Modal functionality will be affected."); } +// --- VCard Generator Logic --- +const generateVcfButton = document.getElementById('generateVcfButton'); +const vcfOutputTextarea = document.getElementById('vcfOutput'); + +function generateUUID() { // Basic UUID generator + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); + return v.toString(16); + }); +} + +function getCurrentTimestampUTC() { + const now = new Date(); + return now.getUTCFullYear() + + ('0' + (now.getUTCMonth() + 1)).slice(-2) + + ('0' + now.getUTCDate()).slice(-2) + 'T' + + ('0' + now.getUTCHours()).slice(-2) + + ('0' + now.getUTCMinutes()).slice(-2) + + ('0' + now.getUTCSeconds()).slice(-2) + 'Z'; +} + + +function generateVCardString() { + const vcfData = []; + vcfData.push('BEGIN:VCARD'); + vcfData.push('VERSION:3.0'); + + // Helper to add property if value exists + function addProperty(property, value, params = {}) { + if (value) { + let line = property; + if (Object.keys(params).length > 0) { + for (const key in params) { + if(params[key]) { // Ensure param value is not empty + line += `;${key}=${params[key]}`; + } + } + } + vcfData.push(`${line}:${value}`); + } + } + + // Helper to get form value + function getFormValue(id) { + const element = document.getElementById(id); + return element ? element.value.trim() : ''; + } + + // Name + const fn = getFormValue('genFN'); + addProperty('FN;CHARSET=UTF-8', fn); + + const nValues = [ + getFormValue('genFamilyName'), + getFormValue('genGivenName'), + getFormValue('genMiddleName'), + getFormValue('genPrefix'), + getFormValue('genSuffix') + ]; + if (nValues.some(v => v)) { // Only add N if at least one part exists + addProperty('N;CHARSET=UTF-8', nValues.join(';')); + } + addProperty('NICKNAME;CHARSET=UTF-8', getFormValue('genNickname')); + + // Personal Details + addProperty('GENDER', getFormValue('genGender')); + const bday = getFormValue('genBday'); + if (bday) addProperty('BDAY', bday.replace(/-/g, '')); // Convert YYYY-MM-DD to YYYYMMDD + const anniversary = getFormValue('genAnniversary'); + if (anniversary) addProperty('ANNIVERSARY', anniversary.replace(/-/g, '')); + + // Work/Organization + addProperty('ORG;CHARSET=UTF-8', getFormValue('genOrg')); + addProperty('TITLE;CHARSET=UTF-8', getFormValue('genTitle')); + addProperty('ROLE;CHARSET=UTF-8', getFormValue('genRole')); + + // Phone 1 + const phone1 = getFormValue('genPhone1'); + const phone1Type = getFormValue('genPhone1Type'); + if (phone1) { + addProperty(`TEL;TYPE=${phone1Type}`, phone1); + } + + // Email 1 + const email1 = getFormValue('genEmail1'); + const email1Type = getFormValue('genEmail1Type'); + if (email1) { + addProperty(`EMAIL;CHARSET=UTF-8;TYPE=${email1Type}`, email1); + } + + // Address 1 + const adr1Street = getFormValue('genAdr1Street'); + const adr1City = getFormValue('genAdr1City'); + const adr1State = getFormValue('genAdr1State'); + const adr1Postal = getFormValue('genAdr1Postal'); + const adr1Country = getFormValue('genAdr1Country'); + const adr1Type = getFormValue('genAdr1Type'); + const adr1Label = getFormValue('genAdr1Label'); + + if (adr1Street || adr1City || adr1State || adr1Postal || adr1Country) { + // ADR: PO Box; Extended Address; Street Address; Locality; Region; Postal Code; Country + const adrValue = `;;${adr1Street};${adr1City};${adr1State};${adr1Postal};${adr1Country}`; + addProperty(`ADR;CHARSET=UTF-8;TYPE=${adr1Type}`, adrValue); + } + if (adr1Label) { + addProperty(`LABEL;CHARSET=UTF-8;TYPE=${adr1Type}`, adr1Label); + } + + // Online Presence + const url1 = getFormValue('genUrl1'); + const url1Type = getFormValue('genUrl1Type'); + if (url1) { + addProperty(url1Type ? `URL;TYPE=${url1Type.toUpperCase()}` : 'URL', url1); + } + + const social1Type = getFormValue('genSocial1Type'); + const social1Value = getFormValue('genSocial1Value'); + if (social1Type && social1Value) { + addProperty(`X-SOCIALPROFILE;TYPE=${social1Type.toLowerCase()}`, social1Value); + } + + // Note + addProperty('NOTE;CHARSET=UTF-8', getFormValue('genNote')); + + // Auto-generated fields + addProperty('UID', generateUUID()); + addProperty('REV', getCurrentTimestampUTC()); + + vcfData.push('END:VCARD'); + return vcfData.join('\r\n'); // Standard VCF line ending +} + + +if (generateVcfButton) { + generateVcfButton.addEventListener('click', function() { + if (document.getElementById('vcardGeneratorForm').checkValidity()) { + const vcfString = generateVCardString(); + if (vcfOutputTextarea) { + vcfOutputTextarea.value = vcfString; + } + } else { + // Optionally, provide more specific feedback or rely on browser's default validation UI + alert("Please fill in all required fields (Formatted Name)."); + document.getElementById('vcardGeneratorForm').reportValidity(); + } + }); +} else { + console.error("Generate VCF button not found."); +} + +const downloadVcfButton = document.getElementById('downloadVcfButton'); + +if (downloadVcfButton) { + downloadVcfButton.addEventListener('click', function() { + const vcfString = vcfOutputTextarea ? vcfOutputTextarea.value : ''; + if (!vcfString) { + alert("Please generate a VCard first."); + return; + } + + // Try to get a filename from FN, otherwise use a default + let filename = "contact.vcf"; + const fnValue = document.getElementById('genFN') ? document.getElementById('genFN').value.trim() : ''; + if (fnValue) { + filename = fnValue.replace(/[^a-z0-9_ \.\-]/gi, '_') + ".vcf"; // Sanitize filename + } + + const blob = new Blob([vcfString], { type: 'text/vcard;charset=utf-8;' }); + const link = document.createElement("a"); + if (link.download !== undefined) { // feature detection + const url = URL.createObjectURL(blob); + link.setAttribute("href", url); + link.setAttribute("download", filename); + link.style.visibility = 'hidden'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(url); + } else { + alert("Your browser doesn't support direct download. Please copy the VCard content manually."); + } + }); +} else { + console.error("Download VCF button not found."); +} function constructFullName(contact) { if (contact.fn) { // Formatted Name usually preferred if available return contact.fn; @@ -303,9 +639,16 @@ function populateModal(contact) { if (contact.tel && contact.tel.length > 0) { contact.tel.forEach(tel => { const li = document.createElement('li'); - let telDesc = tel.value; - if (tel.params && tel.params.TYPE) { - telDesc += ` (${tel.params.TYPE.split(',').join('/')})`; + let formattedNumber = formatPhoneNumber(tel.value); + let telDesc = formattedNumber; + + if (tel.params && tel.params.TYPE && Array.isArray(tel.params.TYPE) && tel.params.TYPE.length > 0) { + // Add type information, but try not to duplicate if formatting already includes it (though unlikely for simple types) + const typeString = `(${tel.params.TYPE.join('/')})`; + // Avoid adding empty parenthesis if no types + if (typeString !== '()') { + telDesc += ` ${typeString}`; + } } li.textContent = telDesc; phonesList.appendChild(li); @@ -321,8 +664,8 @@ function populateModal(contact) { contact.email.forEach(email => { const li = document.createElement('li'); let emailDesc = email.value; - if (email.params && email.params.TYPE) { - emailDesc += ` (${email.params.TYPE.split(',').join('/')})`; + if (email.params && email.params.TYPE && Array.isArray(email.params.TYPE)) { // Ensure it's an array + emailDesc += ` (${email.params.TYPE.join('/')})`; } li.textContent = emailDesc; emailsList.appendChild(li); diff --git a/style.css b/style.css index ec67b59..3eb60c1 100644 --- a/style.css +++ b/style.css @@ -1,14 +1,43 @@ body { - font-family: sans-serif; - margin: 20px; - background-color: #f4f4f4; - color: #333; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + margin: 0; /* Remove default margin */ + padding: 0; /* Ensure no default padding */ + background-color: #f8f9fa; /* Lighter grey background */ + color: #212529; /* Darker text for better contrast */ + line-height: 1.6; + font-size: 16px; /* Base font size */ +} + +h1, h2, h3 { /* Consistent heading styling */ + color: #343a40; /* Dark grey for headings */ + margin-top: 1.5em; + margin-bottom: 0.5em; } h1 { - color: #333; + font-size: 2.25rem; /* Larger H1 */ } +h2 { + font-size: 1.75rem; +} + +h3 { + font-size: 1.25rem; +} + +.main-container { + max-width: 1140px; /* Common max-width for containers */ + margin: 0 auto; /* Center the container */ + padding: 20px; + background-color: #ffffff; /* White background for content area */ + box-shadow: 0 0 10px rgba(0,0,0,0.05); /* Subtle shadow for depth */ + border-radius: 8px; /* Slightly rounded corners for the container */ + margin-top: 20px; /* Space from top of viewport */ + margin-bottom: 20px; /* Space from bottom of viewport */ +} + + input[type="file"] { margin-bottom: 20px; } @@ -25,36 +54,43 @@ input[type="file"] { #contactsTable { width: 100%; - border-collapse: collapse; - margin-top: 20px; - table-layout: fixed; /* Helps with column width control */ + border-collapse: collapse; /* Keep collapsed borders */ + margin-top: 25px; /* Consistent margin */ + table-layout: fixed; + font-size: 0.9rem; /* Slightly smaller font for table data */ + background-color: #fff; /* Ensure table background is white if container has different color */ + border: 1px solid #dee2e6; /* Outer border for the table */ + border-radius: 0.25rem; /* Rounded corners for the table itself */ + overflow: hidden; /* To make border-radius clip tbody/thead */ } #contactsTable th, #contactsTable td { - border: 1px solid #ddd; - padding: 8px; + border: 1px solid #e9ecef; /* Lighter internal borders */ + padding: 12px 15px; /* Increased padding */ text-align: left; - word-wrap: break-word; /* Break long words to prevent overflow */ + word-wrap: break-word; } -/* Style for the "Other Properties" column to ensure pre-wrap is effective */ -#contactsTable td:last-child { +/* Style for the "Other Properties" column to ensure pre-wrap is effective - No longer exists in main table */ +/* #contactsTable td:last-child { white-space: pre-wrap; -} +} */ #contactsTable th { - background-color: #e9e9e9; - color: #333; + background-color: #f8f9fa; /* Very light grey for headers */ + color: #495057; /* Darker text for header contrast */ + font-weight: 600; /* Bolder headers */ + border-bottom: 2px solid #dee2e6; /* Stronger bottom border for headers */ } -#contactsTable tr:nth-child(even) { - background-color: #f9f9f9; +#contactsTable tr:nth-child(even) td { /* Target td for striping background */ + background-color: #f8f9fa; /* Light stripe for even rows */ } -#contactsTable tr:hover { - background-color: #f1f1f1; /* Highlight row on hover */ - cursor: pointer; /* Indicate clickable */ +#contactsTable tr:hover td { /* Target td for hover background */ + background-color: #e9ecef; /* Slightly darker hover for better feedback */ + cursor: pointer; } @@ -96,50 +132,316 @@ input[type="file"] { color: black; text-decoration: none; cursor: pointer; + opacity: 1; /* From previous .close-button:hover, ensure it's here too */ } -.modal h2, .modal h3 { - margin-top: 0; - color: #333; +/* Refined Modal Content Styles */ +.modal-content h2 { /* Main modal title */ + font-size: 1.75rem; /* Was 1.75rem */ + color: #007bff; /* Accent color for modal title */ + margin-bottom: 20px; /* Was 0.5em, now more explicit */ + padding-bottom: 10px; + border-bottom: 1px solid #eee; /* Keep this border */ + margin-top: 0; /* Ensure no top margin for main title */ } -.modal h3 { - margin-top: 15px; - border-bottom: 1px solid #eee; - padding-bottom: 5px; +.modal-content h3 { /* Section titles within modal */ + font-size: 1.15rem; /* Was 1.25rem, slightly smaller for sub-sections */ + color: #343a40; /* Consistent with other h3s */ + margin-top: 25px; /* Increased space above section titles */ + margin-bottom: 10px; + border-bottom: 1px dashed #ced4da; /* Dashed line for section separation */ + padding-bottom: 8px; } -.modal ul { +.modal-content p { /* Paragraphs in modal */ + margin-bottom: 8px; /* Slightly more space */ + line-height: 1.5; /* Improved readability */ +} +.modal-content p strong { /* Bold text within paragraphs, e.g., "Family Name:" */ + color: #495057; /* Softer, consistent color */ + margin-right: 5px; /* Space after the label */ + display: inline-block; /* Allows min-width if needed later */ + /* min-width: 120px; */ /* Optional: if alignment is desired */ +} + +.modal-content ul { list-style-type: none; padding-left: 0; + margin-bottom: 15px; /* Space after lists */ } -.modal ul li { - background-color: #f9f9f9; - border: 1px solid #eee; - padding: 8px; - margin-bottom: 5px; - border-radius: 4px; +.modal-content ul li { + background-color: #fff; /* Cleaner background for list items */ + border: 1px solid #e9ecef; /* Lighter border, consistent with table */ + padding: 10px 12px; /* Consistent padding */ + margin-bottom: 8px; + border-radius: 0.25rem; /* Standard radius */ + line-height: 1.5; } -.modal p { - margin-bottom: 5px; +.modal-content ul li div { /* For nested divs within li, like formatted ADR */ + padding: 3px 0; /* Small padding for structure */ } - -.modal ul li div { /* For nested divs within li, like formatted ADR */ - padding: 2px 0; -} -.modal ul li div strong { /* For labels within formatted ADR */ +.modal-content ul li div strong { /* For labels within formatted ADR, e.g., "Street:" */ display: inline-block; - min-width: 120px; /* Adjust as needed for alignment */ - margin-right: 5px; + min-width: 100px; /* Adjust as needed */ + color: #495057; + margin-right: 8px; + font-weight: 500; /* Less strong than section headers */ } -#modalNote { /* Ensure note paragraph respects newlines from VCard */ +#modalNote { white-space: pre-wrap; - background-color: #f9f9f9; - border: 1px solid #eee; - padding: 8px; - border-radius: 4px; - min-height: 50px; /* Give it some space */ + background-color: #f8f9fa; /* Consistent light background */ + border: 1px solid #dee2e6; /* Consistent border */ + padding: 12px; + border-radius: 0.25rem; + min-height: 60px; + line-height: 1.5; + color: #212529; /* Ensure text color is set */ + font-size: 0.95rem; /* Slightly smaller for notes */ +} + +/* Tab Navigation Styles */ +.tab-navigation { + border-bottom: 2px solid #dee2e6; /* Slightly thicker border */ + margin-bottom: 25px; /* Increased margin */ + display: flex; +} + +.tab-button { + background-color: transparent; /* Make inactive tabs blend more */ + border: none; /* Remove default border */ + border-bottom: 2px solid transparent; /* Placeholder for active state */ + padding: 12px 18px; /* Adjusted padding */ + cursor: pointer; + font-size: 1rem; /* Use rem for font size */ + margin-right: 8px; + border-radius: 0; /* Sharp corners for a more modern tab look */ + outline: none; + transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; + color: #495057; /* Softer text color for inactive tabs */ +} + +.tab-button:hover { + color: #007bff; /* Accent color on hover */ + border-bottom-color: #cfe2ff; /* Light blue bottom border on hover */ +} + +.tab-button.active-tab-button { + color: #007bff; /* Active tab text color */ + border-bottom-color: #007bff; /* Active tab underline */ + font-weight: 600; /* Slightly bolder for active tab */ +} + +/* Tab Pane Styles */ +.tab-pane { + display: none; /* Hidden by default */ + padding: 10px; + /* border: 1px solid #ccc; */ /* Optional: border around content */ + /* border-top: none; */ /* Optional: if tab-navigation has bottom border */ +} + +.tab-pane.active-pane { + display: block; /* Shown when active */ +} + +.tab-description { + background-color: #e9ecef; /* Light grey background, distinct from main content area */ + padding: 15px; + margin-top: 0; /* Align with top if h1 has margin-top */ + margin-bottom: 25px; /* Space before the main content of the tab */ + border-radius: 0.25rem; /* Consistent border-radius */ + font-size: 0.95rem; /* Slightly smaller font for descriptive text */ + line-height: 1.6; + color: #495057; /* Softer text color */ +} + +.tab-description p { + margin-top: 0; + margin-bottom: 10px; /* Space between paragraphs within the description */ +} + +.tab-description p:last-child { + margin-bottom: 0; /* No bottom margin for the last paragraph */ +} + + +/* VCard Generator Form Styles */ +#vcardGeneratorForm fieldset { + margin-bottom: 20px; + border: 1px solid #ddd; + padding: 15px; + border-radius: 8px; /* Consistent with main-container */ + background-color: #fdfdfd; /* Slightly off-white for fieldset */ +} + +#vcardGeneratorForm legend { + font-weight: 600; /* Bolder legend */ + color: #007bff; /* Accent color for legend */ + padding: 0 10px; /* More padding around legend text */ + font-size: 1.1rem; +} + +#vcardGeneratorForm div { /* Container for label + input */ + margin-bottom: 15px; /* Increased spacing */ +} + +#vcardGeneratorForm label { + display: block; + margin-bottom: 5px; /* Increased space below label */ + font-weight: 500; + color: #495057; /* Slightly softer label color */ + font-size: 0.95rem; +} + +#vcardGeneratorForm input[type="text"], +#vcardGeneratorForm input[type="tel"], +#vcardGeneratorForm input[type="email"], +#vcardGeneratorForm input[type="url"], +#vcardGeneratorForm select, +#vcardGeneratorForm textarea { + width: 100%; /* Let box-sizing handle padding/border */ + padding: 10px 12px; /* Increased padding */ + border: 1px solid #ced4da; /* Standard Bootstrap-like border color */ + border-radius: 0.25rem; /* Standard border-radius */ + box-sizing: border-box; + font-size: 1rem; /* Consistent font size */ + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +#vcardGeneratorForm input[type="text"]:focus, +#vcardGeneratorForm input[type="tel"]:focus, +#vcardGeneratorForm input[type="email"]:focus, +#vcardGeneratorForm input[type="url"]:focus, +#vcardGeneratorForm select:focus, +#vcardGeneratorForm textarea:focus { + border-color: #80bdff; /* Bootstrap focus color */ + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap focus shadow */ +} + + +#vcardGeneratorForm textarea { + resize: vertical; + min-height: 80px; /* Minimum height for textareas */ +} + + +#vcardGeneratorForm button[type="button"] { + background-color: #007bff; + color: white; + padding: 10px 15px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s; +} + +#vcardGeneratorForm button[type="button"]:hover { + transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; + /* General button styling - primary actions */ +} + +#vcardGeneratorForm button[type="button"]:hover { + background-color: #0056b3; + border-color: #0056b3; +} + +/* Download button specific styling (can override general if needed, or be a class) */ +#downloadVcfButton { + background-color: #28a745; + border-color: #28a745; +} +#downloadVcfButton:hover { + background-color: #1e7e34; + border-color: #1e7e34; +} + +/* File Input Styling - common trick using a label */ +input[type="file"] { + display: none; /* Hide the actual file input */ +} +.file-upload-label { + display: inline-block; + background-color: #6c757d; /* Secondary button color */ + color: white; + padding: 10px 15px; + border: none; + border-radius: 0.25rem; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.2s ease-in-out; + margin-bottom: 20px; /* Keep existing margin */ +} +.file-upload-label:hover { + background-color: #5a6268; +} + + +/* Modal Close Button - already has some styling, let's refine slightly */ +.close-button { + color: #6c757d; /* Softer color */ + float: right; + font-size: 1.75rem; /* Slightly larger */ + font-weight: bold; + line-height: 1; /* Ensure it aligns well */ + opacity: 0.75; + transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out; +} + +.close-button:hover, +.close-button:focus { + color: #343a40; /* Darker on hover/focus */ + text-decoration: none; + cursor: pointer; + opacity: 1; +} + + +/* Specific layout for grouped inline elements if any (e.g. phone + type) */ +/* For now, using display:block on labels makes them stack nicely */ + +/* Style for the generated VCard display area */ +#generatedVCardArea h3 { + margin-top: 10px; /* Add some space above this heading */ +} + +/* Privacy Policy Tab Specific Styles */ +#privacyView .privacy-content { + padding: 10px 0; /* Padding for top/bottom, horizontal handled by .main-container or .tab-pane */ + line-height: 1.7; + font-size: 0.95rem; + color: #343a40; /* Slightly darker than tab-description for more formal text */ +} + +#privacyView .privacy-content h1 { /* Already styled globally, but ensure it's distinct if needed */ + margin-bottom: 25px; /* More space after main Privacy Policy title */ +} + + +#privacyView .privacy-content h2 { + font-size: 1.3rem; + color: #007bff; + margin-top: 30px; /* More space before each section */ + margin-bottom: 15px; + padding-bottom: 8px; + border-bottom: 1px solid #e0e0e0; +} + +#privacyView .privacy-content p { + margin-bottom: 15px; /* Space between paragraphs */ +} + + +#privacyView .privacy-content ul { + list-style-type: disc; + padding-left: 25px; /* Indent list items further */ + margin-bottom: 20px; /* Space after lists */ +} + +#privacyView .privacy-content li { + margin-bottom: 10px; /* Space between list items */ }