Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AspectCalc サンプル</title> | |
| <!-- Bootstrap 5 CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .drop-zone { | |
| border: 2px dashed #dee2e6; | |
| border-radius: 10px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .drop-zone:hover { | |
| border-color: #0d6efd; | |
| background-color: #f8f9fa; | |
| } | |
| .drop-zone.dragover { | |
| border-color: #0d6efd; | |
| background-color: #e7f3ff; | |
| } | |
| .image-preview { | |
| max-width: 100%; | |
| max-height: 300px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .aspect-ratio-card { | |
| transition: transform 0.2s ease; | |
| } | |
| .aspect-ratio-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| .ratio-display { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: #0d6efd; | |
| } | |
| .copy-btn { | |
| opacity: 0; | |
| transition: opacity 0.2s ease; | |
| } | |
| .aspect-ratio-card:hover .copy-btn { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container py-5"> | |
| <div class="row justify-content-center"> | |
| <div class="col-lg-10"> | |
| <!-- ヘッダー --> | |
| <div class="text-center mb-5"> | |
| <h1 class="display-4 fw-bold text-primary"> | |
| <i class="fas fa-calculator me-3"></i>AspectCalc | |
| </h1> | |
| <p class="lead text-muted">画像の解像度からアスペクト比を計算するツール</p> | |
| </div> | |
| <!-- メインカード --> | |
| <div class="card shadow-lg border-0"> | |
| <div class="card-body p-4"> | |
| <!-- 入力セクション --> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h4 class="mb-3"> | |
| <i class="fas fa-upload me-2"></i>画像の入力 | |
| </h4> | |
| <!-- ドラッグ&ドロップエリア --> | |
| <div class="drop-zone mb-3" id="dropZone"> | |
| <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i> | |
| <p class="mb-2">画像をドラッグ&ドロップ</p> | |
| <p class="text-muted small">または</p> | |
| <button class="btn btn-outline-primary" id="fileSelectBtn"> | |
| <i class="fas fa-folder-open me-2"></i>ファイルを選択 | |
| </button> | |
| <input type="file" id="fileInput" accept="image/*" class="d-none"> | |
| </div> | |
| <!-- クリップボード貼り付け --> | |
| <div class="mb-3"> | |
| <button class="btn btn-outline-secondary w-100" id="pasteBtn"> | |
| <i class="fas fa-paste me-2"></i>Ctrl+V でクリップボードから貼り付け | |
| </button> | |
| </div> | |
| <!-- 手動入力 --> | |
| <div class="card bg-light"> | |
| <div class="card-body"> | |
| <h6 class="card-title"> | |
| <i class="fas fa-keyboard me-2"></i>手動入力 | |
| </h6> | |
| <div class="row g-2"> | |
| <div class="col-6"> | |
| <label for="widthInput" class="form-label small">幅 (px)</label> | |
| <input type="number" class="form-control" id="widthInput" placeholder="1920" min="1"> | |
| </div> | |
| <div class="col-6"> | |
| <label for="heightInput" class="form-label small">高さ (px)</label> | |
| <input type="number" class="form-control" id="heightInput" placeholder="1080" min="1"> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary btn-sm mt-2 w-100" id="calculateBtn"> | |
| <i class="fas fa-calculator me-2"></i>計算 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- プレビューエリア --> | |
| <div class="col-md-6"> | |
| <h4 class="mb-3"> | |
| <i class="fas fa-eye me-2"></i>プレビュー | |
| </h4> | |
| <div id="previewArea" class="text-center"> | |
| <div class="text-muted"> | |
| <i class="fas fa-image fa-3x mb-3"></i> | |
| <p>画像を選択してください</p> | |
| </div> | |
| </div> | |
| <!-- 解像度情報 --> | |
| <div id="resolutionInfo" class="mt-3 d-none"> | |
| <div class="alert alert-info"> | |
| <h6 class="alert-heading"> | |
| <i class="fas fa-info-circle me-2"></i>解像度情報 | |
| </h6> | |
| <p class="mb-0"> | |
| 幅: <span id="actualWidth" class="fw-bold">-</span>px<br> | |
| 高さ: <span id="actualHeight" class="fw-bold">-</span>px | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 結果表示エリア --> | |
| <div id="resultsArea" class="mt-4 d-none"> | |
| <h4 class="mb-3"> | |
| <i class="fas fa-chart-line me-2"></i>アスペクト比の結果 | |
| </h4> | |
| <div class="row g-3"> | |
| <!-- 整数比 --> | |
| <div class="col-md-4"> | |
| <div class="card aspect-ratio-card h-100"> | |
| <div class="card-body text-center"> | |
| <h5 class="card-title"> | |
| <i class="fas fa-hashtag me-2"></i>整数比 | |
| </h5> | |
| <div class="ratio-display" id="integerRatio">-</div> | |
| <p class="text-muted small mt-2">最大公約数で割った最も簡単な比</p> | |
| <button class="btn btn-outline-primary btn-sm copy-btn" data-ratio="integer"> | |
| <i class="fas fa-copy me-1"></i>コピー | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 近似比 --> | |
| <div class="col-md-4"> | |
| <div class="card aspect-ratio-card h-100"> | |
| <div class="card-body text-center"> | |
| <h5 class="card-title"> | |
| <i class="fas fa-search me-2"></i>近似比 | |
| </h5> | |
| <div class="ratio-display" id="approximateRatio">-</div> | |
| <p class="text-muted small mt-2">20以下の整数で最も近似の比</p> | |
| <button class="btn btn-outline-primary btn-sm copy-btn" data-ratio="approximate"> | |
| <i class="fas fa-copy me-1"></i>コピー | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 標準比 --> | |
| <div class="col-md-4"> | |
| <div class="card aspect-ratio-card h-100"> | |
| <div class="card-body text-center"> | |
| <h5 class="card-title"> | |
| <i class="fas fa-tv me-2"></i>標準比 | |
| </h5> | |
| <div class="ratio-display" id="standardRatio">-</div> | |
| <p class="text-muted small mt-2">一般的なディスプレイ比</p> | |
| <button class="btn btn-outline-primary btn-sm copy-btn" data-ratio="standard"> | |
| <i class="fas fa-copy me-1"></i>コピー | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast通知 --> | |
| <div class="toast-container position-fixed bottom-0 end-0 p-3"> | |
| <div id="toast" class="toast" role="alert"> | |
| <div class="toast-header"> | |
| <i class="fas fa-check-circle text-success me-2"></i> | |
| <strong class="me-auto">成功</strong> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" title="閉じる"></button> | |
| </div> | |
| <div class="toast-body" id="toastMessage"> | |
| コピーしました！ | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bootstrap 5 JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- AspectCalc.js --> | |
| <script src="AspectCalc.js"></script> | |
| <!-- メインスクリプト --> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> | |