Spaces:

Harshasnade
/

Deepfake-Detection-Model

Sleeping

Deepfake-Detection-Model / frontend /responsive-pages.css

Initialize clean space deployment

ee00155 9 months ago

7 kB

/* ==================================================================================
   RESPONSIVE STYLES FOR NON-LANDING PAGES
   ================================================================================== 
   This file contains responsive CSS for: analysis.html, history.html, video_result.html
   DO NOT link this file in index.html - landing page should keep its original design
   ================================================================================== */

/* ==================== FLUID TYPOGRAPHY VARIABLES ==================== */
:root {
    /* Fluid font sizes for inner pages */
    --font-size-page-title: clamp(1.75rem, 4vw + 0.5rem, 3rem);
    --font-size-section-header: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
    --font-size-card-title: clamp(1rem, 1.5vw + 0.5rem, 1.375rem);
    --font-size-body: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
    --font-size-small: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);

    /* Fluid spacing */
    --container-padding: clamp(16px, 4vw, 40px);
    --card-padding: clamp(16px, 3vw, 32px);
    --gap-sm: clamp(12px, 2vw, 20px);
    --gap-md: clamp(20px, 3vw, 40px);
    --gap-lg: clamp(30px, 5vw, 60px);
}

/* ==================== ANALYSIS PAGE RESPONSIVE ==================== */

/* Analysis grid - stack on tablet and below */
.analysis-grid {
    gap: var(--gap-md);
}

@media (max-width: 1024px) {
    .analysis-grid {
        grid-template-columns: 1fr !important;
        gap: var(--gap-md);
    }
}

/* Upload section responsive */
.upload-section {
    gap: var(--gap-sm);
}

.section-header-small h2 {
    font-size: var(--font-size-section-header);
}

/* Upload area fluid sizing */
.upload-area {
    min-height: clamp(250px, 35vh, 400px);
    padding: var(--card-padding);
}

@media (max-width: 768px) {
    .upload-area {
        min-height: 220px;
        border-radius: 16px;
    }

    .upload-icon {
        font-size: 48px;
    }

    .upload-text {
        font-size: 14px;
    }
}

/* Results section responsive */
.results-section {
    padding: var(--card-padding);
}

@media (max-width: 768px) {
    .results-section {
        border-radius: 16px;
    }
}

/* Statistics grid responsive */
.statistics-grid {
    gap: var(--gap-sm);
}

@media (max-width: 768px) {
    .statistics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .statistics-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 24px;
    }
}

/* Recent analyses grid responsive */
.recent-grid {
    gap: var(--gap-sm);
}

@media (max-width: 768px) {
    .recent-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== HISTORY PAGE RESPONSIVE ==================== */

/* History controls fluid spacing */
.history-controls {
    gap: var(--gap-sm);
    padding: var(--card-padding);
}

@media (max-width: 768px) {
    .history-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container {
        min-width: 100%;
    }

    .filter-controls {
        flex-direction: column;
        width: 100%;
    }

    .filter-select {
        width: 100%;
    }

    .export-controls {
        flex-direction: column;
        width: 100%;
    }

    .btn-export,
    .btn-clear-all {
        width: 100%;
        min-height: 48px;
    }
}

/* History table horizontal scroll on mobile */
.history-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .history-table {
        min-width: 600px;
    }
}

/* Grid view card sizing */
@media (max-width: 768px) {
    .history-grid {
        grid-template-columns: 1fr !important;
        gap: var(--gap-sm);
    }
}

/* Batch actions bar mobile */
@media (max-width: 768px) {
    .batch-actions {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }

    .batch-actions button {
        flex: 1;
        min-width: calc(50% - 10px);
        min-height: 44px;
    }
}

/* ==================== VIDEO RESULT PAGE RESPONSIVE ==================== */

/* Video player container responsive */
.video-preview-container {
    max-width: 100%;
}

@media (max-width: 768px) {
    .video-window-container {
        border-radius: 16px;
    }

    .window-header {
        padding: 10px 12px;
    }

    .play-button {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .play-button {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* Dashboard grid stack on mobile */
.dashboard-grid {
    gap: var(--gap-md);
}

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Stats grid compact on mobile */
@media (max-width: 768px) {
    .video-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gap-sm);
    }
}

@media (max-width: 480px) {
    .video-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Timeline chart container responsive */
.timeline-container,
.chart-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Frame grid responsive */
@media (max-width: 768px) {
    .frame-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gap-sm);
    }
}

@media (max-width: 480px) {
    .frame-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Report section mobile */
@media (max-width: 768px) {
    .report-section {
        padding: var(--card-padding);
    }

    .report-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .btn-download-report {
        width: 100%;
        min-height: 48px;
    }
}

/* ==================== SHARED RESPONSIVE PATTERNS ==================== */

/* Container padding */
.analysis-container,
.history-container,
.video-result-container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Card styling consistency */
.result-card,
.analysis-card,
.history-card,
.video-card {
    padding: var(--card-padding);
}

@media (max-width: 768px) {

    .result-card,
    .analysis-card,
    .history-card,
    .video-card {
        border-radius: 16px;
    }
}

/* Touch targets for interactive elements */
@media (max-width: 768px) {

    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent iOS input zoom */
@media (max-width: 768px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Modal responsive */
@media (max-width: 768px) {
    .modal-content {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        margin: 16px;
        border-radius: 16px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
    }
}

	/* ==================================================================================
	RESPONSIVE STYLES FOR NON-LANDING PAGES
	==================================================================================
	This file contains responsive CSS for: analysis.html, history.html, video_result.html
	DO NOT link this file in index.html - landing page should keep its original design
	================================================================================== */

	/* ==================== FLUID TYPOGRAPHY VARIABLES ==================== */
	:root {
	/* Fluid font sizes for inner pages */
	--font-size-page-title: clamp(1.75rem, 4vw + 0.5rem, 3rem);
	--font-size-section-header: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
	--font-size-card-title: clamp(1rem, 1.5vw + 0.5rem, 1.375rem);
	--font-size-body: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
	--font-size-small: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);

	/* Fluid spacing */
	--container-padding: clamp(16px, 4vw, 40px);
	--card-padding: clamp(16px, 3vw, 32px);
	--gap-sm: clamp(12px, 2vw, 20px);
	--gap-md: clamp(20px, 3vw, 40px);
	--gap-lg: clamp(30px, 5vw, 60px);
	}

	/* ==================== ANALYSIS PAGE RESPONSIVE ==================== */

	/* Analysis grid - stack on tablet and below */
	.analysis-grid {
	gap: var(--gap-md);
	}

	@media (max-width: 1024px) {
	.analysis-grid {
	grid-template-columns: 1fr !important;
	gap: var(--gap-md);
	}
	}

	/* Upload section responsive */
	.upload-section {
	gap: var(--gap-sm);
	}

	.section-header-small h2 {
	font-size: var(--font-size-section-header);
	}

	/* Upload area fluid sizing */
	.upload-area {
	min-height: clamp(250px, 35vh, 400px);
	padding: var(--card-padding);
	}

	@media (max-width: 768px) {
	.upload-area {
	min-height: 220px;
	border-radius: 16px;
	}

	.upload-icon {
	font-size: 48px;
	}

	.upload-text {
	font-size: 14px;
	}
	}

	/* Results section responsive */
	.results-section {
	padding: var(--card-padding);
	}

	@media (max-width: 768px) {
	.results-section {
	border-radius: 16px;
	}
	}

	/* Statistics grid responsive */
	.statistics-grid {
	gap: var(--gap-sm);
	}

	@media (max-width: 768px) {
	.statistics-grid {
	grid-template-columns: repeat(2, 1fr) !important;
	}
	}

	@media (max-width: 480px) {
	.statistics-grid {
	grid-template-columns: 1fr !important;
	}

	.stat-card {
	padding: 16px;
	}

	.stat-value {
	font-size: 24px;
	}
	}

	/* Recent analyses grid responsive */
	.recent-grid {
	gap: var(--gap-sm);
	}

	@media (max-width: 768px) {
	.recent-grid {
	grid-template-columns: 1fr !important;
	}
	}

	/* ==================== HISTORY PAGE RESPONSIVE ==================== */

	/* History controls fluid spacing */
	.history-controls {
	gap: var(--gap-sm);
	padding: var(--card-padding);
	}

	@media (max-width: 768px) {
	.history-controls {
	flex-direction: column;
	align-items: stretch;
	}

	.search-container {
	min-width: 100%;
	}

	.filter-controls {
	flex-direction: column;
	width: 100%;
	}

	.filter-select {
	width: 100%;
	}

	.export-controls {
	flex-direction: column;
	width: 100%;
	}

	.btn-export,
	.btn-clear-all {
	width: 100%;
	min-height: 48px;
	}
	}

	/* History table horizontal scroll on mobile */
	.history-table-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}

	@media (max-width: 768px) {
	.history-table {
	min-width: 600px;
	}
	}

	/* Grid view card sizing */
	@media (max-width: 768px) {
	.history-grid {
	grid-template-columns: 1fr !important;
	gap: var(--gap-sm);
	}
	}

	/* Batch actions bar mobile */
	@media (max-width: 768px) {
	.batch-actions {
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px;
	}

	.batch-actions button {
	flex: 1;
	min-width: calc(50% - 10px);
	min-height: 44px;
	}
	}

	/* ==================== VIDEO RESULT PAGE RESPONSIVE ==================== */

	/* Video player container responsive */
	.video-preview-container {
	max-width: 100%;
	}

	@media (max-width: 768px) {
	.video-window-container {
	border-radius: 16px;
	}

	.window-header {
	padding: 10px 12px;
	}

	.play-button {
	width: 60px;
	height: 60px;
	font-size: 28px;
	}
	}

	@media (max-width: 480px) {
	.play-button {
	width: 50px;
	height: 50px;
	font-size: 24px;
	}
	}

	/* Dashboard grid stack on mobile */
	.dashboard-grid {
	gap: var(--gap-md);
	}

	@media (max-width: 1024px) {
	.dashboard-grid {
	grid-template-columns: 1fr !important;
	}
	}

	/* Stats grid compact on mobile */
	@media (max-width: 768px) {
	.video-stats-grid {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--gap-sm);
	}
	}

	@media (max-width: 480px) {
	.video-stats-grid {
	grid-template-columns: 1fr !important;
	}
	}

	/* Timeline chart container responsive */
	.timeline-container,
	.chart-container {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	}

	/* Frame grid responsive */
	@media (max-width: 768px) {
	.frame-grid {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--gap-sm);
	}
	}

	@media (max-width: 480px) {
	.frame-grid {
	grid-template-columns: 1fr !important;
	}
	}

	/* Report section mobile */
	@media (max-width: 768px) {
	.report-section {
	padding: var(--card-padding);
	}

	.report-header {
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	}

	.btn-download-report {
	width: 100%;
	min-height: 48px;
	}
	}

	/* ==================== SHARED RESPONSIVE PATTERNS ==================== */

	/* Container padding */
	.analysis-container,
	.history-container,
	.video-result-container {
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	}

	/* Card styling consistency */
	.result-card,
	.analysis-card,
	.history-card,
	.video-card {
	padding: var(--card-padding);
	}

	@media (max-width: 768px) {

	.result-card,
	.analysis-card,
	.history-card,
	.video-card {
	border-radius: 16px;
	}
	}

	/* Touch targets for interactive elements */
	@media (max-width: 768px) {

	button,
	.btn,
	.btn-primary,
	.btn-secondary,
	[role="button"] {
	min-height: 44px;
	min-width: 44px;
	}
	}

	/* Prevent iOS input zoom */
	@media (max-width: 768px) {

	input,
	select,
	textarea {
	font-size: 16px !important;
	}
	}

	/* Modal responsive */
	@media (max-width: 768px) {
	.modal-content {
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	margin: 16px;
	border-radius: 16px;
	}

	.modal-close {
	width: 44px;
	height: 44px;
	}
	}