na

README Sidekiq.txt

@@ -0,0 +1,19 @@
+Sidekiq
+-------------------
+
+
+require 'sidekiq/api'
+
+clear the default queue
+Sidekiq::Queue.new('default').clear
+
+clear the retry set
+Sidekiq::RetrySet.new.clear
+
+clear the scheduled set
+Sidekiq::ScheduledSet.new.clear
+
+reset dashboard statistics
+Sidekiq::Stats.new.reset
+
+

app/assets/images/ico-arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.59 18.27"><path d="M6.93,0c.53,0,.96.43.96.96v13.75l4.08-3.91c.38-.37.99-.35,1.36.03s.35.99-.03,1.36l-6.36,6.08L.31,12.2c-.39-.36-.42-.97-.06-1.36.36-.39.97-.42,1.36-.06l4.36,3.99V.96c0-.53.43-.96.96-.96Z" style="fill:#000;"/></svg>

app/assets/stylesheets/application.css

@@ -124,6 +124,8 @@ header {
 
 main {
   margin: 0 1rem; 
+
+  
 }
 
 .start__title {
@@ -139,3 +141,64 @@ main {
   font-size: var(--fs-lg);
   font-weight: 400;
 }
+
+.language__selector {
+  margin: 60px auto;
+}
+
+.start__container {
+  max-width: 440px;
+  margin: 60px auto 40px auto;
+  container-type: inline-size; 
+  container-name: startbar; 
+}
+
+@container startbar (min-width: 400px) {
+  h1, p {
+    text-align: center;    
+  }
+}
+
+.language__selector-select {
+  position: relative;  
+  margin-bottom: 16px;
+  &::after {
+    content: '';
+    position: absolute;  
+    width: 13.59px;
+    height: 18.27px;
+    right: 33px;
+    height: 100%;
+    pointer-events: none;
+    background-image: url('ico-arrow-down.svg');
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  & select {
+    width: 100%;
+    appearance: none;
+    background-color: transparent;
+    border: 2px solid var(--clr-black);
+    font-size: var(--fs-lg);
+    font-weight: 700;
+    line-height: 1;
+    padding: 0.888888888888889em 1.333333333333333em;
+    border-radius: 400px;
+  }
+}
+
+.button__base {
+  appearance: none;
+  background-color: var(--clr-black);
+  border: 2px solid var(--clr-black);
+  color: var(--clr-white);
+  font-size: var(--fs-lg);
+  font-weight: 700;
+  line-height: 1;
+  border-radius: 400px;  
+  width: 100%;
+  cursor: pointer;
+  padding: 0.888888888888889em 1.333333333333333em;
+}
+

app/controllers/languages_controller.rb

@@ -1,7 +1,9 @@
 class LanguagesController < ApplicationController
 
+  before_action :set_locale_to_default
+  helper_method :accept_language
+
   def index
-    language = parse_accept_language()
 
 
   end
@@ -9,11 +11,16 @@ class LanguagesController < ApplicationController
 
 private
 
-  def parse_accept_language(header=request.env['HTTP_ACCEPT_LANGUAGE'])
-    header.to_s.split(',').map { |l|
+  def accept_language
+    @accept_language ||= request.env['HTTP_ACCEPT_LANGUAGE'].to_s.split(',').map { |l|
       lang, q_factor = l.split(';q=')
       [lang, (q_factor || '1').to_f]
-    }.sort_by { |_, q| -q }.map(&:first).first
+    }.sort_by { |_, q| -q }.map(&:first).first&.split('-')&.first
+  end
+
+
+  def set_locale_to_default
+    I18n.locale = I18n.default_locale
   end
 
 end

app/helpers/languages_helper.rb

@@ -1,2 +1,7 @@
 module LanguagesHelper
+
+  def languages_for_select
+    t('languages').map {|k,v| ["#{t(k, scope: 'flags')} #{v}", k]}
+  end
+
 end

app/javascript/application.js

@@ -0,0 +1,8 @@
+
+const confirm_btn = document.getElementById('confirm_btn')
+const language_select =  document.getElementById('language_select')
+
+confirm_btn.addEventListener('click', (e) => {
+   
+  window.location.href = '/' + language_select.value
+})

app/views/languages/index.html.erb

@@ -1,2 +1,16 @@
-<%= tag.h1 t('start.hello'), class: 'start__title' %>
-<%= tag.p t('start.please_select_a_language_to_get_started'), class: 'start__msg' %>
+<%- content_for :title, t('project_name') %>
+
+<div class="start__container">
+  <%= tag.h1 t('start.hello'), class: 'start__title' %>
+
+  <%= tag.p t('start.please_select_a_language_to_get_started'), class: 'start__msg' %>
+
+  <div class="language__selector">
+    <div class="language__selector-select">
+      <%= select_tag :language, options_for_select(languages_for_select, accept_language), id: 'language_select' %>
+    </div>
+    <button type="button" class="button__base" id="confirm_btn">
+      <%= t 'start.confirm' %>
+    </button>
+  </div>
+</div>

config/locales/en.yml

@@ -1,27 +1,55 @@
 en:
+
+  project_name: IKEA Foundation Week 2024
+
   languages:
-    zh: Chinese
-    hr: Croatian
-    cs: Czech
-    da: Danish
-    nl: Dutch
-    fi: Finnish
-    fr: French
-    de: German
-    hu: Hungarian
-    it: Italian
-    ja: Japanese
-    ko: Korean
-    nb: Norwegian (Bokmål)
-    pl: Polish
-    pt: Portuguese
-    ro: Romanian
-    sr: Serbian
-    sk: Slovak
-    sl: Slovenian
-    es: Spanish
-    sv: Swedish
-    uk: Ukrainian
+    zh: 中文 
+    hr: Hrvatski 
+    cs: Čeština 
+    da: Dansk 
+    nl: Nederlands 
+    fi: Suomi 
+    fr: Français 
+    de: Deutsch 
+    hu: Magyar 
+    it: Italiano 
+    ja: 日本語 
+    ko: 한국어 
+    nb: Norsk (Bokmål) 
+    pl: Polski 
+    pt: Português 
+    ro: Română 
+    sr: Српски 
+    sk: Slovenčina 
+    sl: Slovenščina 
+    es: Español 
+    sv: Svenska 
+    uk: Українська 
+  flags:
+    zh: 🇨🇳
+    hr: 🇭🇷
+    cs: 🇨🇿
+    da: 🇩🇰
+    nl: 🇳🇱
+    fi: 🇫🇮
+    fr: 🇫🇷
+    de: 🇩🇪
+    hu: 🇭🇺
+    it: 🇮🇹
+    ja: 🇯🇵
+    ko: 🇰🇷
+    nb: 🇳🇴
+    pl: 🇵🇱
+    pt: 🇵🇹
+    ro: 🇷🇴
+    sr: 🇷🇸
+    sk: 🇸🇰
+    sl: 🇸🇮 
+    es: 🇪🇸
+    sv: 🇸🇪
+    uk: 🇺🇦 
+
+
 
   can_you_spot_the_link: Can you spot <span>the link?</span>