chore: add project scaffolding and resources
This initial commit scaffolds the project with essential docs, assets, and build configs. It adds Android icons, design assets, and release metadata to support mobile targets. A fastlane config and F-Droid manifest are included to streamline builds. - Adds F-Droid configuration for automated builds - Includes license and privacy policy documents - Provides app icons and assets for Android and design system
This commit is contained in:
+26
-3
@@ -2,7 +2,7 @@
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; min-width: 320px; min-height: 100vh; }
|
||||
button { font: inherit; }
|
||||
.app-shell { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; background: #f8faf7; position: relative; padding-bottom: 94px; box-shadow: 0 0 50px rgba(32, 50, 37, .12); }
|
||||
.app-shell { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; background: #f8faf7; position: relative; padding-bottom: 94px; box-shadow: 0 0 50px rgba(32, 50, 37, .12); overflow-anchor: none; }
|
||||
header { padding: max(24px, env(safe-area-inset-top)) 24px 18px; display: flex; align-items: center; justify-content: space-between; }
|
||||
h1 { font-size: 34px; letter-spacing: -1.7px; line-height: 1.05; margin: 0 0 6px; font-weight: 800; }
|
||||
header p { margin: 0; font-size: 13px; color: #657068; font-weight: 500; }
|
||||
@@ -41,6 +41,7 @@ header p { margin: 0; font-size: 13px; color: #657068; font-weight: 500; }
|
||||
.setting-icon { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--green); }
|
||||
.setting-icon svg { width: 19px; }
|
||||
.setting-row > span { flex: 1; line-height: 1.3; }
|
||||
.interval-row select { min-width: 118px; max-width: 145px; height: 38px; padding: 0 30px 0 11px; border: 1px solid #cbd7cc; border-radius: 11px; color: var(--green); background: white; font-size: 12px; font-weight: 750; }
|
||||
.switch { width: 48px; height: 28px; padding: 3px; border-radius: 30px; border: 0; background: #c7cec8; transition: .2s ease; }
|
||||
.switch span { display: block; width: 22px; height: 22px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .2s ease; }
|
||||
.switch.on { background: var(--green); }
|
||||
@@ -68,6 +69,7 @@ h2 { margin: 0; font-size: 21px; letter-spacing: -.6px; }
|
||||
.language-setting > div:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
|
||||
.language-setting strong { font-size: 15px; }
|
||||
.language-setting span { color: #768078; font-size: 11px; }
|
||||
.locale-select { min-width: 128px; max-width: 155px; height: 38px; padding: 0 28px 0 10px; border: 1px solid #cbd7cc; border-radius: 11px; color: var(--green); background: white; font-size: 12px; font-weight: 750; }
|
||||
.language-toggle { padding: 3px; display: flex; border-radius: 12px; background: #e8eee7; }
|
||||
.language-toggle button { width: 39px; height: 31px; padding: 0; border: 0; border-radius: 9px; color: #657068; background: transparent; font-size: 12px; font-weight: 800; }
|
||||
.language-toggle button.active { color: white; background: var(--green); box-shadow: 0 2px 7px rgba(20,93,50,.2); }
|
||||
@@ -81,14 +83,24 @@ nav button.active { color: var(--green); background: var(--sage); }
|
||||
nav svg { width: 21px; }
|
||||
.snackbar { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: 92px; max-width: calc(100% - 40px); background: #26312a; color: white; border: 0; border-radius: 12px; padding: 13px 18px; font-size: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.22); }
|
||||
.gallery-page { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
|
||||
.selection-toolbar { min-height: 44px; margin: 0 0 11px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6c766e; font-size: 12px; }
|
||||
.selection-toolbar button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 11px; color: var(--green); background: var(--sage); font-size: 12px; font-weight: 800; }
|
||||
.selection-toolbar button:disabled { opacity: .55; }
|
||||
.delete-selection { color: #fff; background: #8e2929; }
|
||||
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
|
||||
.gallery-grid article { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: #e3e9e2; border: 2px solid transparent; }
|
||||
.gallery-grid article.current { border-color: #73a17c; }
|
||||
.gallery-grid article > img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.gallery-grid article.chosen { border-color: var(--green); box-shadow: 0 0 0 2px rgba(20,93,50,.14); }
|
||||
.gallery-image-button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; display: block; }
|
||||
.gallery-image-button img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.gallery-grid article.chosen .gallery-image-button img { filter: brightness(.78); }
|
||||
.selection-check { position: absolute; z-index: 2; top: 7px; right: 7px; width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.94); border-radius: 50%; color: transparent; background: rgba(28,38,31,.28); pointer-events: none; }
|
||||
.selection-check svg { width: 15px; }
|
||||
.gallery-grid article.chosen .selection-check { color: white; border-color: var(--green); background: var(--green); }
|
||||
.delete-button { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: white; background: rgba(94, 20, 20, .86); box-shadow: 0 3px 12px rgba(0,0,0,.24); }
|
||||
.delete-button svg { width: 16px; }
|
||||
.delete-button:disabled { opacity: .5; }
|
||||
.edit-button { position: absolute; right: 7px; bottom: 7px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: rgba(255,255,255,.92); box-shadow: 0 3px 12px rgba(0,0,0,.2); }
|
||||
.edit-button { position: absolute; z-index: 2; right: 7px; bottom: 7px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--green); background: rgba(255,255,255,.92); box-shadow: 0 3px 12px rgba(0,0,0,.2); }
|
||||
.edit-button svg { width: 16px; }
|
||||
.current-badge { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: 99px; background: rgba(20, 93, 50, .9); color: white; font-size: 9px; font-weight: 750; }
|
||||
.current-badge svg { width: 11px; height: 11px; }
|
||||
@@ -106,6 +118,14 @@ nav svg { width: 21px; }
|
||||
.phone-preview.interactive { touch-action: none; user-select: none; cursor: grab; }
|
||||
.phone-preview.interactive:active { cursor: grabbing; }
|
||||
.phone-preview.interactive > img { pointer-events: none; user-select: none; transition: none; }
|
||||
.crop-grid { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .48; }
|
||||
.crop-grid i { position: absolute; display: block; background: rgba(255,255,255,.72); box-shadow: 0 0 2px rgba(0,0,0,.38); }
|
||||
.crop-grid i:nth-child(1), .crop-grid i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
|
||||
.crop-grid i:nth-child(1) { left: 33.333%; }
|
||||
.crop-grid i:nth-child(2) { left: 66.666%; }
|
||||
.crop-grid i:nth-child(3), .crop-grid i:nth-child(4) { left: 0; right: 0; height: 1px; }
|
||||
.crop-grid i:nth-child(3) { top: 33.333%; }
|
||||
.crop-grid i:nth-child(4) { top: 66.666%; }
|
||||
.preview-clock { position: absolute; z-index: 2; top: 55px; left: 0; right: 0; color: white; text-align: center; font-size: 42px; line-height: 1; font-weight: 300; text-shadow: 0 2px 10px rgba(0,0,0,.45); pointer-events: none; }
|
||||
.preview-clock span { display: block; margin-top: 7px; font-size: 10px; font-weight: 600; }
|
||||
.crop-controls { padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: white; }
|
||||
@@ -121,6 +141,9 @@ nav svg { width: 21px; }
|
||||
.direct-crop-heading svg { width: 17px; }
|
||||
.direct-crop-heading strong { color: var(--green); }
|
||||
.direct-crop-help { margin: 5px 0 11px; color: #7a837d; font-size: 10px; line-height: 1.4; }
|
||||
.zoom-control { display: grid !important; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; margin: 13px 0 0 !important; }
|
||||
.zoom-control > span { color: #526158; font-size: 12px; font-weight: 750; }
|
||||
.zoom-control input { margin: 0 !important; }
|
||||
.reset-crop { width: 100%; height: 42px; margin-top: 16px; border: 0; border-radius: 12px; color: #526158; background: #edf2eb; display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 12px; font-weight: 750; }
|
||||
.reset-crop svg { width: 16px; }
|
||||
@media (min-width: 700px) { .app-shell { margin-top: 20px; min-height: calc(100vh - 40px); border-radius: 32px; overflow: hidden; } nav { bottom: 20px; border-radius: 0 0 32px 32px; } }
|
||||
|
||||
Reference in New Issue
Block a user