{ "name": "Syllabus", "slug": "syllabus", "blocks": ["Pages", "Lists", "Sign-in: users", "Actions: pay"], "persona": "teachers", "keywords": [ "online course", "course app", "lessons", "student portal", "homework", "assignments", "tutor feedback", "course progress", "art course", "watercolour", "paid course", "members area", "member sign-in" ], "description": "An app template: a four-lesson online watercolour course. Learners sign in with their email, follow each lesson step by step, mark it done, hand in a photo of their painting and read the tutor's written feedback on it. Lesson 1 is a free taster; the full course is a monthly plan. A public page, nine member pages under /app and a privacy notice with blanks.", "audience": [ "online art and craft courses", "tutors who give feedback on homework", "teachers selling a short recorded course" ], "category": "Online course", "job": "member-app", "categoryId": "online-course", "alsoFits": [ "course with assignments", "homework and feedback", "online workshop", "cohort course", "music or language lessons with hand-ins" ], "direction": "An open paintbox tin on indigo: real watercolour washes fill a pan as each lesson is done", "mood": [ "light", "calm", "modern" ], "fonts": [ "Rasa", "Hanken Grotesk" ], "memberApp": { "path": "/app", "setup": { "signup": "open", "profile_fields": [ { "name": "name", "type": "text", "label": "First name" } ], "display_field": "name" }, "lists": [ { "list": "progress", "label": "Lessons done", "by": "member", "fields": [ { "name": "lesson", "type": "choice", "label": "Lesson", "required": true, "options": [ "Lesson 1 · First washes", "Lesson 2 · Skies", "Lesson 3 · Trees", "Lesson 4 · Water" ] }, { "name": "takeaway", "type": "text", "label": "One thing that clicked" } ] }, { "list": "assignments", "label": "Hand-ins", "by": "member", "status_options": [ "Handed in", "Tutor reviewing", "Feedback ready" ], "reply": true, "fields": [ { "name": "lesson", "type": "choice", "label": "Lesson", "required": true, "options": [ "Lesson 1 · First washes", "Lesson 2 · Skies", "Lesson 3 · Trees", "Lesson 4 · Water" ] }, { "name": "painting", "type": "photo", "label": "Photo of your painting", "required": true }, { "name": "question", "type": "long_text", "label": "A note or question for Nadia" } ] } ], "profile_fields": [ { "name": "name", "type": "text", "label": "First name" } ], "display_field": "name", "plans": [ { "plan": "taster", "name": "Taster", "free": true }, { "plan": "full", "name": "Full course", "paid": true, "price": { "amount": 1200, "currency": "gbp", "interval": "month" } } ], "demo": { "member": { "name": "Elaine Porter", "email": "elaine.porter@example.com", "profile": { "name": "Elaine" } }, "plans": [ "full" ], "rows": { "progress": [ { "lesson": "Lesson 2 · Skies", "_added": "-3d", "takeaway": "Lift clouds while the paper still shines" }, { "lesson": "Lesson 1 · First washes", "_added": "-12d", "takeaway": "Tilt the board more for a graded wash" } ], "assignments": [ { "lesson": "Lesson 2 · Skies", "painting": "art/handin-1.webp", "question": "I lifted the clouds with a tissue but the edges came out hard. Did I wait too long?", "_added": "-2d", "_status": "Feedback ready", "_reply": "Lovely soft sky, and the green hill sits well under it. The hard edges mean the paper had lost its shine: lift a minute earlier, while it still glints. Your shore is spot on." }, { "lesson": "Lesson 1 · First washes", "painting": "art/handin-elaine-1.svg", "question": "My graded wash goes patchy about halfway down. Too much water, or too little?", "_added": "-11d", "_status": "Feedback ready", "_reply": "Lovely flat wash, Elaine: no streaks, and that's the hard one. The graded wash goes patchy because the bead of paint dries before you reach it. Load the brush fully for every stroke, add a little more water each time, and tilt the board a touch more. The rose blooming into the blue in your wet-in-wet panel is exactly right. Try one more graded strip before Skies." } ] } } }, "files": [ "index.html", "app/index.html", "app/lessons.html", "app/lesson-1.html", "app/lesson-2.html", "app/lesson-3.html", "app/lesson-4.html", "app/hand-in.html", "app/feedback.html", "app/account.html", "privacy.html", "kit.css", "kit.js", "kit-icons.svg", "styles.css", "app.js", "site.webmanifest", "favicon.svg", "art/lesson-1.svg", "art/lesson-1-step-1.svg", "art/lesson-1-step-2.svg", "art/lesson-1-step-3.svg", "art/lesson-2.svg", "art/lesson-2-step-1.svg", "art/lesson-2-step-2.svg", "art/lesson-2-step-3.svg", "art/lesson-3.svg", "art/lesson-3-step-1.svg", "art/lesson-3-step-2.svg", "art/lesson-3-step-3.svg", "art/lesson-4.svg", "art/lesson-4-step-1.svg", "art/lesson-4-step-2.svg", "art/lesson-4-step-3.svg", "art/handin-elaine-1.svg", "art/handin-elaine-2.svg", "art/wash-1.webp", "art/wash-2.webp", "art/wash-3.webp", "art/wash-4.webp", "art/paintbox.webp", "art/handin-1.webp", "art/handin-2.webp", "og.png", "apple-touch-icon.png", "icon-192.png", "icon-512.png", "icon-512-maskable.png" ], "pages": [ { "path": "index.html", "label": "Home", "purpose": "The public page: the course and its tutor, the four lessons with their covers, how hand-ins and feedback work, the Taster and Full course prices, and a way into the app" }, { "path": "app/index.html", "label": "Home", "purpose": "The learner's home: a greeting, the course card with lessons done out of 4 and the next lesson to continue, the latest hand-in with its status and Nadia's reply, quick actions; signed out, the welcome and sign-in" }, { "path": "app/lessons.html", "label": "Lessons", "purpose": "The curriculum: the four lessons with their covers, length and assignment, each marked done, up next or locked for the Taster plan, with the join card for the full course" }, { "path": "app/lesson-1.html", "label": "Lesson 1", "purpose": "Materials and first washes (free with the Taster): materials, three illustrated steps, the assignment, Mark lesson done and the learner's hand-ins for this lesson with feedback" }, { "path": "app/lesson-2.html", "label": "Lesson 2", "purpose": "Skies (Full course): three illustrated steps, the assignment, Mark lesson done and this lesson's hand-ins; a locked preview and join button for Taster members" }, { "path": "app/lesson-3.html", "label": "Lesson 3", "purpose": "Trees and hedges (Full course): three illustrated steps, the assignment, Mark lesson done and this lesson's hand-ins; a locked preview for Taster members" }, { "path": "app/lesson-4.html", "label": "Lesson 4", "purpose": "Water and reflections (Full course): three illustrated steps, the assignment, Mark lesson done and this lesson's hand-ins; a locked preview for Taster members" }, { "path": "app/hand-in.html", "label": "Hand in", "purpose": "Hand in a painting: choose the lesson, add a photo from the phone's camera and a note or question for the tutor, with photo tips and what happens next" }, { "path": "app/feedback.html", "label": "Feedback", "purpose": "Every hand-in newest first, with its photo, status (Handed in, Tutor reviewing, Feedback ready) and the tutor's written feedback" }, { "path": "app/account.html", "label": "Account", "purpose": "The learner's profile, the Taster and Full course plans with join and renewal, the account block (sign-in, devices, billing, leaving) and contact" }, { "path": "privacy.html", "label": "Privacy", "purpose": "The privacy notice, with blanks the Site Owner fills in" } ], "facts": [ "course name", "tutor's name", "contact email", "full course price a month", "the four lesson titles, lengths and what each covers", "the steps of each lesson", "how fast the tutor replies to hand-ins" ], "interview": [ "What is the course called, and who teaches it?", "Who is it for, and what will they be able to do at the end?", "What are the lessons called, how long is each, and what are its steps?", "What does each lesson ask learners to hand in?", "Which lessons are free to try, and what does the full course cost a month?", "How soon do you reply to a hand-in, and on which days?", "Which email address should learners write to?" ], "customise": { "strings": [ "Loose Landscapes and Nadia Holmquist in the header, footer, titles and copy: replace every data-pl-fill fact with the owner's own", "Fill in every highlighted blank on privacy.html with the Site Owner before learners use the site (not legal advice: https://pagelemon.com/agents/member-app-legal)", "setup_app with the signup open, then save_app_list for progress and for assignments exactly as memberApp.lists says (assignments with its status_options and reply on), then save_plan for taster (free) and full (paid, £12 a month). Change the £12 on index.html and app/account.html together.", "The lesson names (Lesson 1 · First washes …) are the choice options of both lists; keep the words “and” and “or” out of them, because list conditions split on those words: change them in template.json, the hidden lesson inputs and data-pl-where conditions on each lesson page, the hand-in form's select, and the data-sy-lesson attributes on app/index.html and app/lessons.html, all together.", "The tutor replies to a hand-in in the Dashboard (Apps, Hand-ins): set the status to Tutor reviewing, then write the feedback in the reply and set Feedback ready. The learner sees both on Feedback and on the lesson page.", "Courses are for adults only: never turn this into lessons for children, and never add health, diet or fitness fields." ], "colours": "Edit the :root tokens at the top of styles.css: Indigo (--sy-indigo, the poster, nav strip and buttons), Ochre (--sy-ochre), Rose Madder (--sy-rose, the tutor's notes), the pan colours (--sy-pan-1 to --sy-pan-4) and Cold-press White (--sy-paper); the dark scheme below them (an indigo night studio) follows the device. Never edit kit.css, kit.js or kit-icons.svg (copies of the shared app kit).", "fonts": "Google Fonts: Rasa (titles, lesson names, notes) and Hanken Grotesk (text), one in every page head and --sy-display / --sy-text in styles.css. If the owner prefers no font service, download both (OFL) into a fonts/ folder and switch to @font-face.", "sections": "Member pages live under /app and use the shared app kit (kit.css, the k-* classes) and the data-pl-view markup. Lesson 1 shows to every signed-in learner; lessons 2 to 4 keep their content inside data-pl-if=\"plan:full\" with a locked preview in data-pl-if=\"no-plan\". Each lesson page has a Mark lesson done form (progress, the lesson as a hidden input) and lists the learner's hand-ins for that lesson. app.js reads the learner's done lessons (a hidden progress list) to show the next lesson, the done badges and which pans in the paintbox are full.", "images": "art/wash-1.webp to art/wash-4.webp are the lesson covers and the paint in the tin's pans (licensed stock washes, PHOTOS.md): replace them with photos of the tutor's own washes in each lesson's colour. art/paintbox.webp is the tutor's tin on the public page. art/lesson-N.svg is each lesson's finished painting (the assignment) and art/lesson-N-step-M.svg its three stages (800 by 500): replace them with photos of the tutor's own demonstration painting at each stage, same sizes. art/handin-1.webp and art/handin-2.webp are the sample learner's hand-in photos (preview and example only). favicon.svg is the paintbox mark; the PNG icons and manifest are made from it." }, "schemaVersion": 2, "updated": "2026-10-21" }