Design21 Jan2026

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="tw:flex tw:flex-col tw:h-screen">
  <div class="tw:bg-[#2d2d2d] tw:px-3 tw:py-2 tw:flex tw:items-center tw:gap-2.5 tw:shrink-0">
    <!-- Nav buttons (decorative — no navigation in this prototype) -->
    <div class="tw:flex tw:gap-1.5" aria-hidden="true">
      <span class="tw:bg-transparent tw:border-0 tw:text-[#888] tw:w-6 tw:h-6 tw:rounded tw:text-[11px] tw:flex tw:items-center tw:justify-center">
        <i class="fa-solid fa-arrow-left"></i>
      </span>
      <span class="tw:bg-transparent tw:border-0 tw:text-[#888] tw:w-6 tw:h-6 tw:rounded tw:text-[11px] tw:flex tw:items-center tw:justify-center">
        <i class="fa-solid fa-arrow-right"></i>
      </span>
      <span class="tw:bg-transparent tw:border-0 tw:text-[#888] tw:w-6 tw:h-6 tw:rounded tw:text-[11px] tw:flex tw:items-center tw:justify-center">
        <i class="fa-solid fa-rotate"></i>
      </span>
    </div>
    <!-- Address bar -->
    <div class="tw:flex-1 tw:bg-[#3d3d3d] tw:rounded-full tw:px-3.5 tw:py-[5px] tw:flex tw:items-center tw:gap-1.5 tw:text-[12px] tw:text-[#ccc] tw:font-mono tw:overflow-hidden">
      <i class="fa-solid fa-lock tw:text-[#6cc] tw:text-[10px] tw:shrink-0" aria-hidden="true"></i>
      <span class="tw:text-[#aaa] tw:shrink-0">https://demo.applicaa.com/2024-25</span>
      <span class="tw:bg-[rgba(220,80,60,0.25)] tw:text-[#f87] tw:rounded-[3px] tw:px-1 tw:font-bold tw:shrink-0">?course=00000000-0000-0000-0000-000000000000</span>
      <span class="tw:ml-1 tw:text-[#f87] tw:text-[11px] tw:shrink-0">
        ← unknown / foreign ID
      </span>
    </div>
  </div>
  <main class="tw:flex-1 tw:overflow-y-auto tw:relative tw:bg-[linear-gradient(160deg,#b0bec5_0%,#90a4ae_25%,#78909c_50%,#7b6f5e_75%,#6d5d4e_100%)]">
    <!-- Top bar: school logo + name -->
    <div class="tw:flex tw:items-center tw:justify-between tw:px-6 tw:py-3.5">
      <div class="tw:bg-white tw:border-2 tw:border-[#333] tw:px-3.5 tw:py-1.5 tw:rounded-sm">
        <span class="tw:font-heading tw:font-normal tw:text-[18px] tw:leading-none tw:text-[#111] tw:tracking-[-0.01em]">
          greenford
        </span>
      </div>
      <span class="tw:font-sans tw:font-normal tw:text-[16px] tw:leading-none tw:text-[#222]">
        Greenford Sixth Form College
      </span>
      <div class="tw:w-[120px]" aria-hidden="true"></div>
    </div>
    <!-- Notice banner (selected by notice_kind) -->
    <div class="tw:mx-6 tw:mt-3 tw:max-w-[640px] tw:flex tw:items-start tw:gap-2 tw:bg-[#e8ecfb] tw:border-l-4 tw:border-[#2b48da] tw:rounded-r-md tw:px-3.5 tw:py-2.5">
      <i class="fa-solid fa-circle-info tw:mt-0.5 tw:shrink-0 tw:text-[#2b48da] tw:text-[13px]" aria-hidden="true"></i>
      <span class="tw:text-[13px] tw:leading-[1.5] tw:text-[#1f2d6b]">
        That course is no longer available, so we've brought you to the main application page. You can still apply and choose your subjects at the Courses step.
      </span>
    </div>
    <!-- Two-panel layout -->
    <div class="tw:flex tw:items-start tw:gap-8 tw:flex-wrap tw:pt-10 tw:pr-[8%] tw:pb-[60px] tw:pl-[10%]">
      <!-- Left: registration info panel -->
      <div class="tw:grow tw:shrink tw:basis-[340px] tw:max-w-[560px] tw:bg-[rgba(62,69,81,0.72)] tw:text-white tw:px-7 tw:py-10">
        <h2 class="tw:font-heading tw:font-bold tw:text-[20px] tw:leading-[1.35] tw:text-white tw:m-0 tw:mb-3.5">
          Year 12 Applications 2025/2026
        </h2>
        <p class="tw:text-[14px] tw:leading-[1.65] tw:text-white/90 tw:m-0 tw:mb-7">
          Use the button below to start a new application. You don't have to finish your application
          immediately. You can save it and continue later.
        </p>
        <button type="button" class="tw:bg-[#2b48da] tw:text-white tw:border-0 tw:rounded-[3px] tw:px-[22px] tw:py-2.5 tw:font-sans tw:font-bold tw:text-[14.5px] tw:leading-none tw:cursor-pointer">
          Parent Register
        </button>
      </div>
      <!-- Right: Existing Users login card (static — shown by default per brief) -->
      <div class="tw:grow-0 tw:shrink-0 tw:basis-80 tw:w-80 tw:bg-white tw:rounded-sm tw:shadow-[0_4px_20px_rgba(0,0,0,0.22)] tw:overflow-hidden tw:ml-auto">
        <div class="tw:bg-[#2b48da] tw:text-white tw:px-[18px] tw:py-2.5 tw:font-sans tw:font-semibold tw:text-[14px] tw:leading-[1.4]">
          Existing Users
        </div>
        <form class="tw:p-[18px]">
          <div class="tw:mb-3.5">
            <label for="portal-login-email" class="tw:block tw:text-[14px] tw:text-[#333] tw:mb-1">
              Username or Email address
            </label>
            <input type="email" id="portal-login-email" class="tw:w-full tw:box-border tw:px-2 tw:py-1.5 tw:text-[14px] tw:leading-[1.4] tw:font-sans tw:border tw:border-[#ced4da] tw:rounded-[3px] tw:outline-none tw:focus:ring-2 tw:focus:ring-[#2b48da]/40">
          </div>
          <div class="tw:mb-3.5">
            <label for="portal-login-password" class="tw:block tw:text-[14px] tw:text-[#333] tw:mb-1">
              Password
            </label>
            <input type="password" id="portal-login-password" class="tw:w-full tw:box-border tw:px-2 tw:py-1.5 tw:text-[14px] tw:leading-[1.4] tw:font-sans tw:border tw:border-[#ced4da] tw:rounded-[3px] tw:outline-none tw:focus:ring-2 tw:focus:ring-[#2b48da]/40">
          </div>
          <div class="tw:mb-3.5">
            <label class="tw:flex tw:items-center tw:gap-1.5 tw:text-[14px] tw:text-[#333] tw:cursor-pointer">
              <input type="checkbox" class="tw:m-0">
              Remember Me
            </label>
          </div>
          <div class="tw:text-center tw:my-3.5">
            <button type="submit" class="tw:bg-[#16b4fc] tw:text-white tw:border tw:border-[#16b4fc] tw:rounded-[3px] tw:px-10 tw:py-[7px] tw:font-sans tw:font-semibold tw:text-[17.5px] tw:leading-[1.5] tw:cursor-pointer">
              Login
            </button>
          </div>
          <a href="#" class="tw:block tw:text-center tw:mb-1.5 tw:text-[14px] tw:text-[#2b48da] tw:no-underline">
            Forgot your password?
          </a>
          <a href="#" class="tw:block tw:text-center tw:text-[14px] tw:text-[#dc3545] tw:no-underline">
            Trouble logging in?
          </a>
        </form>
      </div>
    </div>
  </main>
</div>
1
2
3
4
5
6
7
8
9
<%# Course-First Applications — Student Portal: Landing, course unavailable (AC8 fallback) %>
<%# This scenario stands in for any invalid/inaccessible course state:
    hidden / closed / archived / deleted / tampered / malformed URLs.
    All fall back here with the same clear messaging. %>
<%# Reference: ticket AC8 %>
<div class="tw:flex tw:flex-col tw:h-screen">
  <%= render "projects/course_first_preview/browser_bar", path: "2024-25", tampered: true %>
  <%= render "projects/course_first_preview/portal_landing", notice_kind: "unavailable" %>
</div>

No notes provided.

No params configured.