Claude finished the response
You said: Uztaisi man vienu pašpietiekamu HTML failu — booking/pirakstu kalendāru manai
Uztaisi man vienu pašpietiekamu HTML failu — booking/pirakstu kalendāru manai
Pixieset mājas lapai (klikklik.lv). Tas jābūt viens .html fails ar iekšēju
CSS un JavaScript — bez ārējiem serveriem, bez backend, bez datubāzēm.
---
KĀ TAS STRĀDĀ:
1. ADMIN SKATS (paroles aizsargāts):
- Noklusējuma parole: "klikklik2024" (mainām iekšā kodā)
- Admin var pievienot pieejamos laikus: izvēlas datumu + laiku
(piemēram, "15. jūnijs, 10:00") un nospiež "Pievienot"
- Admin var dzēst pieejamos laikus
- Admin redz visus klientu pieteikumus: vārds, e-pasts, telefons,
pakalpojums, izvēlētais laiks — ar statusu Gaida / Apstiprināts / Noraidīts
- Admin var mainīt statusa (Apstiprināt / Noraidīt)
- Viss tiek saglabāts localStorage
- Admin panelis pieejams ja URL beigās ir ?admin vai nospiežot slēptu pogu
2. KLIENTU SKATS (publiskais):
- Redzams mēneša kalendārs
- Pieejamie datumi iezīmēti ar zaļu/akcentu krāsu
- Klikšķinot uz pieejama datuma — parādās pieejamie laiki tajā dienā
- Klikšķinot uz laika — parādās forma:
* Vārds, Uzvārds
* E-pasts
* Telefona numurs
* Pakalpojuma veids (dropdown): Video shooting, Foto sesija,
Reels video, Korporatīvs video, Cits
* Komentārs (neobligāts)
- Pēc nosūtīšanas: "Jūsu pieteikums saņemts! Mēs ar jums sazināsimies
24h laikā."
- Jau rezervētie vai apstiprināti laiki nav pieejami citiem klientiem
3. E-PASTA PAZIŅOJUMI:
- Izmanto EmailJS (bezmaksas plāns) vai vienkārši mailto: saiti
- Kad klients nosūta formu, automātiski atveras e-pasta klients ar
aizpildītu ziņu uz info@klikklik.lv
- Ja EmailJS nav iestatīts, saglabā pieteikumu tikai localStorage un
parāda admin panelī
4. DIZAINS:
- Moderns, minimālistisks, profesionāls — atbilst videoprodukcijas aģentūrai
- Tumšs fons (
#0f0f0f vai tumši pelēks) ar akcentu krāsu
(zaļgani/teal tonis, kā
#01696f)
- Fonti: Google Fonts — "Inter" vai "DM Sans"
- Mobilais skats obligāts (responsive)
- Latviešu valoda visā interfeisā
- Kalendārs sākas ar pašreizējo mēnesi, var pārvietoties uz nākamajiem
- Jau pagājušie datumi pelēkoti un nav klikšķināmi
5. TEHNISKIE NOSACĪJUMI:
- Tikai HTML + CSS + JS, viss vienā failā
- Dati saglabājas localStorage (pietiekami mājas lapas embed
iFrame kontekstā)
- Nav nepieciešams nekāds serveris
- Kods jābūt tīram, komentētam, viegli saprotamam
- Admin URL: fails darbojas normāli, bet ja pievienot ?admin
adresei VAI nospiežot Ctrl+Shift+A, tad parādās admin login
SVARĪGI: Šo HTML kodu es ievietošu Pixieset mājas lapas custom code
sadaļā kā iFrame vai embed bloku. Tādēļ tas ir jābūt pilnīgi
pašpietiekamam — strādā bez interneta savienojuma ar ārēju API,
izņemot Google Fonts un emailJS CDN.
Izvadi tikai kodu — pilnu, gatavu, strādājošu HTML failu.
Show more
22:30
Claude responded: Izveidošu šo booking kalendāru.
Izveidošu šo booking kalendāru. Pirms sākt — viena svarīga piezīme par localStorage iFrame kontekstā: ja Pixieset embeddo failu kā iFrame no cita domēna, localStorage var nedarboties trešo pušu cookie ierobežojumu dēļ. Tad admin un klientu dati netiks koplietoti starp ierīcēm. Drošāk būtu Pixieset ievietot kā tiešo HTML failu (nevis iFrame). Bet uztaisīšu kodu tā, lai tas darbotos abos veidos.
Reading the frontend-design skill before building the booking calendar
Reading the frontend-design skill before building the booking calendar
Skaidrs. Lietotājs ir norādījis dizaina virzienu (tumšs, minimālistisks, teal akcents
#01696f, Inter/DM Sans), tātad turēsies pie tā — refined minimālisms ar profesionālu video aģentūras stilu. Tagad uztaisīsim failu.
Creating the self-contained booking calendar HTML file
Creating the self-contained booking calendar HTML file
Tagad pārbaudīšu, vai HTML ir derīgs un vai nav kādas sintaktiskas kļūdas, un pēc tam pārvietošu uz outputs:
Ran a command, read a file
Ran a command, read a file
Gatavs. Daži praktiski padomi par lietošanu:
Admin piekļuve:
Parole: klikklik2024 (mainīt skripta sadaļā, mainīgais CONFIG.ADMIN_PASSWORD)
Pievieno ?admin URL beigās, vai nospied Ctrl+Shift+A, vai uzklikšķini mazo punktu apakšējā labajā stūrī
Vienmēr nomaini paroli pirms publicēšanas
Par localStorage Pixieset kontekstā — atkārtoju brīdinājumu: ja Pixieset embeddo failu kā iFrame no cita domēna, daži brauzeri (Safari it sevišķi) bloķē trešo pušu localStorage. Iespējamie risinājumi:
Ievieto failu kā tiešo HTML (Pixieset "Custom HTML" blokā), nevis iFrame
Vai augšupielādē failu uz savu domēnu un iFrame saturi to no tās pašas izcelsmes
Datu plūsma — kad klients aizpilda formu, automātiski atveras viņa e-pasta klients ar aizpildītu ziņu uz info@klikklik.lv (mailto: fallback). Pieteikums vienmēr tiek saglabāts arī admin panelī, neatkarīgi no e-pasta klienta. Ja vēlies īstu automātisko nosūtīšanu (bez lietotāja klientu klienta atvēršanas), to varētu pievienot ar EmailJS — pasaki, ja vajag.
Pārbaudes scenārijs: atver failu → atver admin paneli → pievieno pāris laikus tuvākajām dienām → atgriezies klienta skatā → ieraudzīsi zaļās punktiņus uz dienām → klikšķini → izvēlies laiku → aizpildi formu → admin panelī parādās pieteikums ar opciju "Apstiprināt/Noraidīt".
Klikklik booking
Code · HTML
Next time, try this in Cowork
Hand off complex tasks for Claude to handle independently. Come back to finished results.
Claude is AI and can make mistakes. Please double-check responses.
Klikklik booking · HTML
Copy
klikklik.lv — Pierakstu kalendārs
k.
klikklik.lv
Video produkcija · Pieraksts
Rezervē savu laiku
Izvēlies pieejamo datumu kalendārā un izvēlies laiku. Mēs sazināsimies ar tevi 24 stundu laikā, lai apstiprinātu pierakstu.
—
Video pakalpojumi
REEL VIDEO SOCIĀLAJIEM MEDIJIEM
Īsi, dinamiski video, kas piesaista uzmanību sociālajos tīklos.
Sociālie tīkli
Pārvērtīsim tavas idejas aizraujošos video
Pastāstīsim par tavu uzņēmumu caur aizraujošiem augstas kvalitātes video stāstiem. Mēs veidojam reprezentācijas video, ko vari izmantot mājaslapā, dažādos pasākumos, kā arī rādīt sadarbības partneriem. Nodrošinām visu - sākot no scenārija līdz montāžai.
DAŽI NO MŪSU LIELISKAJIEM SADARBĪBAS PARTNERIEM
