añadimos referencias de diseño y unos skills
This commit is contained in:
luriasb
@@ -0,0 +1,235 @@
|
||||
---
|
||||
name: spec-impl
|
||||
description: Implements an approved spec. Validates that the state means "Approved" (in any language), creates a git branch named after the spec, switches to it, and starts the implementation step by step with pauses to review diffs.
|
||||
disable-model-invocation: true
|
||||
argument-hint: <NN-spec-name>
|
||||
allowed-tools: Read, Glob, Grep, Edit, Write, AskUserQuestion, Bash(git status:*), Bash(git branch:*), Bash(git checkout:*), Bash(git log:*), Bash(git diff:*), Bash(git stash:*), Bash(cat:*), Bash(ls:*)
|
||||
---
|
||||
|
||||
# /spec-impl — Implementer of approved specs
|
||||
|
||||
## Session context
|
||||
|
||||
Current repository state:
|
||||
!`git status --short`
|
||||
|
||||
Current branch:
|
||||
!`git branch --show-current`
|
||||
|
||||
Specs available in this folder:
|
||||
!`ls specs/ 2>/dev/null || echo "The specs/ folder does not exist"`
|
||||
|
||||
Branch-creation config:
|
||||
!`cat specs/.spec-config.yml 2>/dev/null || echo "AutoCreateBranch: true (default, no config file)"`
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
Follow these four phases in strict order. **Do not advance to the next phase if the previous one did not complete correctly.**
|
||||
|
||||
---
|
||||
|
||||
### Phase 1 — Identify the spec
|
||||
|
||||
The received argument is: `$ARGUMENTS`
|
||||
|
||||
If `$ARGUMENTS` is empty:
|
||||
|
||||
- List the files available in `specs/` (you already have them above).
|
||||
- Ask the user to specify the exact name of the spec.
|
||||
- Stop and wait for an answer. Do not continue.
|
||||
|
||||
If `$ARGUMENTS` has a value:
|
||||
|
||||
- Look for the file in `specs/`. The user may have written the full name (`01-mvp-arkanoid`), only the number (`01`), or only the slug (`mvp-arkanoid`). Try to find the correct file in any of those cases.
|
||||
- If you do not find the file, show the available specs and ask the user to correct the name.
|
||||
- If you do find it, continue to Phase 2.
|
||||
|
||||
---
|
||||
|
||||
### Phase 2 — Validate the spec's state
|
||||
|
||||
Read the spec file you located in Phase 1 using the Read tool or `cat`.
|
||||
|
||||
In the file's contents, look for the line that contains the spec's state. The header label is typically `**Status:**` (English) or `**Estado:**` (Spanish), but it may use any language. Match by position (status line near the top of the spec) and by the surrounding state machine, not by the exact label.
|
||||
|
||||
**Absolute rule:** You can only continue if the state **means "Approved"** — regardless of the language used.
|
||||
|
||||
Treat any of the following (and their equivalents in other languages) as the **Approved** state and continue:
|
||||
|
||||
- English: `Approved`
|
||||
- Spanish: `Aprobado`
|
||||
- Portuguese: `Aprovado`
|
||||
- French: `Approuvé`
|
||||
- German: `Genehmigt`
|
||||
- Italian: `Approvato`
|
||||
- …or any other language's word that clearly means "approved"
|
||||
|
||||
Anything else (Draft / Borrador, In review / En revisión, Implemented / Implementado, Obsolete / Obsoleto, or any unrecognized value) means **stop** and show the error message below.
|
||||
|
||||
| State category | Examples (any language) | Action |
|
||||
| ----------------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| Approved | `Approved`, `Aprobado`, `Aprovado`, `Approuvé`, … | Continue to Phase 3. |
|
||||
| Draft | `Draft`, `Borrador`, … | Stop. Show the error message below. |
|
||||
| In review | `In review`, `En revisión`, … | Stop. Show the error message below. |
|
||||
| Implemented | `Implemented`, `Implementado`, … | Stop. Show the error message below. |
|
||||
| Obsolete | `Obsolete`, `Obsoleto`, … | Stop. Show the error message below. |
|
||||
| State line not found / unrecognized value | — | Stop. The file does not follow the expected format. Tell this to the user. |
|
||||
|
||||
If you are unsure whether a value means "approved", **do not assume**. Stop and ask the user to clarify or to update the spec to the canonical wording.
|
||||
|
||||
**Standard error message when the state does not mean Approved:**
|
||||
|
||||
```
|
||||
❌ I cannot implement this spec.
|
||||
|
||||
Current state: [STATE FOUND]
|
||||
I only work with specs whose state means "Approved" (e.g. `Approved`, `Aprobado`,
|
||||
or the equivalent in another language).
|
||||
|
||||
To continue you have two options:
|
||||
1. If the spec is ready to be implemented, open it and change the state
|
||||
to "Approved" (or the equivalent term your team uses) manually.
|
||||
That change is made by the human, not the agent.
|
||||
2. If the spec still needs work, use /spec [name] to resume it.
|
||||
```
|
||||
|
||||
Do not offer alternatives, do not suggest "I can still start if you want". The block is intentional.
|
||||
|
||||
---
|
||||
|
||||
### Phase 3 — Create the git branch and switch to it
|
||||
|
||||
Once you have confirmed the state means `Approved`:
|
||||
|
||||
0. **Check the working tree first.** Look at the `git status --short` output in the session context above. If it is **not empty**, stop and show the pending changes, then ask:
|
||||
|
||||
```
|
||||
⚠️ There are uncommitted changes in the working tree.
|
||||
Switching branches would carry them over. What do you want to do?
|
||||
1. Commit or stash them yourself, then re-run this command (recommended)
|
||||
2. Continue anyway — the changes travel to the new branch
|
||||
```
|
||||
|
||||
Wait for the answer. **Do not stash or commit on the user's behalf** unless they explicitly ask for it. If the working tree is clean, skip straight to step 1 without mentioning it.
|
||||
|
||||
1. Derive the branch name from the spec file's full name, without the extension. Format: `spec-NN-slug`. Examples:
|
||||
|
||||
- `01-mvp-arkanoid.md` → branch `spec-01-mvp-arkanoid`
|
||||
- `02-powerups.md` → branch `spec-02-powerups`
|
||||
|
||||
2. Read the `AutoCreateBranch` flag from the **Branch-creation config** shown in the session context above.
|
||||
|
||||
- If the config file does not exist, the value is missing, or the value is unrecognized → treat it as `true` (the default).
|
||||
- Only an explicit `false` (in any capitalization) disables automatic branch creation.
|
||||
|
||||
**If `AutoCreateBranch` is `true` (default):** proceed without asking.
|
||||
|
||||
- If the branch **does not exist**: create it with `git checkout -b spec-NN-slug`.
|
||||
- If it **already exists**: this means previous work is being resumed. Switch to it, read `git log --oneline` on the branch, and tell the user which steps of the plan already look done and which step you propose to resume from. Wait for confirmation on the resume point before implementing anything.
|
||||
- In both cases: switch to the branch with `git checkout spec-NN-slug` and confirm the change was successful before continuing.
|
||||
|
||||
**If `AutoCreateBranch` is `false`:** ask before touching git. Show:
|
||||
|
||||
```
|
||||
AutoCreateBranch is set to false.
|
||||
Create and switch to the branch spec-NN-slug? [y/N]
|
||||
```
|
||||
|
||||
- If the user answers **yes**: create/switch to the branch exactly as in the `true` case above.
|
||||
- If the user answers **no** or leaves it empty: **do not create any branch.** Tell the user you will implement on the current branch (the one shown in the session context above) and ask for explicit confirmation to continue there. Do not improvise — wait for the answer.
|
||||
|
||||
3. Visually confirm to the user the spec is ready and which branch is active:
|
||||
|
||||
```
|
||||
✅ Ready to implement.
|
||||
|
||||
Spec: specs/NN-slug.md
|
||||
Branch: spec-NN-slug (active) (← or the current branch, if no new branch was created)
|
||||
State: Approved (← echo back the actual value found in the spec)
|
||||
```
|
||||
|
||||
4. **Do not start implementing yet.** First show the spec summary to the user so they have it fresh. Extract and show:
|
||||
- The **objective** (the line after `**Objective:**` / `**Objetivo:**` / equivalent label).
|
||||
- The **scope** (the `## Scope` / `## Alcance` / equivalent section).
|
||||
- The **implementation plan** (the section with the numbered steps — `## Implementation plan` / `## Plan de implementación` / equivalent).
|
||||
- The **acceptance criteria** (the checklist — `## Acceptance criteria` / `## Criterios de aceptación` / equivalent).
|
||||
|
||||
Match section headings by meaning, not by exact wording — the spec may be authored in any language.
|
||||
|
||||
---
|
||||
|
||||
### Phase 4 — Implement step by step
|
||||
|
||||
After showing the spec summary, tell the user:
|
||||
|
||||
```
|
||||
I am going to implement the spec following the implementation plan exactly.
|
||||
I will pause after each step so you can review the diff.
|
||||
|
||||
Shall we start with Step 1?
|
||||
```
|
||||
|
||||
Wait for explicit confirmation ("yes", "go ahead", "go", or equivalent). Do not start without it.
|
||||
|
||||
Once confirmed, follow these rules during the entire implementation:
|
||||
|
||||
**Never commit automatically.** Not per step, not at the end. You write the code and show the diff; committing is the user's decision and the user's command. Only commit if they explicitly ask you to.
|
||||
|
||||
**One rule above all:** implement what the spec says. If something in the spec looks suboptimal to you, mention it as an observation but implement what was agreed. Changes to the spec go into the spec, not into the code by surprise.
|
||||
|
||||
**Work rhythm:**
|
||||
|
||||
- Implement one step of the plan.
|
||||
- Show a summary of which files you touched and what you did.
|
||||
- Say: `Step N completed. Could you review the diff and let me know if I continue with Step N+1?`
|
||||
- Wait for confirmation before continuing.
|
||||
|
||||
**If during the implementation you find an ambiguity** the spec does not resolve:
|
||||
|
||||
- Stop.
|
||||
- Describe the ambiguity exactly.
|
||||
- Present two or three concrete options.
|
||||
- Wait for the user's decision.
|
||||
- Do not improvise.
|
||||
|
||||
**If the user asks for something that is out of the spec's scope:**
|
||||
|
||||
- Remind them that it is out of this spec's scope.
|
||||
- Suggest noting it down for the next spec.
|
||||
- Do not implement it on this branch.
|
||||
|
||||
**When finishing the last step:**
|
||||
|
||||
```
|
||||
✅ All steps of the plan are implemented.
|
||||
|
||||
Next step: verify the spec's acceptance criteria one by one.
|
||||
If they all pass, update the spec's state to "Implemented" (or the equivalent
|
||||
in your repo's language) and make the final commit before merging this branch.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Summary of expected behavior
|
||||
|
||||
```
|
||||
/spec-impl 01-mvp-arkanoid
|
||||
|
||||
Phase 1 → Finds specs/01-mvp-arkanoid.md
|
||||
Phase 2 → Reads the state → "Approved" (or "Aprobado", etc.) → ✅ continues
|
||||
Phase 3 → git checkout -b spec-01-mvp-arkanoid → git checkout spec-01-mvp-arkanoid
|
||||
Shows objective, scope, plan and criteria
|
||||
Phase 4 → Implements step by step with pauses
|
||||
Ends by reminding to verify the acceptance criteria
|
||||
|
||||
/spec-impl 02-powerups (state: Draft / Borrador)
|
||||
|
||||
Phase 1 → Finds specs/02-powerups.md
|
||||
Phase 2 → Reads the state → "Draft" → ❌ stops
|
||||
Shows the standard error message
|
||||
Does not create branch, does not touch code
|
||||
```
|
||||
|
||||
**Branch creation is controlled by the `AutoCreateBranch` flag** in `specs/.spec-config.yml`. It defaults to `true` (create the branch automatically, as shown above). Set it to `false` to make Phase 3 ask `[y/N]` before creating the branch.
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
name: spec
|
||||
description: Designs and develops specs following the spec-driven method. Asks clarifying questions before proposing structure, and builds the spec section by section. Use it when starting a large feature, before writing code.
|
||||
disable-model-invocation: true
|
||||
argument-hint: 'short feature description or requirement'
|
||||
allowed-tools: Read, Glob, Grep, Write, AskUserQuestion, Bash(ls:*), Bash(cat:*), Bash(date:*)
|
||||
---
|
||||
|
||||
# /spec — Guided spec designer
|
||||
|
||||
## Session context
|
||||
|
||||
Today's date (use this for the spec header, never guess it):
|
||||
!`date +%F`
|
||||
|
||||
Specs that already exist:
|
||||
!`ls specs/ 2>/dev/null || echo "The specs/ folder does not exist yet"`
|
||||
|
||||
---
|
||||
|
||||
This skill helps you produce a useful spec following the spec-driven method. **You don't write code here.** Your job is to help the user clarify what they want to build, ask questions when something is not well-defined enough, and develop the spec section by section until it is ready to be saved into `specs/`.
|
||||
|
||||
## Philosophy
|
||||
|
||||
A spec is not decorative documentation. It is the contract that drives later execution. If the spec is vague, the code will improvise. That is why this flow is **deliberately slow during the definition phase** and **fast during the writing phase**.
|
||||
|
||||
Read `template.md` (in the same directory as this skill) to see the full structure the spec will follow. Lean on it at every step.
|
||||
|
||||
## Command flow
|
||||
|
||||
- Follow the four phases in order. **Never skip Phase 2** — the questions are the whole point. If the user wants to go faster, remind them that the cost of a bad spec gets paid later in code. (Phase 3 does have a fast path once Phase 2 is genuinely complete; see below.)
|
||||
- Your replies must be in the same language as the initial prompt. E.g.: if the initial prompt is in Spanish, your replies must be in Spanish; if it is in English, your replies must be in English.
|
||||
|
||||
### Phase 1 — Understand the context
|
||||
|
||||
Before asking questions about the feature, make sure you have project context:
|
||||
|
||||
1. Read the project-memory file, if one exists. Try in order and stop at the first hit: `CLAUDE.md`, `AGENTS.md`, `GEMINI.md`, `README.md`. This adapts the skill to whichever agent is running it (Claude Code, Codex, Gemini CLI, etc.).
|
||||
2. Look at the `specs/` listing in the session context above to see which specs already exist and how they are numbered.
|
||||
3. If previous specs exist, read at least the two most recent ones to pick up the project's conventions — including the **language** they are written in and the exact wording they use for states and section headings. A new spec must match the existing ones.
|
||||
|
||||
If the `$ARGUMENTS` argument comes in empty, ask the user for an initial **single-sentence** description of what they want to build. If the description does not fit in one sentence, that is the first signal that the feature is too big — suggest splitting it before continuing.
|
||||
|
||||
### Phase 2 — Clarify through questions
|
||||
|
||||
This is the most important phase of the command. Your job here is to **detect ambiguities and ask**, not to assume.
|
||||
|
||||
Ask questions in blocks of 3 to 5 at a time (not one single question followed by another single question — that is exhausting). After each block, wait for an answer before continuing.
|
||||
|
||||
**Question categories you should always consider:**
|
||||
|
||||
- **Scope:** What is in and what is NOT? Which parts of the feature are deferred to another spec?
|
||||
- **Data:** What new structures are introduced? How are they named? Where do they live?
|
||||
- **Integration:** Does this feature depend on previous specs? Does it modify something existing or only add?
|
||||
- **Persistence:** Is anything saved between sessions? Where? With what versioning?
|
||||
- **UX and states:** What does it look like when it works? What does it look like when it fails? Are there intermediate states?
|
||||
- **Risks:** What can break this? What happens in the degraded case?
|
||||
- **Closed decisions:** Is there any decision the user has already made and does not want to reopen?
|
||||
|
||||
**How to phrase the questions:**
|
||||
|
||||
- Use concrete questions, not open-ended ones. ❌ "How do you imagine persistence?" → ✅ "Is persistence localStorage, IndexedDB, or a JSON file on disk?"
|
||||
- When you offer options, give 2–4, mark which one is your recommendation and why.
|
||||
- If your agent exposes a native multiple-choice question tool (in Claude Code: `AskUserQuestion`), use it for these blocks instead of writing the options as prose — the user picks instead of typing. Put your recommendation first and label it. Fall back to a numbered markdown list when no such tool exists.
|
||||
- If you spot an answer that would open Pandora's box (e.g. "and we also want multiplayer"), point out that it deserves its own spec and ask whether we leave it out of this one's scope.
|
||||
|
||||
**When to stop asking:**
|
||||
|
||||
Stop when you can answer these three questions without assuming anything:
|
||||
|
||||
1. Which files will appear or change?
|
||||
2. What is the first executable step and what is the last one?
|
||||
3. How do I verify the feature is finished?
|
||||
|
||||
If you still cannot answer one of them, keep asking.
|
||||
|
||||
### Phase 3 — Write the spec
|
||||
|
||||
Once Phase 2 is closed, decide how to write it:
|
||||
|
||||
**If you already have all the information you need** — meaning you can answer the three Phase 2 questions (which files change, what the first and last executable steps are, how to verify it is finished) **without assuming anything** — then **do not go section by section**. Write the complete spec and jump straight to Phase 4 to save the file. Do not ask for section-by-section confirmation, and do not show a draft for approval first: the user already answered everything in Phase 2, and re-asking is friction. The user reviews the saved file and asks for changes if needed.
|
||||
|
||||
**Only if information is still missing** (the user cut Phase 2 short, an answer was vague, or some section cannot be written without inventing something), develop the sections **one by one**, showing each one and waiting for confirmation before moving to the next.
|
||||
|
||||
In both cases the content follows the same order:
|
||||
|
||||
1. **Header** (state, dependencies, date, one-sentence objective). The one-sentence objective is critical — if it does not fit in one sentence, go back to Phase 2.
|
||||
2. **Scope** (what is in and what is NOT). The "not in" must be explicit.
|
||||
3. **Data model** (concrete structures with real names). If the feature introduces no new data, skip this section and say so explicitly.
|
||||
4. **Implementation plan** (numbered steps, each leaving the system functional).
|
||||
5. **Acceptance criteria** (boolean checklist, not aspirational).
|
||||
6. **Decisions taken and discarded** (with brief justification).
|
||||
7. **Identified risks** (only if applicable — if no relevant risks exist, skip it).
|
||||
|
||||
**After each section (only in the section-by-section mode):**
|
||||
|
||||
- Show it formatted in markdown.
|
||||
- Ask: "Does this section stay like this or do you want to tweak it?"
|
||||
- If the user requests changes, apply them and show again.
|
||||
- Only move to the next section once the user confirms.
|
||||
|
||||
**Common mistakes to avoid:**
|
||||
|
||||
- Generating acceptance criteria that are not verifiable ("that it works well").
|
||||
- Putting things into the implementation plan that are not in the scope.
|
||||
- Assuming file names or structures the user did not confirm.
|
||||
- Skipping the decisions section — that section is the one with the most long-term value.
|
||||
|
||||
### Phase 4 — Save the spec
|
||||
|
||||
When the content is ready (either because you had everything, or because all sections were confirmed):
|
||||
|
||||
1. Determine the next sequential number from the `specs/` listing in the session context. Take the highest existing number and add one, zero-padded to two digits. If the last one is `02-powerups.md`, this one will be `03-`. If `specs/` is empty or missing, start at `01-`.
|
||||
2. Generate a short kebab-case slug from the objective (e.g. `levels-and-highscores`). See **Arguments** below for when `$ARGUMENTS` is the slug instead.
|
||||
3. Use the date from the session context above for the `**Date:**` field. **Never write a date you did not read from there.**
|
||||
4. Write the file directly at `specs/NN-slug.md` with all the sections. **Do not ask for permission to write it and do not ask whether the file name works** — announce the path in the final confirmation. Only ask if the target file already exists.
|
||||
5. Mark the state as `Draft` by default (or the equivalent word used by the existing specs in this repo). **Do not mark it as `Approved` automatically** — the user does that once they have re-read it.
|
||||
6. If the header lists dependencies (`**Depends on:** SPEC 01`), check that each referenced spec actually exists in `specs/`. If one does not, say so instead of writing a dangling reference.
|
||||
7. **Seed the config file if it does not exist.** Check for `specs/.spec-config.yml`. If it is **missing**, create it with the default content below. If it **already exists, leave it untouched** — never overwrite the user's settings.
|
||||
|
||||
```yaml
|
||||
# spec workflow configuration
|
||||
#
|
||||
# AutoCreateBranch — controls whether /spec-impl creates the git branch automatically.
|
||||
# true (default) → /spec-impl creates and switches to spec-NN-slug without asking
|
||||
# false → /spec-impl asks for [y/N] confirmation before creating the branch
|
||||
AutoCreateBranch: true
|
||||
```
|
||||
|
||||
8. Confirm to the user:
|
||||
- Path of the created file.
|
||||
- Reminder: the spec is in `Draft` state. Change it to `Approved` once you have re-read it.
|
||||
- If you just created `specs/.spec-config.yml`, mention it exists and that `AutoCreateBranch` defaults to `true` (set it to `false` to control branch creation yourself).
|
||||
- Next step: once reviewed and approved, run `/spec-impl NN-slug` to implement it.
|
||||
- **Stop here.** Do not propose implementing the spec, writing code, or taking any further action beyond this confirmation.
|
||||
|
||||
## Hard rules
|
||||
|
||||
- **Never write code during this command.** Only the spec's `.md` file at the end.
|
||||
- **Never propose implementing the spec after saving it.** Your job ends when the file is written. The user runs `/spec-impl` when they are ready.
|
||||
- **Never assume decisions the user did not confirm.** If you are missing information, ask — in Phase 2, which is where the questions belong.
|
||||
- **Do not re-ask in Phase 3 what was already answered in Phase 2.** If the information is complete, write the whole spec and save it. Section-by-section confirmation is the fallback for incomplete information, not the default.
|
||||
- **If the user wants to speed up and skip Phase 2**, remind them: "Questions now save hours later. Are you sure you want to skip them?". If they insist, respect their decision but record it in the spec's decisions section ("Quick definition without detailed clarification").
|
||||
- **If the feature is too big** (does not fit in one sentence, touches more than three areas of the system, requires decisions in four or more domains), propose splitting it into two or more specs before continuing.
|
||||
|
||||
## Tone when asking questions
|
||||
|
||||
Be direct and specific. Do not apologize for asking. Do not use phrases like "if you don't mind..." or "could you maybe...". The user invoked this skill precisely because they want you to ask questions. Use concrete questions, one per line when there are several, and number them so they are easy to answer.
|
||||
|
||||
Example of a well-formed block:
|
||||
|
||||
> Before writing the data model I need to clarify three things:
|
||||
>
|
||||
> 1. **Persistence.** localStorage, IndexedDB, or a JSON file on disk? Recommendation: localStorage if the data fits in <5MB and does not need queries.
|
||||
> 2. **Schema versioning.** What happens when the format changes? Options: (a) version prefix in the key, (b) ignore and rebuild, (c) migrate on load.
|
||||
> 3. **Privacy.** Is the data sensitive? If yes, is it encrypted? Is it deleted on logout?
|
||||
|
||||
## Arguments
|
||||
|
||||
`$ARGUMENTS` is **the feature description**, not the file name. Treat it as the starting point for Phase 1 and derive the slug from the objective in Phase 4.
|
||||
|
||||
The one exception: if `$ARGUMENTS` is already a single kebab-case token with no spaces (e.g. `/spec levels-and-highscores`), it is ambiguous between a description and a slug — use it as the slug **and** as the seed of the description, without asking for confirmation.
|
||||
|
||||
If they invoked `/spec` without arguments, start by asking for the one-sentence description.
|
||||
@@ -0,0 +1,182 @@
|
||||
# Template for a useful spec
|
||||
|
||||
This file is the reference the `/spec` skill consults when generating specs. Each section includes its purpose and a minimal example. **It is not text to be copied verbatim** — it is the shape the skill must respect.
|
||||
|
||||
---
|
||||
|
||||
## Header
|
||||
|
||||
Every spec starts with metadata in a blockquote (no tables, no blocks, simple as shown below) format:
|
||||
|
||||
```markdown
|
||||
# SPEC NN — Short, descriptive title
|
||||
|
||||
> **Status:** Draft
|
||||
> **Depends on:** SPEC 01, SPEC 02
|
||||
> **Date:** YYYY-MM-DD
|
||||
> **Objective:** A single sentence. If you need two sentences, the feature is too big.
|
||||
```
|
||||
|
||||
**Valid states:** `Draft`, `In review`, `Approved`, `Implemented`, `Obsolete`.
|
||||
|
||||
> The labels above are the English defaults. The skills also accept equivalents in any language (e.g. Spanish `Borrador` / `En revisión` / `Aprobado` / `Implementado` / `Obsoleto`). Pick one set per repo and stay consistent.
|
||||
|
||||
**Objective rule:** one sentence that a human reads in 5 seconds and understands what is going to be built. If it doesn't fit in one sentence, split the feature.
|
||||
|
||||
---
|
||||
|
||||
## Section 1 — Why this spec exists (optional)
|
||||
|
||||
For specs that take non-obvious decisions or break project patterns, a brief section explaining the **why** of the work. Not the what — the what comes later.
|
||||
|
||||
For simple specs, omit it.
|
||||
|
||||
---
|
||||
|
||||
## Section 2 — Scope
|
||||
|
||||
Two explicit sub-blocks. **Both are mandatory.**
|
||||
|
||||
```markdown
|
||||
## Scope
|
||||
|
||||
**In:**
|
||||
|
||||
- Concrete thing one.
|
||||
- Concrete thing two.
|
||||
|
||||
**Out of scope (for future specs):**
|
||||
|
||||
- Something that could be done but not now.
|
||||
- Something that came up in the conversation but is not in.
|
||||
```
|
||||
|
||||
**Why "out" matters:** it captures the things the user mentioned during the question phase but were decided to be deferred. Without that record, during implementation there will be a temptation to slip them in "while we're at it".
|
||||
|
||||
---
|
||||
|
||||
## Section 3 — Data model
|
||||
|
||||
The concrete structures that appear or change. Use real code, not abstract pseudocode.
|
||||
|
||||
```markdown
|
||||
## Data model
|
||||
|
||||
\`\`\`js
|
||||
// Game state
|
||||
const state = {
|
||||
level: 1,
|
||||
score: 0,
|
||||
highScores: [/* { score, level, date } */],
|
||||
};
|
||||
\`\`\`
|
||||
|
||||
Conventions:
|
||||
|
||||
- Coordinates: origin top-left.
|
||||
- Velocities in pixels/frame.
|
||||
```
|
||||
|
||||
If the feature introduces no new data, write it explicitly: _"This feature introduces no new data structures. It reuses the model from SPEC 01."_
|
||||
|
||||
---
|
||||
|
||||
## Section 4 — Implementation plan
|
||||
|
||||
Numbered steps. Each step must leave the system in a **functional and runnable** state. No "implement half and continue tomorrow".
|
||||
|
||||
```markdown
|
||||
## Implementation plan
|
||||
|
||||
1. Create file X with an empty skeleton.
|
||||
2. Implement function A in X. Manual test: run Y, see Z.
|
||||
3. Wire X to existing module W.
|
||||
4. ...
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
|
||||
- Each step must be commitable on its own.
|
||||
- If a step requires more than 30–50 lines of code, split it.
|
||||
- The last step of the plan is **not** "test everything" — that is the acceptance criteria.
|
||||
|
||||
---
|
||||
|
||||
## Section 5 — Acceptance criteria
|
||||
|
||||
Boolean checklist. Each item can be verified with yes or no.
|
||||
|
||||
```markdown
|
||||
## Acceptance criteria
|
||||
|
||||
- [ ] The game loads without errors in the console.
|
||||
- [ ] Breaking a brick adds exactly 10 points.
|
||||
- [ ] Reloading the page preserves the high-scores.
|
||||
```
|
||||
|
||||
**Anti-patterns to avoid:**
|
||||
|
||||
- ❌ "That it works well." → not verifiable.
|
||||
- ❌ "Good UX." → subjective.
|
||||
- ❌ "No bugs." → not operational.
|
||||
- ✅ "Pressing Esc pauses the game and shows the menu." → verifiable, boolean.
|
||||
|
||||
---
|
||||
|
||||
## Section 6 — Decisions taken and discarded
|
||||
|
||||
The section that has the most value 3 months from now. Capture **what you considered**, not just what you chose.
|
||||
|
||||
```markdown
|
||||
## Decisions
|
||||
|
||||
- **Yes:** localStorage for persistence. Fits in <5MB and we don't need queries.
|
||||
- **No:** IndexedDB. Overengineering for this case.
|
||||
- **Yes:** versioned key (`save:v1`). Lets us migrate the schema later without breaking.
|
||||
- **No:** cloud sync. Goes in another spec if it ever lands.
|
||||
```
|
||||
|
||||
Each decision ideally has a brief reason. Decisions without a reason are the first ones to be questioned later.
|
||||
|
||||
---
|
||||
|
||||
## Section 7 — Identified risks (optional)
|
||||
|
||||
Only when there are non-obvious risks. Simple table:
|
||||
|
||||
```markdown
|
||||
## Risks
|
||||
|
||||
| Risk | Mitigation |
|
||||
| ------------------------------------- | --------------------------------------------------------------------------- |
|
||||
| localStorage disabled in private mode | Fallback to in-memory object. The game still runs, it just doesn't persist. |
|
||||
| Future incompatible schema | Key includes `:v1`. Migration documented in `persistence.js`. |
|
||||
```
|
||||
|
||||
For small specs or very contained features, omit it.
|
||||
|
||||
---
|
||||
|
||||
## Final section — What is NOT in (reinforcement)
|
||||
|
||||
Repeat explicitly at the end what **will not** be done in this spec. This repetition is deliberate — the Scope section already says it, but at the end of the document it serves as a reminder when someone reads only the last lines.
|
||||
|
||||
```markdown
|
||||
## What is **not** in this spec
|
||||
|
||||
- Visual editor (another spec if it ever lands).
|
||||
- Multiplayer.
|
||||
- Mobile version.
|
||||
|
||||
Each one of those, if it lands, goes in its own spec.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Global rules about the whole document
|
||||
|
||||
- **One sentence per idea.** If a sentence has two commas and a semicolon, split it.
|
||||
- **Concrete names.** If you say "the levels module", say `src/levels.js`. If you say "a key", give the exact string.
|
||||
- **No TODOs.** A TODO in a spec means the decision was not made. Make it or note it as a pending decision with a reason.
|
||||
- **No long executable code.** The spec describes; the code is written afterwards. Short snippets to illustrate data structures are fine; full functions are not.
|
||||
- **Standard markdown.** No weird extensions. It must render on GitHub without surprises.
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#FBF4EC;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
input,button{font-family:inherit}
|
||||
input:focus{outline:none}
|
||||
::placeholder{color:#B6A99B}
|
||||
a{text-decoration:none}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;background:#FBF4EC;padding:40px">
|
||||
<div style="width:100%;max-width:440px">
|
||||
<div style="width:58px;height:58px;border-radius:18px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 12px 26px -10px rgba(238,129,100,.65)">
|
||||
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
</div>
|
||||
<h1 style="font-family:'Fredoka';font-weight:600;font-size:32px;line-height:1.15;margin:0 0 8px;color:#3F362E">Bienvenida a OpenDayCare</h1>
|
||||
<p style="margin:0 0 26px;color:#94887B;font-size:15.5px;line-height:1.55">Te invitaron a seguir el día de tu hijo. Creá tu contraseña para activar la cuenta.</p>
|
||||
|
||||
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid #EADFD0;border-radius:16px;padding:14px 16px;margin-bottom:22px">
|
||||
<div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center">M</div>
|
||||
<div><div style="font-size:13px;color:#94887B">Te invitaron a seguir a</div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E">Mateo · Sala Soles</div></div>
|
||||
</div>
|
||||
|
||||
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">CÓDIGO DE INVITACIÓN</div>
|
||||
<input value="7K4P9" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:18px;letter-spacing:3px;font-weight:700;color:#3F362E;margin-bottom:18px;font-family:'Fredoka'">
|
||||
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">EMAIL</div>
|
||||
<input value="lucia.fernandez@gmail.com" type="email" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
|
||||
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">CREAR CONTRASEÑA</div>
|
||||
<input type="password" value="contraseña" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #F2A78E;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
|
||||
|
||||
<label style="display:flex;align-items:flex-start;gap:12px;background:#FBF1D6;border-radius:14px;padding:14px 16px;margin-bottom:24px;cursor:pointer">
|
||||
<span style="flex:none;width:24px;height:24px;border-radius:8px;background:#5FB97E;display:flex;align-items:center;justify-content:center;margin-top:1px">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</span>
|
||||
<span style="font-size:14px;color:#8A7234;line-height:1.45">Autorizo a la guardería a tomar y compartir fotos de mi hijo dentro de la app.</span>
|
||||
</label>
|
||||
|
||||
<a href="familia-feed.dc.html" style="display:block;text-align:center;width:100%;padding:15px;border-radius:15px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:16px;box-shadow:0 10px 22px -8px rgba(238,129,100,.7)">Activar mi cuenta</a>
|
||||
<p style="text-align:center;margin:22px 0 0;color:#94887B;font-size:14.5px">¿Ya tenés cuenta? <a href="login.dc.html" style="color:#C5503A;font-weight:800">Iniciar sesión</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F2937A">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F2937A"/><g transform="translate(600 400)" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"><circle cx="0" cy="0" r="78"/><path d="M0 -150 L0 -118 M0 118 L0 150 M-106 -106 L-83 -83 M83 83 L106 106 M-150 0 L-118 0 M118 0 L150 0 M-106 106 L-83 83 M83 -83 L106 -106"/></g></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
input,textarea{font-family:inherit}
|
||||
input:focus,textarea:focus{outline:none}
|
||||
::placeholder{color:#B6A99B}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px">
|
||||
<div style="width:100%;max-width:520px;background:#FBF4EC;border:1px solid #ECE0D0;border-radius:24px;box-shadow:0 20px 50px -24px rgba(63,54,46,.35);overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #ECE0D0">
|
||||
<a href="ninos.dc.html" style="color:#94887B;font-weight:700;font-size:15px">Cancelar</a>
|
||||
<span style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Agregar niño</span>
|
||||
<a href="ninos.dc.html" style="color:#D9583C;font-weight:800;font-size:15px">Guardar</a>
|
||||
</div>
|
||||
<div style="padding:24px 26px">
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">NOMBRE COMPLETO</div>
|
||||
<input placeholder="Ej. Martina López" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
|
||||
<div style="display:flex;gap:14px;margin-bottom:18px">
|
||||
<div style="flex:1"><div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">FECHA DE NACIMIENTO</div><input placeholder="dd/mm/aaaa" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E"></div>
|
||||
<div style="flex:1"><div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">SALA</div><div style="display:flex;align-items:center;gap:8px;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;font-weight:700">Soles<span style="flex:1"></span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B0A290" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></div></div>
|
||||
</div>
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">ALERGIAS (ETIQUETAS)</div>
|
||||
<input placeholder="Ej. Maní, Lactosa" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">NOTAS MÉDICAS</div>
|
||||
<textarea placeholder="Indicaciones, medicación, contactos…" style="width:100%;min-height:90px;resize:vertical;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;line-height:1.5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="320" y="120" width="560" height="560" rx="36" fill="#FBF4EC" stroke="#ECE0D0" stroke-width="5"/><rect x="380" y="280" width="440" height="56" rx="16" fill="#fff" stroke="#EADFD0" stroke-width="4"/><rect x="380" y="380" width="200" height="56" rx="16" fill="#fff" stroke="#EADFD0" stroke-width="4"/><rect x="620" y="380" width="200" height="56" rx="16" fill="#fff" stroke="#EADFD0" stroke-width="4"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Sala Soles</div></div>
|
||||
</a>
|
||||
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 18px -8px rgba(238,129,100,.75);margin-bottom:18px"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Nueva publicación</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1">
|
||||
<a href="feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><circle cx="17" cy="9" r="2.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 20a5 5 0 0 1 5.5-4.9"/></svg>Niños</a>
|
||||
<a href="avisos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>Avisos</a>
|
||||
<a href="mi-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Caro Giménez</div><div style="font-size:12px;color:#A89A8B">Maestra · Soles</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:680px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<div style="margin-bottom:22px"><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">ACTIVIDAD</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Avisos</h1></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<a href="detalle-publicacion.dc.html" style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038"><b>Lucía Fernández</b> comentó en la publicación de Mateo.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hace 12 min</div></div></a>
|
||||
<div style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#CFEBD8;color:#3E9B6C;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038"><b>Diego Fernández</b> activó su cuenta y ya sigue a Mateo.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hace 1 h</div></div></div>
|
||||
<a href="detalle-publicacion.dc.html" style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#FBD8CC;color:#D9684A;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="#D9684A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg></div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038"><b>Carla Méndez</b> reaccionó a la publicación de Sofía.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hace 2 h</div></div></a>
|
||||
<div style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#F4DC8E;color:#9A7B1E;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg></div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038">Recordá enviar el <b>resumen del día</b> de la sala Soles.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hoy 17:00</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="180" y="200" width="840" height="90" rx="20" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="180" y="320" width="840" height="90" rx="20" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="180" y="440" width="840" height="90" rx="20" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="240" cy="245" r="28" fill="#C9B6E8"/><circle cx="240" cy="365" r="28" fill="#CFEBD8"/><circle cx="240" cy="485" r="28" fill="#FBD8CC"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
input,textarea,button{font-family:inherit}
|
||||
textarea:focus,input:focus{outline:none}
|
||||
::placeholder{color:#B6A99B}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px">
|
||||
<div style="width:100%;max-width:580px;background:#FBF4EC;border:1px solid #ECE0D0;border-radius:24px;box-shadow:0 20px 50px -24px rgba(63,54,46,.35);overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #ECE0D0">
|
||||
<a href="feed.dc.html" style="color:#94887B;font-weight:700;font-size:15px">Cancelar</a>
|
||||
<span style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Nueva publicación</span>
|
||||
<a href="feed.dc.html" style="color:#D9583C;font-weight:800;font-size:15px">Publicar</a>
|
||||
</div>
|
||||
<div style="padding:24px 26px">
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">PARA</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px">
|
||||
<button style="display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid #3F362E;background:#3F362E;color:#fff;font-weight:700;font-size:14px;cursor:pointer"><span style="width:26px;height:26px;border-radius:50%;background:#A9D9E8;color:#1F7A93;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">M</span>Mateo</button>
|
||||
<button style="display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer"><span style="width:26px;height:26px;border-radius:50%;background:#F4B8CC;color:#C44A7A;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">S</span>Sofía</button>
|
||||
<button style="display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer"><span style="width:26px;height:26px;border-radius:50%;background:#B9DEC4;color:#3E8B62;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">B</span>Benjamín</button>
|
||||
<button style="padding:6px 16px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer">Toda la sala</button>
|
||||
</div>
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">TIPO</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px">
|
||||
<button style="padding:8px 16px;border-radius:999px;border:none;background:#9A7B1E;color:#fff;font-weight:800;font-size:13.5px;cursor:pointer">Comida</button>
|
||||
<button style="padding:8px 16px;border-radius:999px;border:none;background:#E7DCF6;color:#7B5FC0;font-weight:800;font-size:13.5px;cursor:pointer">Siesta</button>
|
||||
<button style="padding:8px 16px;border-radius:999px;border:none;background:#2E89A6;color:#fff;font-weight:800;font-size:13.5px;cursor:pointer">Actividad</button>
|
||||
<button style="padding:8px 16px;border-radius:999px;border:none;background:#CFEBD8;color:#3E9B6C;font-weight:800;font-size:13.5px;cursor:pointer">Logro</button>
|
||||
<button style="padding:8px 16px;border-radius:999px;border:none;background:#F9D2DE;color:#C56486;font-weight:800;font-size:13.5px;cursor:pointer">Ánimo</button>
|
||||
<button style="padding:8px 16px;border-radius:999px;border:none;background:#FBD8CC;color:#D9684A;font-weight:800;font-size:13.5px;cursor:pointer">Foto</button>
|
||||
<button style="padding:8px 16px;border-radius:999px;border:none;background:#CCD8F4;color:#4E72C8;font-weight:800;font-size:13.5px;cursor:pointer">Anuncio</button>
|
||||
</div>
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">DESCRIPCIÓN</div>
|
||||
<textarea placeholder="Contá cómo le fue hoy…" style="width:100%;min-height:120px;resize:vertical;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;line-height:1.5;margin-bottom:22px">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón.</textarea>
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">FOTOS</div>
|
||||
<div style="display:flex;gap:12px">
|
||||
<div style="width:96px;height:96px;border-radius:14px;background:#F4ECE1;border:1px solid #ECE0D0;display:flex;align-items:center;justify-content:center;color:#CBB89F"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg></div>
|
||||
<div style="width:96px;height:96px;border-radius:14px;border:1.5px dashed #DBCDBA;background:#F4ECE1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#B0A290;cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#C5503A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg><span style="font-size:12px">Agregar</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="300" y="140" width="600" height="520" rx="36" fill="#FBF4EC" stroke="#ECE0D0" stroke-width="5"/><rect x="360" y="320" width="480" height="130" rx="18" fill="#fff" stroke="#EADFD0" stroke-width="4"/><rect x="360" y="240" width="120" height="40" rx="20" fill="#2E89A6"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
input,button{font-family:inherit}
|
||||
input:focus{outline:none}
|
||||
::placeholder{color:#B6A99B}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Familia</div></div>
|
||||
</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
|
||||
<a href="familia-feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="resumen-dia.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>Resumen del día</a>
|
||||
<a href="familia-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:680px;width:100%;margin:0 auto;padding:34px 40px 40px">
|
||||
<a href="familia-feed.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px;margin-bottom:18px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>Volver al feed</a>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:22px;padding:24px 26px;box-shadow:0 6px 22px -14px rgba(120,90,60,.5)">
|
||||
<div style="display:flex;align-items:center;gap:13px;margin-bottom:16px"><div style="width:48px;height:48px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E">Mateo</div><div style="font-size:13px;color:#A89A8B">09:40 · Maestra Caro · Sala Soles</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#C7E7F1"><span style="width:8px;height:8px;border-radius:50%;background:#2E89A6"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#2E89A6">ACTIVIDAD</span></div></div>
|
||||
<p style="font-size:16px;line-height:1.6;color:#4A4038;margin:0 0 4px">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p>
|
||||
<a href="foto.dc.html" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:16px;border:1.5px dashed #DBCDBA;border-radius:16px;background:#F4ECE1;height:280px;color:#B0A290"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg><span style="font-size:14px">Foto · pintando con témperas</span></a>
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-top:18px;color:#94887B;font-size:14px"><span style="display:flex"><span style="width:24px;height:24px;border-radius:50%;background:#F8D2DE;border:2px solid #FFFDF9"></span><span style="width:24px;height:24px;border-radius:50%;background:#F7E7A6;border:2px solid #FFFDF9;margin-left:-9px"></span><span style="width:24px;height:24px;border-radius:50%;background:#CFEBD8;border:2px solid #FFFDF9;margin-left:-9px"></span></span>A 5 personas les gusta</div>
|
||||
<div style="display:flex;gap:12px;margin-top:16px">
|
||||
<button style="flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:14px;border:1.5px solid #F2A78E;background:#FBD8CC;color:#D9583C;font-weight:800;font-size:15px;cursor:pointer"><svg width="19" height="19" viewBox="0 0 24 24" fill="#D9583C" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>Me encanta</button>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:14px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:800;font-size:15px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>Comentar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin:24px 0 14px">COMENTARIOS · 2</div>
|
||||
<div style="display:flex;flex-direction:column;gap:14px;margin-bottom:18px">
|
||||
<div style="display:flex;gap:12px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:14px;padding:12px 15px"><div style="display:flex;gap:8px;align-items:baseline;margin-bottom:3px"><span style="font-weight:800;font-size:14px;color:#3F362E">Lucía Fernández</span><span style="font-size:12px;color:#A89A8B">· mamá</span><span style="flex:1"></span><span style="font-size:12px;color:#A89A8B">10:02</span></div><div style="font-size:14.5px;color:#4A4038;line-height:1.45">¡Qué hermoso! En casa también le encanta el azul.</div></div></div>
|
||||
<div style="display:flex;gap:12px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none">C</div><div style="flex:1;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:14px;padding:12px 15px"><div style="display:flex;gap:8px;align-items:baseline;margin-bottom:3px"><span style="font-weight:800;font-size:14px;color:#3F362E">Maestra Caro</span><span style="font-size:12px;color:#A89A8B">· maestra</span><span style="flex:1"></span><span style="font-size:12px;color:#A89A8B">10:15</span></div><div style="font-size:14.5px;color:#4A4038;line-height:1.45">¡Se nota mucho! Le guardamos la obra 🎨</div></div></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;align-items:center;position:sticky;bottom:0;background:#F6ECDF;padding:8px 0">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
|
||||
<input placeholder="Escribí un comentario…" style="flex:1;padding:13px 16px;border-radius:14px;border:1.5px solid #ECE0D0;background:#fff;font-size:15px;color:#3F362E">
|
||||
<button style="width:46px;height:46px;border-radius:14px;border:none;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="200" y="120" width="800" height="360" rx="28" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="260" y="300" width="680" height="130" rx="16" fill="#F4ECE1" stroke="#DBCDBA" stroke-width="3" stroke-dasharray="10 8"/><rect x="200" y="520" width="800" height="80" rx="18" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="250" cy="180" r="28" fill="#A9D9E8"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Familia</div></div>
|
||||
</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
|
||||
<a href="familia-feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="resumen-dia.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>Resumen del día</a>
|
||||
<a href="familia-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:680px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<div style="margin-bottom:22px"><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">AJUSTES</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Mi cuenta</h1></div>
|
||||
<div style="display:flex;align-items:center;gap:18px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:20px 22px;margin-bottom:18px">
|
||||
<div style="width:64px;height:64px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:26px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
|
||||
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:20px;color:#3F362E">Lucía Fernández</div><div style="font-size:14px;color:#94887B">lucia.fernandez@gmail.com</div><div style="font-size:13px;color:#A89A8B;margin-top:2px">Mamá de Mateo y Sofía</div></div>
|
||||
<button style="border:1.5px solid #ECE0D0;background:#fff;color:#6E6359;font-weight:700;font-size:14px;padding:9px 16px;border-radius:12px;cursor:pointer;font-family:inherit">Editar</button>
|
||||
</div>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:18px 22px;margin-bottom:18px">
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">MIS HIJOS</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:center;gap:13px"><div style="width:42px;height:42px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-weight:800;font-size:15px;color:#3F362E">Mateo Fernández</div><div style="font-size:13px;color:#A89A8B">3 años · Sala Soles</div></div><span style="font-size:13px;color:#94887B">Fotos</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
|
||||
<div style="display:flex;align-items:center;gap:13px"><div style="width:42px;height:42px;border-radius:50%;background:#F4B8CC;color:#C44A7A;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">S</div><div style="flex:1"><div style="font-weight:800;font-size:15px;color:#3F362E">Sofía Méndez</div><div style="font-size:13px;color:#A89A8B">2 años · Sala Soles</div></div><span style="font-size:13px;color:#94887B">Fotos</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:18px 22px;margin-bottom:18px">
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">NOTIFICACIONES</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038">Avisos cuando se publica algo</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0"><span style="font-size:15px;color:#4A4038">Resumen diario (19:00)</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
|
||||
</div>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;overflow:hidden;margin-bottom:18px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038;font-weight:600">Cambiar contraseña</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px"><span style="font-size:15px;color:#4A4038;font-weight:600">Ayuda y soporte</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
|
||||
</div>
|
||||
<a href="login.dc.html" style="display:block;text-align:center;width:100%;padding:14px;border-radius:14px;border:1.5px solid #F2C4B6;background:#FBEAE3;color:#D9583C;font-weight:800;font-size:15px">Cerrar sesión</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="180" y="170" width="840" height="130" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="270" cy="235" r="42" fill="#C9B6E8"/><rect x="180" y="340" width="840" height="180" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="245" cy="400" r="26" fill="#A9D9E8"/><circle cx="245" cy="465" r="26" fill="#F4B8CC"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Familia</div></div>
|
||||
</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
|
||||
<a href="familia-feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="resumen-dia.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>Resumen del día</a>
|
||||
<a href="familia-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:720px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<div style="margin-bottom:20px">
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">TU FAMILIA</div>
|
||||
<h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Hola, Lucía</h1>
|
||||
<p style="margin:5px 0 0;color:#94887B;font-size:14.5px">Así va el día de hoy</p>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap">
|
||||
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #3F362E;background:#3F362E;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#A9D9E8;color:#1F7A93;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">M</span>Mateo</button>
|
||||
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#F4B8CC;color:#C44A7A;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">S</span>Sofía</button>
|
||||
<button style="padding:7px 16px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit">Todos</button>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:14px"><span style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D">HOY · MARTES 17 JUN</span><span style="flex:1;height:1px;background:#E7DAC8"></span></div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<a href="detalle-publicacion.dc.html" style="display:block;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">14:20 · Maestra Caro · Sala Soles</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CFEBD8"><span style="width:8px;height:8px;border-radius:50%;background:#3E9B6C"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#3E9B6C">LOGRO</span></div></div>
|
||||
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">¡Usó el orinal solito por primera vez! Estaba feliz de contárselo a todos. Un gran paso.</p>
|
||||
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8"><span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>3</span><span style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>1</span></div>
|
||||
</a>
|
||||
<a href="detalle-publicacion.dc.html" style="display:block;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">09:40 · Maestra Caro · Sala Soles</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#C7E7F1"><span style="width:8px;height:8px;border-radius:50%;background:#2E89A6"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#2E89A6">ACTIVIDAD</span></div></div>
|
||||
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:14px;border:1.5px dashed #DBCDBA;border-radius:16px;background:#F4ECE1;height:200px;color:#B0A290"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg><span style="font-size:13.5px">Foto · pintando con témperas</span></div>
|
||||
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8"><span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>5</span><span style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>2</span></div>
|
||||
</a>
|
||||
<a href="detalle-publicacion.dc.html" style="display:block;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:50%;background:#CCD8F4;color:#4E72C8;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg></div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Anuncio general</div><div style="font-size:12.5px;color:#A89A8B">07:50 · Maestra Caro</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CCD8F4"><span style="width:8px;height:8px;border-radius:50%;background:#4E72C8"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#4E72C8">ANUNCIO</span></div></div>
|
||||
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">El viernes salimos al parque por la mañana. Recuerden mandar gorra y una botellita de agua.</p>
|
||||
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8"><span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>8</span><span style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>0</span></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="160" y="160" width="120" height="44" rx="22" fill="#3F362E"/><rect x="300" y="160" width="110" height="44" rx="22" fill="#fff" stroke="#ECE0D0" stroke-width="3"/><rect x="160" y="250" width="880" height="200" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="160" y="480" width="880" height="200" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="230" cy="310" r="30" fill="#A9D9E8"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Sala Soles</div></div>
|
||||
</a>
|
||||
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 18px -8px rgba(238,129,100,.75);margin-bottom:18px"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Nueva publicación</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1">
|
||||
<a href="feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><circle cx="17" cy="9" r="2.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 20a5 5 0 0 1 5.5-4.9"/></svg>Niños</a>
|
||||
<a href="avisos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>Avisos</a>
|
||||
<a href="mi-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Caro Giménez</div><div style="font-size:12px;color:#A89A8B">Maestra · Soles</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:760px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<div style="margin-bottom:24px">
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">GUARDERÍA · SALA SOLES</div>
|
||||
<h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Buenas, Caro</h1>
|
||||
<p style="margin:5px 0 0;color:#94887B;font-size:14.5px">12 niños · martes 17 jun</p>
|
||||
</div>
|
||||
|
||||
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;gap:14px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:14px 18px;margin-bottom:24px;box-shadow:0 4px 14px -10px rgba(120,90,60,.4)">
|
||||
<div style="width:40px;height:40px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
|
||||
<span style="flex:1;color:#A89A8B;font-size:15px">Compartí un momento…</span>
|
||||
<span style="width:38px;height:38px;border-radius:12px;background:#FBE3D8;color:#E0654A;display:flex;align-items:center;justify-content:center"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></span>
|
||||
</a>
|
||||
|
||||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:14px"><span style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D">PUBLICADO HOY</span><span style="flex:1;height:1px;background:#E7DAC8"></span></div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<!-- post: logro -->
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||||
<div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div>
|
||||
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">14:20 · publicado por vos</div></div>
|
||||
<div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CFEBD8"><span style="width:8px;height:8px;border-radius:50%;background:#3E9B6C"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#3E9B6C">LOGRO</span></div>
|
||||
</div>
|
||||
<div style="font-size:12.5px;color:#A89A8B;margin-bottom:10px">Para: familia de Mateo</div>
|
||||
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">¡Usó el orinal solito por primera vez! Estaba feliz de contárselo a todos. Un gran paso.</p>
|
||||
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8">
|
||||
<span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>3</span>
|
||||
<a href="detalle-publicacion.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>1</a>
|
||||
<span style="flex:1"></span>
|
||||
<a href="crear-publicacion.dc.html" style="color:#C5503A;font-weight:800;font-size:14px">Editar</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- post: actividad with photo -->
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||||
<div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div>
|
||||
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">09:40 · publicado por vos</div></div>
|
||||
<div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#C7E7F1"><span style="width:8px;height:8px;border-radius:50%;background:#2E89A6"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#2E89A6">ACTIVIDAD</span></div>
|
||||
</div>
|
||||
<div style="font-size:12.5px;color:#A89A8B;margin-bottom:10px">Para: familia de Mateo</div>
|
||||
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p>
|
||||
<a href="foto.dc.html" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:14px;border:1.5px dashed #DBCDBA;border-radius:16px;background:#F4ECE1;height:200px;color:#B0A290"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg><span style="font-size:13.5px">Foto · pintando con témperas</span></a>
|
||||
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8">
|
||||
<span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>5</span>
|
||||
<a href="detalle-publicacion.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>2</a>
|
||||
<span style="flex:1"></span>
|
||||
<a href="crear-publicacion.dc.html" style="color:#C5503A;font-weight:800;font-size:14px">Editar</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- post: anuncio -->
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
|
||||
<div style="width:44px;height:44px;border-radius:50%;background:#CCD8F4;color:#4E72C8;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg></div>
|
||||
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Anuncio general</div><div style="font-size:12.5px;color:#A89A8B">07:50 · publicado por vos</div></div>
|
||||
<div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CCD8F4"><span style="width:8px;height:8px;border-radius:50%;background:#4E72C8"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#4E72C8">ANUNCIO</span></div>
|
||||
</div>
|
||||
<div style="font-size:12.5px;color:#A89A8B;margin-bottom:10px">Para: toda la sala</div>
|
||||
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">El viernes salimos al parque por la mañana. Recuerden mandar gorra y una botellita de agua.</p>
|
||||
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8">
|
||||
<span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>8</span>
|
||||
<a href="detalle-publicacion.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>0</a>
|
||||
<span style="flex:1"></span>
|
||||
<a href="crear-publicacion.dc.html" style="color:#C5503A;font-weight:800;font-size:14px">Editar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="120" y="200" width="420" height="160" rx="28" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="120" y="400" width="420" height="200" rx="28" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="200" cy="280" r="34" fill="#A9D9E8"/><rect x="660" y="200" width="420" height="400" rx="28" fill="#fff" stroke="#ECE0D0" stroke-width="4"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#1A1714;color:#fff;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="min-height:100vh;display:flex;flex-direction:column;background:#1A1714">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:22px 26px">
|
||||
<a href="detalle-publicacion.dc.html" style="width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></a>
|
||||
<div style="text-align:center"><div style="font-family:'Fredoka';font-weight:600;font-size:16px">Mateo</div><div style="font-size:13px;color:rgba(255,255,255,.6)">09:40 · Maestra Caro · Sala Soles</div></div>
|
||||
<a href="detalle-publicacion.dc.html" title="Descargar" style="width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg></a>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;padding:0 26px">
|
||||
<div style="width:100%;max-width:760px;aspect-ratio:4/3;border-radius:20px;background:linear-gradient(160deg,#2A2521,#211D19);border:1.5px dashed rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.4)">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg>
|
||||
<span style="font-size:15px">Foto · pintando con témperas</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:24px 26px 34px;text-align:center"><p style="font-size:15px;color:rgba(255,255,255,.85);margin:0;max-width:560px;margin-inline:auto;line-height:1.55">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p></div>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#1A1714">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#1A1714"/><rect x="280" y="200" width="640" height="400" rx="24" fill="#2A2521" stroke="rgba(255,255,255,0.16)" stroke-width="4" stroke-dasharray="12 10"/><circle cx="470" cy="360" r="34" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="5"/><path d="M400 500 L520 400 L640 500" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="5"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,593 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font-family: 'Nunito', system-ui, sans-serif;
|
||||
background: #f6ecdf;
|
||||
color: #3f362e;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.scrn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
background: #fffdf9;
|
||||
border: 1px solid #ece0d0;
|
||||
border-radius: 16px;
|
||||
padding: 15px 17px;
|
||||
box-shadow: 0 4px 14px -12px rgba(120, 90, 60, 0.5);
|
||||
transition: 0.15s;
|
||||
}
|
||||
.scrn:hover {
|
||||
border-color: #f2a78e;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 22px -14px rgba(120, 90, 60, 0.6);
|
||||
}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="max-width: 920px; margin: 0 auto; padding: 56px 40px 90px">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 8px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(155deg, #f8c3a8, #f2937a);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
"
|
||||
>
|
||||
<svg
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#fff"
|
||||
stroke-width="2.2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<path
|
||||
d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
style="
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
color: #3f362e;
|
||||
"
|
||||
>
|
||||
OpenDayCare · Pantallas
|
||||
</h1>
|
||||
<p style="margin: 3px 0 0; color: #94887b; font-size: 15px">
|
||||
Haz click en la pantalla que quieras ver
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 36px 0 16px;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
font-size: 12.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.8px;
|
||||
color: #d9583c;
|
||||
"
|
||||
>ACCESO</span
|
||||
><span style="flex: 1; height: 1px; background: #e7dac8"></span>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
"
|
||||
>
|
||||
<a class="scrn" href="login.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #fbe3d8;
|
||||
color: #d9583c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>01</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Iniciar sesión
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Acceso staff o familia
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="activar-cuenta.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #fbe3d8;
|
||||
color: #d9583c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>02</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Activar cuenta
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Padre · código de invitación
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 36px 0 16px;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
font-size: 12.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.8px;
|
||||
color: #2e89a6;
|
||||
"
|
||||
>GUARDERÍA · STAFF</span
|
||||
><span style="flex: 1; height: 1px; background: #e7dac8"></span>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
"
|
||||
>
|
||||
<a class="scrn" href="feed.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>03</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Feed de la guardería
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Muro de publicaciones
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="crear-publicacion.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>04</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Crear publicación
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">Nuevo momento</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="ninos.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>05</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">Niños</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Gestión de la sala
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="perfil-nino.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>06</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Perfil del niño
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Datos, alergias, padres
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="agregar-nino.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>07</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Agregar / editar niño
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">Formulario</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="vincular-padre.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>08</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Vincular padre
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Invitación por código
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="avisos.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>09</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">Avisos</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Actividad reciente
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="mi-cuenta.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #c7e7f1;
|
||||
color: #2e89a6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>10</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Mi cuenta (staff)
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">Ajustes</div>
|
||||
</div></a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 36px 0 16px;
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
font-size: 12.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.8px;
|
||||
color: #7b5fc0;
|
||||
"
|
||||
>FAMILIA · PADRE</span
|
||||
><span style="flex: 1; height: 1px; background: #e7dac8"></span>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 14px;
|
||||
"
|
||||
>
|
||||
<a class="scrn" href="familia-feed.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #e7dcf6;
|
||||
color: #7b5fc0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>11</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Feed del padre
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
El día de sus hijos
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="detalle-publicacion.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #e7dcf6;
|
||||
color: #7b5fc0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>12</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Detalle de publicación
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Reacciones y comentarios
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="foto.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #e7dcf6;
|
||||
color: #7b5fc0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>13</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Foto a pantalla completa
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">Visor de imagen</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="resumen-dia.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #e7dcf6;
|
||||
color: #7b5fc0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>14</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Resumen del día
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">Cierre del día</div>
|
||||
</div></a
|
||||
>
|
||||
<a class="scrn" href="familia-cuenta.dc.html"
|
||||
><span
|
||||
style="
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 11px;
|
||||
background: #e7dcf6;
|
||||
color: #7b5fc0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
font-family: 'Fredoka';
|
||||
font-weight: 600;
|
||||
"
|
||||
>15</span
|
||||
>
|
||||
<div>
|
||||
<div style="font-weight: 800; font-size: 15px">
|
||||
Mi cuenta (familia)
|
||||
</div>
|
||||
<div style="font-size: 13px; color: #a89a8b">
|
||||
Ajustes y consentimiento
|
||||
</div>
|
||||
</div></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F2937A">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1200" height="800" fill="#F2937A" />
|
||||
<g
|
||||
transform="translate(600 400)"
|
||||
fill="none"
|
||||
stroke="#fff"
|
||||
stroke-width="26"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="0" cy="0" r="78" />
|
||||
<path
|
||||
d="M0 -150 L0 -118 M0 118 L0 150 M-106 -106 L-83 -83 M83 83 L106 106 M-150 0 L-118 0 M118 0 L150 0 M-106 106 L-83 83 M83 -83 L106 -106"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script
|
||||
type="text/x-dc"
|
||||
data-dc-script
|
||||
data-props='{"$preview":{"width":"100%","height":"100%"}}'
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#FBF4EC;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
input,textarea,button{font-family:inherit}
|
||||
input:focus{outline:none}
|
||||
::placeholder{color:#B6A99B}
|
||||
a{text-decoration:none}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#FBF4EC">
|
||||
<div style="position:relative;overflow:hidden;background:linear-gradient(155deg,#F6A98E 0%,#F2937A 45%,#EC7E62 100%);display:flex;flex-direction:column;justify-content:space-between;padding:56px 60px;color:#fff">
|
||||
<div style="position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.12);top:-140px;right:-120px"></div>
|
||||
<div style="position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.10);bottom:-110px;left:-80px"></div>
|
||||
<div style="display:flex;align-items:center;gap:13px;position:relative">
|
||||
<div style="width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
</div>
|
||||
<span style="font-family:'Fredoka';font-weight:600;font-size:21px;letter-spacing:.5px">OpenDayCare</span>
|
||||
</div>
|
||||
<div style="position:relative">
|
||||
<h1 style="font-family:'Fredoka';font-weight:600;font-size:42px;line-height:1.12;margin:0 0 18px">El día de cada niño,<br>compartido con su familia.</h1>
|
||||
<p style="font-size:17px;line-height:1.6;margin:0;max-width:430px;color:rgba(255,255,255,.92)">Publicá momentos, gestioná las salas y mantené a las familias cerca, desde un solo lugar.</p>
|
||||
</div>
|
||||
<div style="position:relative;font-size:14px;color:rgba(255,255,255,.9)">🌿 Guardería Sala Soles</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:center;padding:40px">
|
||||
<div style="width:100%;max-width:392px">
|
||||
<h2 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0 0 6px;color:#3F362E">Iniciar sesión</h2>
|
||||
<p style="margin:0 0 28px;color:#94887B;font-size:15px">Ingresá para ver el día de hoy.</p>
|
||||
|
||||
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:9px">INGRESO COMO</div>
|
||||
<div style="display:flex;gap:10px;margin-bottom:22px">
|
||||
<button onClick="{{ pickStaff }}" style="flex:1;display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:14px;border:1.5px solid {{ staffBorder }};background:{{ staffBg }};color:{{ staffFg }};cursor:pointer;font-weight:700;font-size:14px;transition:.15s">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
Personal
|
||||
</button>
|
||||
<button onClick="{{ pickParent }}" style="flex:1;display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:14px;border:1.5px solid {{ parentBorder }};background:{{ parentBg }};color:{{ parentFg }};cursor:pointer;font-weight:700;font-size:14px;transition:.15s">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
Familia
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">EMAIL</div>
|
||||
<input value="{{ email }}" type="email" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
|
||||
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">CONTRASEÑA</div>
|
||||
<input type="password" placeholder="••••••••" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:10px">
|
||||
<div style="text-align:right;margin-bottom:20px"><span style="color:#C5503A;font-size:13.5px;font-weight:700;cursor:pointer">¿Olvidaste tu contraseña?</span></div>
|
||||
|
||||
<a href="{{ loginHref }}" style="display:block;text-align:center;width:100%;padding:15px;border-radius:15px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 10px 22px -8px rgba(238,129,100,.7)">Iniciar sesión</a>
|
||||
|
||||
<p style="text-align:center;margin:24px 0 0;color:#94887B;font-size:14.5px">¿Te invitó la guardería? <a href="activar-cuenta.dc.html" style="color:#C5503A;font-weight:800">Activá tu cuenta</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F2937A">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F2937A"/><g transform="translate(600 400)" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"><circle cx="0" cy="0" r="78"/><path d="M0 -150 L0 -118 M0 118 L0 150 M-106 -106 L-83 -83 M83 83 L106 106 M-150 0 L-118 0 M118 0 L150 0 M-106 106 L-83 83 M83 -83 L106 -106"/></g></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { role: 'staff', email: 'caro@opendaycare.com' };
|
||||
pickStaff = () => this.setState({ role: 'staff', email: 'caro@opendaycare.com' });
|
||||
pickParent = () => this.setState({ role: 'parent', email: 'lucia.fernandez@gmail.com' });
|
||||
renderVals() {
|
||||
const r = this.state.role;
|
||||
return {
|
||||
email: this.state.email,
|
||||
pickStaff: this.pickStaff, pickParent: this.pickParent,
|
||||
loginHref: r === 'staff' ? 'feed.dc.html' : 'familia-feed.dc.html',
|
||||
staffBg: r === 'staff' ? '#FBE3D8' : '#fff', staffBorder: r === 'staff' ? '#F2937A' : '#EADFD0', staffFg: r === 'staff' ? '#D9583C' : '#6E6359',
|
||||
parentBg: r === 'parent' ? '#FBE3D8' : '#fff', parentBorder: r === 'parent' ? '#F2937A' : '#EADFD0', parentFg: r === 'parent' ? '#D9583C' : '#6E6359',
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Sala Soles</div></div>
|
||||
</a>
|
||||
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 18px -8px rgba(238,129,100,.75);margin-bottom:18px"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Nueva publicación</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1">
|
||||
<a href="feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><circle cx="17" cy="9" r="2.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 20a5 5 0 0 1 5.5-4.9"/></svg>Niños</a>
|
||||
<a href="avisos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>Avisos</a>
|
||||
<a href="mi-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Caro Giménez</div><div style="font-size:12px;color:#A89A8B">Maestra · Soles</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:680px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<div style="margin-bottom:22px"><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">AJUSTES</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Mi cuenta</h1></div>
|
||||
<div style="display:flex;align-items:center;gap:18px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:20px 22px;margin-bottom:18px">
|
||||
<div style="width:64px;height:64px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:26px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
|
||||
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:20px;color:#3F362E">Caro Giménez</div><div style="font-size:14px;color:#94887B">caro@opendaycare.com</div><div style="font-size:13px;color:#A89A8B;margin-top:2px">Maestra · Sala Soles</div></div>
|
||||
<button style="border:1.5px solid #ECE0D0;background:#fff;color:#6E6359;font-weight:700;font-size:14px;padding:9px 16px;border-radius:12px;cursor:pointer;font-family:inherit">Editar</button>
|
||||
</div>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:18px 22px;margin-bottom:18px">
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">NOTIFICACIONES</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038">Nuevos comentarios de familias</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0"><span style="font-size:15px;color:#4A4038">Recordatorio de resumen (17:00)</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
|
||||
</div>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;overflow:hidden;margin-bottom:18px">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038;font-weight:600">Cambiar contraseña</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px"><span style="font-size:15px;color:#4A4038;font-weight:600">Ayuda y soporte</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
|
||||
</div>
|
||||
<a href="login.dc.html" style="display:block;text-align:center;width:100%;padding:14px;border-radius:14px;border:1.5px solid #F2C4B6;background:#FBEAE3;color:#D9583C;font-weight:800;font-size:15px">Cerrar sesión</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="180" y="180" width="840" height="130" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="270" cy="245" r="42" fill="#F2937A"/><rect x="180" y="350" width="840" height="180" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
input{font-family:inherit}
|
||||
input:focus{outline:none}
|
||||
::placeholder{color:#B6A99B}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
.kid:hover{border-color:#F2A78E;transform:translateY(-2px)}
|
||||
.kid{transition:.15s}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Sala Soles</div></div>
|
||||
</a>
|
||||
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 18px -8px rgba(238,129,100,.75);margin-bottom:18px"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Nueva publicación</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1">
|
||||
<a href="feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><circle cx="17" cy="9" r="2.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 20a5 5 0 0 1 5.5-4.9"/></svg>Niños</a>
|
||||
<a href="avisos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>Avisos</a>
|
||||
<a href="mi-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Caro Giménez</div><div style="font-size:12px;color:#A89A8B">Maestra · Soles</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:880px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px">
|
||||
<div><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">GESTIÓN</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Niños</h1></div>
|
||||
<a href="agregar-nino.dc.html" style="display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 18px -8px rgba(238,129,100,.7)"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Agregar niño</a>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:11px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:14px;padding:12px 16px;margin-bottom:22px">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B0A290" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
<input placeholder="Buscar niño…" style="flex:1;border:none;background:none;font-size:15px;color:#3F362E">
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><span style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#3F362E">SALA SOLES</span><span style="font-size:13px;color:#A89A8B">8 niños</span><span style="flex:1;height:1px;background:#E7DAC8"></span></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px">
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Mateo Fernández</div><div style="font-size:13px;color:#A89A8B">3 años · 2 padres vinculados</div></div><span style="flex:none;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:#FBD8CC;color:#D9684A">MANÍ</span></a>
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#F4B8CC;color:#C44A7A;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">S</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Sofía Méndez</div><div style="font-size:13px;color:#A89A8B">2 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#B9DEC4;color:#3E8B62;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">B</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Benjamín Ruiz</div><div style="font-size:13px;color:#A89A8B">3 años · 2 padres vinculados</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#F4DC8E;color:#9A7B1E;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">V</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Valentina Soto</div><div style="font-size:13px;color:#A89A8B">2 años · sin padres vinculados</div></div><span style="flex:none;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:#F9D2DE;color:#C56486">VINCULAR</span></a>
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#C9B6E8;color:#7B5FC0;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">T</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Tomás Díaz</div><div style="font-size:13px;color:#A89A8B">3 años · 1 padre vinculado</div></div><span style="flex:none;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:#FBD8CC;color:#D9684A">LACTOSA</span></a>
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#F4B8CC;color:#C44A7A;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">E</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Emma Castro</div><div style="font-size:13px;color:#A89A8B">2 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Lucas Romero</div><div style="font-size:13px;color:#A89A8B">3 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
|
||||
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#B9DEC4;color:#3E8B62;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">O</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Olivia Vega</div><div style="font-size:13px;color:#A89A8B">2 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="120" y="180" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="640" y="180" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="120" y="340" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="640" y="340" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="200" cy="240" r="32" fill="#A9D9E8"/><circle cx="720" cy="240" r="32" fill="#F4B8CC"/><circle cx="200" cy="400" r="32" fill="#B9DEC4"/><circle cx="720" cy="400" r="32" fill="#F4DC8E"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Sala Soles</div></div>
|
||||
</a>
|
||||
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 18px -8px rgba(238,129,100,.75);margin-bottom:18px"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Nueva publicación</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1">
|
||||
<a href="feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><circle cx="17" cy="9" r="2.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 20a5 5 0 0 1 5.5-4.9"/></svg>Niños</a>
|
||||
<a href="avisos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>Avisos</a>
|
||||
<a href="mi-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Caro Giménez</div><div style="font-size:12px;color:#A89A8B">Maestra · Soles</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:820px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px;margin-bottom:20px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>Volver a Niños</a>
|
||||
<div style="display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:300px;display:flex;flex-direction:column;gap:18px">
|
||||
<div style="display:flex;align-items:center;gap:18px">
|
||||
<div style="width:84px;height:84px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:34px;display:flex;align-items:center;justify-content:center;flex:none">M</div>
|
||||
<div style="flex:1"><h1 style="font-family:'Fredoka';font-weight:600;font-size:28px;margin:0;color:#3F362E">Mateo Fernández</h1><p style="margin:3px 0 0;color:#94887B;font-size:15px">3 años · Sala Soles</p></div>
|
||||
<a href="agregar-nino.dc.html" style="border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;padding:9px 16px;border-radius:12px">Editar</a>
|
||||
</div>
|
||||
<div style="display:flex;gap:14px;background:#FBDAD6;border-radius:16px;padding:16px 18px">
|
||||
<div style="width:40px;height:40px;border-radius:11px;background:#F4A8A0;display:flex;align-items:center;justify-content:center;flex:none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg></div>
|
||||
<div><div style="font-weight:800;color:#C5413A;font-size:15px;margin-bottom:2px">Alergias y notas</div><div style="color:#B25249;font-size:14.5px;line-height:1.5">Alergia al maní. Evitar frutos secos. Lleva inhalador en la mochila.</div></div>
|
||||
</div>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;overflow:hidden">
|
||||
<div style="display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #F0E6D8"><span style="color:#94887B;font-size:14.5px">Fecha de nacimiento</span><span style="font-weight:800;color:#3F362E;font-size:14.5px">12 mar 2022</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #F0E6D8"><span style="color:#94887B;font-size:14.5px">Sala</span><span style="font-weight:800;color:#3F362E;font-size:14.5px">Soles</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:15px 18px"><span style="color:#94887B;font-size:14.5px">Ingreso</span><span style="font-weight:800;color:#3F362E;font-size:14.5px">feb 2025</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:300px;flex:none;display:flex;flex-direction:column;gap:14px">
|
||||
<a href="resumen-dia.dc.html" style="display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;border-radius:14px;background:#3F362E;color:#fff;font-weight:800;font-size:15px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>Resumen del día</a>
|
||||
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px">
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">PADRES VINCULADOS</div>
|
||||
<div style="display:flex;flex-direction:column;gap:14px">
|
||||
<div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14.5px;color:#3F362E">Lucía Fernández</div><div style="font-size:12.5px;color:#A89A8B">Mamá · activa</div></div><span style="flex:none;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:#CFEBD8;color:#3E9B6C">ACTIVA</span></div>
|
||||
<div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:#A9C7E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">D</div><div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14.5px;color:#3F362E">Diego Fernández</div><div style="font-size:12.5px;color:#A89A8B">Papá · invitación enviada</div></div><span style="flex:none;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:#F7E7A6;color:#9A7B1E">PENDIENTE</span></div>
|
||||
<a href="vincular-padre.dc.html" style="display:flex;align-items:center;gap:12px;padding:8px 0 0"><span style="width:40px;height:40px;border-radius:50%;border:1.5px dashed #D8CBBA;display:flex;align-items:center;justify-content:center;color:#B0A290;flex:none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></span><span style="font-weight:800;font-size:14.5px;color:#C5503A">Vincular otro padre</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><circle cx="280" cy="240" r="70" fill="#A9D9E8"/><rect x="380" y="210" width="360" height="30" rx="15" fill="#3F362E"/><rect x="180" y="360" width="560" height="120" rx="24" fill="#FBDAD6"/><rect x="800" y="200" width="280" height="360" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
::-webkit-scrollbar{width:10px}
|
||||
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="display:flex;min-height:100vh;background:#F6ECDF">
|
||||
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
|
||||
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
|
||||
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Familia</div></div>
|
||||
</a>
|
||||
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
|
||||
<a href="familia-feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
|
||||
<a href="resumen-dia.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>Resumen del día</a>
|
||||
<a href="familia-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
|
||||
</nav>
|
||||
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
|
||||
<div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
|
||||
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</div></div>
|
||||
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||||
</div></div>
|
||||
</aside>
|
||||
|
||||
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
|
||||
<div style="max-width:700px;width:100%;margin:0 auto;padding:34px 40px 80px">
|
||||
<div style="display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap">
|
||||
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #3F362E;background:#3F362E;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#A9D9E8;color:#1F7A93;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">M</span>Mateo</button>
|
||||
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#F4B8CC;color:#C44A7A;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">S</span>Sofía</button>
|
||||
</div>
|
||||
<div style="background:linear-gradient(160deg,#FBE0D2,#F9D2DE);border-radius:22px;padding:28px 30px;margin-bottom:22px">
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:6px">RESUMEN DEL DÍA</div>
|
||||
<h1 style="font-family:'Fredoka';font-weight:600;font-size:32px;margin:0;color:#3F362E">El día de Mateo</h1>
|
||||
<p style="margin:6px 0 0;color:#9A6A6A;font-size:15px">martes 17 de junio</p>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px">
|
||||
<div style="background:#F7E7A6;border-radius:18px;padding:20px;text-align:center"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#9A7B1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px"><path d="M3 11h18a8 8 0 0 1-16 0M12 3v3"/></svg><div style="font-family:'Fredoka';font-weight:600;font-size:26px;color:#9A7B1E">3</div><div style="font-size:13px;color:#9A7B1E;font-weight:600">comidas</div></div>
|
||||
<div style="background:#E7DCF6;border-radius:18px;padding:20px;text-align:center"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#7B5FC0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"/></svg><div style="font-family:'Fredoka';font-weight:600;font-size:26px;color:#7B5FC0">1h 30</div><div style="font-size:13px;color:#7B5FC0;font-weight:600">de siesta</div></div>
|
||||
<div style="background:#C7E7F1;border-radius:18px;padding:20px;text-align:center"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#2E89A6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px"><path d="m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.1 1-5.8-4.3-4.1 5.9-.9z"/></svg><div style="font-family:'Fredoka';font-weight:600;font-size:26px;color:#2E89A6">4</div><div style="font-size:13px;color:#2E89A6;font-weight:600">momentos</div></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px;margin-bottom:24px"><div style="width:44px;height:44px;border-radius:50%;background:#F9D2DE;display:flex;align-items:center;justify-content:center;flex:none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#C56486" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg></div><div><div style="font-size:13px;color:#A89A8B">Ánimo del día</div><div style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Contento y participativo</div></div></div>
|
||||
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">LO MÁS LINDO DE HOY</div>
|
||||
<div style="display:flex;flex-direction:column;gap:18px">
|
||||
<a href="detalle-publicacion.dc.html" style="display:flex;gap:14px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#CFEBD8;display:flex;align-items:center;justify-content:center;flex:none"><span style="width:12px;height:12px;border-radius:50%;background:#3E9B6C"></span></div><div><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3E9B6C">¡Usó el orinal solito!</div><div style="font-size:14px;color:#94887B;margin-top:2px">14:20 · Un gran paso, estaba feliz de contarlo.</div></div></a>
|
||||
<a href="detalle-publicacion.dc.html" style="display:flex;gap:14px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#C7E7F1;display:flex;align-items:center;justify-content:center;flex:none"><span style="width:12px;height:12px;border-radius:50%;background:#2E89A6"></span></div><div><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#2E89A6">Pintó con témperas</div><div style="font-size:14px;color:#94887B;margin-top:2px">09:40 · Eligió el azul para todo.</div></div></a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="180" y="150" width="840" height="150" rx="28" fill="#F9D2DE"/><rect x="180" y="340" width="260" height="150" rx="22" fill="#F7E7A6"/><rect x="470" y="340" width="260" height="150" rx="22" fill="#E7DCF6"/><rect x="760" y="340" width="260" height="150" rx="22" fill="#C7E7F1"/></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet data-dc-atomics>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0}
|
||||
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
||||
a{text-decoration:none;color:inherit}
|
||||
input,button{font-family:inherit}
|
||||
input:focus{outline:none}
|
||||
::placeholder{color:#B6A99B}
|
||||
</style>
|
||||
</helmet>
|
||||
|
||||
<div style="min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px">
|
||||
<div style="width:100%;max-width:480px;background:#FBF4EC;border:1px solid #ECE0D0;border-radius:24px;box-shadow:0 20px 50px -24px rgba(63,54,46,.35);overflow:hidden">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #ECE0D0">
|
||||
<div><div style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Vincular padre</div><div style="font-size:13px;color:#A89A8B">a Mateo Fernández</div></div>
|
||||
<a href="perfil-nino.dc.html" style="width:34px;height:34px;border-radius:10px;background:#F0E6D8;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></a>
|
||||
</div>
|
||||
<div style="padding:22px 26px">
|
||||
<div style="display:flex;gap:11px;background:#E3ECFB;border-radius:14px;padding:13px 16px;margin-bottom:20px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4E72C8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:1px"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg><span style="font-size:13.5px;color:#3F5694;line-height:1.45">Le enviaremos un correo con un código para que active su cuenta. Solo verá el feed de Mateo.</span></div>
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">NOMBRE DEL PADRE/MADRE</div>
|
||||
<input placeholder="Ej. Diego Fernández" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">EMAIL</div>
|
||||
<input type="email" placeholder="correo@ejemplo.com" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">PARENTESCO</div>
|
||||
<div style="display:flex;gap:9px;margin-bottom:20px">
|
||||
<button style="flex:1;padding:11px;border-radius:999px;border:1.5px solid #9FB8EC;background:#CCD8F4;color:#4E72C8;font-weight:800;font-size:14px;cursor:pointer">Mamá</button>
|
||||
<button style="flex:1;padding:11px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:800;font-size:14px;cursor:pointer">Papá</button>
|
||||
<button style="flex:1;padding:11px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:800;font-size:14px;cursor:pointer">Tutor/a</button>
|
||||
</div>
|
||||
<div style="background:#FBF1D6;border:1.5px dashed #E6D08A;border-radius:16px;padding:18px;text-align:center;margin-bottom:20px">
|
||||
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#A88526;margin-bottom:8px">CÓDIGO DE INVITACIÓN</div>
|
||||
<div style="font-family:'Fredoka';font-weight:600;font-size:34px;letter-spacing:7px;color:#8A7234">7K4P9</div>
|
||||
<div style="font-size:13px;color:#A88526;margin-top:6px">Vence en 7 días</div>
|
||||
</div>
|
||||
<a href="perfil-nino.dc.html" style="display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:15.5px;box-shadow:0 10px 22px -8px rgba(238,129,100,.7)"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>Enviar invitación</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
|
||||
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><rect x="340" y="130" width="520" height="540" rx="36" fill="#FBF4EC" stroke="#ECE0D0" stroke-width="5"/><rect x="400" y="420" width="400" height="130" rx="20" fill="#FBF1D6" stroke="#E6D08A" stroke-width="4" stroke-dasharray="12 10"/><text x="600" y="505" text-anchor="middle" font-family="Verdana" font-size="56" font-weight="bold" fill="#8A7234" letter-spacing="8">7K4P9</text></svg>
|
||||
</template>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": 1,
|
||||
"skills": {
|
||||
"spec": {
|
||||
"source": "klerith/fernando-skills",
|
||||
"sourceType": "github",
|
||||
"skillPath": "skills/engineering/spec/SKILL.md",
|
||||
"computedHash": "81cfa08325e8104fbf5868ec47e3f3d8aec5f18927f58178fbceeecdc0036e55"
|
||||
},
|
||||
"spec-impl": {
|
||||
"source": "klerith/fernando-skills",
|
||||
"sourceType": "github",
|
||||
"skillPath": "skills/engineering/spec-impl/SKILL.md",
|
||||
"computedHash": "18493640ac83a2f3baab75366eba5eab6acabdd893cc63e533a10629e4844ed9"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user