From 80a7b41112fdf2046496059a8a07fa9aa0e3d68f Mon Sep 17 00:00:00 2001 From: isUnknown Date: Thu, 26 Mar 2026 14:43:41 +0100 Subject: [PATCH] play page : add dynamical coming soon status. related to #37 --- assets/img/lock-icon.svg | 20 +++++++++++ site/blueprints/pages/about.yml | 2 +- site/blueprints/pages/blog.yml | 2 +- site/blueprints/pages/expertise.yml | 2 +- site/blueprints/pages/game.yml | 46 +++++++++++++------------- site/blueprints/pages/play.yml | 2 +- site/blueprints/pages/portfolio.yml | 2 +- site/blueprints/pages/project.yml | 4 +-- site/blueprints/pages/white-papers.yml | 2 +- site/blueprints/site.yml | 2 +- src/i18n/index.js | 2 +- src/styles/buttons.css | 16 +++------ src/views/Play.svelte | 45 +++++++++++++++++++++++-- 13 files changed, 99 insertions(+), 48 deletions(-) create mode 100644 assets/img/lock-icon.svg diff --git a/assets/img/lock-icon.svg b/assets/img/lock-icon.svg new file mode 100644 index 0000000..d5b6462 --- /dev/null +++ b/assets/img/lock-icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/site/blueprints/pages/about.yml b/site/blueprints/pages/about.yml index 3da8408..8e719e4 100644 --- a/site/blueprints/pages/about.yml +++ b/site/blueprints/pages/about.yml @@ -1,7 +1,7 @@ title: À propos icon: info image: - back: #fff + back: rgba(0,0,0, 0) color: var(--color-green) query: false options: diff --git a/site/blueprints/pages/blog.yml b/site/blueprints/pages/blog.yml index bff0dc3..5acbc63 100644 --- a/site/blueprints/pages/blog.yml +++ b/site/blueprints/pages/blog.yml @@ -1,7 +1,7 @@ title: Blog icon: blog image: - back: #fff + back: rgba(0,0,0, 0) color: var(--color-green) query: false options: diff --git a/site/blueprints/pages/expertise.yml b/site/blueprints/pages/expertise.yml index cad580b..12ae6e6 100644 --- a/site/blueprints/pages/expertise.yml +++ b/site/blueprints/pages/expertise.yml @@ -1,7 +1,7 @@ title: Expertise icon: text-left image: - back: #fff + back: rgba(0,0,0, 0) color: var(--color-green) options: delete: false diff --git a/site/blueprints/pages/game.yml b/site/blueprints/pages/game.yml index d9d279d..3394356 100644 --- a/site/blueprints/pages/game.yml +++ b/site/blueprints/pages/game.yml @@ -28,6 +28,7 @@ tabs: translate: false image: ratio: 1/1 + back: rgba(0,0,0, 0) uploads: template: image help: Pour le carousel de navigation parmi les jeux @@ -40,10 +41,11 @@ tabs: translate: false layout: cards size: tiny + image: + back: rgba(0,0,0, 0) uploads: template: image help: Affiché au-dessus de la description - width: 1/3 - width: 3/10 fields: description: @@ -64,28 +66,26 @@ tabs: help: Laissez vide pour afficher "à venir / coming soon" translate: false type: url - - width: 3/10 - sections: - previewCol: - type: fields - fields: - backgroundColor: - label: Couleur d'arrière plan - type: code-editor - language: css - size: custom-size - default: radial-gradient(circle at 20% 80%, rgb(240, 154, 110) 0%, rgb(233, 101, 122) 100%) - translate: false - help: À remplir avec la valeur de la propriété CSS `background-color` souhaitée - preview: - label: Aperçu - type: files - layout: cards - multiple: false - translate: false - uploads: - template: image - help: Image affichée à droite de la description (sur ordinateur uniquement) + fields: + preview: + label: Aperçu + type: files + layout: cards + multiple: false + translate: false + image: + back: rgba(0,0,0, 0) + uploads: + template: image + help: Image affichée à droite de la description (sur ordinateur uniquement) + backgroundColor: + label: Couleur d'arrière plan + type: code-editor + language: css + size: custom-size + default: radial-gradient(circle at 20% 80%, rgb(240, 154, 110) 0%, rgb(233, 101, 122) 100%) + translate: false + help: À remplir avec la valeur de la propriété CSS `background-color` souhaitée seo: seo/page diff --git a/site/blueprints/pages/play.yml b/site/blueprints/pages/play.yml index 3a74fca..bba6aac 100644 --- a/site/blueprints/pages/play.yml +++ b/site/blueprints/pages/play.yml @@ -1,7 +1,7 @@ title: Jouer icon: game-pad image: - back: #ffffff + back: rgba(0,0,0, 0)fff color: var(--color-green) options: delete: false diff --git a/site/blueprints/pages/portfolio.yml b/site/blueprints/pages/portfolio.yml index f57ab03..c009c7c 100644 --- a/site/blueprints/pages/portfolio.yml +++ b/site/blueprints/pages/portfolio.yml @@ -1,7 +1,7 @@ title: Portfolio icon: stack image: - back: #ffffff + back: rgba(0,0,0, 0)fff query: false color: var(--color-green) options: diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml index e0ae6db..90f064b 100644 --- a/site/blueprints/pages/project.yml +++ b/site/blueprints/pages/project.yml @@ -100,7 +100,7 @@ tabs: translate: false image: ratio: 1/1 - back: #ffffff + back: rgba(0,0,0, 0)fff uploads: template: image help: Écran de jeu mis en situation sur un appareil @@ -140,7 +140,7 @@ tabs: accept: image/* translate: false image: - back: #ffffff + back: rgba(0,0,0, 0)fff uploads: template: image help: | diff --git a/site/blueprints/pages/white-papers.yml b/site/blueprints/pages/white-papers.yml index 90e374a..bf4e584 100644 --- a/site/blueprints/pages/white-papers.yml +++ b/site/blueprints/pages/white-papers.yml @@ -1,7 +1,7 @@ title: Livres blancs icon: book image: - back: #fff + back: rgba(0,0,0, 0) color: var(--color-green) query: false options: diff --git a/site/blueprints/site.yml b/site/blueprints/site.yml index 275a698..38e60c3 100644 --- a/site/blueprints/site.yml +++ b/site/blueprints/site.yml @@ -89,7 +89,7 @@ tabs: type: files layout: cards image: - back: #fff + back: rgba(0,0,0, 0) max: 1 help: Utilisé en pied de page (page À propos, Blog et Article). - width: 3/4 diff --git a/src/i18n/index.js b/src/i18n/index.js index bfdf177..b820064 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -16,7 +16,7 @@ const dict = { read_article: { fr: "Lire l'article", en: "Read article" }, // Play play: { fr: "Jouer", en: "Play" }, - coming_soon: { fr: "Coming soon", en: "Coming soon" }, + coming_soon: { fr: "À venir", en: "Coming soon" }, // Header close_menu: { fr: "Fermer le menu", en: "Close menu" }, open_menu: { fr: "Ouvrir le menu", en: "Open menu" }, diff --git a/src/styles/buttons.css b/src/styles/buttons.css index 27650ad..12748c8 100644 --- a/src/styles/buttons.css +++ b/src/styles/buttons.css @@ -57,23 +57,15 @@ button[disabled] { } .button.play-icon::before { - content: ""; background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7598 13.5H14.6348V14.625V15.75H15.7598V14.625H16.8848V13.5V12.375H15.7598V13.5Z' fill='black'/%3E%3Cpath d='M12.3848 15.75V16.875H13.5098H14.6348V15.75H13.5098H12.3848Z' fill='black'/%3E%3Cpath d='M10.1348 16.875H9.00977V18H10.1348H11.2598H12.3848V16.875H11.2598H10.1348Z' fill='black'/%3E%3Cpath d='M1.125 10.125V9V7.875V6.75V5.625H0V6.75V7.875V9V10.125V11.25V12.375H1.125V11.25V10.125Z' fill='black'/%3E%3Cpath d='M3.375 13.5H2.25V12.375H1.125V13.5V14.625H2.25V15.75H3.375V14.625V13.5Z' fill='black'/%3E%3Cpath d='M4.5 15.75H3.375V16.875H4.5H5.625V15.75H4.5Z' fill='black'/%3E%3Cpath d='M6.75 16.875H5.625V18H6.75H7.875H9V16.875H7.875H6.75Z' fill='black'/%3E%3Cpath d='M16.8848 5.625V6.75V7.875V9V10.125V11.25V12.375H18.0098V11.25V10.125V9V7.875V6.75V5.625H16.8848Z' fill='black'/%3E%3Cpath d='M16.8848 3.375H15.7598V2.25H14.6348V3.375V4.5H15.7598V5.625H16.8848V4.5V3.375Z' fill='black'/%3E%3Cpath d='M11.2598 0H10.1348H9.00977V1.125H10.1348H11.2598H12.3848V0H11.2598Z' fill='black'/%3E%3Cpath d='M13.5098 1.125H12.3848V2.25H13.5098H14.6348V1.125H13.5098Z' fill='black'/%3E%3Cpath d='M2.25 4.5H3.375V3.375V2.25H2.25V3.375H1.125V4.5V5.625H2.25V4.5Z' fill='black'/%3E%3Cpath d='M5.625 2.25V1.125H4.5H3.375V2.25H4.5H5.625Z' fill='black'/%3E%3Cpath d='M7.875 1.125H9V0H7.875H6.75H5.625V1.125H6.75H7.875Z' fill='black'/%3E%3Cpath d='M10.1399 10.1825H11.2774V9.6775H12.4149V8.54H11.2774V7.91H10.1399V6.7725H9.00492V5.6375H7.86742V4.5H6.73242V13.5925H7.86742V12.455H9.00492V11.3175H10.1399V10.1825Z' fill='black'/%3E%3C/svg%3E"); - background-size: 100%; - width: 1.125rem; - height: 1.125rem; - transform: translateX(-0.5rem); - transition: all 0.5s ease-out; } .button.download-icon::before { - content: ""; background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2339_203)%22%3E%3Cpath%20d%3D%22M6.26423%208.06567H4.10986V10.0801H6.26423V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M8.41853%2012.1025V14.1169H10.5816V12.1025H12.7359V10.08H10.5816V8.06562V4.03685V0H8.41853V4.03685V8.06562V10.08H6.26416V12.1025H8.41853Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.8456%2011.9487V13.9631V15.9775H2.15437V13.9631V11.9487H0V13.9631V15.9775V18H19V15.9775V13.9631V11.9487H16.8456Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M14.8902%208.06567H12.7358V10.0801H14.8902V8.06567Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2339_203%22%3E%3Crect%20width%3D%2219%22%20height%3D%2218%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); - background-size: 100%; - width: 1.125rem; - height: 1.125rem; - transform: translateX(-0.5rem); - transition: all 0.5s ease-out; +} + +.button.lock-icon::before { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2096_2257)%22%3E%3Cpath%20d%3D%22M6.72667%200.977011H11.2733V0H6.68715V0.977011H5.70801V1.95402H6.72667V0.977011Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M12.292%200.97699H11.2733V1.9519H12.292V0.97699Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M15.9605%204.76531H13.315V1.95404H12.292V4.76531H5.70799V1.95404H4.68713V4.76531H2.04169V5.74232H15.9605V4.76531Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.9791%206.71722V13.1718V15.046H18V13.1718V6.71722H16.9791Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.9792%205.74231H15.9605V6.71722H16.9792V5.74231Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M1.02086%206.71722H0V13.1718V15.046H1.02086V13.1718V6.71722Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M2.03953%205.74231H1.02087V6.71722H2.03953V5.74231Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M15.9605%2016.0209H2.04169V16.9979H15.9605V16.0209Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M16.9792%2015.046H15.9605V16.0209H16.9792V15.046Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M2.03953%2015.046H1.02087V16.0209H2.03953V15.046Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3Cpath%20d%3D%22M8.47203%208.9696H7.45117V9.94452V10.9026V10.9194V11.8775H8.47203V12.8524H9.49069V11.8775H10.5093V10.9194V10.9026V9.94452V8.9696H9.49069H8.47203Z%22%20fill%3D%22black%22%20style%3D%22fill%3Ablack%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2096_2257%22%3E%3Crect%20width%3D%2218%22%20height%3D%2217%22%20fill%3D%22white%22%20style%3D%22fill%3Awhite%3Bfill-opacity%3A1%3B%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); } /* Clickable elements */ diff --git a/src/views/Play.svelte b/src/views/Play.svelte index 05c1d55..a7c6396 100644 --- a/src/views/Play.svelte +++ b/src/views/Play.svelte @@ -270,7 +270,7 @@ class="button play-icon" >{t('play')} {:else} - + {/if} {/if} @@ -280,7 +280,14 @@