diff --git a/index.html b/index.html index 97e3cee..83d43df 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,26 @@ :root { /* Intel Branding Colors */ --intel-blue: #0068B5; + --intel-blue-hover: #00558f; --bg-color: #f4f5f7; --card-bg: #ffffff; --text-main: #333333; --text-muted: #6b7280; - + /* Warning Colors */ --warning-bg: #fee2e2; --warning-text: #991b1b; --warning-border: #ef4444; - - /* Disabled Input Colors */ + + /* Info Colors (verification in progress) */ + --info-bg: #e0f2fe; + --info-text: #075985; + --info-border: #0284c7; + + /* Input Colors */ + --enabled-bg: #ffffff; + --enabled-text: #111827; + --enabled-border: #cbd5e1; --disabled-bg: #f3f4f6; --disabled-text: #9ca3af; --disabled-border: #d1d5db; @@ -63,24 +72,36 @@ margin: 0 0 25px 0; } - .warning-box { - background-color: var(--warning-bg); - color: var(--warning-text); - border-left: 4px solid var(--warning-border); - padding: 12px 16px; + .status-box { border-radius: 4px; + padding: 12px 16px; font-size: 0.85rem; margin-bottom: 25px; text-align: left; line-height: 1.5; } - .warning-box strong { + .status-box strong { display: block; margin-bottom: 4px; font-size: 0.9rem; } + .status-box.info { + background-color: var(--info-bg); + color: var(--info-text); + border-left: 4px solid var(--info-border); + display: flex; + align-items: center; + gap: 12px; + } + + .status-box.warning { + background-color: var(--warning-bg); + color: var(--warning-text); + border-left: 4px solid var(--warning-border); + } + .form-group { text-align: left; margin-bottom: 18px; @@ -97,21 +118,33 @@ .form-group input { width: 100%; padding: 12px; - border: 1px solid var(--disabled-border); + border: 1px solid var(--enabled-border); border-radius: 4px; box-sizing: border-box; - background-color: var(--disabled-bg); - color: var(--disabled-text); + background-color: var(--enabled-bg); + color: var(--enabled-text); font-size: 0.95rem; - cursor: not-allowed; - transition: all 0.2s ease; + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; + } + + .form-group input:focus { + outline: 2px solid rgba(0, 104, 181, 0.25); + outline-offset: 0; + border-color: var(--intel-blue); } .form-group input::placeholder { - color: var(--disabled-text); + color: var(--text-muted); opacity: 0.7; } + .form-group input:disabled { + background-color: var(--disabled-bg); + color: var(--disabled-text); + border-color: var(--disabled-border); + cursor: not-allowed; + } + button { width: 100%; padding: 12px; @@ -121,40 +154,133 @@ border-radius: 4px; font-size: 1rem; font-weight: 600; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.2s ease, opacity 0.2s ease; + } + + button:not(:disabled):hover, + button:not(:disabled):focus { + background-color: var(--intel-blue-hover); + } + + button:disabled { opacity: 0.5; cursor: not-allowed; - margin-top: 10px; - transition: opacity 0.2s ease; + } + + .spinner { + flex-shrink: 0; + width: 18px; + height: 18px; + border: 2px solid rgba(2, 132, 199, 0.25); + border-top-color: var(--info-border); + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + + @keyframes spin { + to { transform: rotate(360deg); } + } + + @media (prefers-reduced-motion: reduce) { + .spinner { + animation: none; + } + } + + [hidden] { + display: none !important; }
- - + +

Intel Performance Platform

Meshery Remote Provider

-
+ + + -
+
- +
- +
- +
- - + +
+ + diff --git a/login.html b/login.html index 97e3cee..83d43df 100644 --- a/login.html +++ b/login.html @@ -8,17 +8,26 @@ :root { /* Intel Branding Colors */ --intel-blue: #0068B5; + --intel-blue-hover: #00558f; --bg-color: #f4f5f7; --card-bg: #ffffff; --text-main: #333333; --text-muted: #6b7280; - + /* Warning Colors */ --warning-bg: #fee2e2; --warning-text: #991b1b; --warning-border: #ef4444; - - /* Disabled Input Colors */ + + /* Info Colors (verification in progress) */ + --info-bg: #e0f2fe; + --info-text: #075985; + --info-border: #0284c7; + + /* Input Colors */ + --enabled-bg: #ffffff; + --enabled-text: #111827; + --enabled-border: #cbd5e1; --disabled-bg: #f3f4f6; --disabled-text: #9ca3af; --disabled-border: #d1d5db; @@ -63,24 +72,36 @@ margin: 0 0 25px 0; } - .warning-box { - background-color: var(--warning-bg); - color: var(--warning-text); - border-left: 4px solid var(--warning-border); - padding: 12px 16px; + .status-box { border-radius: 4px; + padding: 12px 16px; font-size: 0.85rem; margin-bottom: 25px; text-align: left; line-height: 1.5; } - .warning-box strong { + .status-box strong { display: block; margin-bottom: 4px; font-size: 0.9rem; } + .status-box.info { + background-color: var(--info-bg); + color: var(--info-text); + border-left: 4px solid var(--info-border); + display: flex; + align-items: center; + gap: 12px; + } + + .status-box.warning { + background-color: var(--warning-bg); + color: var(--warning-text); + border-left: 4px solid var(--warning-border); + } + .form-group { text-align: left; margin-bottom: 18px; @@ -97,21 +118,33 @@ .form-group input { width: 100%; padding: 12px; - border: 1px solid var(--disabled-border); + border: 1px solid var(--enabled-border); border-radius: 4px; box-sizing: border-box; - background-color: var(--disabled-bg); - color: var(--disabled-text); + background-color: var(--enabled-bg); + color: var(--enabled-text); font-size: 0.95rem; - cursor: not-allowed; - transition: all 0.2s ease; + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; + } + + .form-group input:focus { + outline: 2px solid rgba(0, 104, 181, 0.25); + outline-offset: 0; + border-color: var(--intel-blue); } .form-group input::placeholder { - color: var(--disabled-text); + color: var(--text-muted); opacity: 0.7; } + .form-group input:disabled { + background-color: var(--disabled-bg); + color: var(--disabled-text); + border-color: var(--disabled-border); + cursor: not-allowed; + } + button { width: 100%; padding: 12px; @@ -121,40 +154,133 @@ border-radius: 4px; font-size: 1rem; font-weight: 600; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.2s ease, opacity 0.2s ease; + } + + button:not(:disabled):hover, + button:not(:disabled):focus { + background-color: var(--intel-blue-hover); + } + + button:disabled { opacity: 0.5; cursor: not-allowed; - margin-top: 10px; - transition: opacity 0.2s ease; + } + + .spinner { + flex-shrink: 0; + width: 18px; + height: 18px; + border: 2px solid rgba(2, 132, 199, 0.25); + border-top-color: var(--info-border); + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + + @keyframes spin { + to { transform: rotate(360deg); } + } + + @media (prefers-reduced-motion: reduce) { + .spinner { + animation: none; + } + } + + [hidden] { + display: none !important; }
- - + +

Intel Performance Platform

Meshery Remote Provider

-
+ + + -
+
- +
- +
- +
- - + +
+ +