PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 11:09:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(toast): reposition to bottom-center, solid bg, larger text, longer duration

Browse Source
This commit is contained in:
Pontoporeia
2026-04-30 16:00:19 +02:00
parent e8bf89d184
commit 34b2d073ee
7 changed files with 331 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@@ -19,6 +19,7 @@
## UI ## UI
- [x] **admin header** — replace "Déconnexion" text link with SVG sign-out icon (accessible via `aria-label` + `.sr-only` span) - [x] **admin header** — replace "Déconnexion" text link with SVG sign-out icon (accessible via `aria-label` + `.sr-only` span)
- [x] **toast styling** — repositioned to bottom-center; solid `--bg-secondary` background; font bumped to `--step-0`; padding increased; visible duration extended to ~6.35 s; enter animation slides up from bottom
## Bug fixes ## Bug fixes
- [x] **smtp-test.php** — wrap `SmtpRelay::send()` in `try/catch SmtpSendException` so SMTP delivery failures (e.g. 550 recipient rejected) surface as a proper flash error instead of an uncaught exception/silent crash - [x] **smtp-test.php** — wrap `SmtpRelay::send()` in `try/catch SmtpSendException` so SMTP delivery failures (e.g. 550 recipient rejected) surface as a proper flash error instead of an uncaught exception/silent crash

32
app/public/assets/css/admin.css
View File

@@ -142,46 +142,48 @@
filter: brightness(0.9); filter: brightness(0.9);
} }
/* ── Toast messages (top-right, CSS-only auto-fade) ─────────────────── */ /* ── Toast messages (bottom-center, CSS-only auto-fade) ─────────────── */
#toast-region { #toast-region {
position: fixed; position: fixed;
top: var(--space-l); bottom: var(--space-l);
right: var(--space-l); left: 50%;
transform: translateX(-50%);
z-index: 10000; z-index: 10000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
gap: var(--space-xs); gap: var(--space-xs);
pointer-events: none; pointer-events: none;
max-width: min(480px, calc(100vw - 2 * var(--space-l))); width: max-content;
max-width: min(560px, calc(100vw - 2 * var(--space-l)));
} }
.toast { .toast {
padding: var(--space-xs) var(--space-s); padding: var(--space-s) var(--space-m);
border-radius: 6px; border-radius: 8px;
font-size: var(--step--1); font-size: var(--step-0);
border-left: 3px solid; border-left: 4px solid;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
pointer-events: auto; pointer-events: auto;
backdrop-filter: blur(6px); /* enter then fade out — total visible ~6.35 s */
/* enter then fade out — total visible ~4.35 s */
animation: toast-enter 0.35s ease-out, animation: toast-enter 0.35s ease-out,
toast-exit 0.4s ease-in 4s forwards; toast-exit 0.5s ease-in 6s forwards;
} }
.toast--error { .toast--error {
background: var(--accent-muted); background: var(--bg-secondary);
border-color: var(--error); border-color: var(--error);
color: var(--text-primary); color: var(--text-primary);
} }
.toast--success { .toast--success {
background: var(--success-muted-bg); background: var(--bg-secondary);
border-color: var(--success); border-color: var(--success);
color: var(--text-primary); color: var(--text-primary);
} }
@keyframes toast-enter { @keyframes toast-enter {
from { opacity: 0; transform: translateY(-12px); } from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }

593
app/public/assets/css/common.css
View File

@@ -3,139 +3,139 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
body { body {
font-family: var(--font-body); font-family: var(--font-body);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0) 92%,
rgba(149, 87, 181, 1) 100% rgba(149, 87, 181, 1) 100%
); );
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
header { header {
vertical-align: center; vertical-align: center;
flex-shrink: 0; flex-shrink: 0;
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
var(--gradient-1) 0%, var(--gradient-1) 0%,
var(--gradient-2) 33%, var(--gradient-2) 33%,
var(--gradient-3) 66%, var(--gradient-3) 66%,
var(--gradient-4) 100% var(--gradient-4) 100%
); );
.nav-logo { .nav-logo {
font-family: var(--font-display); font-family: var(--font-display);
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--accent-foreground); color: var(--accent-foreground);
text-decoration: none; text-decoration: none;
text-shadow: text-shadow:
0 0 16px var(--header-shadow-strong), 0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft); 0 0 32px var(--header-shadow-soft);
}
.nav-left {
display: flex;
align-items: center;
gap: var(--space-l);
}
.nav-left-links,
.nav-right-links {
font-family: var(--font-display);
display: flex;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
nav {
padding: var(--space-s) var(--space-s);
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--step-2);
a {
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
} }
ul { .nav-left {
display: flex; display: flex;
gap: var(--space-l); align-items: center;
align-items: center; gap: var(--space-l);
list-style: none;
margin: 0;
padding: 0;
} }
ul a { .nav-left-links,
font-size: var(--step--1); .nav-right-links {
letter-spacing: 0.12em; font-family: var(--font-display);
text-transform: uppercase; display: flex;
color: var(--accent-foreground); gap: var(--space-l);
text-decoration: none; align-items: center;
transition: opacity 0.15s; list-style: none;
margin: 0;
padding: 0;
} }
a, nav {
ul a { padding: var(--space-s) var(--space-s);
text-shadow: display: flex;
0 0 16px var(--header-shadow-strong), align-items: center;
0 0 32px var(--header-shadow-soft); justify-content: space-between;
font-size: var(--step-2);
a {
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
}
ul {
display: flex;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
ul a {
font-size: var(--step--1);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
transition: opacity 0.15s;
}
a,
ul a {
text-shadow:
0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft);
}
ul a:hover {
opacity: 1;
}
} }
ul a:hover { ul a[aria-current="page"] {
opacity: 1; opacity: 1;
border-bottom: 1px solid var(--header-nav-active-border);
padding-bottom: 1px;
} }
}
ul a[aria-current="page"] { /* nav-top-row: transparent wrapper at desktop — children become
opacity: 1;
border-bottom: 1px solid var(--header-nav-active-border);
padding-bottom: 1px;
}
/* nav-top-row: transparent wrapper at desktop — children become
direct flex items of nav, preserving the existing layout */ direct flex items of nav, preserving the existing layout */
.nav-top-row { .nav-top-row {
display: contents; display: contents;
} }
/* nav-mobile-links: mobile-only dropdown, hidden at desktop */ /* nav-mobile-links: mobile-only dropdown, hidden at desktop */
.nav-mobile-links { .nav-mobile-links {
display: none; /* overridden to block inside the mobile media query */ display: none; /* overridden to block inside the mobile media query */
} }
} }
/* ============================================================ /* ============================================================
@@ -160,167 +160,182 @@ header {
/* Off-screen checkbox — triggered by its label */ /* Off-screen checkbox — triggered by its label */
.menu-btn { .menu-btn {
position: absolute; position: absolute;
top: -9999px; top: -9999px;
left: -9999px; left: -9999px;
} }
/* Burger label — takes no space at desktop */ /* Burger label — takes no space at desktop */
.menu-icon { .menu-icon {
display: none; display: none;
cursor: pointer; cursor: pointer;
padding: var(--space-2xs) var(--space-s); padding: var(--space-2xs) var(--space-s);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/* Middle bar of the burger icon */ /* Middle bar of the burger icon */
.navicon { .navicon {
background: var(--accent-foreground); background: var(--accent-foreground);
display: block; display: block;
height: 2px; height: 2px;
width: 24px; width: 24px;
position: relative; position: relative;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
/* Top and bottom bars */ /* Top and bottom bars */
.navicon::before, .navicon::before,
.navicon::after { .navicon::after {
content: ''; content: "";
background: var(--accent-foreground); background: var(--accent-foreground);
display: block; display: block;
height: 2px; height: 2px;
width: 100%; width: 100%;
position: absolute; position: absolute;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.navicon::before { top: -7px; } .navicon::before {
.navicon::after { bottom: -7px; } top: -7px;
}
.navicon::after {
bottom: -7px;
}
/* ---- Mobile ---- */ /* ---- Mobile ---- */
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
/* Nav becomes a flex column: top-row on row 1, dropdown on row 2 */ /* Nav becomes a flex column: top-row on row 1, dropdown on row 2 */
header nav[aria-label="Navigation principale"] { header nav[aria-label="Navigation principale"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
padding: 0; padding: 0;
} }
/* Top row: logo left, hamburger right */ /* Top row: logo left, hamburger right */
header nav[aria-label="Navigation principale"] .nav-top-row { header nav[aria-label="Navigation principale"] .nav-top-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--space-s); padding: var(--space-s);
} }
/* Hide desktop link lists inside the top row */ /* Hide desktop link lists inside the top row */
header nav[aria-label="Navigation principale"] .nav-left-links, header nav[aria-label="Navigation principale"] .nav-left-links,
header nav[aria-label="Navigation principale"] .nav-right-links { header nav[aria-label="Navigation principale"] .nav-right-links {
display: none; display: none;
} }
/* Reveal the hamburger icon */ /* Reveal the hamburger icon */
.menu-icon { .menu-icon {
display: flex; display: flex;
} }
/* Dropdown: shown as block but clipped to zero height by default */ /* Dropdown: shown as block but clipped to zero height by default */
header nav[aria-label="Navigation principale"] .nav-mobile-links { header nav[aria-label="Navigation principale"] .nav-mobile-links {
display: block; /* override the desktop display:none */ display: block; /* override the desktop display:none */
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.2s ease-out; transition: max-height 0.2s ease-out;
} }
/* ---- Open state ---- */ /* ---- Open state ---- */
.menu-btn:checked ~ nav[aria-label="Navigation principale"] .nav-mobile-links { .menu-btn:checked
max-height: 300px; ~ nav[aria-label="Navigation principale"]
} .nav-mobile-links {
max-height: 300px;
}
/* Dropdown link rows */ /* Dropdown link rows */
header nav[aria-label="Navigation principale"] .nav-mobile-links li { header nav[aria-label="Navigation principale"] .nav-mobile-links li {
border-top: 1px solid var(--header-nav-active-border); border-top: 1px solid var(--header-nav-active-border);
text-align: left; text-align: left;
} }
header nav[aria-label="Navigation principale"] .nav-mobile-links li a { header nav[aria-label="Navigation principale"] .nav-mobile-links li a {
display: block; display: block;
width: 100%; width: 100%;
padding: var(--space-s) var(--space-s); padding: var(--space-s) var(--space-s);
font-size: var(--step-1); font-size: var(--step-1);
text-align: left; text-align: left;
} }
/* ---- Animate burger → X ---- */ /* ---- Animate burger → X ---- */
.menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon { .menu-btn:checked
background: transparent; ~ nav[aria-label="Navigation principale"]
} .menu-icon
.navicon {
background: transparent;
}
.menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::before { .menu-btn:checked
transform: rotate(-45deg); ~ nav[aria-label="Navigation principale"]
top: 0; .menu-icon
} .navicon::before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::after { .menu-btn:checked
transform: rotate(45deg); ~ nav[aria-label="Navigation principale"]
bottom: 0; .menu-icon
} .navicon::after {
transform: rotate(45deg);
bottom: 0;
}
} }
main { main {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
/* ============================================================ /* ============================================================
SEARCH BAR (shared) SEARCH BAR (shared)
============================================================ */ ============================================================ */
.header-search-wrap { .header-search-wrap {
padding: 0 0; padding: 0 0;
flex-shrink: 0; flex-shrink: 0;
background-color: var(--gradient-4); background-color: var(--gradient-4);
background: linear-gradient(180deg, var(--gradient-4) 0%, #ffffffee 100%); background: linear-gradient(180deg, var(--gradient-4) 0%, #ffffffee 100%);
} }
.header-search-wrap form[role="search"] { .header-search-wrap form[role="search"] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2xs); gap: var(--space-2xs);
padding: var(--space-3xs) var(--space-s); padding: var(--space-3xs) var(--space-s);
border: 1px solid var(--accent-primary); border: 1px solid var(--accent-primary);
border-radius: 10px; border-radius: 10px;
background: var(--bg-primary); background: var(--bg-primary);
width: 100%; width: 100%;
color: var(--accent-primary); color: var(--accent-primary);
} }
.header-search-wrap form[role="search"] svg { .header-search-wrap form[role="search"] svg {
color: var(--text-tertiary); color: var(--text-tertiary);
flex-shrink: 0; flex-shrink: 0;
width: 16px; width: 16px;
height: 16px; height: 16px;
stroke: var(--accent-primary); stroke: var(--accent-primary);
} }
.header-search-wrap form[role="search"] input { .header-search-wrap form[role="search"] input {
flex: 1; flex: 1;
border: none; border: none;
font-size: var(--step--1); font-size: var(--step--1);
color: var(--text-primary); color: var(--text-primary);
background: transparent; background: transparent;
padding: var(--space-3xs) 0; padding: var(--space-3xs) 0;
font-family: inherit; font-family: inherit;
} }
.header-search-wrap form[role="search"] input::placeholder { .header-search-wrap form[role="search"] input::placeholder {
color: var(--accent-primary); color: var(--accent-primary);
} }
/* ============================================================ /* ============================================================
@@ -329,50 +344,50 @@ main {
/* Visually-hidden but screen-reader-accessible */ /* Visually-hidden but screen-reader-accessible */
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
white-space: nowrap; white-space: nowrap;
border: 0; border: 0;
} }
/* Skip-to-content link (visible only on keyboard focus) */ /* Skip-to-content link (visible only on keyboard focus) */
.skip-link { .skip-link {
position: absolute; position: absolute;
top: -999px; top: -999px;
left: 1rem; left: 1rem;
z-index: 9999; z-index: 9999;
padding: var(--space-2xs) var(--space-s); padding: var(--space-2xs) var(--space-s);
background: var(--accent-primary); background: var(--accent-primary);
color: var(--text-primary); color: var(--text-primary);
font-size: var(--step--1); font-size: var(--step--1);
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
.skip-link:focus { .skip-link:focus {
top: 0; top: 0;
} }
/* Consistent keyboard-focus outline for all interactive elements */ /* Consistent keyboard-focus outline for all interactive elements */
:focus-visible { :focus-visible {
outline: 2px solid var(--accent-primary); outline: 2px solid var(--accent-primary);
outline-offset: 2px; outline-offset: 2px;
} }
/* Respect user motion preferences */ /* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *,
*::before, *::before,
*::after { *::after {
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
} }
} }
/* ============================================================ /* ============================================================
@@ -380,71 +395,79 @@ main {
============================================================ */ ============================================================ */
fieldset { fieldset {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: 4px;
padding: var(--space-m); padding: var(--space-m);
margin: 0; margin: 0;
} }
legend { legend {
font-size: var(--step--1); font-size: var(--step--1);
font-weight: 600; font-weight: 600;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 var(--space-2xs); padding: 0 var(--space-2xs);
} }
small { small {
font-size: var(--step--2); font-size: var(--step--2);
color: var(--text-secondary); color: var(--text-secondary);
display: block; display: block;
margin-top: var(--space-3xs); margin-top: var(--space-3xs);
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: var(--step--1); font-size: var(--step--1);
} }
th { th {
text-align: left; text-align: left;
font-size: var(--step--2); font-size: var(--step--2);
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 400; font-weight: 400;
white-space: nowrap; white-space: nowrap;
} }
td { td {
padding: var(--space-2xs) var(--space-xs); padding: var(--space-2xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
vertical-align: top; vertical-align: top;
} }
dialog { dialog {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: 6px;
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
padding: 0; padding: 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
} }
dialog::backdrop { dialog::backdrop {
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.45);
} }
details > summary { details > summary {
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
} }
details > summary::-webkit-details-marker { details > summary::-webkit-details-marker {
display: none; display: none;
}
:where(video, audio, iframe) {
border: 1px solid var(--bg-primary);
border-radius: 15px;
}
audio::-webkit-media-controls-enclosure {
border-radius: 10px;
} }

4
app/public/assets/css/tfe.css
View File

@@ -292,7 +292,9 @@ aside figcaption {
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background 0.2s, opacity 0.2s; transition:
background 0.2s,
opacity 0.2s;
margin-top: var(--space-3xs); margin-top: var(--space-3xs);
} }

1
app/storage/logs/form-submissions.log
View File

@@ -8,3 +8,4 @@
{"source":"partage","action":"submit","status":"success","thesis_id":22,"identifier":"2025-019","author":"Lila Dubois, Karim Nassar","share_slug":"20260429-DZESJT6X","timestamp":"2026-04-30T11:45:36+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0"} {"source":"partage","action":"submit","status":"success","thesis_id":22,"identifier":"2025-019","author":"Lila Dubois, Karim Nassar","share_slug":"20260429-DZESJT6X","timestamp":"2026-04-30T11:45:36+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0"}
{"source":"partage","action":"submit","status":"success","thesis_id":23,"identifier":"2025-020","author":"Zoé Lambert","share_slug":"20260429-DZESJT6X","timestamp":"2026-04-30T11:46:49+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0"} {"source":"partage","action":"submit","status":"success","thesis_id":23,"identifier":"2025-020","author":"Zoé Lambert","share_slug":"20260429-DZESJT6X","timestamp":"2026-04-30T11:46:49+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0"}
{"source":"partage","action":"submit","status":"success","thesis_id":24,"identifier":"2025-021","author":"Emma Renard","share_slug":"20260429-DZESJT6X","timestamp":"2026-04-30T11:49:49+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0"} {"source":"partage","action":"submit","status":"success","thesis_id":24,"identifier":"2025-021","author":"Emma Renard","share_slug":"20260429-DZESJT6X","timestamp":"2026-04-30T11:49:49+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0"}
{"source":"partage","action":"submit","status":"success","thesis_id":25,"identifier":"2025-001","author":"Emma Renard","share_slug":"20260429-DZESJT6X","timestamp":"2026-04-30T12:17:35+00:00","ip":"127.0.0.1","user_agent":"Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0"}

BIN
app/storage/xamxam.db-shm Normal file
View File

Binary file not shown.

0
app/storage/xamxam.db-wal Normal file
View File